:root{
  --bg:#0a0910;
  --bg2:#14111c;
  --bg3:#1c1826;
  --gold:#e8c88a;
  --gold2:#d4a24e;
  --violet:#9b7bff;
  --rose:#ff8fb1;
  --text:#f3eee6;
  --muted:#a79d92;
  --line:rgba(232,200,138,0.14);
  --shadow:0 20px 60px rgba(0,0,0,0.45);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Noto Sans SC',sans-serif;
  overflow-x:hidden;
  line-height:1.7;
}
h1,h2,h3,h4{font-family:'Noto Serif SC',serif;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
::selection{background:var(--gold);color:#1a1408;}

::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--gold2),var(--violet));border-radius:4px;}

.bg-fixed{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 15% 20%, rgba(155,123,255,0.14), transparent 40%),
    radial-gradient(circle at 85% 10%, rgba(232,200,138,0.10), transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(255,143,177,0.08), transparent 40%);
}
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- header ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 6vw;
  backdrop-filter:blur(14px) saturate(160%);
  background:rgba(10,9,16,0.55);
  border-bottom:1px solid transparent;
  transition:border-color .4s ease, background .4s ease;
}
header.scrolled{border-color:var(--line);background:rgba(10,9,16,0.82);}
.logo{
  font-family:'Noto Serif SC',serif;font-weight:700;font-size:1.15rem;
  letter-spacing:.08em;display:flex;align-items:center;gap:10px;
  background:linear-gradient(120deg,var(--gold),var(--rose) 60%,var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.back-link{
  font-size:.8rem;color:var(--muted);border:1px solid var(--line);padding:7px 16px;border-radius:999px;
  display:inline-flex;align-items:center;gap:6px;transition:all .3s;background:rgba(255,255,255,0.02);
  -webkit-text-fill-color:var(--muted);
}
.back-link:hover{color:var(--text);border-color:var(--gold);-webkit-text-fill-color:var(--text);}
nav ul{list-style:none;display:flex;gap:26px;}
nav a{
  font-size:.86rem;color:var(--muted);letter-spacing:.03em;position:relative;padding:4px 0;
  transition:color .3s;white-space:nowrap;
}
nav a::after{
  content:'';position:absolute;left:0;bottom:-2px;width:0;height:1px;
  background:linear-gradient(90deg,var(--gold),var(--violet));
  transition:width .35s ease;
}
nav a:hover, nav a.active{color:var(--text);}
nav a:hover::after, nav a.active::after{width:100%;}

/* ---------- hero (hub landing) ---------- */
.hero{
  position:relative;min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:120px 6vw 60px;overflow:hidden;
}
#heroCanvas{position:absolute;inset:0;z-index:0;pointer-events:none;}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background-image:linear-gradient(180deg, rgba(10,9,16,0.55), rgba(10,9,16,0.9) 65%, var(--bg) 100%), url('https://images.unsplash.com/photo-1727451139462-cd34008cd50b?q=80&w=1800&auto=format&fit=crop');
  background-size:cover;background-position:center 30%;
  opacity:.5;filter:saturate(1.1);
}
.hero-tilt{position:relative;z-index:2;transition:transform .15s ease-out;will-change:transform;}
.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;z-index:0;}
.orb1{width:420px;height:420px;background:radial-gradient(circle,var(--violet),transparent 70%);top:-100px;left:-80px;animation:float1 16s ease-in-out infinite;}
.orb2{width:360px;height:360px;background:radial-gradient(circle,var(--gold),transparent 70%);bottom:-120px;right:-60px;animation:float2 20s ease-in-out infinite;}
.orb3{width:260px;height:260px;background:radial-gradient(circle,var(--rose),transparent 70%);top:40%;right:20%;animation:float3 14s ease-in-out infinite;}
@keyframes float1{0%,100%{transform:translate(0,0);}50%{transform:translate(60px,50px);}}
@keyframes float2{0%,100%{transform:translate(0,0);}50%{transform:translate(-40px,-60px);}}
@keyframes float3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-30px,40px) scale(1.15);}}

.eyebrow{
  position:relative;z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;letter-spacing:.22em;color:var(--gold);
  border:1px solid var(--line);padding:8px 18px;border-radius:999px;
  background:rgba(232,200,138,0.05);margin-bottom:28px;
  opacity:0;animation:riseIn .9s ease forwards .1s;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}

.hero h1{
  position:relative;z-index:2;
  font-size:clamp(2.6rem,7vw,5.6rem);font-weight:900;line-height:1.15;
  letter-spacing:.02em;
}
.hero h1 .chars{display:inline-block;opacity:0;transform:translateY(.4em) rotateX(-40deg);animation:charIn .7s cubic-bezier(.2,.8,.2,1) forwards;}
@keyframes charIn{to{opacity:1;transform:translateY(0) rotateX(0);}}
.hero h1 .grad{
  background:linear-gradient(100deg,var(--gold) 10%,var(--rose) 45%,var(--violet) 80%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% auto;
  opacity:0;
  animation:gradIn .8s ease forwards .55s, sheen 6s linear infinite 1.35s;
}
@keyframes sheen{to{background-position:200% center;}}
@keyframes gradIn{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}

.hero p.sub{
  position:relative;z-index:2;max-width:640px;margin:26px auto 0;
  color:var(--muted);font-size:1.05rem;font-weight:300;
  opacity:0;animation:riseIn 1s ease forwards 1.1s;
}
.hero .cta{
  position:relative;z-index:2;margin-top:44px;display:flex;gap:18px;flex-wrap:wrap;justify-content:center;
  opacity:0;animation:riseIn 1s ease forwards 1.3s;
}
.btn{
  padding:14px 30px;border-radius:999px;font-size:.9rem;letter-spacing:.03em;
  cursor:pointer;transition:transform .35s ease, box-shadow .35s ease, background .35s;
  border:1px solid var(--line);
}
.btn-primary{
  background:linear-gradient(120deg,var(--gold2),var(--gold));color:#241a09;font-weight:600;
  box-shadow:0 8px 30px rgba(212,162,78,0.25);
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(212,162,78,0.4);}
.btn-ghost{color:var(--text);background:rgba(255,255,255,0.03);}
.btn-ghost:hover{transform:translateY(-3px);border-color:var(--gold);}

@keyframes riseIn{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:translateY(0);}}

.scroll-cue{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted);font-size:.72rem;letter-spacing:.2em;
}
.scroll-cue .line{width:1px;height:34px;background:linear-gradient(var(--gold),transparent);animation:scrollLine 1.8s ease infinite;}
@keyframes scrollLine{0%{transform:scaleY(0);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}51%{transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}

/* ---------- page banner (subpages) ---------- */
.page-banner{
  position:relative;z-index:2;padding:160px 6vw 70px;text-align:center;overflow:hidden;
}
.page-banner .tag{font-size:.76rem;letter-spacing:.25em;color:var(--violet);text-transform:uppercase;margin-bottom:16px;display:block;opacity:0;animation:riseIn .8s ease forwards .05s;}
.page-banner h1{font-size:clamp(2rem,4.4vw,3.2rem);font-weight:900;margin-bottom:18px;opacity:0;animation:riseIn .9s ease forwards .15s;}
.page-banner p{color:var(--muted);font-size:1rem;font-weight:300;max-width:620px;margin:0 auto;opacity:0;animation:riseIn 1s ease forwards .28s;}
.page-banner .breadcrumb{opacity:0;animation:riseIn .8s ease forwards 0s;margin-bottom:22px;display:flex;justify-content:center;}

/* ---------- generic section ---------- */
section{position:relative;z-index:2;padding:110px 6vw;}
.section-head{max-width:720px;margin:0 auto 64px;text-align:center;}
.section-head .tag{
  font-size:.76rem;letter-spacing:.25em;color:var(--violet);text-transform:uppercase;margin-bottom:14px;display:block;
}
.section-head h2{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:700;margin-bottom:16px;}
.section-head p{color:var(--muted);font-size:1rem;font-weight:300;}

.reveal{opacity:0;transform:translateY(36px);transition:opacity .9s ease, transform .9s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal.d1{transition-delay:.08s;}
.reveal.d2{transition-delay:.16s;}
.reveal.d3{transition-delay:.24s;}
.reveal.d4{transition-delay:.32s;}

/* ---------- hub module grid ---------- */
.hub-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:1300px;margin:0 auto;}
@media(max-width:1100px){.hub-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.hub-grid{grid-template-columns:1fr;}}
.hub-tile{
  position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line);
  min-height:280px;display:flex;flex-direction:column;justify-content:flex-end;padding:30px 28px;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease, border-color .5s ease;
  cursor:pointer;
}
.hub-tile:hover{transform:translateY(-10px) scale(1.015);box-shadow:var(--shadow);border-color:var(--gold);}
.hub-tile .tile-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;transition:transform .8s ease;filter:saturate(1.05) brightness(.75);}
.hub-tile:hover .tile-bg{transform:scale(1.1);}
.hub-tile.grad-only .tile-bg{background:linear-gradient(150deg,var(--bg3),var(--bg2));}
.hub-tile .tile-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(6,5,10,0.92) 10%,rgba(6,5,10,0.35) 60%,rgba(6,5,10,0.15));}
.hub-tile .tile-content{position:relative;z-index:2;}
.hub-tile .tile-icon{font-size:1.6rem;margin-bottom:14px;opacity:.9;}
.hub-tile h3{font-size:1.28rem;margin-bottom:10px;font-weight:700;}
.hub-tile p{font-size:.86rem;color:var(--muted);font-weight:300;margin-bottom:16px;}
.hub-tile .enter{
  font-size:.78rem;color:var(--gold);letter-spacing:.05em;display:inline-flex;align-items:center;gap:6px;
}
.hub-tile .enter .arrow{transition:transform .35s ease;}
.hub-tile:hover .enter .arrow{transform:translateX(6px);}
.hub-tile.big{grid-column:span 2;min-height:340px;}
.hub-tile .badge{
  position:absolute;top:20px;right:20px;z-index:2;font-size:.7rem;letter-spacing:.15em;color:var(--gold);
  border:1px solid rgba(232,200,138,0.35);padding:5px 12px;border-radius:999px;background:rgba(10,9,16,0.5);
}

/* ---------- stats ---------- */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  max-width:1100px;margin:0 auto;
}
.stat{background:var(--bg2);padding:38px 20px;text-align:center;}
.stat .num{
  font-family:'Noto Serif SC',serif;font-weight:900;font-size:2.4rem;
  background:linear-gradient(120deg,var(--gold),var(--rose));-webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat .label{margin-top:10px;font-size:.82rem;color:var(--muted);letter-spacing:.02em;}

/* ---------- grids & cards ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1180px;margin:0 auto;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:1180px;margin:0 auto;}

.card{
  background:linear-gradient(160deg,var(--bg3),var(--bg2));
  border:1px solid var(--line);border-radius:18px;padding:34px 30px;
  position:relative;overflow:hidden;transition:transform .45s ease, border-color .45s ease, box-shadow .45s ease;
}
.card::before{
  content:'';position:absolute;inset:0;border-radius:18px;padding:1px;
  background:linear-gradient(140deg,var(--gold),transparent 30%,transparent 70%,var(--violet));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .45s;
}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow);}
.card:hover::before{opacity:1;}
.card .icon{
  width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(232,200,138,0.16),rgba(155,123,255,0.16));
  font-size:1.35rem;margin-bottom:20px;
}
.card h3{font-size:1.12rem;margin-bottom:12px;font-weight:600;}
.card p{color:var(--muted);font-size:.9rem;font-weight:300;}
.card .num-mark{
  position:absolute;top:18px;right:22px;font-family:'Noto Serif SC',serif;font-size:2.6rem;font-weight:900;
  color:rgba(255,255,255,0.05);
}

.dodont{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.dd-col{border-radius:18px;padding:30px 28px;border:1px solid var(--line);}
.dd-col.good{background:linear-gradient(160deg,rgba(232,200,138,0.08),transparent);}
.dd-col.bad{background:linear-gradient(160deg,rgba(255,90,90,0.06),transparent);}
.dd-col h4{font-size:1rem;margin-bottom:18px;display:flex;align-items:center;gap:10px;}
.dd-col.good h4{color:var(--gold);}
.dd-col.bad h4{color:#ff8a8a;}
.dd-col ul{list-style:none;}
.dd-col li{
  padding:10px 0 10px 26px;position:relative;color:var(--muted);font-size:.9rem;font-weight:300;
  border-bottom:1px dashed var(--line);
}
.dd-col li:last-child{border-bottom:none;}
.dd-col.good li::before{content:'✓';position:absolute;left:0;color:var(--gold);font-weight:700;}
.dd-col.bad li::before{content:'✕';position:absolute;left:0;color:#ff8a8a;font-weight:700;}

/* ---------- image gallery ---------- */
.img-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1100px;margin:0 auto;}
.img-card{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:3/4;border:1px solid var(--line);box-shadow:var(--shadow);}
.img-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease,filter .7s ease;filter:saturate(1.05) contrast(1.02);}
.img-card:hover img{transform:scale(1.08);}
.img-card .cap{position:absolute;left:0;right:0;bottom:0;padding:18px;background:linear-gradient(0deg,rgba(0,0,0,0.8),transparent 80%);}
.img-card .cap b{color:var(--gold);font-weight:600;display:block;font-size:.92rem;margin-bottom:2px;}
.img-card .cap span{color:var(--muted);font-size:.74rem;}
.gallery-caption{text-align:center;color:var(--muted);font-size:.8rem;margin-top:16px;}

/* ---------- shot bars ---------- */
.shots{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:18px;}
.shot-row{display:grid;grid-template-columns:120px 1fr 60px;align-items:center;gap:18px;}
.shot-row .name{font-size:.88rem;color:var(--muted);}
.shot-bar{height:10px;border-radius:6px;background:rgba(255,255,255,0.06);overflow:hidden;}
.shot-fill{height:100%;border-radius:6px;width:0%;background:linear-gradient(90deg,var(--gold2),var(--rose),var(--violet));transition:width 1.4s cubic-bezier(.2,.8,.2,1);}
.shot-row .pct{font-size:.82rem;color:var(--gold);text-align:right;}

/* ---------- formula & flow ---------- */
.formula{max-width:1000px;margin:0 auto 50px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
.f-chip{
  padding:14px 20px;border-radius:14px;border:1px solid var(--line);
  background:var(--bg2);font-size:.88rem;display:flex;flex-direction:column;gap:4px;min-width:110px;text-align:center;
  transition:transform .3s ease, border-color .3s;
}
.f-chip:hover{transform:translateY(-4px);border-color:var(--gold);}
.f-chip b{font-family:'Noto Serif SC',serif;color:var(--gold);font-size:.98rem;}
.f-chip span{color:var(--muted);font-size:.72rem;}
.f-plus{color:var(--muted);align-self:center;font-size:1.2rem;}

.flow{max-width:1100px;margin:0 auto;position:relative;}
.flow-line{position:absolute;top:34px;left:5%;right:5%;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 15%,var(--violet) 50%,var(--rose) 85%,transparent);opacity:.4;}
.flow-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;position:relative;}
.flow-step{text-align:center;}
.flow-step .circle{
  width:68px;height:68px;margin:0 auto 16px;border-radius:50%;
  background:var(--bg2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;
  transition:transform .4s ease, box-shadow .4s;
}
.flow-step:hover .circle{transform:scale(1.1) rotate(-6deg);box-shadow:0 0 30px rgba(232,200,138,0.3);}
.flow-step h4{font-size:.9rem;margin-bottom:6px;}
.flow-step p{font-size:.78rem;color:var(--muted);font-weight:300;}

/* ---------- prompt academy ---------- */
.layer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1180px;margin:0 auto;}
.layer-card{
  background:linear-gradient(160deg,var(--bg3),var(--bg2));border:1px solid var(--line);border-radius:16px;
  padding:26px 22px;position:relative;transition:transform .4s ease, border-color .4s ease;
}
.layer-card:hover{transform:translateY(-6px);border-color:var(--gold);}
.layer-card .lnum{
  font-family:'Noto Serif SC',serif;font-weight:900;font-size:1.6rem;color:rgba(232,200,138,0.35);
  margin-bottom:10px;
}
.layer-card h4{font-size:.98rem;margin-bottom:8px;color:var(--gold);}
.layer-card p{font-size:.82rem;color:var(--muted);font-weight:300;margin-bottom:10px;}
.layer-card .ex{
  font-size:.76rem;color:var(--text);background:rgba(255,255,255,0.04);border-radius:8px;padding:8px 10px;
  border-left:2px solid var(--violet);font-style:normal;
}

.syntax-table{width:100%;max-width:1100px;margin:0 auto;border-collapse:collapse;border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.syntax-table th,.syntax-table td{padding:16px 18px;text-align:left;font-size:.84rem;border-bottom:1px solid var(--line);}
.syntax-table th{background:var(--bg2);color:var(--gold);font-weight:600;letter-spacing:.02em;}
.syntax-table td{color:var(--muted);font-weight:300;}
.syntax-table td b{color:var(--text);font-weight:600;}
.syntax-table tr:last-child td{border-bottom:none;}
.syntax-table tr:hover td{background:rgba(232,200,138,0.03);}

.tabs{display:flex;gap:10px;justify-content:center;margin-bottom:36px;flex-wrap:wrap;}
.tab-btn{
  padding:11px 24px;border-radius:999px;border:1px solid var(--line);background:var(--bg2);color:var(--muted);
  cursor:pointer;font-size:.86rem;transition:all .3s ease;font-family:'Noto Sans SC',sans-serif;
}
.tab-btn:hover{border-color:var(--gold);color:var(--text);}
.tab-btn.active{background:linear-gradient(120deg,var(--gold2),var(--gold));color:#241a09;border-color:transparent;font-weight:600;}
.tab-panel{display:none;max-width:900px;margin:0 auto;}
.tab-panel.active{display:block;}

.code-block{
  background:#0d0c14;border:1px solid var(--line);border-radius:16px;padding:28px 26px;
  font-size:.86rem;line-height:2;color:#d8d0c4;white-space:pre-wrap;position:relative;font-family:'Noto Sans SC',sans-serif;
}
.code-block b{color:var(--gold);font-weight:600;}
.code-block .neg{color:#ff9a9a;}
.copy-btn{
  position:absolute;top:16px;right:16px;padding:7px 16px;font-size:.72rem;border-radius:8px;
  border:1px solid var(--line);background:rgba(255,255,255,0.04);color:var(--gold);cursor:pointer;
  transition:all .25s ease;font-family:'Noto Sans SC',sans-serif;
}
.copy-btn:hover{border-color:var(--gold);background:rgba(232,200,138,0.08);}
.copy-btn.copied{color:#8fffb0;border-color:#8fffb0;}

.compare-prompt{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.cp-col{border-radius:18px;padding:26px 24px;border:1px solid var(--line);}
.cp-col.weak{background:linear-gradient(160deg,rgba(255,90,90,0.06),transparent);}
.cp-col.strong{background:linear-gradient(160deg,rgba(232,200,138,0.08),transparent);}
.cp-col h4{font-size:.95rem;margin-bottom:14px;}
.cp-col.weak h4{color:#ff8a8a;}
.cp-col.strong h4{color:var(--gold);}
.cp-col .txt{font-size:.86rem;color:var(--text);line-height:1.9;margin-bottom:16px;padding:14px 16px;background:rgba(0,0,0,0.2);border-radius:10px;}
.cp-col ul{list-style:none;}
.cp-col li{padding:7px 0 7px 22px;position:relative;font-size:.8rem;color:var(--muted);font-weight:300;}
.cp-col.weak li::before{content:'✕';position:absolute;left:0;color:#ff8a8a;}
.cp-col.strong li::before{content:'✓';position:absolute;left:0;color:var(--gold);}

.emo-table{width:100%;max-width:900px;margin:0 auto;border-collapse:collapse;}
.emo-table td{padding:14px 16px;font-size:.86rem;border-bottom:1px dashed var(--line);}
.emo-table td:first-child{color:var(--rose);font-weight:600;width:110px;white-space:nowrap;}
.emo-table td:last-child{color:var(--muted);font-weight:300;}
.emo-table tr:last-child td{border-bottom:none;}

.term-chips{display:flex;flex-wrap:wrap;gap:10px;max-width:1000px;margin:0 auto;justify-content:center;}
.term-chip{padding:9px 18px;border-radius:999px;border:1px solid var(--line);background:var(--bg2);font-size:.82rem;color:var(--muted);transition:all .3s;}
.term-chip:hover{border-color:var(--gold);color:var(--text);transform:translateY(-2px);}
.term-chip.neg{border-color:rgba(255,138,138,0.25);color:#ff9a9a;}
.term-chip.neg:hover{border-color:#ff8a8a;}

.path-steps{max-width:800px;margin:0 auto;position:relative;padding-left:36px;}
.path-steps::before{content:'';position:absolute;left:11px;top:8px;bottom:8px;width:1px;background:linear-gradient(var(--gold),var(--violet));opacity:.4;}
.path-step{position:relative;padding-bottom:36px;}
.path-step:last-child{padding-bottom:0;}
.path-step .pnum{
  position:absolute;left:-36px;top:0;width:24px;height:24px;border-radius:50%;background:var(--bg2);
  border:1px solid var(--gold);color:var(--gold);font-size:.76rem;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.path-step h4{font-size:.96rem;margin-bottom:6px;}
.path-step p{font-size:.82rem;color:var(--muted);font-weight:300;}

/* ---------- case studies ---------- */
.meta-strip{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 28px;}
.meta-chip{padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--bg2);font-size:.78rem;color:var(--muted);}
.meta-chip b{color:var(--gold);font-weight:600;}
.quote-block{
  max-width:820px;margin:40px auto;padding:30px 34px;border-left:3px solid var(--gold);
  background:linear-gradient(160deg,rgba(232,200,138,0.06),transparent);border-radius:0 16px 16px 0;
  font-family:'Noto Serif SC',serif;font-size:1.05rem;line-height:1.9;color:var(--text);font-style:normal;
}
.quote-block cite{display:block;margin-top:14px;font-family:'Noto Sans SC',sans-serif;font-size:.78rem;color:var(--muted);font-style:normal;}
.case-block{max-width:1000px;margin:0 auto 100px;}
.case-block .case-head{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:8px;}
.case-block h2{font-size:1.7rem;font-weight:800;}
.case-block .case-sub{color:var(--violet);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;}
.case-media{border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);aspect-ratio:16/9;margin-bottom:8px;}
.case-media img{width:100%;height:100%;object-fit:cover;}
.case-img-note{font-size:.74rem;color:var(--muted);opacity:.7;margin-bottom:30px;}
.compare-table{width:100%;max-width:1000px;margin:0 auto;border-collapse:collapse;border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.compare-table th,.compare-table td{padding:16px 18px;text-align:left;font-size:.84rem;border-bottom:1px solid var(--line);vertical-align:top;}
.compare-table th{background:var(--bg2);color:var(--gold);font-weight:600;}
.compare-table td{color:var(--muted);font-weight:300;}
.compare-table td b{color:var(--text);font-weight:600;}
.compare-table tr:last-child td{border-bottom:none;}

/* ---------- articles ---------- */
.article-row{display:grid;grid-template-columns:0.95fr 1.25fr;gap:48px;align-items:center;max-width:1100px;margin:0 auto 90px;}
.article-row.rev{grid-template-columns:1.25fr 0.95fr;}
.article-row.rev .article-media{order:2;}
.article-media{border-radius:20px;overflow:hidden;aspect-ratio:4/3;border:1px solid var(--line);box-shadow:var(--shadow);position:relative;}
.article-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease;}
.article-media:hover img{transform:scale(1.06);}
.article-body .idx{font-family:'Noto Serif SC',serif;font-size:.78rem;color:var(--violet);letter-spacing:.24em;margin-bottom:12px;display:block;}
.article-body h3{font-size:1.5rem;margin-bottom:18px;font-weight:700;line-height:1.4;}
.article-body p{color:var(--muted);font-size:.92rem;font-weight:300;margin-bottom:14px;}
.article-body p:last-child{margin-bottom:0;}

/* ---------- compare ---------- */
.compare-wrap{max-width:900px;margin:0 auto;}
.compare{
  position:relative;height:420px;border-radius:20px;overflow:hidden;border:1px solid var(--line);
  cursor:ew-resize;user-select:none;box-shadow:var(--shadow);
}
.compare .layer{position:absolute;inset:0;display:flex;align-items:flex-end;padding:26px;}
.layer.after{
  background:
    radial-gradient(circle at 30% 20%, rgba(255,199,120,0.35), transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(155,123,255,0.35), transparent 55%),
    linear-gradient(160deg,#241c30,#0d0b13);
}
.layer.before{
  background:linear-gradient(160deg,#3a3a3a,#1c1c1c);
  filter:grayscale(.5) contrast(.75) brightness(.85);
  clip-path:inset(0 50% 0 0);
}
.layer .tag2{font-size:.75rem;letter-spacing:.15em;padding:6px 14px;border-radius:999px;background:rgba(0,0,0,0.4);border:1px solid var(--line);}
.layer.after .tag2{color:var(--gold);}
.handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--gold);box-shadow:0 0 16px var(--gold);}
.handle .grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;color:#1a1408;font-size:.9rem;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,0.4);}
.compare-caption{display:flex;justify-content:space-between;margin-top:14px;font-size:.8rem;color:var(--muted);}

/* ---------- checklist ---------- */
.check-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.check-card h4{font-size:1rem;margin-bottom:6px;color:var(--gold);}
.check-card .prog-track{height:5px;background:rgba(255,255,255,0.08);border-radius:3px;margin:14px 0 18px;overflow:hidden;}
.check-card .prog-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--gold2),var(--rose));transition:width .4s ease;}
.check-item{display:flex;align-items:flex-start;gap:10px;padding:9px 0;cursor:pointer;font-size:.86rem;color:var(--muted);font-weight:300;transition:color .3s;}
.check-item .box{width:18px;height:18px;border-radius:5px;border:1px solid var(--line);flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center;font-size:.7rem;transition:all .25s;}
.check-item.checked{color:var(--text);text-decoration:line-through;text-decoration-color:var(--muted);}
.check-item.checked .box{background:linear-gradient(120deg,var(--gold2),var(--gold));border-color:var(--gold);color:#1a1408;}

/* ---------- footer ---------- */
footer{position:relative;z-index:2;padding:60px 6vw 40px;border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:.82rem;}
footer .logo{margin-bottom:14px;display:inline-block;font-size:1.1rem;}
footer .src{margin-top:18px;font-size:.72rem;opacity:.6;line-height:2;max-width:800px;margin-left:auto;margin-right:auto;}
footer .foot-nav{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:18px;font-size:.8rem;}
footer .foot-nav a{color:var(--muted);transition:color .3s;}
footer .foot-nav a:hover{color:var(--gold);}

.backtotop{
  position:fixed;bottom:28px;right:28px;z-index:60;width:46px;height:46px;border-radius:50%;
  background:var(--bg2);border:1px solid var(--line);color:var(--gold);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:0;pointer-events:none;transform:translateY(10px);transition:all .4s ease;
}
.backtotop.show{opacity:1;pointer-events:auto;transform:translateY(0);}
.backtotop:hover{transform:translateY(-4px);border-color:var(--gold);}

@media(max-width:900px){
  nav{display:none;}
  .grid-3, .dodont, .grid-2, .check-grid, .img-gallery, .layer-grid, .compare-prompt{grid-template-columns:1fr;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .flow-steps{grid-template-columns:repeat(2,1fr);}
  .flow-line{display:none;}
  .shot-row{grid-template-columns:80px 1fr 44px;}
  .article-row, .article-row.rev{grid-template-columns:1fr;gap:26px;}
  .article-row.rev .article-media{order:0;}
  .syntax-table{font-size:.76rem;}
  .syntax-table th,.syntax-table td{padding:10px 8px;}
  .hub-grid{grid-template-columns:1fr;}
  .hub-tile.big{grid-column:span 1;}
}