/* ---------- Tokens ---------- */
  :root{
    --bg:#ffffff;
    --surface:#ffffff;
    --surface-alt:#eeeeee;
    --surface-tint:#eaf8fb;
    --text:#12262e;
    --text-soft:#54707c;
    --text-faint:#8199a2;
    --border:#e1e7e9;
    --blue:#00a9bd;
    --blue-deep:#157b9a;
    --blue-ink:#00a9bd; /*#3dbde1; /*#0d5871;*/
    --accent:#ec651c;
    --accent-deep:#c8500f;
    --shadow:0 1px 2px rgba(18,38,46,.06);
    --shadow-md:0 8px 24px -8px rgba(18,38,46,.18);
    --shadow-lg:0 24px 48px -16px rgba(18,38,46,.28);
    --radius:14px;
    --radius-sm:8px;
    --maxw:1200px;
    --font-body:"Sarabun","Noto Sans Thai","Segoe UI","Leelawadee UI","TH Sarabun New",-apple-system,sans-serif;
    --font-head:"Sarabun","Noto Sans Thai","Segoe UI","Leelawadee UI",-apple-system,sans-serif;
    color-scheme: light;
  }
  :root[data-theme="dark"]{
    --bg:#0b1519; --surface:#101e24; --surface-alt:#16262c; --surface-tint:#123039;
    --text:#e9f3f5; --text-soft:#9fb4bc; --text-faint:#6d8790;
    --border:#20343c;
    --blue:#54cbe9; --blue-deep:#7fdcf0; --blue-ink:#bdeefb;
    --accent:#ff8447; --accent-deep:#ffb083;
    color-scheme: dark;
  }
  :root[data-theme="light"]{
    --bg:#ffffff; --surface:#ffffff; --surface-alt:#eeeeee; --surface-tint:#eaf8fb;
    --text:#12262e; --text-soft:#54707c; --text-faint:#8199a2;
    --border:#e1e7e9;
    --blue:#3dbde1; --blue-deep:#157b9a; --blue-ink:#0d5871;
    --accent:#ec651c; --accent-deep:#c8500f;
    color-scheme: light;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  }
  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:var(--font-body); font-size:16px; line-height:1.75;
    -webkit-font-smoothing:antialiased;
  }
  img,svg{display:block; max-width:100%;}
  a{color:inherit;}
  button{font-family:inherit;}
  ul{margin:0; padding:0; list-style:none;}
  h1,h2,h3,h4,p{margin:0;}
  h1,h2,h3,h4{font-family:var(--font-head); text-wrap:balance; font-weight:700; color:var(--text);}
  :focus-visible{outline:2px solid var(--blue-deep); outline-offset:3px; border-radius:4px;}
  section[id], div[id]{ scroll-margin-top:104px;}

  .wrap{max-width:100%; margin:0 auto; padding:0 12px;}
  @media (min-width:576px){ .wrap{max-width:540px;} }
  @media (min-width:768px){ .wrap{max-width:720px;} }
  @media (min-width:992px){ .wrap{max-width:960px;} }
  @media (min-width:1200px){ .wrap{max-width:1140px;} }
  @media (min-width:1400px){ .wrap{max-width:1320px;} }

  /* ---------- lamp / dot motif ---------- */
  .lamp{
    width:9px; height:9px; border-radius:50%; background:var(--accent); flex:none;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 10px 1px color-mix(in srgb, var(--accent) 55%, transparent);
  }
  .lamp--blue{ background:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 20%, transparent), 0 0 10px 1px color-mix(in srgb, var(--blue) 55%, transparent);}
  .lamp-grid{ position:absolute; inset:0; background-image: radial-gradient(circle, rgba(255,255,255,.35) 1.5px, transparent 1.6px); background-size:26px 26px; opacity:.5; pointer-events:none;}

  /* ---------- eyebrow / heading ---------- */
  .eyebrow{ display:flex; align-items:center; gap:10px; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-ink);}
  .section-head{ display:flex; flex-direction:column; gap:14px; margin-bottom:40px; max-width:760px;}
  .section-head p{ color:var(--text-soft); font-size:16.5px;}
  .section-title{ font-size:clamp(26px,3.2vw,38px); line-height:1.25;}
  .section-title u{ text-decoration:none; box-shadow: inset 0 -0.32em 0 color-mix(in srgb, var(--blue) 45%, transparent);}
  .section-head.center{ align-items:center; text-align:center; margin-left:auto; margin-right:auto;}

  .section{ padding:88px 0;}
  .section--alt{ background:var(--surface-alt);}
  .section--tint{ background:var(--surface-tint);}
  .section--ink{ background:var(--blue-ink); color:#fff; }
  .section--ink *{ color:#fff; }
  .section--ink .text-soft{ color:rgba(255,255,255,.78) !important;}
  @media (max-width:720px){ .section{ padding:60px 0;} }

  .text-soft{ color:var(--text-soft);}

  /* ---------- buttons ---------- */
  .btn{ display:inline-flex; align-items:center; gap:9px; padding:13px 24px; border-radius:999px; font-weight:600; font-size:16px; border:1.5px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease; white-space:nowrap; text-decoration:none;}
  .btn:hover{ transform:translateY(-1px);}
  .btn svg{ width:18px; height:18px;}
  .btn--accent{ background:var(--accent); color:#fff; box-shadow:0 10px 24px -10px rgba(236,101,28,.55);}
  .btn--accent:hover{ background:var(--accent-deep);}
  .btn--blue{ background:var(--blue); color:#06313e;}
  .btn--blue:hover{ filter:brightness(0.95);}
  .btn--outline{ background:transparent; border-color:#b8bfc2; color:var(--text);}
  .btn--outline:hover{ border-color:var(--blue);}
  .btn--ghost-light{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.4); color:#fff;}
  .btn--ghost-light:hover{ background:rgba(255,255,255,.2);}
  .btn--sm{ padding:9px 14px; font-size:16px; min-width:130px; justify-content:center;}
  .btn-row{ display:flex; gap:14px; flex-wrap:wrap;}

  /* ---------- topbar & header ---------- */
  .topbar{ background:var(--blue-ink); color:#dff5fa; font-size:16px;}
  .topbar .wrap{ display:flex; justify-content:space-between; align-items:center; padding:8px 12px; gap:12px; flex-wrap:wrap;}
  .topbar a{ text-decoration:none; opacity:.92;}
  .topbar-links{ display:flex; gap:18px; flex-wrap:wrap;}
  .topbar-links span{ opacity:.7;}
  .topbar a img{ display:none;}
  @media (max-width:640px){
    .topbar .wrap{ flex-direction:column; padding:12px; gap:10px;}
    .topbar-links{ width:100%; justify-content:center; gap:10px;}
    .topbar-links span{ opacity:1; font-weight:700; font-size:14.5px; text-align:center;}
    .topbar a{ display:flex; align-items:center; opacity:1;}
    .topbar a img{ display:block; width:154px; height:49px; object-fit:cover;}
    .topbar a .topbar-btn-text{ display:none;}
  }

  .site-header{ position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); transition:box-shadow .2s ease;}
  .site-header.scrolled{ box-shadow:var(--shadow-md);}
  .header-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0;}
  @media (max-width:640px){ .site-header .wrap{ padding-left:20px;} }
  .logo{ display:flex; align-items:center; gap:11px; text-decoration:none;}
  .logo-img{ height:56px; width:auto; display:block;}
  .logo-mark{ position:relative; width:40px; height:40px; border-radius:11px; background:linear-gradient(150deg, var(--blue), var(--blue-ink)); display:flex; align-items:center; justify-content:center; flex:none;}
  .logo-mark .lamp{ position:absolute; top:6px; right:6px;}
  .logo-mark svg{ width:22px; height:22px; stroke:#fff;}
  .logo-text{ line-height:1.15;}
  .logo-text b{ display:block; font-size:19px; font-weight:800; letter-spacing:.01em;}
  .logo-text span{ display:block; font-size:11.5px; color:var(--text-soft); letter-spacing:.03em;}

  .nav{ display:flex; align-items:center; gap:2px; flex-wrap:wrap; row-gap:6px;}
  .nav > li{ position:relative; flex:none;}
  .nav-link{ display:flex; align-items:center; gap:5px; padding:10px 10px; font-weight:600; font-size:17px; text-decoration:none; color:var(--text); border-radius:999px; cursor:pointer; background:none; border:none; white-space:nowrap;}
  .nav-link:hover, .nav-link.is-active{ color:var(--blue-ink); background:var(--surface-tint);}
  .nav-link .car{ width:9px; height:9px; transition:transform .18s ease;}
  li.has-dd:hover .car, li.has-dd.open .car{ transform:rotate(180deg);}

  .dd{ position:absolute; top:100%; left:0; margin-top:8px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:10px; min-width:250px; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .16s ease, transform .16s ease, visibility .16s; z-index:80;}
  li.has-dd:hover .dd, li.has-dd.open .dd{ opacity:1; visibility:visible; transform:translateY(0);}
  .dd a{ display:flex; align-items:center; gap:10px; text-decoration:none; padding:10px 12px; border-radius:var(--radius-sm); font-size:14.5px; font-weight:600; color:var(--text); position:relative;}
  .dd a:hover{ background:var(--surface-tint); color:var(--blue-ink);}
  .dd li{ position:relative;}
  .dd .sub{ position:absolute; left:100%; top:-10px; margin-left:8px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:10px; min-width:220px; opacity:0; visibility:hidden; transform:translateX(6px); transition:opacity .16s ease, transform .16s ease;}
  .dd li:hover .sub{ opacity:1; visibility:visible; transform:translateX(0);}
  .dd .has-sub > a::after{ content:"›"; margin-left:auto; font-weight:700; color:var(--text-faint);}

  .header-actions{ display:flex; align-items:center; gap:10px;}
  .icon-btn{ width:40px; height:40px; border-radius:50%; border:1px solid var(--border); background:var(--surface); display:flex; align-items:center; justify-content:center; cursor:pointer;}
  .icon-btn svg{ width:19px; height:19px;}
  .burger{ display:none; }

  /* ---------- mobile nav ---------- */
  .mnav-scrim{ position:fixed; inset:0; background:rgba(10,20,24,.5); opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease; z-index:90;}
  .mnav{ position:fixed; top:0; right:0; height:100%; width:min(340px,86vw); background:var(--surface); z-index:95; transform:translateX(100%); transition:transform .25s ease; padding:20px; overflow-y:auto; border-left:1px solid var(--border);}
  body.mnav-open .mnav-scrim{ opacity:1; visibility:visible;}
  body.mnav-open .mnav{ transform:translateX(0);}
  .mnav-close{ margin-left:auto; display:block; width:36px;height:36px;border-radius:50%;border:1px solid var(--border); background:var(--surface-alt); font-size:18px; cursor:pointer;}
  .mnav details{ border-bottom:1px solid var(--border); padding:6px 0;}
  .mnav summary{ list-style:none; display:flex; justify-content:space-between; align-items:center; padding:10px 4px; font-weight:700; cursor:pointer;}
  .mnav summary::-webkit-details-marker{display:none;}
  .mnav a{ text-decoration:none; display:block; padding:9px 4px; color:var(--text); font-weight:600;}
  .mnav .m-sub{ padding-left:14px;}
  .mnav .m-sub2{ padding-left:26px; font-weight:500; font-size:14.5px;}
  .mnav-cta{ margin-top:16px; display:flex; flex-direction:column; gap:10px;}

  /* ---------- hero ---------- */
  .hero{ position:relative; overflow:hidden; color:#fff;}
  .hero-track{ position:relative; height:min(620px,88vh);}
  .hero-slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .7s ease; display:flex; align-items:center;}
  .hero-slide.active{ opacity:1; visibility:visible;}
  .hero-slide.s1{ background:radial-gradient(1100px 700px at 82% -10%, rgba(255,255,255,.16), transparent 60%), linear-gradient(100deg, rgba(13,88,113,.92) 0%, rgba(21,123,154,.75) 45%, rgba(31,163,198,.35) 100%), url("../images/slider/slider-1.png"); background-size:auto, auto, cover; background-position:center, center, center; background-repeat:no-repeat, no-repeat, no-repeat;}
  .hero-slide.s2{ background:radial-gradient(1100px 700px at 12% 110%, rgba(255,255,255,.14), transparent 60%), linear-gradient(100deg, rgba(10,70,87,.92) 0%, rgba(13,88,113,.75) 45%, rgba(33,150,184,.35) 100%), url("../images/slider/slider-2.png"); background-size:auto, auto, cover; background-position:center, center, center; background-repeat:no-repeat, no-repeat, no-repeat;}
  .hero-content{ position:relative; z-index:2; max-width:800px; padding:40px 0; margin-left:auto; margin-right:auto;}
  .hero-kicker{ display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); padding:7px 14px 7px 10px; border-radius:999px; margin-bottom:20px;}
  .hero-content h1{ color:#fff; font-size:clamp(30px,4.4vw,50px); line-height:1.18; margin-bottom:16px;}
  .hero-content p{ color:rgba(255,255,255,.86); font-size:17.5px; max-width:600px; margin-bottom:28px;}
  .hero-ecg{ position:absolute; right:-2%; bottom:0; width:56%; max-width:640px; opacity:.5;}
  .hero-nav{ position:absolute; z-index:3; bottom:26px; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:0 12px;}
  .hero-dots{ display:flex; gap:8px; margin:0 auto;}
  .hero-dots button{ width:26px; height:5px; border-radius:4px; border:none; background:rgba(255,255,255,.35); cursor:pointer; padding:0;}
  .hero-dots button.active{ background:#fff;}
  .hero-arrows{ position:absolute; z-index:3; top:50%; left:50%; width:100%; max-width:100%; display:flex; justify-content:space-between; transform:translate(-50%,-50%); padding:0 12px; box-sizing:border-box; pointer-events:none;}
  @media (min-width:576px){ .hero-arrows{max-width:540px;} }
  @media (min-width:768px){ .hero-arrows{max-width:720px;} }
  @media (min-width:992px){ .hero-arrows{max-width:960px;} }
  @media (min-width:1200px){ .hero-arrows{max-width:1140px;} }
  @media (min-width:1400px){ .hero-arrows{max-width:1320px;} }
  .hero-arrows button{ pointer-events:auto; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.32); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;}
  .hero-arrows button:hover{ background:rgba(255,255,255,.26);}
  .hero-arrows svg{ width:20px; height:20px;}
  .hero-arrows-m{ display:none;}
  @media (max-width:720px){
    .hero-arrows{ display:none;}
    .hero-dots{ display:none;}
    .hero-arrows-m{ display:flex; gap:10px; margin:0 auto;}
    .hero-arrows-m button{ width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.32); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;}
    .hero-arrows-m button:hover{ background:rgba(255,255,255,.26);}
    .hero-arrows-m svg{ width:18px; height:18px;}
  }

  /* ---------- stats ---------- */
  .stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-top:44px;}
  .stat{ background:var(--surface); padding:26px 20px; text-align:center;}
  .stat b{ display:block; font-size:clamp(26px,3vw,34px); color:var(--blue-ink); font-variant-numeric:tabular-nums;}
  .stat span{ font-size:13.5px; color:var(--text-soft);}
  @media (max-width:720px){ .stat-row{ grid-template-columns:repeat(2,1fr);} }

  /* ---------- about split ---------- */
  .split{ display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center;}
  @media (max-width:880px){ .split{ grid-template-columns:1fr;} }
  .art-panel{ position:relative; border-radius:22px; overflow:hidden; aspect-ratio:5/4; background:linear-gradient(155deg, var(--surface-tint), var(--surface-alt)); border:1px solid var(--border);}
  .art-panel .lamp-grid{ opacity:.4;}
  .art-badge{ position:absolute; left:22px; bottom:22px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px 18px; box-shadow:var(--shadow-md); display:flex; align-items:center; gap:12px;}
  .art-badge b{ display:block; font-size:20px; color:var(--blue-ink);}
  .art-badge span{ font-size:12.5px; color:var(--text-soft);}
  .art-center-icon{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
  .art-center-icon svg{ width:34%; height:34%; stroke:var(--blue); opacity:.55;}
  .art-panel-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}

  /* thailand map with region pins */
  .thai-map-wrap{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; background:#fff;}
  .thai-map{ position:relative; width:calc(100% * 340 / 606.91); aspect-ratio:340/606.91; flex:none;}
  .thai-map-svg{ position:absolute; inset:0; width:100%; height:100%;}
  .map-pin{ position:absolute; display:flex; align-items:center; gap:6px; transform:translate(-50%,-50%);}
  .map-pin-dot{ position:relative; width:10px; height:10px; border-radius:50%; background:var(--blue); flex:none; box-shadow:0 0 0 4px color-mix(in srgb, var(--blue) 22%, transparent);}
  .map-pin-dot::after{ content:""; position:absolute; inset:-6px; border-radius:50%; background:color-mix(in srgb, var(--blue) 45%, transparent); animation:mapPulse 2s ease-out infinite;}
  .map-pin-label{ font-size:11.5px; font-weight:700; color:var(--blue-ink); white-space:nowrap; background:rgba(255,255,255,.92); padding:3px 8px; border-radius:999px; box-shadow:var(--shadow);}
  @keyframes mapPulse{ 0%{ transform:scale(.6); opacity:.8;} 100%{ transform:scale(1.8); opacity:0;} }

  .feat-list{ display:flex; flex-direction:column; gap:14px; margin-top:22px;}
  .feat-list li{ display:flex; gap:12px; align-items:flex-start; font-size:15.5px;}
  .feat-list .ico{ width:26px; height:26px; border-radius:8px; background:var(--surface-tint); display:flex; align-items:center; justify-content:center; flex:none; margin-top:1px;}
  .feat-list svg{ width:15px; height:15px; stroke:var(--blue-ink);}

  /* ---------- cards / grids ---------- */
  .grid{ display:grid; gap:26px;}
  .grid-3{ grid-template-columns:repeat(3,1fr);}
  .grid-4{ grid-template-columns:repeat(4,1fr);}
  .grid-2{ grid-template-columns:repeat(2,1fr);}
  @media (max-width:960px){ .grid-4{ grid-template-columns:repeat(2,1fr);} .grid-3{ grid-template-columns:repeat(2,1fr);} }
  @media (max-width:600px){ .grid-4,.grid-3,.grid-2{ grid-template-columns:1fr;} }

  .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px; transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;}
  a.card{ display:block; text-decoration:none;}
  .card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:color-mix(in srgb, var(--blue) 40%, var(--border));}
  .card .ico-tile{ width:48px; height:48px; border-radius:13px; background:var(--surface-tint); display:flex; align-items:center; justify-content:center; margin-bottom:18px; transition:background .2s ease; overflow:hidden;}
  .card .ico-tile img{ width:100%; height:100%; object-fit:cover;}
  .card:hover .ico-tile{ background:var(--blue); }
  .card:hover .ico-tile svg{ stroke:#fff;}
  .card .ico-tile svg{ width:24px; height:24px; stroke:var(--blue-ink); transition:stroke .2s ease;}
  .card h3{ font-size:18px; margin-bottom:8px;}
  .card p{ color:var(--text-soft); font-size:14.8px;}
  .more{ display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-weight:700; font-size:14px; color:var(--blue-ink); text-decoration:none;}
  .more svg{ width:14px; height:14px; transition:transform .18s ease;}
  .card:hover .more svg, .more:hover svg{ transform:translateX(3px);}

  .solution-card{ display:grid; grid-template-columns:40% 1fr; gap:22px; padding:15px; align-items:start;}
  a.solution-card{ display:grid;}
  .solution-card .ico-tile{ width:100%; aspect-ratio:1; height:auto; margin-bottom:0;}
  @media (max-width:560px){ .solution-card{ grid-template-columns:1fr;} a.solution-card{ display:grid;} }

  /* certificate badges */
  .cert-tabs{ display:flex; justify-content:center; gap:10px; margin-bottom:30px; flex-wrap:wrap;}
  .cert-tab{ padding:11px 26px; border-radius:999px; border:1.5px solid #c2c8ca; background:transparent; color:var(--text-soft); font-family:inherit; font-size:16px; font-weight:700; cursor:pointer; transition:background-color .15s ease, color .15s ease, border-color .15s ease;}
  .cert-tab:hover{ border-color:var(--blue);}
  .cert-tab.is-active{ background:var(--blue); border-color:var(--blue); color:#fff;}
  .cert-panel{ display:none;}
  .cert-panel.is-active{ display:block;}
  .cert-card{ text-align:center; padding:30px 20px;}
  .cert-seal{ width:200px; /* height:64px; */ margin:0 auto 16px; border-radius:12px; border:2px solid var(--blue); position:relative; display:flex; align-items:center; justify-content:center;}
  .cert-seal::before{ content:""; position:absolute; inset:6px; border:1px dashed color-mix(in srgb, var(--blue) 55%, transparent); border-radius:8px;}
  .cert-seal svg{ width:26px; height:26px; stroke:var(--blue-ink);}
  .cert-seal img{ width:100%; height:100%; border-radius:10px; object-fit:cover; position:relative; z-index:1;}
  .cert-card b{ display:block; font-size:15.5px; margin-bottom:4px;}
  .cert-card span{ font-size:13px; color:var(--text-soft);}
  .cert-note{ margin-top:30px; font-size:13.5px; color:var(--text-faint); text-align:center;}

  /* service area */
  .area-band{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px;}
  .area-chip{ display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); padding:10px 18px; border-radius:999px; font-weight:600; font-size:14.5px;}
  .area-chip svg{ width:15px; height:15px; stroke:var(--blue-deep);}

  /* portfolio */
  .work-card{ display:block; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); background:var(--surface); text-decoration:none; transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;}
  .work-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:color-mix(in srgb, var(--blue) 40%, var(--border));}
  .work-thumb{ aspect-ratio:3/2; position:relative; display:flex; align-items:center; justify-content:center;}
  .work-thumb svg{ width:30%; height:30%; stroke:#fff; opacity:.85;}
  .work-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  .work-thumb .tag{ position:absolute; top:14px; left:14px; background:rgba(13,88,113,.55); backdrop-filter:blur(4px); color:#fff; font-size:12px; font-weight:700; padding:5px 12px; border-radius:999px;}
  .work-body{ padding:20px 22px 24px;}
  .work-body b{ display:block; font-size:16.5px; margin-bottom:4px;}
  .work-body b a{ text-decoration:none; color:inherit;}
  .work-body b a:hover{ color:var(--blue-deep);}
  .work-body span{ font-size:13.5px; color:var(--text-soft);}

  /* CTA band */
  .cta-band{ position:relative; border-radius:26px; overflow:hidden; padding:56px 44px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; background:linear-gradient(120deg,#0d5871,#1c96b8); color:#fff;}
  .cta-band h2{ color:#fff; font-size:clamp(22px,2.6vw,30px); margin-bottom:8px;}
  .cta-band p{ color:rgba(255,255,255,.85); max-width:460px;}

  /* steps */
  .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:step; margin-top:10px;}
  @media (max-width:880px){ .steps{ grid-template-columns:repeat(2,1fr);} }
  @media (max-width:520px){ .steps{ grid-template-columns:1fr;} }
  .step{ position:relative; padding:28px 22px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface);}
  .step-num{ font-size:34px; font-weight:800; color:var(--surface-alt); -webkit-text-stroke:1.5px var(--blue); font-variant-numeric:tabular-nums; line-height:1;}
  .step h3{ font-size:16.5px; margin:14px 0 6px;}
  .step p{ font-size:14px; color:var(--text-soft);}
  .step-arrow{ position:absolute; right:-30px; top:50%; transform:translateY(-50%); color:var(--text-faint);}
  @media (max-width:880px){ .step-arrow{ display:none;} }

  /* forms */
  .form-panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:34px;}
  .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  @media (max-width:640px){ .form-grid{ grid-template-columns:1fr;} }
  .field{ display:flex; flex-direction:column; gap:7px;}
  .field.full{ grid-column:1/-1;}
  .field label{ font-size:13.5px; font-weight:700; color:var(--text-soft);}
  .field input, .field select, .field textarea{ font-family:inherit; font-size:15px; padding:12px 14px; border-radius:10px; border:1.5px solid var(--border); background:var(--bg); color:var(--text); resize:vertical;}
  .field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--blue); outline:none;}

  .contact-split{ display:grid; grid-template-columns:.9fr 1.1fr; gap:30px;}
  @media (max-width:880px){ .contact-split{ grid-template-columns:1fr;} }
  .info-card{ background:var(--blue-ink); color:#fff; border-radius:var(--radius); padding:30px;}
  .info-card h3{ color:#fff; margin-bottom:18px;}
  .info-row{ display:flex; gap:12px; padding:12px 0; border-top:1px solid rgba(255,255,255,.14); font-size:14.5px;}
  .info-row:first-of-type{ border-top:none;}
  .info-row svg{ width:17px; height:17px; stroke:#8fe0f2; flex:none; margin-top:2px;}
  .info-row b{ display:block; color:#fff;}
  .info-row span{ color:rgba(255,255,255,.78);}

  /* logo cloud */
  .prod-hero-img{ background:linear-gradient(160deg, #f5fafc, #e9f3f7); border:1px solid var(--border); border-radius:18px; display:flex; align-items:center; justify-content:center; padding:34px; align-self:start;}
  .prod-hero-img img{ max-width:100%; height:auto; mix-blend-mode:multiply;}
  .spec-table{ width:100%; border-collapse:collapse; max-width:840px; margin:0 auto; border:1px solid var(--border); border-radius:14px; overflow:hidden;}
  .spec-table th, .spec-table td{ padding:14px 20px; text-align:left; border-bottom:1px solid var(--border); font-size:15px; vertical-align:top;}
  .spec-table th{ width:34%; background:var(--surface-tint); color:var(--blue-ink); font-weight:700;}
  .spec-table td{ color:var(--text-soft);}
  .spec-table tr:last-child th, .spec-table tr:last-child td{ border-bottom:none;}
  @media (max-width:560px){ .spec-table th{ width:42%;} .spec-table th, .spec-table td{ padding:12px 14px; font-size:14px;} }

  .prod-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:36px;}
  @media (max-width:900px){ .prod-grid{ grid-template-columns:repeat(2,1fr);} }
  @media (max-width:520px){ .prod-grid{ grid-template-columns:1fr;} }
  .prod-card{ display:flex; flex-direction:column; border:1px solid var(--border); border-radius:18px; background:var(--surface); overflow:hidden; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
  .prod-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb, var(--blue) 45%, var(--border));}
  .prod-thumb{ aspect-ratio:1/1; background:linear-gradient(160deg, #f5fafc, #e9f3f7); display:flex; align-items:center; justify-content:center; padding:26px; border-bottom:1px solid var(--border);}
  .prod-thumb img{ max-width:100%; max-height:100%; object-fit:contain; mix-blend-mode:multiply; transition:transform .35s ease;}
  .prod-card:hover .prod-thumb img{ transform:scale(1.06);}
  .prod-body{ padding:20px 20px 24px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; flex:1;}
  .prod-body h3{ font-size:16.5px; line-height:1.4; margin:0;}
  .prod-body h3 a{ text-decoration:none; color:inherit; transition:color .15s ease;}
  .prod-body h3 a:hover{ color:var(--blue-deep);}
  .prod-body span{ display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.02em; color:var(--blue-ink); background:var(--surface-tint); padding:4px 13px; border-radius:999px;}

  .cloud-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; margin-top:30px;}
  @media (max-width:720px){ .cloud-grid{ grid-template-columns:repeat(3,1fr);} }
  .cloud-tile{ border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); padding:20px 14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; min-height:110px;}
  .cloud-tile img{ max-width:70%; max-height:60px; object-fit:contain;}
  .cloud-tile svg{ width:26px; height:26px; stroke:var(--text-faint);}
  .cloud-tile span{ font-size:13px; font-weight:700; color:var(--text-soft);}

  /* faq */
  .faq{ max-width:820px; margin:0 auto;}
  .faq-item{ border-bottom:1px solid var(--border);}
  .faq-item button{ width:100%; text-align:left; background:none; border:none; padding:20px 4px; display:flex; justify-content:space-between; align-items:center; gap:16px; cursor:pointer; font-size:16px; font-weight:700; color:var(--text);}
  .faq-item .plus{ width:22px; height:22px; border-radius:50%; border:1.5px solid var(--blue); flex:none; position:relative;}
  .faq-item .plus::before,.faq-item .plus::after{ content:""; position:absolute; background:var(--blue); left:50%; top:50%; transform:translate(-50%,-50%);}
  .faq-item .plus::before{ width:9px; height:1.6px;}
  .faq-item .plus::after{ width:1.6px; height:9px; transition:transform .18s ease, opacity .18s ease;}
  .faq-item.open .plus::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0;}
  .faq-panel{ max-height:0; overflow:hidden; transition:max-height .25s ease;}
  .faq-panel p{ padding:0 4px 20px; color:var(--text-soft); font-size:15px; max-width:680px;}

  /* breadcrumb */
  .breadcrumb{ display:flex; gap:8px; align-items:center; font-size:13.5px; color:var(--text-faint); margin-bottom:16px;}
  .breadcrumb a{ text-decoration:none; color:var(--text-faint); font-weight:600;}
  .breadcrumb a:hover{ color:var(--blue-ink);}
  .page-hero{ padding:52px 0 44px; border-bottom:1px solid var(--border); background:var(--surface-tint);}
  .page-hero h1{ font-size:clamp(28px,3.6vw,40px);}
  .page-hero p{ color:var(--text-soft); margin-top:10px; /* max-width:640px; */ font-size:16px;}

  /* products */
  .prod-detail{ margin-top:64px; padding-top:56px; border-top:1px solid var(--border);}
  .back-link{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14.5px; color:var(--blue-ink); text-decoration:none; margin-bottom:26px; cursor:pointer; background:none; border:none; padding:0;}
  .back-link svg{ width:16px; height:16px;}

  /* news */
  .news-card{ padding:0; overflow:hidden;}
  .news-thumb{ aspect-ratio:3/2; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden;}
  .news-thumb svg{ width:26%; height:26%; stroke:#fff; opacity:.85;}
  .news-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  .news-body{ padding:20px 22px 24px;}
  .news-card .meta{ display:flex; gap:10px; font-size:12.5px; color:var(--text-faint); margin-bottom:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;}

  /* pagination */
  .pagination{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:44px;}
  .pagination a, .pagination span{ display:flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 4px; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--text); font-weight:700; font-size:14.5px; text-decoration:none; cursor:pointer;}
  .pagination a:hover{ border-color:var(--blue); color:var(--blue-ink);}
  .pagination .is-active{ background:var(--blue-ink); border-color:var(--blue-ink); color:#fff;}
  .pagination .dots{ border:none; background:none; color:var(--text-faint); cursor:default;}
  .pagination .arrow svg{ width:16px; height:16px;}
  .pagination .arrow[aria-disabled="true"]{ opacity:.4; pointer-events:none;}

  /* article detail */
  .article-banner{ aspect-ratio:7/4; border-radius:var(--radius); overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center; margin:0 auto 34px; max-width:920px;}
  .article-banner svg{ width:15%; height:15%; stroke:#fff; opacity:.85;}
  .article-meta{ display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--text-faint); margin-bottom:14px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;}
  .article-body{ max-width:920px; margin:0 auto;}
  .article-body p{ color:var(--text-soft); font-size:16px; margin-bottom:18px;}
  .article-body h2{ font-size:22px; margin:32px 0 14px;}

  /* gallery */
  .gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:20px 0 30px;}
  .gallery-item{ aspect-ratio:4/3; border-radius:var(--radius-sm); overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center; border:none; padding:0; cursor:pointer;}
  .gallery-item svg{ width:26%; height:26%; stroke:#fff; opacity:.85; pointer-events:none;}
  .gallery-item::after{ content:""; position:absolute; inset:0; background:rgba(9,20,25,.5); opacity:0; transition:opacity .2s ease;}
  .gallery-item .zoom-ico{ position:absolute; z-index:2; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.45); display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.8); transition:opacity .2s ease, transform .2s ease; pointer-events:none;}
  .gallery-item .zoom-ico svg{ width:20px; height:20px; stroke:#fff; opacity:1;}
  .gallery-item:hover::after, .gallery-item:hover .zoom-ico{ opacity:1;}
  .gallery-item:hover .zoom-ico{ transform:scale(1);}
  @media (max-width:640px){ .gallery{ grid-template-columns:repeat(2,1fr);} }

  /* lightbox */
  .lightbox{ position:fixed; inset:0; background:rgba(5,10,13,.95); z-index:200; opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:16px 26px; overflow-y:auto;}
  .lightbox.show{ opacity:1; visibility:visible;}
  .lightbox-top{ position:absolute; top:16px; left:24px; right:24px; display:flex; align-items:center; justify-content:space-between; color:#fff; z-index:2; pointer-events:none;}
  .lightbox-top > *{ pointer-events:auto;}
  .lightbox-count{ font-size:14px; font-weight:700; opacity:.85; font-variant-numeric:tabular-nums;}
  .lightbox-tools{ display:flex; gap:10px;}
  .lightbox-tool{ width:40px; height:40px; border-radius:10px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;}
  .lightbox-tool:hover{ background:rgba(255,255,255,.18);}
  .lightbox-tool svg{ width:18px; height:18px;}
  .lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:none; background:transparent; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;}
  .lightbox-nav:hover{ background:rgba(255,255,255,.12);}
  .lightbox-nav.prev{ left:14px;}
  .lightbox-nav.next{ right:14px;}
  .lightbox-nav svg{ width:26px; height:26px;}
  .lightbox-stage{ width:min(1400px, 100%, calc((100vh - 195px) * 1.6)); aspect-ratio:16/10; border-radius:6px; overflow:hidden; display:flex; align-items:center; justify-content:center; box-shadow:0 20px 60px rgba(0,0,0,.5); flex:none;}
  .lightbox-stage svg{ width:16%; height:16%; stroke:#fff; opacity:.9;}
  .lightbox-caption{ color:#fff; font-size:15px; font-weight:600; margin-top:20px; text-align:center;}
  .lightbox-thumbs{ display:flex; gap:10px; margin-top:14px; max-width:100%; overflow-x:auto; padding-bottom:4px;}
  .lightbox-thumb{ flex:none; width:76px; height:56px; border-radius:6px; border:2px solid transparent; padding:0; opacity:.5; cursor:pointer; transition:opacity .15s ease, border-color .15s ease;}
  .lightbox-thumb:hover{ opacity:.85;}
  .lightbox-thumb.is-active{ opacity:1; border-color:#fff;}
  .lightbox-gridview{ position:absolute; inset:0; background:rgba(5,10,13,.98); display:none; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; padding:70px; overflow-y:auto;}
  .lightbox-gridview.show{ display:grid;}
  .lightbox-grid-item{ aspect-ratio:4/3; border-radius:8px; border:none; padding:0; cursor:pointer; opacity:.85; transition:opacity .15s ease;}
  .lightbox-grid-item:hover{ opacity:1;}
  body.lightbox-open{ overflow:hidden;}
  @media (max-width:720px){
    .lightbox{ padding:60px 14px 16px;}
    .lightbox-nav{ width:36px; height:36px;}
    .lightbox-nav svg{ width:20px; height:20px;}
    .lightbox-thumb{ width:56px; height:42px;}
  }

  /* map */
  .map-shell{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); aspect-ratio:16/10; position:relative; background:
      linear-gradient(var(--border) 1px, transparent 1px) 0 0/34px 34px,
      linear-gradient(90deg, var(--border) 1px, transparent 1px) 0 0/34px 34px,
      var(--surface-alt);}
  .map-pin{ position:absolute; left:52%; top:44%; transform:translate(-50%,-100%); text-align:center;}
  .map-pin svg{ width:38px; height:38px; stroke:var(--accent); fill:none;}
  .map-pin b{ display:block; background:var(--surface); border:1px solid var(--border); padding:6px 12px; border-radius:8px; font-size:12.5px; margin-top:2px; box-shadow:var(--shadow);}
  .map-link{ position:absolute; right:14px; bottom:14px;}

  /* footer */
  .site-footer{ background:var(--blue-ink); color:#dff5fa; padding:64px 0 0;}
  .foot-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:20px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.14);}
  @media (max-width:880px){ .foot-grid{ grid-template-columns:1fr 1fr;} }
  @media (max-width:560px){ .foot-grid{ grid-template-columns:1fr;} }
  .site-footer h4{ color:#fff; font-size:18px; letter-spacing:.04em; text-transform:uppercase; margin-bottom:18px;}
  .site-footer .logo b, .site-footer .logo span{ color:#fff;}
  .site-footer p{ color:rgba(223,245,250,.72); font-size:16px; margin-top:14px; max-width:280px;}
  .site-footer ul{ display:flex; flex-direction:column; gap:11px;}
  .site-footer a{ text-decoration:none; color:rgba(223,245,250,.85); font-size:15.5px;}
  .site-footer a:hover{ color:#fff;}
  .f-contact li{ display:flex; gap:10px; font-size:15.5px; color:rgba(223,245,250,.85);}
  .f-contact svg{ width:16px; height:16px; stroke:#8fe0f2; flex:none; margin-top:3px;}
  .f-contact li i{ color:#8fe0f2; font-size:16px; flex:none; margin-top:4px; width:16px; text-align:center;}
  .foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding:22px 0; font-size:16px; color:rgba(223,245,250,.6); flex-wrap:wrap; gap:10px;}
  .foot-social{ display:flex; gap:10px;}
  .foot-social a{ width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center;}
  .foot-social svg{ width:16px; height:16px; stroke:#fff;}
  .foot-social a i{ color:#fff; font-size:18px; line-height:1;}
  .foot-social a:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.5);}

  /* toast + to-top */
  .toast{ position:fixed; left:50%; bottom:28px; transform:translate(-50%,140%); background:var(--blue-ink); color:#fff; padding:14px 22px; border-radius:999px; font-weight:700; font-size:14.5px; box-shadow:var(--shadow-lg); transition:transform .3s ease; z-index:200; display:flex; align-items:center; gap:10px;}
  .toast.show{ transform:translate(-50%,0);}
  .to-top{ position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:50%; background:var(--blue-ink); color:#fff; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; visibility:hidden; transform:translateY(10px); transition:all .2s ease; z-index:70; box-shadow:var(--shadow-md);}
  .to-top.show{ opacity:1; visibility:visible; transform:translateY(0);}
  .to-top svg{ width:20px; height:20px;}

  .quick-dock{ position:fixed; left:0; bottom:24px; z-index:70; display:flex; flex-direction:column; gap:10px; padding-left:14px;}
  .quick-dock a{ width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); color:#fff;}
  .quick-dock svg{ width:22px; height:22px;}
  .quick-dock .qc{ background:var(--accent);}
  .quick-dock .ql{ background:#06c755;}
  @media (max-width:720px){ .quick-dock{ display:none;} }

  @media (max-width:960px){
    .nav, .header-actions .btn{ display:none;}
    .burger{ display:flex; width:42px; height:42px; border-radius:10px; border:1px solid var(--border); background:var(--surface); align-items:center; justify-content:center; cursor:pointer;}
  }