/* ============================================================
   VERDATEX - Upholstery Fabric Manufacturer
   DNA (matismart 范式纺织演绎): 白底 + 近白云雾洗底 + 翡翠绿
   缝线母题装饰 / 胶囊按钮内嵌圆箭头 / 白色 mega footer
   字体: HarmonyOS Sans / rem 流式缩放 (1rem = 10px @1920)
   ============================================================ */

:root{
    --c-primary:#3DA875;
    --c-primary-dark:#2F8A5F;
    --c-primary-soft:#D5EDE0;
    --c-ink:#0B1B33;
    --c-text:#66707A;
    --c-line:#DFE8E3;
    --c-bg:#FFFFFF;
    --c-wash:#F6F9F7;
    --c-band:#0E2B21;
    --font:'HarmonyOS Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
    --radius:1.2rem;
    --radius-lg:1.6rem;
    --nav-h:8rem;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:clamp(9px,0.6945vw,11px);}
body{font-family:var(--font);font-size:1.6rem;line-height:1.6;color:var(--c-ink);background:var(--c-bg);-webkit-font-smoothing:antialiased;}
img{display:block;max-width:100%;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;border:none;background:none;cursor:pointer;}
section{scroll-margin-top:calc(var(--nav-h) + 2rem);}

.index_container{width:min(144rem,calc(100% - 8rem));margin:0 auto;}

/* ---------- 缝线母题(stitch)工具 ---------- */
.index_stitch-h{background-image:repeating-linear-gradient(90deg,var(--c-primary) 0 .7rem,transparent .7rem 1.5rem);background-size:100% 1px;background-repeat:no-repeat;height:1px;}

/* ---------- 胶囊按钮 + 内嵌圆形箭头 (matismart 签名) ---------- */
.index_btn{display:inline-grid;grid-template-columns:1fr auto;align-items:center;gap:1.4rem;border-radius:10rem;padding:.7rem .7rem .7rem 2.8rem;font-size:1.6rem;font-weight:500;line-height:1;transition:all .3s;white-space:nowrap;}
.index_btn-ico{width:4rem;height:4rem;border-radius:50%;display:grid;place-items:center;font-size:1.8rem;transition:transform .3s;}
.index_btn:hover .index_btn-ico{transform:translateX(.4rem);}
.index_btn--solid{background:var(--c-primary);color:#fff;}
.index_btn--solid .index_btn-ico{background:#fff;color:var(--c-primary);}
.index_btn--solid:hover{background:var(--c-primary-dark);}
.index_btn--line{background:transparent;color:var(--c-ink);border:1px solid rgba(11,27,51,.28);}
.index_btn--line .index_btn-ico{background:var(--c-primary);color:#fff;}
.index_btn--line:hover{border-color:var(--c-primary);}
.index_btn--white{background:#fff;color:var(--c-ink);}
.index_btn--white .index_btn-ico{background:var(--c-primary);color:#fff;}
.index_btn--white:hover{background:var(--c-primary-soft);}

/* ---------- Navbar ---------- */
.index_navbar{position:fixed;top:0;left:0;right:0;z-index:90;background:#fff;transition:box-shadow .3s;}
.index_navbar.is-scrolled{box-shadow:0 .6rem 2.4rem rgba(11,27,51,.08);}
.index_navbar-inner{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:3rem;}
.index_logo{display:flex;align-items:center;gap:1.1rem;}
.index_logo-dot{width:1.6rem;height:1.6rem;border-radius:50%;background:var(--c-primary);box-shadow:.7rem .5rem 0 -0.35rem var(--c-primary-soft);}
.index_logo-text{font-size:2.2rem;font-weight:900;letter-spacing:.14em;color:var(--c-ink);display:flex;flex-direction:column;line-height:1;}
.index_logo-text em{font-style:normal;font-weight:400;font-size:1rem;letter-spacing:.3em;color:var(--c-text);margin-top:.5rem;text-transform:uppercase;}
.index_nav{display:flex;gap:3.6rem;}
.index_nav a{font-size:1.55rem;font-weight:500;color:var(--c-ink);position:relative;padding:.6rem 0;}
.index_nav a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--c-primary);transition:width .3s;}
.index_nav a:hover::after{width:100%;}
.index_navbar-actions{display:flex;align-items:center;gap:1.8rem;}
.index_iconbtn{width:4.2rem;height:4.2rem;border-radius:50%;display:grid;place-items:center;font-size:1.9rem;color:var(--c-ink);border:1px solid var(--c-line);transition:all .3s;}
.index_iconbtn:hover{border-color:var(--c-primary);color:var(--c-primary);}
.index_burger{display:none;flex-direction:column;gap:.55rem;padding:.8rem;}
.index_burger span{width:2.4rem;height:2px;background:var(--c-ink);transition:all .3s;}

/* ---------- Drawer ---------- */
.index_drawer{position:fixed;inset:0;z-index:80;background:#fff;padding:12rem 8% 4rem;transform:translateX(100%);transition:transform .4s ease;visibility:hidden;}
.index_drawer.is-open{transform:translateX(0);visibility:visible;}
.index_drawer-nav{display:flex;flex-direction:column;gap:2.6rem;}
.index_drawer-nav a{font-size:2.2rem;font-weight:700;color:var(--c-ink);}
.index_drawer-nav a.index_btn{margin-top:1.5rem;color:#fff;font-size:1.7rem;justify-content:center;max-width:max-content;}

/* ---------- Search ---------- */
.index_search{position:fixed;inset:0;z-index:95;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .3s;}
.index_search.is-open{opacity:1;visibility:visible;}
.index_search-close{position:absolute;top:3rem;right:4%;width:4.6rem;height:4.6rem;border-radius:50%;border:1px solid var(--c-line);display:grid;place-items:center;font-size:2rem;color:var(--c-ink);}
.index_search-box{width:min(64rem,88%);display:flex;align-items:center;gap:1.6rem;border-bottom:2px solid var(--c-ink);padding-bottom:1.4rem;}
.index_search-box i{font-size:2.4rem;color:var(--c-primary);}
.index_search-box input{flex:1;border:none;outline:none;font-family:inherit;font-size:2.2rem;color:var(--c-ink);background:transparent;}
.index_search-box input::placeholder{color:#A6AFB8;}

/* ---------- Hero ---------- */
.index_hero{height:calc(100vh - var(--nav-h));min-height:56rem;margin-top:var(--nav-h);background:url('../images/index_banner_main.webp') center right/cover no-repeat;display:flex;align-items:center;position:relative;}
.index_hero-content{max-width:56rem;position:relative;z-index:2;}
.index_hero h1{font-size:4.6rem;line-height:1.18;font-weight:900;letter-spacing:-.01em;}
.index_hero p{margin-top:2.4rem;font-size:1.7rem;color:var(--c-text);max-width:50rem;}
.index_hero-actions{margin-top:3.6rem;display:flex;gap:1.8rem;flex-wrap:wrap;}

/* ---------- Section & Head (缝线引导线标题) ---------- */
.index_section{padding:9.6rem 0;}
.index_head{position:relative;margin-bottom:5.4rem;max-width:72rem;}
.index_head::before{content:'';position:absolute;top:1.5rem;right:calc(100% + 2.4rem);width:50vw;height:1px;background-image:repeating-linear-gradient(90deg,transparent 0 .8rem,var(--c-primary) .8rem 1.6rem);opacity:.55;}
.index_head h2{font-size:3.8rem;line-height:1.25;font-weight:700;}
.index_head p{margin-top:1.2rem;font-size:1.5rem;color:var(--c-text);}
.index_accent{color:var(--c-primary);}

/* ---------- 装饰图 (白底线稿 multiply 融合) ---------- */
.index_deco{position:absolute;pointer-events:none;mix-blend-mode:multiply;user-select:none;z-index:0;}
.index_deco--arc{top:7.2rem;right:0;width:52rem;opacity:.9;}
.index_deco--yarn{top:5rem;right:4%;width:23rem;opacity:.85;transform:rotate(-8deg);}
.index_deco-flourish{display:block;margin:2.2rem auto 0;width:30rem;mix-blend-mode:multiply;pointer-events:none;}
.index_section>.index_container{position:relative;z-index:1;}

/* ---------- Fabrics (tab explorer) ---------- */
.index_fabrics{background:#fff;position:relative;}
.index_fabrics-layout{display:grid;grid-template-columns:31rem 1fr;gap:4.8rem;align-items:start;}
.index_fabrics-tabs{display:flex;flex-direction:column;gap:1.4rem;position:sticky;top:calc(var(--nav-h) + 3rem);}
.index_ftab{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.4rem;text-align:left;padding:1.9rem 2rem;border:1px solid var(--c-line);border-radius:var(--radius);background:#fff;font-size:1.65rem;font-weight:700;color:var(--c-ink);transition:all .3s;}
.index_ftab>i:first-child{font-size:2.2rem;color:var(--c-text);transition:color .3s;}
.index_ftab-arrow{font-size:1.7rem;color:transparent;transition:all .3s;}
.index_ftab:hover{border-color:var(--c-primary);}
.index_ftab.is-active{border-color:var(--c-primary);box-shadow:0 1rem 2.6rem rgba(61,168,117,.16);}
.index_ftab.is-active>i:first-child,.index_ftab.is-active .index_ftab-arrow{color:var(--c-primary);}
.index_fabrics-note{margin-top:1.8rem;padding-top:2rem;font-size:1.35rem;line-height:1.7;color:var(--c-text);background-image:repeating-linear-gradient(90deg,var(--c-line) 0 .8rem,transparent .8rem 1.6rem);background-size:100% 1px;background-repeat:no-repeat;}
.index_fabrics-panels{position:relative;}
.index_fpanel{display:none;grid-template-columns:repeat(3,1fr);gap:2.4rem;}
.index_fpanel.is-active{display:grid;animation:index_fade .5s ease;}
@keyframes index_fade{from{opacity:0;transform:translateY(1.6rem);}to{opacity:1;transform:none;}}
.index_card{border:1px solid var(--c-line);border-radius:var(--radius);overflow:hidden;background:#fff;transition:all .35s;}
.index_card:hover{border-color:var(--c-primary);box-shadow:0 1.4rem 3.2rem rgba(11,27,51,.09);transform:translateY(-.4rem);}
.index_card-img{aspect-ratio:3/2.05;overflow:hidden;}
.index_card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.index_card:hover .index_card-img img{transform:scale(1.05);}
.index_card-body{padding:2.2rem 2.2rem 2.6rem;}
.index_card-body h3{font-size:1.85rem;font-weight:700;}
.index_card-body p{margin-top:.9rem;font-size:1.4rem;line-height:1.65;color:var(--c-text);}

/* ---------- Why (漂浮圆 chip) ---------- */
.index_why{background:#fff;padding-top:0;}
.index_why-stage{position:relative;height:46rem;border-radius:var(--radius-lg);background:var(--c-wash) url('../images/index_bg_contour.webp') center/cover no-repeat;border:1px solid var(--c-line);}
.index_chip{position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center;gap:1.4rem;background:#fff;border-radius:10rem;padding:1.1rem 2.4rem 1.1rem 1.1rem;box-shadow:0 1.2rem 3rem rgba(11,27,51,.10);border:1px solid rgba(223,232,227,.7);}
.index_chip-ico{width:4.6rem;height:4.6rem;border-radius:50%;background:var(--c-primary-soft);color:var(--c-primary-dark);display:grid;place-items:center;font-size:2.2rem;flex-shrink:0;}
.index_chip>span:last-child{font-size:1.25rem;line-height:1.45;color:var(--c-text);}
.index_chip strong{display:block;font-size:1.45rem;color:var(--c-ink);}

/* ---------- CTA band ---------- */
.index_band{background:var(--c-band) url('../images/index_bg_cta_dark.webp') center/cover no-repeat;}
.index_band-inner{display:flex;align-items:center;justify-content:space-between;gap:3rem;flex-wrap:wrap;padding-top:7rem;padding-bottom:7rem;}
.index_band-title{font-size:3.2rem;font-weight:700;color:#fff;line-height:1.3;}
.index_band-sub{margin-top:1rem;font-size:1.5rem;color:rgba(255,255,255,.72);}

/* ---------- Applications ---------- */
.index_apps{background:#fff;position:relative;}
.index_apps-tabs{display:flex;gap:1.6rem;flex-wrap:wrap;margin-bottom:3.2rem;}
.index_atab{display:flex;align-items:center;gap:1rem;padding:1.4rem 2.4rem;border:1px solid var(--c-line);border-radius:var(--radius);background:#fff;font-size:1.5rem;font-weight:500;color:var(--c-ink);transition:all .3s;}
.index_atab i{font-size:2rem;color:var(--c-text);transition:color .3s;}
.index_atab:hover{border-color:var(--c-primary);}
.index_atab.is-active{border-color:var(--c-primary);box-shadow:0 .8rem 2.2rem rgba(61,168,117,.15);font-weight:700;}
.index_atab.is-active i{color:var(--c-primary);}
.index_apanel{display:none;position:relative;height:52rem;border-radius:var(--radius-lg);overflow:hidden;background-size:cover;background-position:center;}
.index_apanel.is-active{display:block;animation:index_fade .5s ease;}
.index_apanel::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(8,20,15,.78) 0%,rgba(8,20,15,.18) 46%,transparent 70%);}
.index_apanel-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:4rem 4.4rem;}
.index_apanel-body h3{font-size:2.6rem;font-weight:700;color:#fff;}
.index_apanel-body p{margin-top:1rem;font-size:1.5rem;line-height:1.65;color:rgba(255,255,255,.85);max-width:62rem;}

/* ---------- About (上下面料波浪过渡带) ---------- */
.index_about{padding:13rem 0;background:url('../images/index_deco_wave_top.webp') top center/100% 24rem no-repeat,url('../images/index_deco_wave_bottom.webp') bottom center/100% 24rem no-repeat var(--c-wash);}
.index_about-layout{display:grid;grid-template-columns:1.02fr 1fr;gap:6.4rem;align-items:center;}
.index_about-media{position:relative;padding-bottom:6rem;}
.index_about-main{width:100%;border-radius:var(--radius-lg);}
.index_about-inset{position:absolute;right:-3%;bottom:0;width:46%;border-radius:var(--radius);border:.6rem solid #fff;box-shadow:0 1.8rem 4rem rgba(11,27,51,.16);}
.index_about-copy h2{font-size:3.6rem;line-height:1.28;font-weight:700;}
.index_about-copy>p{margin-top:2rem;font-size:1.55rem;color:var(--c-text);}
.index_stats{margin-top:3.4rem;display:grid;grid-template-columns:repeat(4,auto);gap:3.2rem;justify-content:start;}
.index_stat{border-left:1px solid var(--c-line);padding-left:2rem;}
.index_stat strong{display:block;font-size:4rem;font-weight:900;line-height:1;color:var(--c-ink);}
.index_stat strong::after{content:'+';color:var(--c-primary);font-weight:700;}
.index_stat span{display:block;margin-top:.8rem;font-size:1.25rem;color:var(--c-text);}
.index_about-copy .index_btn{margin-top:3.4rem;}

/* ---------- FAQ ---------- */
.index_faq{background:#fff;}
.index_faq .index_head{margin-left:auto;margin-right:auto;text-align:center;max-width:64rem;}
.index_faq .index_head::before{display:none;}
.index_faq-list{display:flex;flex-direction:column;gap:1.6rem;}
.index_faq-item{border:1px solid var(--c-line);border-radius:var(--radius);background:#fff;transition:border-color .3s;}
.index_faq-item[open]{border-color:var(--c-primary);}
.index_faq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:2.2rem 2.6rem;cursor:pointer;}
.index_faq-item summary::-webkit-details-marker{display:none;}
.index_faq-item summary h3{font-size:1.7rem;font-weight:700;}
.index_faq-item summary i{font-size:2rem;color:var(--c-primary);transition:transform .3s;flex-shrink:0;}
.index_faq-item[open] summary i{transform:rotate(45deg);}
.index_faq-item>p{padding:0 2.6rem 2.4rem;font-size:1.45rem;line-height:1.7;color:var(--c-text);max-width:76rem;}

/* ---------- Contact (顶部波浪过渡进入洗底) ---------- */
.index_contact{padding-top:12rem;background:url('../images/index_deco_wave_top.webp') top center/100% 22rem no-repeat var(--c-wash);}
.index_contact-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:6.4rem;align-items:start;}
.index_contact-copy h2{font-size:3.6rem;font-weight:700;}
.index_contact-copy>p{margin-top:2rem;font-size:1.55rem;color:var(--c-text);max-width:44rem;}
.index_contact-list{list-style:none;margin-top:3.2rem;display:flex;flex-direction:column;gap:1.8rem;}
.index_contact-list li{display:flex;align-items:center;gap:1.4rem;font-size:1.55rem;font-weight:500;}
.index_contact-list i{width:4.4rem;height:4.4rem;border-radius:50%;background:#fff;border:1px solid var(--c-line);color:var(--c-primary);display:grid;place-items:center;font-size:2rem;flex-shrink:0;}
.index_form{background:#fff;border-radius:var(--radius-lg);padding:4rem;box-shadow:0 2rem 5rem rgba(11,27,51,.08);}
.index_form label{display:block;font-size:1.35rem;font-weight:700;color:var(--c-ink);margin-bottom:1.8rem;}
.index_form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.8rem;}
.index_form input,.index_form textarea{width:100%;margin-top:.7rem;padding:1.3rem 1.6rem;font-family:inherit;font-size:1.5rem;color:var(--c-ink);background:#F5F8F6;border:1px solid var(--c-line);border-radius:1rem;outline:none;transition:border-color .3s;resize:vertical;}
.index_form input:focus,.index_form textarea:focus{border-color:var(--c-primary);}
.index_form input::placeholder,.index_form textarea::placeholder{color:#A6AFB8;}
.index_form .index_btn{margin-top:.6rem;}
.index_form-note{margin-top:1.4rem;font-size:1.4rem;color:var(--c-primary-dark);min-height:1.4em;}

/* ---------- Footer (白色 mega footer) ---------- */
.index_footer{background:#fff;border-top:1px solid var(--c-line);}
.index_footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.15fr;gap:4.8rem;padding-top:7.2rem;padding-bottom:6.4rem;}
.index_footer-brand>p{margin-top:2rem;font-size:1.4rem;line-height:1.7;color:var(--c-text);max-width:32rem;}
.index_footer-social{margin-top:2.6rem;display:flex;gap:1.2rem;}
.index_footer-social a{width:4rem;height:4rem;border-radius:50%;border:1px solid var(--c-line);display:grid;place-items:center;font-size:1.8rem;color:var(--c-ink);transition:all .3s;}
.index_footer-social a:hover{background:var(--c-primary);border-color:var(--c-primary);color:#fff;}
.index_footer-title{font-size:1.35rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;margin-bottom:2.2rem;}
.index_footer-col a{display:flex;align-items:center;gap:.9rem;font-size:1.45rem;color:var(--c-text);margin-bottom:1.4rem;transition:color .3s;}
.index_footer-col a:hover{color:var(--c-primary);}
.index_footer-col a i{color:var(--c-primary);font-size:1.7rem;}
.index_footer-bar{background:#F3F6F4;border-top:1px solid var(--c-line);}
.index_footer-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;padding-top:2.2rem;padding-bottom:2.2rem;}
.index_footer-bar p{font-size:1.3rem;color:var(--c-text);}

/* ---------- Reveal ---------- */
.index_reveal{opacity:0;transform:translateY(2.6rem);transition:opacity .7s ease,transform .7s ease;}
.index_reveal.is-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
    .index_reveal{opacity:1;transform:none;transition:none;}
    html{scroll-behavior:auto;}
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1024px){
    html{font-size:8.5px;}
    .index_nav,.index_navbar-cta{display:none;}
    .index_burger{display:flex;}
    .index_fabrics-layout{grid-template-columns:1fr;gap:3rem;}
    .index_fabrics-tabs{position:static;flex-direction:row;flex-wrap:wrap;}
    .index_ftab{flex:1 1 24rem;}
    .index_fabrics-note{display:none;}
    .index_about-layout,.index_contact-layout{grid-template-columns:1fr;gap:4.8rem;}
    .index_stats{grid-template-columns:repeat(2,auto);row-gap:2.6rem;}
    .index_deco--arc{width:38rem;top:5.6rem;}
    .index_deco--yarn{width:16rem;top:4rem;}
}

@media (max-width:768px){
    html{font-size:10px;}
    :root{--nav-h:6.4rem;}
    body{font-size:1.5rem;}
    .index_container{width:90%;}
    .index_section{padding:6.4rem 0;}
    .index_logo-text{font-size:1.9rem;}

    .index_hero{min-height:0;height:auto;padding:7rem 0 8rem;background-position:74% center;}
    .index_hero::before{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,255,255,.88) 0%,rgba(255,255,255,.62) 55%,rgba(255,255,255,.25) 100%);}
    .index_hero h1{font-size:3.2rem;}
    .index_hero p{font-size:1.55rem;}

    .index_head{margin-bottom:3.6rem;}
    .index_head::before{display:none;}
    .index_head h2{font-size:2.7rem;}

    .index_deco--arc,.index_deco--yarn{display:none;}
    .index_deco-flourish{width:24rem;margin-top:1.6rem;}
    .index_about{padding:8.6rem 0;background-size:100% 9rem,100% 9rem;}
    .index_contact{padding-top:8.6rem;background-size:100% 8rem;}

    .index_fpanel{grid-template-columns:1fr;}
    .index_ftab{flex:1 1 100%;padding:1.6rem 1.8rem;}

    .index_why-stage{height:auto;padding:2.4rem;display:flex;flex-direction:column;gap:1.6rem;}
    .index_chip{position:static;border-radius:var(--radius-lg);}

    .index_band-title{font-size:2.4rem;}
    .index_apanel{height:44rem;}
    .index_apanel-body{padding:2.6rem 2.4rem;}
    .index_apanel-body h3{font-size:2.1rem;}

    .index_about-copy h2,.index_contact-copy h2{font-size:2.7rem;}
    .index_about-inset{right:0;}
    .index_stat strong{font-size:3.2rem;}

    .index_form{padding:2.8rem 2.2rem;}
    .index_form-row{grid-template-columns:1fr;gap:0;}

    .index_footer-top{grid-template-columns:1fr;gap:3.6rem;padding-top:5.2rem;padding-bottom:4.4rem;}
    .index_footer-bar-inner{justify-content:center;text-align:center;}
}

@media (max-width:480px){
    .index_hero h1{font-size:2.8rem;}
    .index_hero-actions{flex-direction:column;align-items:stretch;}
    .index_hero-actions .index_btn{justify-content:center;grid-template-columns:1fr auto;}
    .index_apps-tabs{gap:1rem;}
    .index_atab{padding:1.2rem 1.6rem;font-size:1.4rem;}
    .index_apanel{height:40rem;}
    .index_stats{grid-template-columns:repeat(2,1fr);gap:2rem;}
    .index_band .index_btn{width:100%;justify-content:center;}
}