/* ============================================================
   BoxHaus Modular - Prefab Container House (redesign v2)
   DNA: navy enterprise B2B + designed banner artwork
        + blueprint background textures + HarmonyOS Sans
   Radius: cards 14px, buttons & inputs 8px
   ============================================================ */

:root{
    --color-paper:#F5F8FC;
    --color-white:#FFFFFF;
    --color-navy:#13294B;
    --color-navy-deep:#0C1E38;
    --color-ink:#16233A;
    --color-body:#51617A;
    --color-mute:#8494AB;
    --color-steel:#33598F;
    --color-accent:#F08A3C;
    --color-accent-deep:#D9731F;
    --color-line:#DFE7F2;
    --font-main:'HarmonyOS Sans',-apple-system,'Segoe UI',sans-serif;
    --r-card:14px;
    --r-ui:8px;
    --tb-h:2.4vw;
    --nav-h:4.5vw;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-main);background:var(--color-white);color:var(--color-body);font-size:1.111vw;line-height:1.7;font-weight:400;}
img{display:block;max-width:100%;}
a{text-decoration:none;color:inherit;}
ul,ol{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
input,textarea{font-family:inherit;}

.index_container{width:94.44vw;margin:0 auto;}

h1,h2,h3,h4{color:var(--color-ink);line-height:1.22;}
h1{font-size:3.5vw;font-weight:900;letter-spacing:-0.015em;}
h2{font-size:2.6vw;font-weight:700;letter-spacing:-0.01em;}
h3{font-size:1.15vw;font-weight:700;}

section{padding:5.4vw 0;}

/* ---------- buttons ---------- */
.index_btn{display:inline-flex;align-items:center;justify-content:center;gap:0.4vw;font-weight:700;font-size:0.92vw;padding:0.82vw 1.8vw;border-radius:var(--r-ui);white-space:nowrap;transition:background .22s ease,transform .22s ease,box-shadow .22s ease;}
.index_btn--accent{background:var(--color-accent);color:var(--color-navy-deep);}
.index_btn--accent:hover{background:var(--color-accent-deep);color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(240,138,60,0.35);}
.index_btn--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.55);}
.index_btn--ghost:hover{background:rgba(255,255,255,0.12);}
.index_btn--full{width:100%;}

/* ---------- topbar ---------- */
.topbar{background:var(--color-navy-deep);color:#AAB9CF;height:var(--tb-h);display:flex;align-items:center;font-size:0.8vw;}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;}
.topbar-links{display:flex;gap:1.8vw;}
.topbar a{display:inline-flex;align-items:center;gap:0.4vw;color:#AAB9CF;transition:color .2s ease;}
.topbar a:hover{color:#fff;}
.topbar-wa{color:var(--color-accent) !important;font-weight:500;}
.topbar i{font-size:0.95vw;}

/* ---------- navbar ---------- */
.navbar{position:sticky;top:0;z-index:60;background:var(--color-white);box-shadow:0 1px 0 var(--color-line);transition:box-shadow .25s ease;}
.navbar.is-scrolled{box-shadow:0 10px 30px rgba(19,41,75,0.1);}
.navbar-inner{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:2vw;}
.navbar-logo{display:flex;align-items:center;font-size:1.35vw;font-weight:900;letter-spacing:0.04em;color:var(--color-navy);}
.navbar-logo-mark{width:0.85vw;height:0.85vw;background:var(--color-accent);border-radius:2px;margin-right:0.55vw;}
.navbar-logo-accent{color:var(--color-accent);}
.navbar-nav{display:flex;gap:2vw;}
.navbar-link{font-size:0.92vw;font-weight:500;color:var(--color-body);transition:color .2s ease;}
.navbar-link:hover{color:var(--color-navy);}
.navbar-end{display:flex;align-items:center;gap:1vw;}
.navbar-toggle{display:none;flex-direction:column;gap:5px;padding:6px;}
.navbar-toggle span{width:22px;height:2px;background:var(--color-navy);transition:transform .25s ease,opacity .25s ease;}
.navbar-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.navbar-toggle.is-open span:nth-child(2){opacity:0;}
.navbar-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- hero: designed banner artwork ---------- */
.index_hero{position:relative;height:calc(100vh - var(--tb-h) - var(--nav-h));min-height:36vw;display:flex;align-items:center;padding:0;background:var(--color-navy-deep) url('../images/index_banner_main.webp') center right/cover no-repeat;}
.index_hero-inner{position:relative;z-index:2;}
.index_hero-copy{max-width:38vw;}
.index_hero-copy h1{color:#fff;}
.index_hero-copy p{color:rgba(255,255,255,0.85);font-size:1.08vw;margin:1.4vw 0 2.2vw;max-width:32vw;}
.index_hero-actions{display:flex;gap:1vw;}

/* ---------- section heads ---------- */
.index_section-head{max-width:46vw;margin:0 auto 3vw;text-align:center;}
.index_section-head h2{position:relative;display:inline-block;}
.index_section-head p{margin-top:1vw;color:var(--color-mute);}
.index_section-head--left{margin:0 0 2vw;text-align:left;}
.index_section-head--light h2{color:#fff;}
.index_section-head--light p{color:#9FB2CC;}

/* ---------- products: blueprint texture + feature + mosaic ---------- */
.index_products{background:var(--color-paper) url('../images/index_bg_blueprint_light.webp') center/cover no-repeat;}
.index_product-feature{display:grid;grid-template-columns:1fr 1.25fr;background:var(--color-white);border:1px solid var(--color-line);border-radius:var(--r-card);overflow:hidden;margin-bottom:1.6vw;box-shadow:0 18px 44px rgba(19,41,75,0.07);}
.index_product-feature-body{padding:3vw 3.2vw;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;}
.index_product-feature-body h3{font-size:1.7vw;}
.index_product-feature-body p{margin:1vw 0 1.3vw;}
.index_product-feature-media{overflow:hidden;}
.index_product-feature-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.index_product-feature:hover .index_product-feature-media img{transform:scale(1.04);}
.index_product-tags{display:flex;flex-wrap:wrap;gap:0.5vw;margin-bottom:1.3vw;}
.index_product-tags span{font-size:0.78vw;font-weight:500;color:var(--color-steel);background:#E9F0FA;border-radius:6px;padding:0.3vw 0.75vw;}
.index_products-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.4vw;}
.index_product-card{grid-column:span 2;background:var(--color-white);border:1px solid var(--color-line);border-radius:var(--r-card);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.index_product-card--wide{grid-column:span 3;}
.index_product-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(19,41,75,0.1);border-color:#C9D8EC;}
.index_product-img{overflow:hidden;aspect-ratio:16/9;}
.index_product-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.index_product-card:hover .index_product-img img{transform:scale(1.05);}
.index_product-body{padding:1.5vw 1.7vw 1.7vw;}
.index_product-body p{font-size:0.9vw;margin:0.55vw 0 1vw;}
.index_product-link{display:inline-flex;align-items:center;gap:0.3vw;font-size:0.88vw;font-weight:700;color:var(--color-steel);transition:color .2s ease,gap .2s ease;}
.index_product-link:hover{color:var(--color-accent-deep);gap:0.55vw;}
.index_product-link i{font-size:1vw;}

/* ---------- applications: navy band with grid texture ---------- */
.index_apps{background:linear-gradient(180deg,#0F2444 0%,#132C52 100%);position:relative;}
.index_apps::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.045) 1px,transparent 1px);background-size:3.4vw 3.4vw;pointer-events:none;}
.index_apps .index_container{position:relative;z-index:1;}
.index_apps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4vw;}
.index_app-card{border-radius:var(--r-card);overflow:hidden;min-height:24vw;position:relative;}
.index_app-card--img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.index_app-card--img:hover img{transform:scale(1.05);}
.index_app-overlay{position:absolute;inset:auto 0 0 0;padding:5vw 1.5vw 1.5vw;background:linear-gradient(180deg,rgba(12,30,56,0) 0%,rgba(12,30,56,0.9) 82%);}
.index_app-overlay h3{color:#fff;}
.index_app-overlay p{color:#C4D2E6;font-size:0.85vw;margin-top:0.5vw;line-height:1.6;}
.index_app-card--line{border:1px solid rgba(255,255,255,0.16);padding:1.9vw 1.7vw;display:flex;flex-direction:column;background:rgba(255,255,255,0.03);transition:border-color .25s ease,background .25s ease;}
.index_app-card--line:hover{border-color:rgba(240,138,60,0.55);background:rgba(255,255,255,0.05);}
.index_app-card--line i{font-size:2vw;color:var(--color-accent);}
.index_app-card--line h3{color:#fff;margin:1.2vw 0 0.7vw;}
.index_app-card--line p{color:#9FB2CC;font-size:0.88vw;}

/* ---------- structure: copy + exploded diagram ---------- */
.index_structure{background:var(--color-white);}
.index_structure-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:4.5vw;align-items:center;}
.index_specs{display:flex;flex-direction:column;gap:1.3vw;margin-bottom:2vw;}
.index_specs li{display:flex;gap:1vw;align-items:flex-start;}
.index_spec-icon{width:2.9vw;height:2.9vw;flex-shrink:0;border-radius:var(--r-ui);background:#FCEEDF;color:var(--color-accent-deep);display:flex;align-items:center;justify-content:center;font-size:1.35vw;}
.index_specs h3{font-size:1.05vw;}
.index_specs p{font-size:0.9vw;margin-top:0.25vw;}
.index_structure-visual{position:relative;}
.index_structure-visual img{width:100%;border-radius:var(--r-card);border:1px solid var(--color-line);box-shadow:0 24px 60px rgba(19,41,75,0.1);}
.index_structure-visual figcaption{margin-top:0.9vw;font-size:0.84vw;color:var(--color-mute);padding-left:0.9vw;border-left:3px solid var(--color-accent);}

/* ---------- process: horizontal numbered timeline ---------- */
.index_process{background:var(--color-paper);}
.index_steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1.6vw;counter-reset:step;}
.index_steps li{position:relative;padding-top:1.5vw;}
.index_steps li::before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:var(--color-line);}
.index_steps li::after{content:'';position:absolute;top:-2px;left:0;width:2.2vw;height:6px;background:var(--color-accent);border-radius:3px;}
.index_step-no{font-size:1.9vw;font-weight:900;color:var(--color-steel);line-height:1;display:block;}
.index_steps h3{font-size:1.02vw;margin:0.7vw 0 0.45vw;}
.index_steps p{font-size:0.86vw;line-height:1.65;}

/* ---------- about: photo collage + copy ---------- */
.index_about{background:var(--color-white);}
.index_about-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:5vw;align-items:center;}
.index_about-visual{position:relative;padding:0 3.4vw 3.4vw 0;}
.index_about-img-main{width:100%;border-radius:var(--r-card);}
.index_about-img-sub{position:absolute;right:0;bottom:0;width:46%;border-radius:var(--r-card);border:6px solid #fff;box-shadow:0 18px 44px rgba(19,41,75,0.18);}
.index_about-copy p{margin-bottom:1vw;}
.index_about-chips{display:grid;grid-template-columns:1fr 1fr;gap:0.9vw;margin-top:1.6vw;}
.index_about-chips li{display:flex;align-items:center;gap:0.6vw;font-weight:500;color:var(--color-ink);font-size:0.92vw;background:var(--color-paper);border:1px solid var(--color-line);border-radius:var(--r-ui);padding:0.8vw 1vw;}
.index_about-chips i{color:var(--color-accent-deep);font-size:1.15vw;}

/* ---------- faq ---------- */
.index_faq{background:var(--color-paper);}
.index_faq-list{display:flex;flex-direction:column;gap:0.9vw;}
.index_faq-item{background:var(--color-white);border:1px solid var(--color-line);border-radius:var(--r-card);overflow:hidden;transition:border-color .25s ease;}
.index_faq-item.is-open{border-color:#C9D8EC;}
.index_faq-item h3{font-size:1vw;}
.index_faq-item button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1vw;text-align:left;padding:1.2vw 1.5vw;font:inherit;font-weight:700;color:var(--color-ink);}
.index_faq-item button i{color:var(--color-accent-deep);font-size:1.1vw;flex-shrink:0;transition:transform .3s ease;}
.index_faq-item.is-open button i{transform:rotate(45deg);}
.index_faq-answer{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.index_faq-answer p{padding:0 1.5vw 1.3vw;font-size:0.92vw;}

/* ---------- contact: designed dark band ---------- */
.index_contact{background:var(--color-navy-deep) url('../images/index_bg_blueprint_dark.webp') center/cover no-repeat;}
.index_contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:4.5vw;align-items:center;}
.index_contact-lead h2{color:#fff;}
.index_contact-lead > p{color:#AAB9CF;margin-top:1.1vw;}
.index_contact-info{margin-top:2vw;display:flex;flex-direction:column;gap:1vw;}
.index_contact-info li{display:flex;align-items:center;gap:0.8vw;}
.index_contact-info i{width:2.5vw;height:2.5vw;border-radius:var(--r-ui);background:rgba(240,138,60,0.16);color:var(--color-accent);display:flex;align-items:center;justify-content:center;font-size:1.15vw;flex-shrink:0;}
.index_contact-info a{color:#fff;font-weight:500;font-size:0.98vw;transition:color .2s ease;}
.index_contact-info a:hover{color:var(--color-accent);}
.index_contact-form{background:var(--color-white);border-radius:var(--r-card);padding:2.4vw 2.6vw;display:flex;flex-direction:column;gap:1.1vw;box-shadow:0 30px 80px rgba(0,0,0,0.3);}
.index_form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1vw;}
.index_field{display:flex;flex-direction:column;gap:0.4vw;}
.index_field label{font-size:0.82vw;font-weight:500;color:var(--color-ink);}
.index_field input,.index_field textarea{border:1px solid var(--color-line);border-radius:var(--r-ui);padding:0.75vw 0.9vw;font-size:0.92vw;color:var(--color-ink);background:#fff;outline:none;transition:border-color .2s ease;resize:vertical;}
.index_field input:focus,.index_field textarea:focus{border-color:var(--color-steel);}
.index_field textarea::placeholder{color:var(--color-mute);}
.index_form-note{font-size:0.85vw;color:var(--color-accent-deep);min-height:1.2em;}

/* ---------- footer ---------- */
.index_footer{background:#0A1830;color:#8494AB;padding:4.4vw 0 0;}
.index_footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:3vw;padding-bottom:3vw;}
.index_footer-logo{display:flex;align-items:center;font-size:1.3vw;font-weight:900;letter-spacing:0.04em;color:#fff;}
.index_footer-logo span:last-child{color:var(--color-accent);}
.index_footer-brand p{font-size:0.88vw;margin-top:1.2vw;max-width:18vw;}
.index_footer-col{display:flex;flex-direction:column;gap:0.7vw;}
.index_footer-col h4{color:#fff;font-size:0.98vw;font-weight:700;margin-bottom:0.5vw;}
.index_footer-col a{font-size:0.88vw;color:#8494AB;display:inline-flex;align-items:center;gap:0.4vw;transition:color .2s ease;}
.index_footer-col a:hover{color:#fff;}
.index_footer-bottom{border-top:1px solid rgba(255,255,255,0.1);padding:1.4vw 0;display:flex;justify-content:space-between;font-size:0.82vw;}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;will-change:opacity,transform;}
.reveal.visible{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    .reveal{opacity:1;transform:none;transition:none;}
}

/* ============================================================
   responsive
   ============================================================ */
@media (max-width:1200px){
    :root{--tb-h:38px;--nav-h:64px;}
    body{font-size:15px;}
    .index_container{width:88vw;}
    h1{font-size:42px;}
    h2{font-size:29px;}
    h3{font-size:18px;}
    section{padding:70px 0;}
    .index_btn{font-size:14px;padding:12px 26px;gap:6px;}
    .topbar{font-size:12px;}
    .topbar i{font-size:14px;}
    .topbar-links{gap:18px;}
    .navbar-logo{font-size:20px;}
    .navbar-logo-mark{width:12px;height:12px;margin-right:8px;}
    .navbar-nav{position:fixed;inset:calc(var(--tb-h) + var(--nav-h)) 0 auto 0;background:#fff;flex-direction:column;gap:0;padding:12px 6vw 24px;box-shadow:0 24px 40px rgba(19,41,75,0.14);transform:translateY(-130%);transition:transform .3s ease;z-index:55;}
    .navbar-nav.is-open{transform:translateY(0);}
    .navbar-link{padding:14px 0;border-bottom:1px solid var(--color-line);font-size:16px;font-weight:700;color:var(--color-ink);}
    .navbar-toggle{display:flex;}
    .index_hero{height:calc(100vh - var(--tb-h) - var(--nav-h));min-height:520px;background-position:64% center;}
    .index_hero::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,30,56,0.42) 0%,rgba(12,30,56,0.12) 55%,rgba(12,30,56,0.3) 100%);}
    .index_hero-copy{max-width:560px;}
    .index_hero-copy p{font-size:16px;margin:18px 0 26px;max-width:480px;}
    .index_hero-actions{gap:12px;}
    .index_section-head{max-width:640px;margin-bottom:36px;}
    .index_section-head p{margin-top:12px;}
    .index_section-head--left{margin:0 0 22px;}
    .index_product-feature{grid-template-columns:1fr;margin-bottom:18px;}
    .index_product-feature-media{order:-1;aspect-ratio:16/9;}
    .index_product-feature-body{padding:24px 22px;}
    .index_product-feature-body h3{font-size:22px;}
    .index_product-feature-body p{margin:10px 0 14px;}
    .index_product-tags{gap:8px;margin-bottom:16px;}
    .index_product-tags span{font-size:12px;padding:5px 10px;}
    .index_products-grid{grid-template-columns:1fr 1fr;gap:16px;}
    .index_product-card,.index_product-card--wide{grid-column:span 1;}
    .index_product-body{padding:18px 18px 20px;}
    .index_product-body p{font-size:14px;margin:6px 0 12px;}
    .index_product-link{font-size:14px;gap:5px;}
    .index_product-link i{font-size:15px;}
    .index_apps::before{background-size:64px 64px;}
    .index_apps-grid{grid-template-columns:1fr 1fr;gap:16px;}
    .index_app-card{min-height:300px;}
    .index_app-overlay{padding:60px 18px 18px;}
    .index_app-overlay p{font-size:13px;margin-top:6px;}
    .index_app-card--line{padding:24px 22px;}
    .index_app-card--line i{font-size:28px;}
    .index_app-card--line h3{margin:14px 0 8px;}
    .index_app-card--line p{font-size:14px;}
    .index_structure-grid{grid-template-columns:1fr;gap:36px;}
    .index_specs{gap:16px;margin-bottom:24px;}
    .index_spec-icon{width:44px;height:44px;font-size:20px;border-radius:var(--r-ui);}
    .index_specs h3{font-size:16px;}
    .index_specs p{font-size:14px;margin-top:3px;}
    .index_structure-visual figcaption{font-size:13px;margin-top:12px;padding-left:12px;}
    .index_steps{grid-template-columns:1fr 1fr;gap:22px;}
    .index_steps li{padding-top:18px;}
    .index_steps li::after{width:34px;height:5px;}
    .index_step-no{font-size:26px;}
    .index_steps h3{font-size:16px;margin:8px 0 5px;}
    .index_steps p{font-size:14px;}
    .index_about-grid{grid-template-columns:1fr;gap:34px;}
    .index_about-visual{padding:0 40px 40px 0;}
    .index_about-img-sub{border-width:5px;}
    .index_about-copy p{margin-bottom:12px;}
    .index_about-chips{gap:10px;margin-top:18px;}
    .index_about-chips li{font-size:14px;padding:12px 14px;gap:8px;}
    .index_about-chips i{font-size:17px;}
    .index_faq-list{max-width:720px;gap:12px;}
    .index_faq-item h3{font-size:15px;}
    .index_faq-item button{padding:16px 18px;gap:12px;}
    .index_faq-item button i{font-size:16px;}
    .index_faq-answer p{padding:0 18px 16px;font-size:14px;}
    .index_contact-grid{grid-template-columns:1fr;gap:34px;}
    .index_contact-info{margin-top:22px;gap:14px;}
    .index_contact-info i{width:38px;height:38px;font-size:17px;}
    .index_contact-info a{font-size:15px;}
    .index_contact-form{padding:26px 22px;gap:14px;}
    .index_form-row{grid-template-columns:1fr;gap:14px;}
    .index_field label{font-size:13px;}
    .index_field input,.index_field textarea{padding:12px 13px;font-size:15px;}
    .index_form-note{font-size:13px;}
    .index_footer{padding:56px 0 0;}
    .index_footer-top{grid-template-columns:1fr 1fr;gap:28px;padding-bottom:36px;}
    .index_footer-logo{font-size:19px;}
    .index_footer-brand p{font-size:14px;max-width:340px;margin-top:14px;}
    .index_footer-col{gap:9px;}
    .index_footer-col h4{font-size:15px;}
    .index_footer-col a{font-size:14px;}
    .index_footer-bottom{padding:18px 0;font-size:12px;flex-direction:column;gap:6px;}
}

@media (max-width:768px){
    .topbar{display:none;}
    :root{--tb-h:0px;}
}

@media (max-width:480px){
    :root{--nav-h:56px;}
    h1{font-size:31px;}
    h2{font-size:24px;}
    section{padding:54px 0;}
    .index_hero{min-height:480px;}
    .index_hero-actions{flex-direction:column;align-items:flex-start;}
    .index_products-grid{grid-template-columns:1fr;}
    .index_apps-grid{grid-template-columns:1fr;}
    .index_app-card{min-height:260px;}
    .index_steps{grid-template-columns:1fr;}
    .index_about-chips{grid-template-columns:1fr;}
    .index_footer-top{grid-template-columns:1fr;}
}