:root{
  --film-cyan:#A5D8D5;
  --sakura:#F8C3CD;
  --nostalgia:#F5E6CA;
  --ink:#111318;
  --paper:rgba(245,230,202,.78);
  --glass:rgba(255,255,255,.10);
  --glass2:rgba(255,255,255,.16);
  --line:rgba(17,19,24,.16);
  --line2:rgba(255,255,255,.18);
  --shadow:0 18px 60px rgba(0,0,0,.22);
  --radius:18px;
  --radius2:26px;
  --max:1180px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --hand: "Segoe Script", "Bradley Hand", "Comic Sans MS", cursive;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:rgba(17,19,24,.92);
  background: radial-gradient(circle,
    rgba(245,230,202,0.86) 0%,
    rgba(165,216,213,0.62) 52%,
    rgba(248,195,205,0.42) 100%);
  animation: filmFlicker 5s infinite alternate;
  font-family: var(--serif);
  letter-spacing:.2px;
  overflow-x:hidden;
}
body.is-preload{
  overflow:hidden;
}
body.preload-done{
  overflow-x:hidden;
}

.intro{
  position:fixed; inset:0;
  z-index:1200;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.06), rgba(0,0,0,.55) 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, rgba(0,0,0,0) 1px 3px),
    rgba(15,16,20,.96);
  transition: opacity .75s ease, visibility .75s ease;
}
.intro.is-out{opacity:0; visibility:hidden}
.intro__center{display:grid; gap:14px; justify-items:center}
.intro__title{
  font-family:var(--mono);
  letter-spacing:.2em;
  font-size:12px;
  color:rgba(255,255,255,.76);
}
.intro__line{
  width:min(64vw, 360px); height:1px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(165,216,213,.85), rgba(248,195,205,.85), rgba(255,255,255,0));
  transform-origin:center;
  animation:introLine 1.4s infinite ease-in-out;
}
.intro__count{
  font-family:var(--mono);
  color:rgba(255,255,255,.9);
  font-size:44px;
  letter-spacing:.12em;
}
@keyframes introLine{
  0%,100%{transform:scaleX(.45); opacity:.5}
  50%{transform:scaleX(1); opacity:1}
}

.aurora{
  position:fixed;
  width:58vw; height:58vw;
  min-width:380px; min-height:380px;
  border-radius:50%;
  filter: blur(34px);
  mix-blend-mode: soft-light;
  pointer-events:none;
  z-index:2;
  opacity:.34;
  animation: auroraFloat 18s ease-in-out infinite;
}
.aurora--a{
  left:-18vw; top:-16vw;
  background: radial-gradient(circle, rgba(165,216,213,.52), rgba(165,216,213,0) 65%);
}
.aurora--b{
  right:-20vw; bottom:-24vw;
  background: radial-gradient(circle, rgba(248,195,205,.52), rgba(248,195,205,0) 62%);
  animation-delay:-7s;
}
@keyframes auroraFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(5vw,-2vh,0)}
}

@keyframes filmFlicker{
  0%{filter: saturate(1.06) contrast(1.02) brightness(1)}
  50%{filter: saturate(1) contrast(1.06) brightness(1.01)}
  100%{filter: saturate(1.02) contrast(1.01) brightness(.995)}
}

.skip{
  position:absolute; left:-999px; top:8px;
  background:rgba(255,255,255,.85);
  border:1px solid var(--line);
  padding:8px 12px;
  border-radius:12px;
  z-index:999;
}
.skip:focus{left:12px}

.film-overlay{
  pointer-events:none;
  position:fixed; inset:-2px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,0) 18%, rgba(0,0,0,0) 78%, rgba(0,0,0,.10)),
    radial-gradient(circle at 70% 12%, rgba(255,255,255,.26), rgba(255,255,255,0) 42%);
  mix-blend-mode: soft-light;
  opacity:.55;
  animation: projectorVignette 8s infinite ease-in-out;
  z-index:0;
}
@keyframes projectorVignette{
  0%,100%{opacity:.50; transform:translateY(0)}
  50%{opacity:.64; transform:translateY(.4px)}
}

/* Grain: lightweight SVG noise tiled */
.grain-overlay{
  pointer-events:none;
  position:fixed; inset:-40%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  background-size:240px 240px;
  mix-blend-mode: overlay;
  opacity:.20;
  transform:rotate(2deg);
  animation: grainMove 6s steps(6) infinite;
  z-index:1;
}
@keyframes grainMove{
  0%{transform:translate3d(-2%, -2%, 0) rotate(2deg)}
  100%{transform:translate3d(2%, 2%, 0) rotate(2deg)}
}

.topbar{
  position:sticky; top:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px;
  backdrop-filter: blur(16px);
  background: linear-gradient(90deg, rgba(245,230,202,.62), rgba(165,216,213,.20), rgba(248,195,205,.22));
  border-bottom:1px solid rgba(17,19,24,.10);
  z-index:50;
}
.topbar__left,.topbar__right{display:flex; align-items:center; gap:10px}

.brand{display:flex; align-items:center; gap:12px}
.brand__mark{
  width:36px; height:36px;
  border-radius:12px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, rgba(165,216,213,.9), rgba(248,195,205,.8));
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  border:1px solid rgba(255,255,255,.35);
}
.brand__title{font-family:var(--hand); font-size:18px; line-height:1.1}
.brand__subtitle{font-family:var(--mono); font-size:11px; opacity:.72}

.nav{display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:center}
.nav__link{
  color:rgba(17,19,24,.82);
  text-decoration:none;
  font-family:var(--mono);
  font-size:12px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(17,19,24,.10);
  background: rgba(255,255,255,.20);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.nav__link:hover{transform:translateY(-1px); background: rgba(255,255,255,.34); border-color: rgba(17,19,24,.16)}

.btn{
  appearance:none; border:1px solid rgba(17,19,24,.14);
  background: rgba(255,255,255,.36);
  color:rgba(17,19,24,.88);
  padding:10px 12px;
  border-radius:14px;
  font-family:var(--mono);
  font-size:12px;
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
}
.btn:hover{transform:translateY(-1px); background: rgba(255,255,255,.52)}
.btn:active{transform:translateY(0px) scale(.99)}
.btn--ghost{background: rgba(255,255,255,.18); box-shadow:none}
.btn--ghost:hover{background: rgba(255,255,255,.32)}

.main{position:relative; z-index:2}
.main > *{position:relative; z-index:2}

.hero{
  max-width:var(--max);
  margin:0 auto;
  padding:34px 18px 10px;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  align-items:start;
}
.hero__bg{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.hero__content{
  border-radius: var(--radius2);
  padding:22px 22px 18px;
  background: rgba(255,255,255,.24);
  border: 1px solid rgba(255,255,255,.26);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.hero__content::before{
  content:"";
  position:absolute; inset:-1px;
  background:
    radial-gradient(circle at 20% 20%, rgba(165,216,213,.65), rgba(165,216,213,0) 45%),
    radial-gradient(circle at 80% 35%, rgba(248,195,205,.58), rgba(248,195,205,0) 45%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  opacity:.9;
  z-index:0;
}
.hero__content > *{position:relative; z-index:1}
.hero__headline,
.section__title{
  text-shadow: 0 8px 24px rgba(255,255,255,.3);
}
.hero__kicker{font-family:var(--mono); font-size:12px; opacity:.75}
.hero__headline{
  margin:10px 0 6px;
  font-family:var(--hand);
  font-size:42px;
  letter-spacing:.4px;
  line-height:1.08;
}
.hero__headlineSub{
  display:block;
  font-family:var(--serif);
  font-size:16px;
  opacity:.78;
  margin-top:10px;
}
.hero__lead{
  margin:12px 0 14px;
  font-size:15px;
  line-height:1.7;
  opacity:.92;
}
.hero__cta{display:flex; gap:10px; flex-wrap:wrap; margin:12px 0 16px}
.hero__meta{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px}
.metaCard{
  padding:12px 12px 10px;
  border-radius:16px;
  background: rgba(255,255,255,.28);
  border:1px solid rgba(17,19,24,.10);
}
.metaCard__label{font-family:var(--mono); font-size:11px; opacity:.72}
.metaCard__value{font-size:18px; margin-top:4px}
.metaCard__hint{font-family:var(--mono); font-size:10px; opacity:.62; margin-top:3px}

.hero__panel{display:flex; flex-direction:column; gap:14px}

.card{
  border-radius: var(--radius);
  background: rgba(255,255,255,.26);
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: var(--shadow);
  padding:16px;
  position:relative;
  overflow:hidden;
  transition: transform .3s cubic-bezier(.2,.7,.25,1), box-shadow .3s ease, background .3s ease;
  transform-style: preserve-3d;
}
.card--glass{background: rgba(255,255,255,.18)}
.card--wide{margin-top:12px}
.card__header{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px}
.card__title{font-family:var(--hand); font-size:18px}
.card__meta{font-family:var(--mono); font-size:11px; opacity:.66}
.card:hover{
  box-shadow: 0 28px 80px rgba(0,0,0,.2);
  background: rgba(255,255,255,.30);
}

.chip{
  font-family:var(--mono);
  font-size:11px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(17,19,24,.08);
  border:1px solid rgba(17,19,24,.10);
}

.avatarStage{display:grid; gap:12px}
.avatarStage__ring{
  height:138px;
  border-radius:24px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.9), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, rgba(165,216,213,.85), rgba(248,195,205,.78));
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.34);
}
.avatarStage__ring::after{
  content:"";
  position:absolute; inset:-40%;
  background: radial-gradient(circle, rgba(255,255,255,.26), rgba(255,255,255,0) 50%);
  transform: rotate(25deg);
  animation: ringSweep 6s infinite linear;
}
@keyframes ringSweep{
  0%{transform:translateX(-10%) rotate(25deg)}
  100%{transform:translateX(10%) rotate(25deg)}
}
.avatarStage__figure{
  height:14px;
  border-radius:999px;
  background: rgba(17,19,24,.18);
  opacity:.22;
  filter: blur(2px);
}
.avatarStage__modes{display:flex; gap:8px; flex-wrap:wrap}
.pill{
  border:1px solid rgba(17,19,24,.12);
  background: rgba(255,255,255,.24);
  font-family:var(--mono);
  font-size:11px;
  border-radius:999px;
  padding:7px 10px;
  cursor:pointer;
}
.pill.is-active{
  background: linear-gradient(135deg, rgba(165,216,213,.55), rgba(248,195,205,.42));
  border-color: rgba(17,19,24,.16);
}

.statGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
  margin-top:8px;
}
.stat{
  border-radius:16px;
  background: rgba(255,255,255,.22);
  border:1px solid rgba(17,19,24,.10);
  padding:10px;
}
.stat__k{font-family:var(--mono); font-size:10px; opacity:.70}
.stat__v{font-size:16px; margin-top:4px}

.letter{
  border-radius: var(--radius2);
  padding:14px 14px 12px;
  background: rgba(245,230,202,.78);
  border:1px solid rgba(17,19,24,.14);
  box-shadow: 0 12px 34px rgba(0,0,0,.14);
  position:relative;
}
.letter::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.04), rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, rgba(0,0,0,.04));
  opacity:.75;
  pointer-events:none;
}
.letter__stamp{
  position:absolute; right:12px; top:12px;
  width:44px; height:44px; border-radius:14px;
  background: linear-gradient(135deg, rgba(248,195,205,.95), rgba(165,216,213,.85));
  border:1px solid rgba(17,19,24,.14);
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
  opacity:.9;
}
.letter__title{font-family:var(--hand); font-size:16px; position:relative}
.letter__body{margin-top:10px; line-height:1.8; opacity:.9; position:relative}
.letter--mini{margin-top:14px}

.section{
  max-width:var(--max);
  margin:0 auto;
  padding:26px 18px 10px;
}
.section--alt{
  background: rgba(255,255,255,.10);
  border-top:1px solid rgba(17,19,24,.06);
  border-bottom:1px solid rgba(17,19,24,.06);
}
.section__head{margin-bottom:12px}
.section__title{
  margin:0;
  font-family:var(--hand);
  font-size:26px;
}
.section__desc{
  margin:8px 0 0;
  opacity:.78;
  line-height:1.7;
}

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

.radar svg{width:100%; height:auto}
.radar__grid polygon{
  fill: none;
  stroke: rgba(17,19,24,.16);
  stroke-width: 1;
}
.radar__axes line{stroke: rgba(17,19,24,.12)}
.radar__shape{
  stroke: rgba(17,19,24,.12);
  stroke-width:1.2;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.16));
  animation: pulseRadar 5.8s ease-in-out infinite;
}
@keyframes pulseRadar{
  0%,100%{transform:scale(1); opacity:.88}
  50%{transform:scale(1.015); opacity:1}
}
.radar__labels text{
  font-family: var(--mono);
  font-size: 11px;
  fill: rgba(17,19,24,.72);
}

.filmstrip{
  border-radius:18px;
  border:1px dashed rgba(17,19,24,.18);
  background:
    linear-gradient(90deg, rgba(17,19,24,.06), rgba(255,255,255,0) 16%),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0));
  padding:12px;
  overflow:auto hidden;
  scrollbar-width: thin;
}
.filmstrip__reel{display:flex; gap:10px; min-width:640px}
.frame{
  width:240px;
  border-radius:16px;
  background: rgba(255,255,255,.24);
  border:1px solid rgba(17,19,24,.10);
  padding:12px;
  position:relative;
  transition: transform .26s ease, background .26s ease;
}
.frame:hover{transform:translateY(-3px); background: rgba(255,255,255,.34)}
.frame::before,.frame::after{
  content:"";
  position:absolute;
  top:10px; bottom:10px;
  width:8px;
  background: repeating-linear-gradient(180deg, rgba(17,19,24,.20) 0 6px, rgba(17,19,24,0) 6px 14px);
  opacity:.26;
  border-radius:6px;
}
.frame::before{left:8px}
.frame::after{right:8px}
.frame__date{font-family:var(--mono); font-size:11px; opacity:.72}
.frame__title{margin-top:8px; font-family:var(--hand); font-size:16px}
.frame__desc{margin-top:6px; opacity:.78; line-height:1.6}

.gauges{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px}
.gauge{display:grid; justify-items:center; gap:8px; padding:10px 6px}
.gauge__ring{
  width:86px; height:86px; border-radius:50%;
  --p-current:0;
  background:
    conic-gradient(rgba(165,216,213,.95) calc(var(--p-current) * 1turn), rgba(17,19,24,.08) 0),
    radial-gradient(circle, rgba(255,255,255,.36) 0 48%, rgba(255,255,255,0) 52%);
  border:1px solid rgba(17,19,24,.10);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.gauge__label{font-family:var(--mono); font-size:11px; opacity:.70; text-align:center}
.gauge__value{font-size:14px}

.list{margin:0; padding-left:18px; line-height:1.8}
.list strong{font-family:var(--mono); font-weight:600}

.skillTree{
  position:relative;
  min-height:220px;
  border-radius:20px;
  border:1px solid rgba(17,19,24,.12);
  background:
    radial-gradient(circle at 25% 30%, rgba(248,195,205,.30), rgba(248,195,205,0) 55%),
    radial-gradient(circle at 70% 55%, rgba(165,216,213,.32), rgba(165,216,213,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0));
  overflow:hidden;
}
.node{
  position:absolute;
  border:1px solid rgba(17,19,24,.12);
  background: rgba(255,255,255,.30);
  border-radius:999px;
  padding:10px 12px;
  cursor:pointer;
  font-family:var(--mono);
  font-size:12px;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.node:hover{transform:translateY(-1px); background: rgba(255,255,255,.44)}
.node.is-on{background: linear-gradient(135deg, rgba(245,230,202,.72), rgba(165,216,213,.40)); box-shadow: 0 14px 26px rgba(0,0,0,.12)}
.node[data-node="insight"]{left:10%; top:18%}
.node[data-node="framing"]{left:38%; top:34%}
.node[data-node="prototype"]{left:62%; top:24%}
.node[data-node="deliver"]{left:26%; top:62%}
.node[data-node="growth"]{left:62%; top:64%}
.skillTree__hint{
  position:absolute; left:14px; bottom:12px; right:14px;
  padding:10px 12px;
  border-radius:16px;
  background: rgba(255,255,255,.26);
  border:1px solid rgba(17,19,24,.10);
  font-family:var(--mono);
  font-size:12px;
  opacity:.82;
}

.sandbox{display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:stretch}
.sandbox__map{
  border-radius:18px;
  border:1px solid rgba(17,19,24,.12);
  background:
    radial-gradient(circle at 30% 30%, rgba(165,216,213,.32), rgba(165,216,213,0) 55%),
    radial-gradient(circle at 70% 65%, rgba(248,195,205,.28), rgba(248,195,205,0) 55%),
    linear-gradient(135deg, rgba(17,19,24,.10), rgba(255,255,255,0));
  position:relative;
  overflow:hidden;
}
.sandbox__map::after{
  content:"";
  position:absolute; inset:-20%;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.12) 0 12px, rgba(255,255,255,0) 12px 26px);
  opacity:.28;
  transform: rotate(8deg);
}
.sandbox__tree{display:flex; flex-direction:column; gap:8px}
.treeItem{
  border-radius:16px;
  padding:10px 12px;
  border:1px solid rgba(17,19,24,.12);
  background: rgba(255,255,255,.22);
}
.treeItem.is-active{background: linear-gradient(135deg, rgba(165,216,213,.40), rgba(248,195,205,.22))}
.treeItem__k{font-family:var(--mono); font-size:12px}
.treeItem__v{opacity:.74; margin-top:3px}

.workbench{display:grid; gap:10px}
.workbench__canvas{
  height:120px;
  border-radius:18px;
  border:1px solid rgba(17,19,24,.12);
  background:
    radial-gradient(circle at 60% 40%, rgba(255,255,255,.40), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, rgba(17,19,24,.10), rgba(255,255,255,0)),
    radial-gradient(circle at 20% 80%, rgba(248,195,205,.26), rgba(248,195,205,0) 50%);
  position:relative;
  overflow:hidden;
}
.workbench__canvas::after{
  content:"";
  position:absolute; inset:-10%;
  background: radial-gradient(circle at 20% 30%, rgba(165,216,213,.40), rgba(165,216,213,0) 50%);
  opacity:.6;
  animation: dataFlow 7s infinite ease-in-out;
}
@keyframes dataFlow{
  0%,100%{transform:translateX(-6%)}
  50%{transform:translateX(6%)}
}
.workbench__tags{display:flex; flex-wrap:wrap; gap:8px}
.tag{
  font-family:var(--mono);
  font-size:11px;
  padding:7px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.24);
  border:1px solid rgba(17,19,24,.10);
}
.workbench__note{
  padding:10px 12px;
  border-radius:18px;
  border:1px solid rgba(17,19,24,.12);
  background: rgba(245,230,202,.62);
}

.timeline{
  border-radius: 22px;
  border:1px solid rgba(17,19,24,.12);
  padding:14px;
  background: rgba(255,255,255,.16);
}
.tItem{display:grid; grid-template-columns:18px 1fr; gap:10px; padding:12px 8px; position:relative}
.tItem + .tItem{border-top:1px dashed rgba(17,19,24,.14)}
.tItem__dot{
  width:12px; height:12px; border-radius:50%;
  margin-top:3px;
  background: linear-gradient(135deg, rgba(165,216,213,.92), rgba(248,195,205,.80));
  border:1px solid rgba(17,19,24,.12);
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
}
.tItem__title{font-family:var(--hand); font-size:16px}
.tItem__desc{opacity:.78; line-height:1.7; margin-top:6px}

.progress{display:grid; gap:12px}
.progress__row{display:grid; grid-template-columns: 70px 1fr 90px; gap:10px; align-items:center}
.progress__label{font-family:var(--mono); font-size:12px; opacity:.74}
.progress__value{font-family:var(--mono); font-size:11px; opacity:.70; text-align:right}
.bar{
  height:10px;
  border-radius:999px;
  background: rgba(17,19,24,.10);
  overflow:hidden;
  border:1px solid rgba(17,19,24,.10);
}
.bar__fill{
  height:100%;
  width: calc(var(--p-current, 0) * 100%);
  background: linear-gradient(90deg, rgba(165,216,213,.92), rgba(248,195,205,.78));
  transition: width 1.1s cubic-bezier(.16,.82,.24,1);
}

.achievements{display:grid; gap:10px}
.badge{
  display:flex; gap:12px; align-items:center;
  border-radius:18px;
  border:1px solid rgba(17,19,24,.12);
  background: rgba(255,255,255,.20);
  padding:12px;
  opacity:.45;
  filter: grayscale(.35);
  transform: translateY(0);
  transition: opacity .18s ease, filter .18s ease, transform .18s ease, background .18s ease;
}
.badge.is-on{
  opacity:1;
  filter: none;
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(245,230,202,.62), rgba(165,216,213,.26), rgba(248,195,205,.26));
  animation: badgeFlash .65s ease;
}
@keyframes badgeFlash{
  0%{transform:translateY(0) scale(.97); filter:brightness(1.08)}
  100%{transform:translateY(-1px) scale(1); filter:brightness(1)}
}
.badge__icon{
  width:42px; height:42px; border-radius:16px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, rgba(165,216,213,.86), rgba(248,195,205,.78));
  border:1px solid rgba(17,19,24,.12);
}
.badge__title{font-family:var(--hand); font-size:16px}
.badge__desc{font-family:var(--mono); font-size:11px; opacity:.70; margin-top:4px}

.footer{
  margin-top:24px;
  border-top:1px solid rgba(17,19,24,.10);
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(16px);
}
.footer__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:18px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.footer__title{font-family:var(--hand); font-size:16px}
.footer__links{margin-top:6px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.footer__links a{color:rgba(17,19,24,.82); text-decoration:none; font-family:var(--mono); font-size:12px}
.footer__links a:hover{text-decoration:underline}
.dot{width:4px; height:4px; border-radius:50%; background: rgba(17,19,24,.26)}
.footer__note{font-family:var(--mono); font-size:11px; opacity:.68}

.modal::backdrop{
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}
.modal{
  border:none;
  background: transparent;
  padding: 18px;
  max-width: 720px;
  width: calc(100% - 20px);
}
.modal__panel{
  width:100%;
  border-radius: 22px;
  background: rgba(255,255,255,.26);
  border:1px solid rgba(255,255,255,.24);
  box-shadow: var(--shadow);
}
.modal__head{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 14px 10px;
  border-bottom:1px solid rgba(17,19,24,.10);
}
.modal__title{font-family:var(--hand); font-size:18px}
.modal__body{padding:14px}
.contactRow{display:grid; grid-template-columns:120px 1fr; gap:10px; padding:10px 0}
.contactRow + .contactRow{border-top:1px dashed rgba(17,19,24,.14)}
.contactRow__k{font-family:var(--mono); font-size:12px; opacity:.72}
.muted{opacity:.7}
.linkBtn{
  border:none;
  background: rgba(245,230,202,.62);
  border:1px solid rgba(17,19,24,.12);
  border-radius: 14px;
  padding:10px 12px;
  font-family:var(--mono);
  font-size:12px;
  cursor:pointer;
}
.linkBtn:hover{background: rgba(245,230,202,.78)}

/* Lens flare stub (JS will animate opacity/position) */
.lens-flare{
  position:absolute;
  inset:auto;
  width:140px;
  height:140px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.75), rgba(255,255,255,0) 60%);
  mix-blend-mode: soft-light;
  filter: blur(1px);
  opacity: 0;
  pointer-events:none;
  transform: translate3d(0,0,0);
}

/* Old TV snow transition layer */
.transition{
  position:fixed; inset:0;
  z-index:999;
  background:
    radial-gradient(circle, rgba(255,255,255,.06), rgba(255,255,255,0) 55%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.09) 0 1px, rgba(0,0,0,0) 1px 3px);
  opacity:0;
  pointer-events:none;
}
.transition.is-on{opacity:1}

.reveal{
  opacity:0;
  transform: translate3d(0, 24px, 0) scale(.985);
  filter: blur(3px);
  transition:
    opacity .8s cubic-bezier(.16,.84,.22,1),
    transform .8s cubic-bezier(.16,.84,.22,1),
    filter .8s ease;
}
.reveal.is-visible{
  opacity:1;
  transform: translate3d(0,0,0) scale(1);
  filter: blur(0);
}

.parallax{
  will-change: transform;
}

/* Sakura rain */
.sakura{
  position:fixed;
  inset:-20px 0 0 0;
  pointer-events:none;
  z-index:60;
  overflow:hidden;
}
.petal{
  position:absolute;
  width:12px; height:9px;
  background: rgba(248,195,205,.88);
  border-radius: 12px 12px 12px 12px;
  transform: rotate(20deg);
  filter: blur(.1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

/* Typewriter */
.typewriter{font-family: var(--serif)}
.typewriter.is-typing{border-right: 1px solid rgba(17,19,24,.44); padding-right: 2px}

@media (max-width: 980px){
  .hero{grid-template-columns:1fr}
  .hero__headline{font-size:38px}
  .grid--3{grid-template-columns:1fr}
  .grid--2{grid-template-columns:1fr}
  .gauges{grid-template-columns:repeat(2, minmax(0,1fr))}
  .contactRow{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
  body{animation:none}
  .reveal{opacity:1; transform:none; filter:none}
  .intro{display:none}
}