/* ================================================================
   OpenClean — sans-geometric · asymmetric · sky-blue on white
   Completely different visual language from ClearUpToning
   ================================================================ */

:root{
  --white:   #ffffff;
  --paper:   #f7fbff;
  --mist:    #e6f3ff;
  --sky:     #7ecbff;
  --sky-2:   #1e9bff;       /* primary celeste */
  --sky-dp:  #0d6efc;
  --ink:     #0b1020;
  --ink-2:   #18243a;
  --mute:    #4e6480;
  --line:    #dbe7f2;
  --line-2:  #eef4fb;

  --sans:  "Space Grotesk", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;

  --side-w: 240px;
  --rail-w: 88px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{background:var(--white); color:var(--ink); font-family:var(--sans); font-weight:400; -webkit-font-smoothing:antialiased;}
html{scroll-behavior:smooth;}
body{
  overflow-x:hidden;
  letter-spacing:-.005em;
}
a{color:inherit; text-decoration:none;}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer;}
::selection{background:var(--sky-2); color:var(--white);}

.mono{font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.06em; text-transform:uppercase;}

/* ========== GRAIN ========== */
.grain{
  position:fixed; inset:0; z-index:200; pointer-events:none; opacity:.04; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ========== SIDEBAR ========== */
.sidebar{
  position:fixed; top:0; bottom:0; left:0;
  width:var(--side-w); z-index:60;
  padding:28px 24px;
  display:flex; flex-direction:column; justify-content:space-between;
  border-right:1px solid var(--line);
  background:var(--white);
}
.side-top{display:flex; flex-direction:column; gap:24px;}
.logo{display:flex; align-items:center; gap:10px; font-weight:500; font-size:18px; letter-spacing:-.02em;}
.logo-mark{width:28px; height:28px;}
.logo-word{font-weight:600;}
.lang-switch{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  padding:6px 10px; border:1px solid var(--line); border-radius:100px;
  align-self:flex-start;
}
.lang-switch span{color:var(--mute); transition:color .2s;}
.lang-switch span.on{color:var(--sky-2);}
.lang-switch .sep{color:var(--line);}

.side-nav{display:flex; flex-direction:column; gap:4px;}
.side-link{
  display:grid; grid-template-columns:28px 1fr;
  gap:12px; padding:10px 8px; border-radius:6px;
  font-size:13px; color:var(--mute); align-items:center;
  transition:background .2s, color .2s, transform .3s;
}
.side-link .num{font-family:var(--mono); font-size:10px; color:var(--line); letter-spacing:.05em;}
.side-link:hover{color:var(--ink); background:var(--paper);}
.side-link:hover .num{color:var(--sky-2);}
.side-link.active{color:var(--ink); background:var(--mist);}
.side-link.active .num{color:var(--sky-2);}

.side-bottom{display:flex; flex-direction:column; gap:12px;}
.status{display:flex; align-items:center; gap:10px; color:var(--mute);}
.led{width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.2); animation:pulse 1.8s ease-in-out infinite;}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(34,197,94,0);}}
.time{color:var(--mute);}

/* ========== RIGHT RAIL ========== */
.rail-right{
  position:fixed; top:28px; right:28px; bottom:28px; width:40px; z-index:60;
  display:flex; flex-direction:column; justify-content:space-between; align-items:center;
  pointer-events:none;
}
.rail-track{width:2px; flex:1; background:var(--line); position:relative; border-radius:2px;}
.rail-bar{position:absolute; top:0; left:0; width:100%; height:0%; background:linear-gradient(to bottom, var(--sky-2), var(--sky-dp)); border-radius:2px; transition:height .1s linear;}
.rail-label{writing-mode:vertical-rl; transform:rotate(180deg); margin-top:16px; color:var(--mute); font-size:10px;}

/* ========== LAYOUT ========== */
.main{margin-left:var(--side-w); padding:0 calc(var(--rail-w) + 20px) 0 0;}

/* ========== BUTTONS ========== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 20px; border-radius:100px;
  font-family:var(--sans); font-size:14px; font-weight:500; letter-spacing:-.01em;
  transition:transform .25s cubic-bezier(.2,.9,.3,1), background .25s, color .25s, border-color .25s, box-shadow .25s;
  white-space:nowrap;
}
.btn-solid{background:var(--sky-2); color:var(--white); box-shadow:0 10px 26px -12px rgba(30,155,255,.7);}
.btn-solid:hover{background:var(--ink); box-shadow:0 14px 36px -14px rgba(11,16,32,.6); transform:translateY(-2px);}
.btn-outline{border:1px solid var(--line); color:var(--ink);}
.btn-outline:hover{border-color:var(--sky-2); color:var(--sky-2);}
.btn-lg{padding:16px 24px; font-size:15px;}

/* ========== INTRO / HERO ========== */
.intro{
  position:relative; min-height:100vh;
  padding:48px 64px 40px 64px;
  display:flex; flex-direction:column;
  overflow:hidden;
}
.intro-top{
  display:flex; justify-content:space-between; align-items:center;
  color:var(--mute);
  padding-bottom:16px; border-bottom:1px solid var(--line);
  margin-bottom:40px;
}
.filenum{color:var(--sky-2);}

.blob{
  position:absolute;
  top:5%; right:-10%;
  width:780px; height:780px;
  z-index:0; opacity:.85; filter:blur(.3px);
  pointer-events:none;
  animation:blobFloat 14s ease-in-out infinite;
}
@keyframes blobFloat{
  0%,100%{transform:translate(0,0) rotate(0deg);}
  50%{transform:translate(-30px,20px) rotate(6deg);}
}

.intro-title{
  position:relative; z-index:1;
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(70px, 14vw, 240px);
  line-height:.85;
  letter-spacing:-.045em;
  margin:30px 0 60px;
  max-width:15ch;
}
.intro-title .line{display:block;}
.intro-title .big{display:inline-block; overflow:hidden; vertical-align:baseline;}
.intro-title .big.accent{color:var(--sky-2);}
.intro-title .sub-line{font-size:clamp(28px, 4.5vw, 72px); line-height:1; margin-top:14px;}
.intro-title .sub-title{font-weight:400; color:var(--mute); letter-spacing:-.03em;}
.intro-title .ital{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--ink); letter-spacing:-.025em;}

/* word-reveal */
.reveal-w{display:inline-block; transform:translateY(110%); opacity:0; will-change:transform;}
.reveal-w.in{animation:rv .9s cubic-bezier(.2,.9,.2,1) forwards;}
@keyframes rv{to{transform:translateY(0); opacity:1;}}

.intro-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr);
  gap:80px; align-items:start;
  margin-bottom:64px;
}
.intro-copy p{font-size:20px; line-height:1.5; color:var(--ink-2); max-width:54ch; text-wrap:pretty;}
.intro-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-top:32px;}

.intro-meta dl{display:grid; grid-template-columns:1fr 1fr; gap:28px 32px;}
.intro-meta dt{color:var(--mute); margin-bottom:6px;}
.intro-meta dd{font-family:var(--sans); font-weight:500; font-size:48px; letter-spacing:-.03em; color:var(--ink);}

/* full-bleed marquee — glass aurora premium */
.marquee-full{
  position:relative;
  margin:auto -64px 0 -64px;
  padding:24px 0 28px;
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(180deg, rgba(255,255,255,.75) 0%, rgba(230,243,255,.65) 50%, rgba(255,255,255,.8) 100%);
  backdrop-filter:blur(22px) saturate(1.8);
  -webkit-backdrop-filter:blur(22px) saturate(1.8);
  border-top:1px solid rgba(255,255,255,.9);
  border-bottom:1px solid rgba(30,155,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(30,155,255,.2),
    0 28px 80px -40px rgba(30,155,255,.5),
    0 -4px 20px -10px rgba(255,255,255,.8);
}
/* aurora orbs — moving color depth */
.mq-aurora{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.mq-orb{position:absolute; border-radius:50%; filter:blur(60px); opacity:.8; will-change:transform;}
.mq-orb.o1{width:380px; height:380px; left:-10%; top:-120%; background:radial-gradient(circle, #7ecbff, transparent 70%); animation:orbA 18s ease-in-out infinite;}
.mq-orb.o2{width:460px; height:460px; right:-10%; top:-100%; background:radial-gradient(circle, #1e9bff, transparent 70%); animation:orbB 22s ease-in-out infinite;}
.mq-orb.o3{width:300px; height:300px; left:40%; top:-80%; background:radial-gradient(circle, #c8e7ff, transparent 70%); animation:orbC 16s ease-in-out infinite;}
@keyframes orbA{0%,100%{transform:translate(0,0);} 50%{transform:translate(30vw,40%);}}
@keyframes orbB{0%,100%{transform:translate(0,0);} 50%{transform:translate(-35vw,50%);}}
@keyframes orbC{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-10vw,60%) scale(1.2);}}

/* subtle conic grid behind */
.mq-grid{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.35;
  background:
    linear-gradient(to right, rgba(30,155,255,.14) 1px, transparent 1px) 0 0/60px 60px,
    linear-gradient(to bottom, rgba(30,155,255,.14) 1px, transparent 1px) 0 0/60px 60px;
  mask-image:radial-gradient(ellipse 80% 100% at 50% 50%, #000 40%, transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse 80% 100% at 50% 50%, #000 40%, transparent 85%);
}

/* shine sweep */
.marquee-full::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.7) 48%, rgba(255,255,255,.95) 50%, rgba(255,255,255,.7) 52%, transparent 70%);
  mix-blend-mode:overlay;
  transform:translateX(-120%);
  animation:shine 8s ease-in-out infinite;
}
@keyframes shine{0%,100%{transform:translateX(-120%);} 55%,60%{transform:translateX(120%);}}
/* edge fades */
.marquee-full::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(90deg, var(--white) 0%, transparent 10%, transparent 90%, var(--white) 100%);
}

/* header label row */
.mq-label{
  position:relative; z-index:2;
  display:flex; justify-content:center; align-items:center; gap:14px;
  padding:4px 20px 18px;
  color:var(--mute);
}
.mq-label .mono{color:var(--ink); letter-spacing:.18em; font-size:10px;}
.mq-led{
  width:7px; height:7px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #ffffff, #1e9bff 60%, #0d6efc);
  box-shadow:0 0 0 4px rgba(30,155,255,.2), 0 0 10px rgba(30,155,255,.9);
  animation:ledPulse 1.6s ease-in-out infinite;
}
@keyframes ledPulse{50%{box-shadow:0 0 0 8px rgba(30,155,255,0), 0 0 14px rgba(30,155,255,.9);}}
.mq-counter{color:var(--mute); font-size:10px;}
.mq-counter em{color:var(--sky-2); font-style:normal; font-weight:500;}

/* rows */
.m-row{position:relative; z-index:2; overflow:hidden; padding:6px 0;}
.m-row-b{opacity:.55; margin-top:6px;}

.m-track{
  display:inline-flex; gap:14px; align-items:center; white-space:nowrap;
  animation:mtrack 44s linear infinite;
  font-family:var(--sans); font-weight:500; font-size:14px; letter-spacing:.04em; text-transform:uppercase;
  padding:0 20px;
  will-change:transform;
}
.m-track-rev{animation:mtrackRev 52s linear infinite; font-size:11px;}
.marquee-full:hover .m-track, .marquee-full:hover .m-track-rev{animation-play-state:paused;}

.m-track > span{
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 20px;
  color:var(--ink);
  background:
    linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 100%);
  border:1px solid rgba(255,255,255,.95);
  border-radius:100px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 2px rgba(30,155,255,.18),
    0 10px 24px -10px rgba(30,155,255,.5),
    0 2px 4px rgba(11,16,32,.05);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:transform .35s cubic-bezier(.2,.9,.3,1), box-shadow .35s, color .35s, background .35s;
  cursor:default;
}
.m-track > span::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #ffffff, #1e9bff 55%, #0d6efc);
  box-shadow:0 0 8px rgba(30,155,255,.8), inset 0 0 2px rgba(255,255,255,.9);
  flex-shrink:0;
}
.m-track > span:hover{
  transform:translateY(-3px) scale(1.04);
  color:var(--white);
  background:linear-gradient(180deg, #1e9bff 0%, #0d6efc 100%);
  border-color:#1e9bff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 18px 34px -10px rgba(30,155,255,.7),
    0 4px 10px rgba(11,16,32,.15);
}
.m-track > span:hover::before{
  background:#ffffff;
  box-shadow:0 0 10px #ffffff;
}

/* mini chips on row B */
.m-track > span.mini{
  padding:7px 14px; font-size:10px; letter-spacing:.08em;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.45));
  color:var(--mute);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 6px 14px -8px rgba(30,155,255,.35);
}
.m-track > span.mini::before{width:5px; height:5px;}

@keyframes mtrack{to{transform:translateX(-50%);}}
@keyframes mtrackRev{from{transform:translateX(-50%);} to{transform:translateX(0);}}

/* ========== SECTION ANCHOR + H ========== */
.sec-anchor{
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 0; color:var(--mute);
  border-bottom:1px solid var(--line);
  margin-bottom:40px; min-width:260px;
}
.sec-anchor-light{color:rgba(255,255,255,.6); border-bottom-color:rgba(255,255,255,.2);}
.sec-anchor span{color:var(--ink);}
.sec-anchor-light span{color:var(--white);}

.sec-h{
  font-family:var(--sans); font-weight:500;
  font-size:clamp(40px, 6vw, 96px);
  line-height:.96; letter-spacing:-.035em;
  max-width:20ch;
  margin-bottom:64px;
  text-wrap:balance;
}
.sec-h em{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--sky-2); letter-spacing:-.02em;}

/* ========== 01 WHAT ========== */
.what{padding:140px 64px 120px;}
.cards{
  display:grid; grid-template-columns:repeat(12, 1fr);
  gap:16px;
}
.card{
  border:1px solid var(--line);
  border-radius:20px;
  padding:40px 32px 32px;
  background:var(--white);
  position:relative;
  overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.9,.3,1), box-shadow .4s, border-color .3s;
}
/* asymmetric grid spans */
.card[data-card="1"]{grid-column:span 7; min-height:360px;}
.card[data-card="2"]{grid-column:span 5; min-height:360px; background:var(--ink); color:var(--white); border-color:var(--ink);}
.card[data-card="3"]{grid-column:span 5; min-height:360px;}
.card[data-card="4"]{grid-column:span 7; min-height:360px; background:var(--mist); border-color:var(--mist);}

.card:hover{transform:translateY(-4px); box-shadow:0 30px 60px -30px rgba(11,16,32,.15);}
.card-ind{color:var(--sky-2); margin-bottom:28px;}
.card[data-card="2"] .card-ind{color:var(--sky);}
.card h3{font-family:var(--sans); font-weight:500; font-size:clamp(24px, 2.6vw, 38px); line-height:1.05; letter-spacing:-.025em; margin-bottom:20px; max-width:20ch;}
.card p{font-size:15px; line-height:1.55; opacity:.82; max-width:54ch; margin-bottom:28px;}
.tags{list-style:none; display:flex; gap:8px; flex-wrap:wrap;}
.tags li{
  font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 10px; border:1px solid var(--line); border-radius:100px;
  color:var(--mute);
}
.card[data-card="2"] .tags li{border-color:rgba(255,255,255,.18); color:rgba(255,255,255,.78);}
.card[data-card="4"] .tags li{border-color:rgba(11,16,32,.12);}

/* ========== 02 HOW / rings ========== */
.how{padding:120px 64px;}
.rings{display:flex; flex-direction:column; gap:0;}
.ring{
  display:grid; grid-template-columns:220px 1fr 140px;
  gap:40px; align-items:start;
  padding:32px 0;
  border-top:1px solid var(--line);
  transition:background .35s, padding .35s;
  position:relative;
}
.ring:last-child{border-bottom:1px solid var(--line);}
.ring-bar{grid-column:1 / -1; position:absolute; top:-1px; left:0; right:0; height:2px; background:transparent; pointer-events:none;}
.ring-fill{display:block; height:100%; width:0%; background:linear-gradient(to right, var(--sky-2), var(--sky-dp)); transition:width 1s cubic-bezier(.2,.9,.3,1);}
.ring.in .ring-fill{width:calc(var(--pct) * 1%);}
.ring:hover{background:var(--paper);}

.ring-tag{color:var(--mute);}
.ring-content h3{font-family:var(--sans); font-weight:500; font-size:clamp(26px, 2.8vw, 42px); letter-spacing:-.025em; margin:10px 0 12px;}
.ring-content p{font-size:16px; line-height:1.55; color:var(--ink-2); max-width:58ch;}
.ring-num{
  font-family:var(--sans); font-weight:300; font-size:72px; line-height:1;
  letter-spacing:-.04em;
  color:var(--line); text-align:right;
  transition:color .35s;
}
.ring.in .ring-num{color:var(--sky-2);}

/* ========== 03 PROOF ========== */
.proof{padding:120px 64px;}
.clients{
  margin:0 -64px 80px -64px;
  padding:28px 0;
  background:var(--paper);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden;
}
.c-track{
  display:inline-flex; gap:32px; align-items:center; white-space:nowrap;
  animation:ctrack 50s linear infinite;
  font-family:var(--serif); font-style:italic; font-size:44px; line-height:1; color:var(--ink);
}
.c-track .d{font-family:var(--sans); color:var(--sky-2); font-style:normal;}
@keyframes ctrack{to{transform:translateX(-50%);}}

.stories{display:flex; flex-direction:column; gap:0;}
.story{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, .9fr);
  gap:48px;
  padding:48px 0;
  border-top:1px solid var(--line);
  transition:background .3s;
}
.story:last-child{border-bottom:1px solid var(--line);}
.story:hover{background:var(--paper);}
.story-head{display:flex; flex-direction:column; gap:10px;}
.story-head .mono:first-child{color:var(--ink);}
.story-head .mono:last-child{color:var(--mute);}
.story-body h3{font-family:var(--sans); font-weight:500; font-size:clamp(22px, 2.2vw, 34px); line-height:1.1; letter-spacing:-.02em; margin-bottom:14px;}
.story-body p{font-size:15px; line-height:1.55; color:var(--ink-2); max-width:48ch;}
.story-kpi{display:flex; flex-direction:column; gap:16px; align-items:flex-start;}
.story-kpi > div{display:flex; flex-direction:column; gap:4px; min-width:140px;}
.story-kpi span{color:var(--mute);}
.story-kpi strong{font-family:var(--sans); font-weight:500; font-size:26px; letter-spacing:-.02em; color:var(--sky-2);}

.big-quote{
  margin-top:100px;
  padding:60px 40px;
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(135deg, var(--mist), var(--paper));
  text-align:center;
}
.big-quote blockquote{
  font-family:var(--sans); font-weight:400;
  font-size:clamp(24px, 3vw, 42px);
  line-height:1.2; letter-spacing:-.02em;
  max-width:28ch; margin:0 auto 28px;
  text-wrap:balance;
}
.big-quote blockquote em{font-family:var(--serif); font-style:italic; color:var(--sky-2); font-weight:400;}
.big-quote figcaption{display:flex; flex-direction:column; gap:4px; align-items:center;}
.big-quote figcaption strong{font-weight:500; font-size:14px;}
.big-quote figcaption .mono{color:var(--mute);}

/* ========== 04 BOOK ========== */
.book{
  margin:80px 0 0;
  padding:120px 64px;
  background:var(--ink); color:var(--white);
  border-radius:32px 32px 0 0;
  position:relative;
  overflow:hidden;
}
.book::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(500px 400px at 10% 0%, rgba(30,155,255,.35), transparent 60%),
    radial-gradient(600px 500px at 100% 100%, rgba(13,110,252,.25), transparent 60%);
  pointer-events:none;
}
.book-wrap{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:80px; align-items:start;
}
.book-h{
  font-family:var(--sans); font-weight:500;
  font-size:clamp(40px, 5.5vw, 84px);
  line-height:.98; letter-spacing:-.035em;
  margin-bottom:28px;
  text-wrap:balance;
}
.book-h em{font-family:var(--serif); font-style:italic; color:var(--sky); font-weight:400;}
.book-copy p{font-size:17px; line-height:1.55; color:rgba(255,255,255,.78); max-width:48ch; margin-bottom:40px;}
.book-meta{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:20px 32px;}
.book-meta li{display:flex; flex-direction:column; gap:6px;}
.book-meta li span{color:var(--sky);}
.book-meta li em{font-family:var(--sans); font-style:normal; font-weight:500; font-size:17px; letter-spacing:-.01em;}

/* form */
.book-form{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  padding:32px;
  display:flex; flex-direction:column; gap:20px;
  backdrop-filter:blur(8px);
}
.bf-field{display:flex; flex-direction:column; gap:8px;}
.bf-field label{color:var(--sky); display:flex; align-items:center; gap:10px;}
.bf-field label .num{color:rgba(255,255,255,.35);}
.bf-field input, .bf-field textarea{
  font:inherit; font-family:var(--sans); font-size:16px; color:var(--white);
  background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.2);
  padding:8px 0 12px;
  transition:border-color .25s;
}
.bf-field textarea{resize:vertical; min-height:90px;}
.bf-field input:focus, .bf-field textarea:focus{outline:none; border-bottom-color:var(--sky-2);}
.pill-group{display:flex; gap:8px; flex-wrap:wrap;}
.pill{
  padding:8px 14px; border:1px solid rgba(255,255,255,.2); border-radius:100px;
  font-family:var(--sans); font-size:13px; font-weight:500;
  color:rgba(255,255,255,.75); transition:all .25s;
}
.pill:hover{border-color:var(--sky);}
.pill.on{background:var(--sky-2); border-color:var(--sky-2); color:var(--white);}
.bf-submit{align-self:flex-start; background:var(--white); color:var(--ink); box-shadow:0 14px 30px -14px rgba(255,255,255,.3);}
.bf-submit:hover{background:var(--sky); color:var(--ink);}

.bf-ok{display:none; gap:10px; flex-wrap:wrap; padding:16px; border:1px solid var(--sky-2); border-radius:12px; background:rgba(30,155,255,.08); font-size:14px;}
.bf-ok.show{display:flex;}
.bf-ok strong{color:var(--sky);}
.bf-ok span{color:rgba(255,255,255,.78);}


/* ========== STORY ILLUSTRATIVE LABEL ========== */
.story-illus{color:rgba(30,155,255,.7); letter-spacing:.08em; border:1px solid rgba(30,155,255,.25); border-radius:100px; padding:2px 10px;}

/* ========== FOOTER ========== */
.foot{
  background:linear-gradient(175deg,#0c1624 0%,var(--ink) 55%);
  color:var(--white);
  padding:0 64px 56px;
  position:relative;
  overflow:hidden;
}
/* accent line top */
.foot::after{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg,var(--sky-2) 0%,rgba(126,203,255,.35) 38%,transparent 78%);
}
/* blue radial glow */
.foot::before{
  content:'';
  position:absolute;
  top:-100px; right:4%;
  width:500px; height:500px;
  background:radial-gradient(circle,rgba(30,155,255,.09) 0%,transparent 68%);
  pointer-events:none;
}
.foot-mega{
  font-family:var(--sans); font-weight:700;
  font-size:clamp(40px,11vw,210px);
  line-height:.86; letter-spacing:-.055em;
  background:linear-gradient(
    148deg,
    rgba(255,255,255,.26) 0%,
    rgba(30,155,255,.22) 32%,
    rgba(255,255,255,.07) 66%,
    transparent 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.13);
  text-align:center;
  user-select:none;
  padding-top:80px;
  word-break:normal;
  overflow-wrap:normal;
  will-change:letter-spacing,filter;
  transition:
    letter-spacing .7s cubic-bezier(.16,1,.3,1),
    filter .7s cubic-bezier(.16,1,.3,1);
}
.foot-mega:hover{
  letter-spacing:-.044em;
  filter:drop-shadow(0 0 64px rgba(30,155,255,.2));
}
.foot-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px 28px;
  flex-wrap:wrap;
  margin-top:24px;
  padding-top:28px;
  border-top:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.38);
  font-size:11px;
}
.foot-row span:first-child{color:rgba(255,255,255,.72); font-weight:500;}

/* ========== RESPONSIVE ========== */
@media (max-width:1180px){
  .sidebar{width:200px;}
  :root{--side-w:200px;}
  .card[data-card="1"]{grid-column:span 12;}
  .card[data-card="2"]{grid-column:span 12;}
  .card[data-card="3"]{grid-column:span 12;}
  .card[data-card="4"]{grid-column:span 12;}
}
@media (max-width:900px){
  .sidebar{
    position:sticky; top:0; width:100%; height:auto;
    flex-direction:row; justify-content:space-between; align-items:center;
    padding:16px 20px; border-right:0; border-bottom:1px solid var(--line);
  }
  :root{--side-w:0;}
  .side-nav{display:none;} .side-bottom{display:none;}
  .main{margin-left:0; padding:0;}
  .rail-right{display:none;}
  .intro{padding:32px 24px;}
  .marquee-full{margin:auto -24px 0 -24px;}
  .what, .how, .proof{padding:80px 24px;}
  .intro-grid{grid-template-columns:1fr; gap:40px;}
  .intro-meta dl{grid-template-columns:1fr 1fr;}
  .intro-meta dd{font-size:36px;}
  .ring{grid-template-columns:1fr; gap:10px; padding:28px 0;}
  .ring-num{text-align:left; font-size:40px;}
  .story{grid-template-columns:1fr; gap:20px; padding:36px 0;}
  .book{margin:48px 0 0; padding:80px 24px; border-radius:24px 24px 0 0;}
  .book-wrap{grid-template-columns:1fr; gap:48px;}
  .book-meta{grid-template-columns:1fr;}
  .foot{padding:0 24px 40px;}
  .foot::after{left:0; right:0;}
  .foot-mega{padding-top:56px; font-size:clamp(36px,13vw,200px);}
  .foot-row{gap:10px 20px; padding-top:22px; margin-top:18px;}
}
@media (max-width:520px){
  .intro-meta dl{grid-template-columns:1fr;}
  .intro-title{font-size:72px;}
  .story-kpi{flex-direction:row; flex-wrap:wrap; gap:16px 24px;}
  .foot-mega{padding-top:40px; letter-spacing:-.05em;}
  .foot-row{flex-direction:column; align-items:flex-start; gap:8px;}
}

/* ========== CUSTOM CURSOR ========== */
.cur{position:fixed; inset:0; pointer-events:none; z-index:300;}
.cur-dot{position:absolute; width:6px; height:6px; border-radius:50%; background:var(--sky-2); transform:translate(-50%,-50%);}
.cur-ring{position:absolute; width:40px; height:40px; border:1px solid var(--ink); border-radius:50%; transform:translate(-50%,-50%); transition:width .3s, height .3s, border-color .3s, background .3s;}
.cur.hover .cur-ring{width:72px; height:72px; border-color:var(--sky-2); background:rgba(30,155,255,.08);}
.cur.dark .cur-ring{border-color:var(--white);}
.cur.hidden .cur-dot, .cur.hidden .cur-ring{opacity:0;}
.cur-label{position:absolute; transform:translate(16px, 16px); font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; background:var(--sky-2); color:#fff; padding:3px 8px; border-radius:100px; opacity:0; transition:opacity .2s;}
.cur.label-on .cur-label{opacity:1;}
@media (hover:none){.cur{display:none;}}

/* ========== PRELOADER ========== */
.preload{position:fixed; inset:0; z-index:500; background:var(--ink); color:var(--white); display:grid; place-items:center; transition:opacity .7s, visibility .7s;}
.preload.done{opacity:0; visibility:hidden;}
.preload-inner{display:flex; flex-direction:column; align-items:center; gap:20px; width:100%; max-width:380px; padding:0 28px;}
.preload-logo svg{animation:spin 3s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.preload-word{font-family:var(--sans); font-weight:500; font-size:clamp(22px,5.5vw,42px); letter-spacing:-.03em; text-align:center;}
.preload-bar{width:min(260px,80%); height:2px; background:rgba(255,255,255,.15); overflow:hidden;}
.preload-bar span{display:block; height:100%; width:0%; background:var(--sky-2); transition:width .1s linear;}
.preload-meta{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 20px; color:rgba(255,255,255,.6); text-align:center;}
#preloadPct{color:var(--sky-2);}

/* ========== LIVE WIDGET ========== */
.live-widget{position:fixed; right:28px; bottom:28px; z-index:70; background:var(--white); border:1px solid var(--line); border-radius:16px; padding:14px 18px; box-shadow:0 20px 40px -20px rgba(11,16,32,.15); display:flex; flex-direction:column; gap:4px; min-width:180px; transform:translateY(120%); transition:transform .6s cubic-bezier(.2,.9,.3,1);}
.live-widget.show{transform:translateY(0);}
.lw-row{display:flex; align-items:center; gap:8px; color:var(--mute);}
.lw-led{width:7px; height:7px; border-radius:50%; background:#ef4444; box-shadow:0 0 0 4px rgba(239,68,68,.2); animation:pulse 1.5s ease-in-out infinite;}
.lw-num{font-family:var(--sans); font-weight:500; font-size:34px; letter-spacing:-.03em; color:var(--sky-2);}
.lw-label{color:var(--mute); font-size:10px;}

/* count animation */
.count.counting{color:var(--sky-2);}

/* ========== BEFORE / AFTER ========== */
.ba{padding:120px 64px;}
.ba-grid{display:grid; grid-template-columns:1fr 60px 1fr; gap:24px; align-items:stretch;}
.ba-col{border:1px solid var(--line); border-radius:20px; padding:40px 32px; min-height:420px;}
.ba-before{background:var(--paper);}
.ba-after{background:var(--ink); color:var(--white); border-color:var(--ink); position:relative; overflow:hidden;}
.ba-after::before{content:""; position:absolute; inset:0; background:radial-gradient(400px 300px at 100% 0%, rgba(30,155,255,.2), transparent); pointer-events:none;}
.ba-tag{margin-bottom:28px;}
.ba-before .ba-tag{color:var(--mute);}
.ba-after .ba-tag{color:var(--sky);}
.ba-col ul{list-style:none; display:flex; flex-direction:column; gap:14px; position:relative;}
.ba-col li{font-size:16px; line-height:1.45; padding-left:28px; position:relative;}
.ba-before li::before{content:"✕"; position:absolute; left:0; top:0; color:var(--mute); font-family:var(--mono); font-size:14px;}
.ba-after li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--sky); font-family:var(--mono); font-size:14px;}
.ba-divider{display:flex; align-items:center; justify-content:center; color:var(--sky-2);}

/* ========== FAQ ========== */
.faq{padding:120px 64px;}
.faq-list{display:flex; flex-direction:column;}
.q{border-top:1px solid var(--line);}
.q:last-of-type{border-bottom:1px solid var(--line);}
.q summary{list-style:none; cursor:pointer; padding:28px 0; display:grid; grid-template-columns:60px 1fr 40px; gap:20px; align-items:center; font-size:20px; font-weight:500; letter-spacing:-.02em; transition:color .2s;}
.q summary::-webkit-details-marker{display:none;}
.q summary:hover{color:var(--sky-2);}
.q summary .mono{color:var(--sky-2);}
.q-plus{text-align:right; font-family:var(--sans); font-weight:300; font-size:32px; color:var(--mute); transition:transform .3s, color .3s;}
.q[open] .q-plus{transform:rotate(45deg); color:var(--sky-2);}
.q-body{padding:0 0 28px 80px; animation:qfade .4s ease;}
.q-body p{font-size:16px; line-height:1.6; color:var(--ink-2); max-width:70ch;}
@keyframes qfade{from{opacity:0; transform:translateY(-6px);}to{opacity:1; transform:translateY(0);}}

/* ========== TILT for cards ========== */
.card{transform-style:preserve-3d; transition:transform .3s ease, box-shadow .3s;}
.card-inner{position:relative; z-index:2;}

/* ========== RIPPLE ========== */
.btn{position:relative; overflow:hidden;}
.btn .ripple{position:absolute; border-radius:50%; transform:scale(0); background:rgba(255,255,255,.4); animation:rip .6s ease-out; pointer-events:none;}
.btn.btn-outline .ripple{background:rgba(30,155,255,.25);}
@keyframes rip{to{transform:scale(4); opacity:0;}}

@media (max-width:900px){
  .ba, .faq{padding:80px 24px;}
  .ba-grid{grid-template-columns:1fr;}
  .ba-divider{transform:rotate(90deg);}
  .q summary{grid-template-columns:50px 1fr 30px; font-size:17px; padding:22px 0;}
  .q-body{padding:0 0 22px 70px;}
  .live-widget{right:16px; bottom:16px; padding:10px 14px; min-width:150px;}
  .lw-num{font-size:26px;}
}
@media (prefers-reduced-motion: reduce){*, *::before, *::after{animation-duration:.01ms !important; transition-duration:.01ms !important;}}