/* ============================================================
   wansuk.com — Making Work, Simply Better.
   Blue tone + glassmorphism design system
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --navy-900:#0a2a63;
  --navy-800:#0d3a80;
  --blue-700:#0f5ccd;
  --blue-600:#1a73e8;
  --blue-500:#3b93f7;
  --sky-400:#69b5fb;
  --sky-300:#a7d7ff;
  --sky-100:#e6f4ff;

  --ink:#12305c;
  --ink-soft:#40618f;
  --ink-mute:#6d88ad;

  --page-1:#f2fbff;
  --page-2:#dff0ff;
  --page-3:#cfe6fb;

  /* glass */
  --glass-bg:rgba(255,255,255,.55);
  --glass-bg-strong:rgba(255,255,255,.72);
  --glass-bd:rgba(255,255,255,.75);
  --glass-bd-soft:rgba(255,255,255,.55);
  --glass-blur:blur(20px) saturate(150%);
  --shadow-sm:0 6px 18px -8px rgba(12,58,128,.28);
  --shadow-md:0 18px 40px -22px rgba(12,58,128,.45);
  --shadow-lg:0 34px 70px -34px rgba(10,42,99,.55);

  --r-sm:12px;
  --r-md:18px;
  --r-lg:26px;
  --r-xl:34px;
  --r-pill:999px;

  --wrap:1180px;
  --nav-h:76px;

  --ff-en:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ff-th:"Noto Sans Thai","Plus Jakarta Sans",system-ui,"Segoe UI",sans-serif;
  --ff-script:"Caveat",cursive;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 18px);-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--ff-th);
  font-size:16px;
  line-height:1.7;
  color:var(--ink);
  background:var(--page-2);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;line-height:1.25;letter-spacing:-.01em;color:var(--navy-900)}
p{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--blue-500);outline-offset:3px;border-radius:6px}

.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.en{font-family:var(--ff-en)}
.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}

/* ---------- 3. Page background (aurora + mountains) ---------- */
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;
  background:linear-gradient(180deg,var(--page-1) 0%,var(--page-2) 34%,var(--page-3) 62%,#e8f5ff 100%)}
.bg::before{ /* aurora glow */
  content:"";position:absolute;inset:-25% -10% auto -10%;height:120vh;
  background:
    radial-gradient(48% 38% at 18% 12%,rgba(255,255,255,.95),transparent 70%),
    radial-gradient(42% 34% at 78% 6%,rgba(150,208,255,.75),transparent 72%),
    radial-gradient(38% 30% at 50% 30%,rgba(92,167,246,.35),transparent 75%);
  filter:blur(10px);
}
.bg__mountains{position:absolute;left:0;right:0;width:100%;top:clamp(130px,13vw,260px);height:clamp(230px,25vw,460px);opacity:.5}
.bg__orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;animation:float 18s ease-in-out infinite}
.bg__orb--1{width:420px;height:420px;top:-80px;right:-60px;background:radial-gradient(circle,#9ed3ff,transparent 65%)}
.bg__orb--2{width:520px;height:520px;top:46%;left:-140px;background:radial-gradient(circle,#c9e6ff,transparent 68%);animation-delay:-6s}
.bg__orb--3{width:380px;height:380px;bottom:-60px;right:-40px;background:radial-gradient(circle,#b7defd,transparent 66%);animation-delay:-11s}
@keyframes float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-26px,0)}}

/* ---------- 4. Glass primitives ---------- */
.glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-bd);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-md),inset 0 1px 0 rgba(255,255,255,.85);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
}
.glass--strong{background:var(--glass-bg-strong)}
/* top-left sheen that sells the "clear glass" look */
.sheen{position:relative;overflow:hidden;isolation:isolate}
.sheen::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,.18) 32%,rgba(255,255,255,0) 58%);
}

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:var(--r-pill);
  font-weight:600;font-size:15px;line-height:1;cursor:pointer;border:1px solid transparent;
  transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s,background .25s;
}
.btn svg{width:18px;height:18px;transition:transform .25s}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translateX(4px)}
.btn--primary{
  background:linear-gradient(135deg,var(--blue-600),var(--blue-700));
  color:#fff;box-shadow:0 14px 30px -12px rgba(15,92,205,.75);
}
.btn--primary:hover{box-shadow:0 20px 38px -14px rgba(15,92,205,.85)}
.btn--glass{
  background:var(--glass-bg-strong);border-color:var(--glass-bd);color:var(--navy-800);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--shadow-sm);
}
.btn--glass:hover{background:rgba(255,255,255,.9)}
.btn--ghost{padding:11px 20px;background:rgba(255,255,255,.5);border-color:var(--glass-bd-soft);color:var(--blue-700);font-size:14px}
.btn--ghost:hover{background:#fff}
.link-more{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--blue-700);transition:gap .25s}
.link-more svg{width:16px;height:16px}
.link-more:hover{gap:14px}

/* ---------- 6. Header ---------- */
.header{position:sticky;top:0;z-index:50;padding:14px 0;transition:padding .3s}
.header::before{content:"";position:absolute;inset:0;background:rgba(238,248,255,0);transition:background .3s,backdrop-filter .3s,box-shadow .3s;pointer-events:none}
.header.is-stuck{padding:8px 0}
.header.is-stuck::before{background:rgba(238,248,255,.72);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:0 10px 30px -22px rgba(10,42,99,.7)}
.header__inner{position:relative;display:flex;align-items:center;gap:24px;min-height:calc(var(--nav-h) - 20px)}

.brand{display:flex;align-items:center;gap:12px}
.brand__mark{width:46px;height:46px;flex:none;display:block;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(26,115,232,.35))}
.brand__text{display:flex;flex-direction:column;line-height:1.05}
.brand__th{font-size:22px;font-weight:700;color:var(--navy-800)}
.brand__en{font-family:var(--ff-en);font-size:12px;letter-spacing:.06em;color:var(--ink-mute)}

.nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav a{position:relative;padding:10px 16px;border-radius:var(--r-pill);font-size:15px;font-weight:500;color:var(--ink-soft);transition:color .2s,background .2s}
.nav a::after{content:"";position:absolute;left:50%;bottom:4px;width:0;height:2px;border-radius:2px;background:var(--blue-600);transform:translateX(-50%);transition:width .25s}
.nav a:hover{color:var(--navy-800);background:rgba(255,255,255,.55)}
.nav a.is-active{color:var(--navy-800);font-weight:600}
.nav a.is-active::after{width:26px}


.burger{display:none;width:44px;height:44px;border:1px solid var(--glass-bd);border-radius:14px;background:var(--glass-bg-strong);backdrop-filter:var(--glass-blur);cursor:pointer;place-items:center}
.burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--navy-800);box-shadow:0 -6px 0 var(--navy-800),0 6px 0 var(--navy-800);transition:.25s}
.burger[aria-expanded="true"] span{box-shadow:none;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{content:"";display:block;width:18px;height:2px;background:var(--navy-800);transform:rotate(-90deg)}

/* ---------- 7. Hero ---------- */
.hero{position:relative;padding:28px 0 70px}

/* --- the glass stage that carries the whole hero --- */
.stage{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:44px;
  padding:24px clamp(20px,3.4vw,46px) 24px;
  background:rgba(255,255,255,.38);
  border:1px solid rgba(255,255,255,.82);
  box-shadow:0 46px 90px -48px rgba(10,42,99,.55),inset 0 1px 0 rgba(255,255,255,.95);
}

/* aurora ribbons drifting under the glass */
.stage__aurora{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;pointer-events:none}
.aur{position:absolute;border-radius:50%;filter:blur(50px);opacity:.74;will-change:transform}
.aur--sky{width:54%;height:82%;left:-12%;top:-32%;background:radial-gradient(circle at 46% 50%,#7fc4ff,rgba(127,196,255,0) 68%);animation:aurora 24s ease-in-out infinite}
.aur--violet{width:44%;height:72%;left:28%;top:-44%;background:radial-gradient(circle at 50% 50%,#b6a6ff,rgba(182,166,255,0) 68%);animation:aurora 31s ease-in-out infinite reverse;animation-delay:-8s}
.aur--mint{width:50%;height:80%;right:-12%;top:-24%;background:radial-gradient(circle at 50% 50%,#8fe8d6,rgba(143,232,214,0) 68%);animation:aurora 27s ease-in-out infinite;animation-delay:-14s}
.aur--peach{width:46%;height:70%;right:6%;bottom:-36%;background:radial-gradient(circle at 50% 50%,#ffd2a6,rgba(255,210,166,0) 70%);animation:aurora 34s ease-in-out infinite reverse;animation-delay:-5s}
.stage__beam{position:absolute;inset:-40% -30%;
  background:linear-gradient(104deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 62%);
  animation:beam 16s ease-in-out infinite}
@keyframes aurora{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  34%{transform:translate3d(6%,9%,0) scale(1.12)}
  67%{transform:translate3d(-5%,4%,0) scale(.94)}
}
@keyframes beam{0%,100%{transform:translateX(-26%)}50%{transform:translateX(26%)}}

/* --- brand bar inside the stage --- */
.stage__bar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.7);
}
.brand--hero .brand__th{font-size:24px}
.brand--hero .brand__mark{width:50px;height:50px}
.stage__tag{
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-700);
  padding:9px 18px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.88);box-shadow:var(--shadow-sm);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}

/* --- two-column body --- */
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,56px);align-items:center;
  padding:clamp(28px,3.6vw,46px) 0;
}

.eyebrow{
  font-family:var(--ff-en);font-size:13px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--blue-600);margin-bottom:18px;line-height:1.7;
}
.eyebrow span{display:block}

.hero h1{font-family:var(--ff-en);font-size:clamp(40px,5.4vw,66px);font-weight:800;letter-spacing:-.03em;line-height:1.06}
.hero h1 .accent{
  background:linear-gradient(110deg,#3b93f7 0%,#7a8cff 32%,#0f5ccd 64%,#0a2a63 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__lead{margin-top:20px;font-size:18px;color:var(--ink-soft);max-width:38ch}

.hero__points{margin-top:34px;display:flex;flex-wrap:wrap;gap:10px}
.pill{
  display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:var(--r-pill);
  font-size:14.5px;color:var(--ink-soft);
  background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.85);box-shadow:var(--shadow-sm);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.pill svg{width:18px;height:18px;color:var(--blue-600);flex:none}

/* --- right-hand identity stage --- */
.hero__side{position:relative}
.hero__stage{position:relative;width:min(100%,420px);margin-inline:auto;text-align:center}

.mark{position:relative;width:min(100%,216px);aspect-ratio:1;margin:0 auto;display:grid;place-items:center}
.mark__halo{
  position:absolute;inset:-16%;border-radius:50%;
  background:radial-gradient(circle at 50% 44%,rgba(255,255,255,.95),rgba(173,214,255,.42) 46%,rgba(173,214,255,0) 72%);
  filter:blur(6px);
}
.mark__glass{
  position:absolute;inset:12%;border-radius:50%;
  background:linear-gradient(150deg,rgba(255,255,255,.82),rgba(255,255,255,.26) 48%,rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 28px 52px -30px rgba(10,42,99,.6),inset 0 2px 0 rgba(255,255,255,.95);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.mark__ring{position:absolute;inset:4%;border-radius:50%;border:1px solid rgba(120,180,250,.45);animation:spin 26s linear infinite}
.mark__ring::after{
  content:"";position:absolute;top:-4px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;
  background:#7fd8ff;box-shadow:0 0 12px 3px rgba(127,216,255,.85);
}
.mark__ring--2{inset:-7%;border-color:rgba(182,166,255,.42);animation-duration:38s;animation-direction:reverse}
.mark__ring--2::after{background:#c3a8ff;box-shadow:0 0 12px 3px rgba(195,168,255,.8)}
.hero__logo{position:relative;width:116px;height:116px;filter:drop-shadow(0 20px 30px rgba(26,115,232,.36));animation:bob 7s ease-in-out infinite}
.spark{position:absolute;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px rgba(255,255,255,.9);animation:twinkle 4.5s ease-in-out infinite}
.spark--a{top:10%;right:14%}
.spark--b{bottom:14%;left:10%;width:6px;height:6px;animation-delay:-1.6s}
.spark--c{top:46%;left:0;width:5px;height:5px;animation-delay:-3s}

.hero__wordmark{
  margin-top:22px;font-size:40px;font-weight:700;line-height:1.2;
  background:linear-gradient(100deg,#0d3a80,#1a73e8 46%,#7a8cff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__wordmark-sub{margin-top:4px;font-size:15px;color:var(--ink-mute)}
.hero__rule{display:block;width:96px;height:1px;margin:24px auto;background:linear-gradient(90deg,transparent,rgba(58,147,247,.55),transparent)}

.quote{position:relative;max-width:34ch;margin:0 auto}
.quote p{font-size:16.5px;font-weight:500;color:var(--navy-800);line-height:1.9}
.quote .mark-q{font-family:var(--ff-en);font-size:26px;color:var(--sky-400);line-height:0;vertical-align:-4px}

.script{margin-top:30px;font-family:var(--ff-script);font-size:clamp(40px,4.4vw,58px);font-weight:600;line-height:1;
  text-align:right;padding-right:6px;transform:rotate(-5deg);transform-origin:right center;
  background:linear-gradient(100deg,#1a73e8 0%,#7a8cff 46%,#3fc9c2 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 10px 20px rgba(26,115,232,.18))}

/* --- service rail at the foot of the stage --- */
.rail{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding-top:20px;border-top:1px solid rgba(255,255,255,.7);
}
.rail__label{font-size:13px;font-weight:600;color:var(--ink-mute);letter-spacing:.02em}
.rail__pills{display:flex;flex-wrap:wrap;gap:10px}
.rail__pill{
  display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:var(--r-pill);
  font-family:var(--ff-en);font-weight:700;font-size:15px;color:var(--navy-800);
  background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.88);box-shadow:var(--shadow-sm);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:transform .25s cubic-bezier(.2,.8,.3,1),background .25s,box-shadow .25s;
}
.rail__pill small{font-family:var(--ff-th);font-weight:500;font-size:12.5px;color:var(--ink-mute)}
.rail__pill:hover{transform:translateY(-3px);background:rgba(255,255,255,.92);box-shadow:var(--shadow-md)}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.dot--blue{background:linear-gradient(135deg,#69b5fb,#1a73e8)}
.dot--violet{background:linear-gradient(135deg,#c9b4ff,#8b6cf7)}
.dot--pink{background:linear-gradient(135deg,#ffb3d1,#f2578c)}
.dot--amber{background:linear-gradient(135deg,#ffd9a3,#f7961e)}

@keyframes bob{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-9px,0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}

/* ---------- 8. Section headings ---------- */
.section{padding:56px 0}
.section__head{margin-bottom:34px}
.section__head h2{font-size:clamp(26px,3.2vw,36px);font-weight:700}
.section__head p{margin-top:8px;font-size:16px;color:var(--ink-soft)}
.section__head .hl{position:relative;display:inline-block;z-index:0}
.section__head .hl::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:8px;border-radius:4px;background:linear-gradient(90deg,rgba(255,180,80,.55),rgba(255,214,140,.2));z-index:-1}

/* ---------- 9. Feature cards ---------- */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.card{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:18px;padding:26px 26px 24px;border-radius:var(--r-xl);
  transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s,background .35s;
}
.card:hover{transform:translateY(-6px);background:rgba(255,255,255,.7);box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.9)}
.card__body{display:flex;flex-direction:column;min-width:0}
.card__top{display:flex;align-items:center;gap:14px}
.card__icon{width:54px;height:54px;flex:none;border-radius:17px;display:grid;place-items:center;color:#fff;box-shadow:0 12px 24px -12px rgba(12,58,128,.7)}
.card__icon svg{width:27px;height:27px}
.card__title{font-family:var(--ff-en);font-size:27px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.card__title small{display:block;font-family:var(--ff-th);font-size:15px;font-weight:500;color:var(--ink-mute);letter-spacing:0}
.card__desc{margin-top:16px;font-size:15.5px;font-weight:600;color:var(--navy-800);line-height:1.6}
.card__list{margin-top:14px;display:grid;gap:9px}
.card__list li{position:relative;padding-left:26px;font-size:14.5px;color:var(--ink-soft);line-height:1.6}
.card__list li::before{
  content:"";position:absolute;left:0;top:8px;width:15px;height:15px;border-radius:50%;
  background-color:rgba(58,147,247,.16);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a73e8' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:10px;background-repeat:no-repeat;background-position:center;
}
.card__foot{margin-top:auto;padding-top:20px}
.card__visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:210px}
.card__visual .art{width:100%;height:auto;max-width:250px;filter:drop-shadow(0 18px 30px rgba(12,58,128,.22))}
.chip{
  position:absolute;top:-8px;right:0;z-index:2;display:inline-flex;align-items:center;gap:8px;max-width:100%;
  padding:9px 14px;border-radius:var(--r-pill);font-size:12.5px;font-weight:600;color:var(--navy-800);line-height:1.35;
  background:var(--glass-bg-strong);border:1px solid var(--glass-bd);box-shadow:var(--shadow-sm);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  animation:bob 5s ease-in-out infinite;
}
.chip svg{width:16px;height:16px;flex:none}
.chip--line svg{color:#06c755}
.chip--mail svg{color:var(--blue-600)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* accent colours per system */
.i-blue{background:linear-gradient(135deg,#5aa8fb,#1668e3)}
.i-purple{background:linear-gradient(135deg,#a98bfb,#7c4ddb)}
.i-pink{background:linear-gradient(135deg,#ff92b8,#f2578c)}
.i-green{background:linear-gradient(135deg,#63d19a,#22a36b)}
.i-orange{background:linear-gradient(135deg,#ffc06b,#f7961e)}
.i-rose{background:linear-gradient(135deg,#ff8f9e,#ef4e6b)}

/* ---------- 10. Mini cards ---------- */
.mini-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.mini{padding:26px 24px;border-radius:var(--r-xl);display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s,background .35s}
.mini:hover{transform:translateY(-6px);background:rgba(255,255,255,.7);box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.9)}
.mini__top{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.mini__desc{font-size:14.5px;color:var(--ink-soft);display:grid;gap:3px}
.mini__foot{margin-top:auto;padding-top:18px}

/* ---------- 11. Footer ---------- */
.footer{margin-top:40px;padding:44px 0 26px;position:relative}
.footer::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.42);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid rgba(255,255,255,.7)}
.footer__inner{position:relative;display:grid;grid-template-columns:1.1fr 1fr 1.1fr;gap:34px;align-items:start}
.footer__tag{margin-top:12px;font-family:var(--ff-en);font-size:14px;color:var(--ink-mute)}
.footer__nav{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:15px;color:var(--ink-soft);justify-content:center}
.footer__nav a{transition:color .2s}
.footer__nav a:hover{color:var(--blue-700)}
.footer__contact{display:grid;gap:12px;font-size:14.5px;color:var(--ink-soft);justify-items:start}
.footer__contact li{display:flex;align-items:center;gap:11px}
.footer__ico{width:28px;height:28px;flex:none;border-radius:9px;display:grid;place-items:center;background:rgba(58,147,247,.14);color:var(--blue-700)}
.footer__ico svg{width:15px;height:15px}
.footer__ico--line{background:rgba(6,199,85,.14);color:#06a544}
.footer__bar{position:relative;margin-top:30px;padding-top:18px;border-top:1px solid rgba(19,79,160,.14);display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:13.5px;color:var(--ink-mute)}
.footer__bar .heart{color:var(--blue-600)}

/* ---------- 12. Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.3,1)}
.reveal.is-in{opacity:1;transform:none}

/* ---------- 13. Responsive ---------- */
@media (max-width:1040px){
  .hero__grid{grid-template-columns:1fr;gap:40px}
  .hero__stage{margin-inline:auto}
  .stage{border-radius:36px}
  .mini-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .nav{position:absolute;top:calc(100% + 12px);left:0;right:0;margin:0;flex-direction:column;align-items:stretch;gap:4px;
    padding:14px;border-radius:var(--r-lg);background:var(--glass-bg-strong);border:1px solid var(--glass-bd);
    box-shadow:var(--shadow-md);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
    opacity:0;visibility:hidden;transform:translateY(-10px);transition:.25s}
  .nav.is-open{opacity:1;visibility:visible;transform:none}
  .nav a{padding:12px 14px;text-align:left}
  .nav a::after{display:none}
  .burger{display:grid;margin-left:auto}
  .cards{grid-template-columns:1fr}
  .card{grid-template-columns:1fr}
  .card__visual{order:-1;min-height:0;margin-bottom:4px;flex-direction:column;gap:12px}
  .card__visual .art{max-width:210px}
  .chip{position:static;animation:none;align-self:center}
  .footer__inner{grid-template-columns:1fr;gap:26px}
  .footer__nav{justify-content:flex-start}
}
@media (max-width:640px){
  .section{padding:40px 0}
  .hero{padding:16px 0 46px}
  .stage{border-radius:28px;padding:18px 18px 20px}
  .stage__bar{flex-direction:column;align-items:flex-start;gap:12px}
  .stage__tag{font-size:11px;letter-spacing:.08em;padding:7px 13px;max-width:100%}
  .hero__wordmark{font-size:32px}
  .rail{gap:12px}
  .rail__label{width:100%}
  .mini-cards{grid-template-columns:1fr}
  .card{padding:22px 20px}
  .card__title{font-size:24px}
  .hero__logo{width:96px;height:96px}
  .mark{width:min(100%,180px)}
  .script{font-size:34px;text-align:center;padding-right:0;transform:rotate(-4deg);transform-origin:center}
  .eyebrow{letter-spacing:.18em;font-size:12px}
}
@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}
}
/* Fallback when backdrop-filter is unsupported */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,.btn--glass,.chip,.nav,.stage,.pill,.rail__pill,.stage__tag{background:rgba(255,255,255,.88)}
}