/* ============================================================
   HIVISION — Machine Vision & Industrial Imaging
   Design system + components
   Single stylesheet. No external fonts, no CDN, fully offline.
   ============================================================ */

/* ---------- 1. Design tokens ---------- */
:root{
  --navy-950:#050a14;
  --navy-900:#080f1e;
  --navy-800:#0d1729;
  --navy-700:#152238;
  --ink:#0f172a;
  --ink-2:#1e293b;
  --muted:#5a6b85;
  --muted-2:#8494ac;

  --bg:#f5f8fc;
  --bg-2:#eef3fa;
  --line:#e3eaf4;
  --line-2:#d5dfec;

  --brand:#0ea5e9;
  --brand-d:#0284c7;
  --brand-l:#e0f2fe;
  --cyan:#22d3ee;

  --wa:#25d366;
  --wa-d:#1ca851;

  --amber:#f59e0b;

  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px;

  --sh-xs:0 1px 2px rgba(15,23,42,.06);
  --sh-sm:0 2px 8px -2px rgba(15,23,42,.10);
  --sh-md:0 14px 34px -16px rgba(15,23,42,.22);
  --sh-lg:0 34px 64px -28px rgba(15,23,42,.34);
  --sh-wa:0 12px 28px -10px rgba(37,211,102,.55);

  --container:1200px;
  --header-h:70px;
  --ease:cubic-bezier(.22,.61,.36,1);

  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","PingFang SC","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 18px)}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.68;
  color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
/* keep intrinsic ratio: the width/height attributes on <img> act as size hints and
   would otherwise stretch images whose CSS only constrains the width */
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer;padding:0}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0}
hr{border:0;border-top:1px solid var(--line);margin:0}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4,h5{margin:0;font-weight:800;line-height:1.16;letter-spacing:-.022em;color:var(--ink)}
h1{font-size:clamp(2.1rem,1.35rem + 2.6vw,3.6rem);letter-spacing:-.03em}
h2{font-size:clamp(1.6rem,1.15rem + 1.6vw,2.5rem)}
h3{font-size:clamp(1.1rem,1rem + .4vw,1.3rem)}
h4{font-size:1rem;letter-spacing:-.01em}

/* ---------- 3. Layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:22px}
.container--tight{max-width:920px}
.container--wide{max-width:1340px}

.section{padding-block:clamp(56px,7vw,104px);position:relative}
.section--bg{background:var(--bg)}
.section--bg2{background:linear-gradient(180deg,#fff 0%,var(--bg) 100%)}
.section--line{border-top:1px solid var(--line)}

.section-head{max-width:760px;margin-bottom:clamp(28px,4vw,52px)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head p{margin-top:14px;color:var(--muted);font-size:1.02rem}
.section-head--center p{margin-inline:auto;max-width:640px}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-d);
  background:var(--brand-l);
  border:1px solid #cfeaff;
  padding:6px 12px;border-radius:999px;margin-bottom:18px;
}
.eyebrow--dark{color:#7dd3fc;background:rgba(14,165,233,.12);border-color:rgba(56,189,248,.28)}

.lead{font-size:clamp(1rem,.96rem + .2vw,1.12rem);color:var(--muted)}
.text-center{text-align:center}
.mt-0{margin-top:0}
.mt-sm{margin-top:12px}
.mt-md{margin-top:22px}
.mt-lg{margin-top:34px}

.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---------- 4. Buttons ---------- */
.btn{
  --btn-bg:var(--brand); --btn-fg:#fff; --btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:999px;
  font-size:.94rem;font-weight:700;letter-spacing:.005em;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  cursor:pointer;white-space:nowrap;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background-color .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease);
}
.btn svg{width:18px;height:18px;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{box-shadow:0 12px 26px -12px rgba(14,165,233,.65)}
.btn--primary:hover{background:var(--brand-d);box-shadow:0 18px 34px -14px rgba(14,165,233,.75)}
.btn--wa{--btn-bg:var(--wa);box-shadow:var(--sh-wa)}
.btn--wa:hover{--btn-bg:var(--wa-d);box-shadow:0 18px 34px -12px rgba(37,211,102,.6)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--line-2)}
.btn--ghost:hover{--btn-bd:var(--brand);--btn-fg:var(--brand-d);background:var(--brand-l)}
.btn--onDark{--btn-bg:rgba(255,255,255,.08);--btn-fg:#eaf2ff;--btn-bd:rgba(255,255,255,.22);backdrop-filter:blur(8px)}
.btn--onDark:hover{--btn-bg:rgba(255,255,255,.16);--btn-bd:rgba(255,255,255,.4)}
.btn--white{--btn-bg:#fff;--btn-fg:var(--ink)}
.btn--white:hover{--btn-fg:var(--brand-d)}
.btn--sm{padding:9px 17px;font-size:.855rem}
.btn--lg{padding:16px 30px;font-size:1rem}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}

.arrow-link{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--brand-d);font-size:.92rem}
.arrow-link svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.arrow-link:hover svg{transform:translateX(4px)}

/* ---------- 5. Header ---------- */
.site-header{
  --hfg:#dbe6f7; --hfg-dim:#9fb2d0; --hbg:transparent; --hbd:transparent;
  position:fixed;inset:0 0 auto 0;z-index:80;
  background:var(--hbg);border-bottom:1px solid var(--hbd);
  transition:background-color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease),backdrop-filter .3s var(--ease);
}
.site-header.is-scrolled{
  --hfg:var(--ink); --hfg-dim:var(--muted);
  --hbg:rgba(255,255,255,.94); --hbd:var(--line);
  box-shadow:0 6px 24px -14px rgba(15,23,42,.28);
  backdrop-filter:blur(14px);
}
.site-header__inner{height:var(--header-h);display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:center;gap:11px;flex:none;color:var(--hfg);transition:color .3s var(--ease)}
.brand__mark{width:34px;height:34px;flex:none}
.brand__text{display:flex;flex-direction:column;line-height:1.05}
.brand__name{font-weight:800;font-size:1.12rem;letter-spacing:.06em}
.brand__tag{font-size:.6rem;letter-spacing:.19em;text-transform:uppercase;color:var(--hfg-dim);font-weight:600;transition:color .3s var(--ease)}

.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{
  position:relative;color:var(--hfg-dim);font-size:.925rem;font-weight:600;
  padding:9px 13px;border-radius:9px;transition:color .2s var(--ease),background-color .2s var(--ease);
}
.nav a:hover{color:var(--hfg);background:rgba(125,211,252,.10)}
.nav a.is-active{color:var(--hfg)}
.nav a.is-active::after{
  content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--brand),var(--cyan));
}
.site-header__cta{display:flex;align-items:center;gap:10px;flex:none}

.nav-toggle{display:none;width:42px;height:42px;border-radius:11px;align-items:center;justify-content:center;color:var(--hfg)}
.nav-toggle span{display:block;width:19px;height:2px;background:currentColor;border-radius:2px;position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:19px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s var(--ease),top .25s var(--ease)}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ---------- 6. Hero ---------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:radial-gradient(1200px 600px at 78% -8%,#123a5c 0%,transparent 62%),
             radial-gradient(900px 520px at 6% 102%,#0a2c46 0%,transparent 60%),
             linear-gradient(165deg,var(--navy-900) 0%,var(--navy-950) 100%);
  color:#e8eeff;
  padding-top:calc(var(--header-h) + clamp(46px,7vw,92px));
  padding-bottom:clamp(56px,7vw,98px);
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(rgba(148,190,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(148,190,255,.055) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(circle at 50% 34%,#000 0%,transparent 74%);
  -webkit-mask-image:radial-gradient(circle at 50% 34%,#000 0%,transparent 74%);
}
.hero::after{
  content:"";position:absolute;z-index:-1;width:min(760px,90vw);aspect-ratio:1;border-radius:50%;
  right:-14%;top:-30%;
  background:radial-gradient(circle,rgba(34,211,238,.20) 0%,rgba(14,165,233,.07) 42%,transparent 68%);
  filter:blur(18px);
}
.hero__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(28px,4vw,58px);align-items:center}
.hero h1{color:#fff}
.hero h1 .accent{
  background:linear-gradient(96deg,#7dd3fc 0%,#22d3ee 52%,#38bdf8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__lead{margin-top:20px;font-size:clamp(1rem,.95rem + .35vw,1.16rem);color:#9fb3d4;max-width:60ch}
.hero .btn-row{margin-top:32px}
.hero__art{position:relative}
.hero__art img{width:100%;filter:drop-shadow(0 34px 60px rgba(2,8,20,.6))}
.hero__badge{
  position:absolute;display:flex;align-items:center;gap:10px;
  background:rgba(9,18,34,.82);border:1px solid rgba(56,189,248,.30);
  backdrop-filter:blur(12px);border-radius:14px;padding:11px 15px;
  font-size:.8rem;font-weight:600;color:#cfe4ff;box-shadow:0 18px 40px -20px rgba(0,0,0,.8);
}
.hero__badge svg{width:22px;height:22px;flex:none;color:#7dd3fc}
.hero__badge b{color:#7dd3fc;font-weight:800}
.hero__badge--a{left:-6px;bottom:16%}
.hero__badge--b{right:2%;top:6%}

.hero-stats{
  margin-top:clamp(38px,5vw,62px);padding-top:28px;
  border-top:1px solid rgba(148,190,255,.16);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 10px;
}
.stat__num{font-size:clamp(1.5rem,1.1rem + 1.3vw,2.15rem);font-weight:800;letter-spacing:-.03em;color:#fff;line-height:1}
.stat__num span{color:var(--cyan)}
.stat__label{margin-top:7px;font-size:.8rem;color:#8ea4c6;letter-spacing:.04em}

/* ---------- 7. Page hero (inner pages) ---------- */
.page-hero{
  position:relative;isolation:isolate;overflow:hidden;color:#e8eeff;
  background:radial-gradient(900px 480px at 82% -20%,#123a5c 0%,transparent 64%),
             linear-gradient(165deg,var(--navy-900) 0%,var(--navy-950) 100%);
  padding-top:calc(var(--header-h) + clamp(38px,5vw,64px));
  padding-bottom:clamp(40px,5vw,64px);
}
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(rgba(148,190,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(148,190,255,.05) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(circle at 40% 0%,#000 0%,transparent 70%);
  -webkit-mask-image:radial-gradient(circle at 40% 0%,#000 0%,transparent 70%);
}
.page-hero h1{color:#fff;font-size:clamp(1.85rem,1.3rem + 2vw,3rem)}
.page-hero p{margin-top:16px;color:#9fb3d4;max-width:66ch}
.breadcrumb{display:flex;align-items:center;gap:9px;font-size:.8rem;color:#7f95b8;margin-bottom:16px}
.breadcrumb a:hover{color:#7dd3fc}
.breadcrumb span{opacity:.5}

/* ---------- 8. Cards ---------- */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px;box-shadow:var(--sh-xs);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}
.card--hover:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:#cfe4f8}

/* category card */
.cat-card{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}
.cat-card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:#cfe4f8}
.cat-card__media{
  position:relative;aspect-ratio:4/3;min-height:0;overflow:hidden;
  background:linear-gradient(160deg,#f7fbff 0%,#e9f1fb 100%);border-bottom:1px solid var(--line);
}
.cat-card__media img{position:absolute;inset:18px;width:auto;height:auto;object-fit:contain}
.cat-card__body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.cat-card__body h3{margin-bottom:9px}
.cat-card__body p{color:var(--muted);font-size:.92rem}
.cat-card__list{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px}
.cat-card__list li{font-size:.76rem;color:#3d5675;background:#eef4fb;border:1px solid #e0e9f5;border-radius:999px;padding:3px 9px}
.cat-card .arrow-link{margin-top:auto;padding-top:20px}

/* product card */
.p-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}
.p-card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:#cfe4f8}
.p-card__media{
  position:relative;aspect-ratio:4/3;min-height:0;overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%,#fbfdff 0%,#eff5fc 100%);
  border-bottom:1px solid var(--line);
}
.p-card__media img{position:absolute;inset:14px;width:auto;height:auto;object-fit:contain;transition:transform .4s var(--ease)}
.p-card:hover .p-card__media img{transform:scale(1.045)}
.p-card__badge{
  position:absolute;top:12px;left:12px;z-index:2;
  font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;background:var(--ink);color:#fff;
}
.p-card__badge--hot{background:linear-gradient(92deg,#f43f5e,#fb7185)}
.p-card__badge--new{background:linear-gradient(92deg,#0ea5e9,#22d3ee)}
.p-card__body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.p-card__cat{font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--brand-d)}
.p-card__body h3{font-size:1.03rem;letter-spacing:-.015em}
.p-card__body p{color:var(--muted);font-size:.9rem;line-height:1.6}
.p-specs{display:flex;flex-wrap:wrap;gap:6px}
.p-specs li{font-size:.74rem;color:#3d5675;background:#eef4fb;border:1px solid #e0e9f5;border-radius:999px;padding:3px 9px;font-weight:600}
.p-card__foot{margin-top:auto;padding-top:8px;display:flex;gap:9px;flex-wrap:wrap}

/* ---------- 9. Feature / why-us ---------- */
.feature{display:flex;gap:16px;align-items:flex-start}
.feature__icon{
  flex:none;width:50px;height:50px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(150deg,#e8f4ff,#d5ebff);border:1px solid #cfe6fb;color:var(--brand-d);
}
.feature__icon svg{width:24px;height:24px}
.feature h3{font-size:1.02rem;margin-bottom:6px}
.feature p{color:var(--muted);font-size:.91rem}

/* ---------- 10. Applications ---------- */
.app-tile{
  display:flex;flex-direction:column;gap:11px;padding:24px 22px;
  background:rgba(255,255,255,.045);border:1px solid rgba(148,190,255,.15);
  border-radius:var(--r-md);
  transition:background-color .28s var(--ease),border-color .28s var(--ease),transform .28s var(--ease);
}
.app-tile:hover{background:rgba(56,189,248,.10);border-color:rgba(56,189,248,.42);transform:translateY(-4px)}
.app-tile svg{width:26px;height:26px;color:var(--cyan)}
.app-tile h3{font-size:.98rem;color:#fff}
.app-tile p{font-size:.84rem;color:#93a9c9;line-height:1.55}

/* ---------- 11. Number / band ---------- */
.band{
  position:relative;overflow:hidden;color:#e8eeff;
  background:radial-gradient(900px 460px at 12% 0%,#123a5c 0%,transparent 60%),
             linear-gradient(150deg,var(--navy-900),var(--navy-950));
}
.band::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(148,190,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(148,190,255,.05) 1px,transparent 1px);
  background-size:54px 54px;opacity:.75;
}
.band > .container{position:relative}
.band h2{color:#fff}
.band p{color:#9fb3d4}
.numbers{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;
  padding:clamp(24px,3vw,38px);border-radius:var(--r-xl);
  background:linear-gradient(150deg,#f9fcff 0%,#eaf2fb 100%);
  border:1px solid var(--line);
}
.numbers .stat__num{color:var(--ink)}
.numbers .stat__num span{color:var(--brand)}
.numbers .stat__label{color:var(--muted)}

/* ---------- 12. Product grid / filter bar ---------- */
.filter-bar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-xs);margin-bottom:34px;
}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  padding:9px 17px;border-radius:999px;border:1px solid var(--line-2);background:#fff;
  font-size:.875rem;font-weight:700;color:var(--muted);
  transition:all .22s var(--ease);
}
.chip:hover{border-color:var(--brand);color:var(--brand-d);background:var(--brand-l)}
.chip.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
.search{position:relative;margin-left:auto;min-width:240px;flex:1 1 240px;max-width:340px}
.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--muted-2);pointer-events:none}
.search input{
  width:100%;padding:11px 16px 11px 41px;border-radius:999px;
  border:1px solid var(--line-2);background:#fff;font-size:.9rem;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.search input::placeholder{color:var(--muted-2)}
.search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(14,165,233,.14)}
.empty-state{grid-column:1/-1;text-align:center;padding:64px 20px;color:var(--muted)}

/* ---------- 13. Showcase / split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:center}
.split--rev .split__media{order:-1}
.split__media img{width:100%}
.media-frame{
  border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(160deg,#f8fbff,#e9f1fb);box-shadow:var(--sh-md);padding:10px;
}
.media-frame img{border-radius:calc(var(--r-xl) - 8px);width:100%;height:auto}

.check-list{display:grid;gap:13px;margin-top:24px}
.check-list li{display:flex;gap:11px;align-items:flex-start;font-size:.95rem;color:var(--ink-2)}
.check-list svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--brand)}

/* ---------- 14. Timeline ---------- */
.timeline{position:relative;display:grid;gap:30px;padding-left:30px}
.timeline::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--cyan),var(--brand),transparent);border-radius:2px}
.timeline li{position:relative}
.timeline li::before{
  content:"";position:absolute;left:-30px;top:6px;width:18px;height:18px;border-radius:50%;
  background:#fff;border:3px solid var(--brand);box-shadow:0 0 0 4px rgba(14,165,233,.12);
}
.timeline__year{font-size:.78rem;font-weight:800;letter-spacing:.1em;color:var(--brand-d)}
.timeline h3{font-size:1.02rem;margin:5px 0 6px}
.timeline p{color:var(--muted);font-size:.92rem}

/* ---------- 15. FAQ ---------- */
.faq{display:grid;gap:12px}
.faq details{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:0;overflow:hidden;transition:border-color .22s var(--ease),box-shadow .22s var(--ease);
}
.faq details[open]{border-color:#cfe4f8;box-shadow:var(--sh-sm)}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 22px;
  display:flex;align-items:center;gap:14px;
  font-weight:700;font-size:.97rem;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";margin-left:auto;flex:none;width:10px;height:10px;
  border-right:2.2px solid var(--brand);border-bottom:2.2px solid var(--brand);
  transform:rotate(45deg);transition:transform .25s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq__body{padding:0 22px 20px;color:var(--muted);font-size:.93rem}

/* ---------- 16. Inquiry form ---------- */
.inquiry{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-md);padding:clamp(24px,3vw,38px);
}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field--full{grid-column:1/-1}
.field label{font-size:.83rem;font-weight:700;color:var(--ink-2);letter-spacing:.01em}
.field label .req{color:#e11d48}
.field input,.field select,.field textarea{
  width:100%;padding:12px 15px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:#fbfdff;font-size:.93rem;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease);
}
.field textarea{min-height:124px;resize:vertical;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px rgba(14,165,233,.14);
}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a6b85' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:40px}
.form-note{margin-top:14px;font-size:.8rem;color:var(--muted-2)}
.form-actions{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.form-status{margin-top:16px;padding:14px 17px;border-radius:var(--r-sm);font-size:.9rem;display:none}
.form-status.is-ok{display:block;background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46}
.form-status.is-err{display:block;background:#fff1f2;border:1px solid #fecdd3;color:#9f1239}
.hp{position:absolute!important;left:-9999px!important;opacity:0;pointer-events:none}

/* ---------- 17. Contact blocks ---------- */
.contact-card{
  display:flex;gap:15px;align-items:flex-start;padding:22px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color .26s var(--ease);
}
.contact-card:hover{transform:translateY(-3px);box-shadow:var(--sh-sm);border-color:#cfe4f8}
.contact-card__icon{
  flex:none;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(150deg,#e8f4ff,#d5ebff);border:1px solid #cfe6fb;color:var(--brand-d);
}
.contact-card__icon svg{width:21px;height:21px}
.contact-card__icon--wa{background:linear-gradient(150deg,#dcfce7,#bbf7d0);border-color:#a7f3d0;color:var(--wa-d)}
.contact-card > div h3,.contact-card h3{font-size:.95rem;margin-bottom:5px}
.contact-card p,.contact-card a{font-size:.9rem;color:var(--muted);word-break:break-word}
.contact-card a:hover{color:var(--brand-d)}

.qr-panel{
  background:linear-gradient(165deg,var(--navy-900),var(--navy-950));
  border-radius:var(--r-xl);padding:clamp(26px,3vw,38px);color:#e8eeff;
  border:1px solid rgba(56,189,248,.20);text-align:center;
}
.qr-panel h3{color:#fff;margin-bottom:8px}
.qr-panel p{color:#9fb3d4;font-size:.9rem}
.qr-frame{
  margin:24px auto 20px;width:min(280px,78%);padding:16px;border-radius:var(--r-lg);
  background:#fff;box-shadow:0 24px 50px -22px rgba(0,0,0,.85);
}
.qr-frame img{width:100%}

/* ---------- 18. Testimonial ---------- */
.quote{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;
  display:flex;flex-direction:column;gap:16px;box-shadow:var(--sh-xs);
}
.quote__stars{display:flex;gap:3px;color:#f59e0b}
.quote__stars svg{width:16px;height:16px}
.quote p{font-size:.94rem;color:var(--ink-2);flex:1}
.quote__who{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:16px}
.quote__avatar{
  width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,#0369a1,#0e7490);color:#fff;font-weight:800;font-size:.86rem;
  letter-spacing:.04em;box-shadow:0 6px 14px -6px rgba(3,105,161,.6);
}
.quote__who b{display:block;font-size:.9rem}
.quote__who span{font-size:.8rem;color:var(--muted-2)}

/* ---------- 19. CTA band ---------- */
.cta-band{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  background:radial-gradient(700px 400px at 82% 0%,#12486e 0%,transparent 62%),linear-gradient(150deg,var(--navy-800),var(--navy-950));
  border:1px solid rgba(56,189,248,.20);
  padding:clamp(30px,4.5vw,58px);
  display:grid;grid-template-columns:1.35fr .65fr;gap:32px;align-items:center;
}
.cta-band h2{color:#fff}
.cta-band p{color:#9fb3d4;margin-top:14px;max-width:56ch}
.cta-band__actions{display:flex;flex-direction:column;gap:12px}

/* ---------- 20. Footer ---------- */
.site-footer{background:var(--navy-950);color:#8ea4c6;font-size:.9rem;padding-top:clamp(48px,6vw,72px)}
.site-footer h4{color:#fff;font-size:.83rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:18px}
.site-footer a:hover{color:#7dd3fc}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:36px;padding-bottom:44px}
.footer-brand{display:flex;align-items:center;gap:11px;color:#fff;margin-bottom:16px}
.footer-brand .brand__mark{width:32px;height:32px}
.footer-brand .brand__name{color:#fff}
.footer-brand .brand__tag{color:#7f95b8}
.footer-about{max-width:38ch;line-height:1.72}
.footer-links{display:grid;gap:11px}
.footer-contact{display:grid;gap:13px}
.footer-contact li{display:flex;gap:10px;align-items:flex-start}
.footer-contact svg{width:16px;height:16px;flex:none;margin-top:5px;color:var(--cyan)}
.footer-bottom{
  border-top:1px solid rgba(148,190,255,.12);padding-block:22px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
  font-size:.82rem;color:#6c82a6;
}
.footer-bottom nav{display:flex;gap:18px;flex-wrap:wrap}
.footer-wa{
  display:inline-flex;align-items:center;gap:9px;margin-top:20px;
  padding:10px 18px;border-radius:999px;background:var(--wa);color:#fff!important;
  font-weight:700;font-size:.86rem;box-shadow:var(--sh-wa);transition:background-color .2s var(--ease)
}
.footer-wa:hover{background:var(--wa-d)}
.footer-wa svg{width:17px;height:17px}

/* ---------- 21. Floating WhatsApp ---------- */
.fab-wrap{position:fixed;right:22px;bottom:22px;z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.fab{
  position:relative;width:60px;height:60px;border-radius:50%;
  background:var(--wa);color:#fff;display:grid;place-items:center;
  box-shadow:var(--sh-wa);transition:transform .25s var(--ease),background-color .25s var(--ease);
}
.fab svg{width:31px;height:31px}
.fab:hover{transform:scale(1.07);background:var(--wa-d)}
.fab::after{
  content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--wa);
  animation:ping 2.6s var(--ease) infinite;pointer-events:none;
}
@keyframes ping{0%{transform:scale(1);opacity:.75}70%{transform:scale(1.5);opacity:0}100%{transform:scale(1.5);opacity:0}}
.fab__label{
  position:absolute;right:calc(100% + 14px);top:50%;transform:translateY(-50%);
  background:#fff;color:var(--ink);font-size:.82rem;font-weight:700;white-space:nowrap;
  padding:9px 14px;border-radius:10px;box-shadow:var(--sh-md);opacity:0;pointer-events:none;
  transition:opacity .2s var(--ease);
}
.fab:hover .fab__label{opacity:1}

.wa-pop{
  width:296px;background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  border:1px solid var(--line);overflow:hidden;
  transform-origin:bottom right;
  opacity:0;transform:translateY(10px) scale(.96);pointer-events:none;
  transition:opacity .26s var(--ease),transform .26s var(--ease);
}
.wa-pop.is-open{opacity:1;transform:none;pointer-events:auto}
.wa-pop__head{background:var(--wa);color:#fff;padding:16px 18px;display:flex;align-items:center;gap:11px}
.wa-pop__head svg{width:24px;height:24px;flex:none}
.wa-pop__head b{display:block;font-size:.92rem}
.wa-pop__head span{font-size:.76rem;opacity:.9}
.wa-pop__body{padding:18px}
.wa-pop__body p{font-size:.84rem;color:var(--muted);text-align:center;margin-bottom:14px}
.wa-pop__qr{border:1px solid var(--line);border-radius:var(--r-md);padding:10px;background:#fff;margin-bottom:14px}
.wa-pop__qr img{width:100%}

/* ---------- 22. Reveal animation ---------- */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .72s var(--ease),transform .72s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
.reveal-d1{transition-delay:.07s}
.reveal-d2{transition-delay:.14s}
.reveal-d3{transition-delay:.21s}
.reveal-d4{transition-delay:.28s}

/* ---------- 23. Utilities ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:#fff;color:var(--ink);padding:12px 18px;border-radius:0 0 10px 0;font-weight:700}
.skip-link:focus{left:0}
.divider{height:1px;background:var(--line);border:0;margin-block:clamp(40px,5vw,70px)}
.badge-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.badge{
  display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;color:#3d5675;
  background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:7px 14px;
}
.badge svg{width:15px;height:15px;color:var(--brand)}
.on-dark .badge{background:rgba(255,255,255,.06);border-color:rgba(148,190,255,.22);color:#cfe4ff}

/* ---------- 24. Responsive ---------- */
@media (max-width:1080px){
  .hero__grid{grid-template-columns:1fr;gap:40px}
  .hero__art{max-width:640px;margin-inline:auto;width:100%}
  .hero__badge--a{left:0}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .cta-band{grid-template-columns:1fr}
  .cta-band__actions{flex-direction:row;flex-wrap:wrap}
}
@media (max-width:900px){
  .nav{
    position:absolute;top:var(--header-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;margin:0;
    background:rgba(255,255,255,.99);border-bottom:1px solid var(--line);
    box-shadow:0 24px 40px -24px rgba(15,23,42,.35);
    padding:12px 18px 20px;
    display:none;
  }
  .nav.is-open{display:flex}
  .nav a{color:var(--ink);font-size:1rem;padding:13px 14px;border-radius:var(--r-sm)}
  .nav a:hover{background:var(--brand-l);color:var(--brand-d)}
  .nav a.is-active{color:var(--brand-d);background:var(--brand-l)}
  .nav a.is-active::after{display:none}
  .nav-toggle{display:flex}
  .site-header{--hfg:#dbe6f7}
  .site-header.is-scrolled{--hfg:var(--ink)}
  .site-header__cta .btn--desk{display:none}
  .split{grid-template-columns:1fr}
  .split--rev .split__media{order:0}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .numbers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  :root{--header-h:64px}
  .hero__badge{padding:8px 12px;font-size:.72rem;border-radius:11px;gap:8px}
  .hero__badge svg{width:17px;height:17px}
  .hero__badge--a{bottom:4%}
  .hero__badge--b{top:-2%}
  .container{padding-inline:18px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .search{margin-left:0;max-width:none}
  .filter-bar{padding:14px}
  .footer-grid{grid-template-columns:1fr}
  .brand__tag{display:none}
  .fab-wrap{right:16px;bottom:16px}
  .wa-pop{width:min(296px,calc(100vw - 32px))}
  .timeline{padding-left:26px}
  .btn{padding:12px 20px}
  .btn-row{gap:10px}
  .btn-row .btn{flex:1 1 100%}
  .cta-band__actions .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}