/* =========================================================
   Claude Opus 5 — landing
   Vibe: Ethereal Glass · Layout: Asymmetrical Bento
   ========================================================= */

:root{
  --bg:#050505;
  --bg-2:#0A0A0B;
  --bg-3:#0E0E10;

  --clay:#D97757;
  --clay-lo:#E29A80;
  --violet:#7C6BF5;
  --mint:#57D9A3;
  --amber:#E3B341;

  --ink:#F6F3F0;
  --muted:rgba(246,243,240,.56);
  --faint:rgba(246,243,240,.34);
  --ghost:rgba(246,243,240,.14);

  --hair:rgba(255,255,255,.075);
  --hair-2:rgba(255,255,255,.045);
  --glass:rgba(255,255,255,.028);
  --glass-2:rgba(255,255,255,.05);

  --r-out:2rem;
  --r-in:calc(2rem - .375rem);
  --pad:.375rem;

  --ease:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.65,.05,.36,1);

  --sans:"Geist",-apple-system,"SF Pro Display","Segoe UI Variable",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono","JetBrains Mono",monospace;

  --shell:1240px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  scroll-behavior:smooth;
  scroll-padding-top:120px;
  -webkit-text-size-adjust:100%;
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  letter-spacing:-.011em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

::selection{background:rgba(217,119,87,.3);color:#fff}

a{color:inherit;text-decoration:none}

code,.mono{font-family:var(--mono);font-size:.875em;letter-spacing:-.02em}

/* ---------- fixed texture layers ---------- */
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

.orbs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(120px);opacity:.5}
.orb--clay{
  width:52vw;height:52vw;top:-16vw;right:-12vw;
  background:radial-gradient(circle,rgba(217,119,87,.34),transparent 68%);
  animation:drift 26s var(--ease-soft) infinite alternate;
}
.orb--violet{
  width:44vw;height:44vw;top:56vh;left:-16vw;
  background:radial-gradient(circle,rgba(124,107,245,.24),transparent 68%);
  animation:drift 34s var(--ease-soft) infinite alternate-reverse;
}
.orb--deep{
  width:60vw;height:40vw;bottom:-14vw;right:-8vw;
  background:radial-gradient(circle,rgba(217,119,87,.14),transparent 70%);
  animation:drift 40s var(--ease-soft) infinite alternate;
}
@keyframes drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(4vw,-5vh,0) scale(1.12)}
}

.shell{width:min(100% - 3rem,var(--shell));margin-inline:auto;position:relative;z-index:1}

/* Grid/flex children default to min-width:auto, so a long <pre> line would
   widen its track and blow out the page. Let every card track shrink. */
.bento > *,.bm-grid > *,.duel > *,.pgrid > *,.prompts > *,.steps > *,
.safety > *,.quotes > *,.effort > *,.effort__notes > *,.hero__grid > *,
.foot__grid > *,.sweep > *,.effort__meta > *,.cta__ids > *,
.bezel,.bezel__core{min-width:0}
.code,.table-wrap{max-width:100%}

/* =========================================================
   DOUBLE BEZEL — every card is a machined enclosure
   ========================================================= */
.bezel{
  position:relative;
  padding:var(--pad);
  border-radius:var(--r-out);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.014));
  border:1px solid var(--hair);
  box-shadow:0 34px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.35);
  isolation:isolate;
}
.bezel__core{
  position:relative;
  border-radius:var(--r-in);
  background:linear-gradient(175deg,#0C0C0E 0%,#08080A 100%);
  border:1px solid var(--hair-2);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.055), inset 0 -30px 60px -50px rgba(217,119,87,.3);
  padding:2rem;
  height:100%;
  overflow:hidden;
}

/* =========================================================
   NAV — floating fluid island
   ========================================================= */
.nav-wrap{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;justify-content:center;
  padding:1.5rem 1.5rem 0;
  pointer-events:none;
}
.nav{
  pointer-events:auto;
  display:flex;align-items:center;gap:1.75rem;
  width:max-content;max-width:100%;
  padding:.5rem .5rem .5rem 1.25rem;
  border-radius:999px;
  background:rgba(10,10,12,.62);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid var(--hair);
  box-shadow:0 20px 50px -26px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .7s var(--ease),box-shadow .7s var(--ease),background .7s var(--ease);
}
.nav.is-shrunk{
  transform:scale(.965);
  background:rgba(8,8,10,.78);
  box-shadow:0 26px 60px -30px rgba(0,0,0,1),inset 0 1px 0 rgba(255,255,255,.09);
}
.nav__brand{
  display:flex;align-items:center;gap:.5rem;
  font-weight:600;font-size:.9rem;letter-spacing:-.02em;white-space:nowrap;
}
.nav__brand svg{color:var(--clay);flex:none}
.nav__links{
  display:flex;align-items:center;gap:1.5rem;list-style:none;
  font-size:.82rem;color:var(--muted);
}
.nav__links a{
  position:relative;padding:.25rem 0;white-space:nowrap;
  transition:color .5s var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:var(--clay);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease);
}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__cta{flex:none}

/* burger */
.burger{
  display:none;position:relative;width:40px;height:40px;flex:none;
  border-radius:999px;border:1px solid var(--hair);
  background:var(--glass);cursor:pointer;
}
.burger span{
  position:absolute;left:50%;width:15px;height:1.4px;border-radius:2px;background:var(--ink);
  transition:transform .6s var(--ease),opacity .4s var(--ease);
}
.burger span:nth-child(1){top:17px;transform:translateX(-50%)}
.burger span:nth-child(2){top:22px;transform:translateX(-50%)}
.burger.is-open span:nth-child(1){transform:translateX(-50%) translateY(2.5px) rotate(45deg)}
.burger.is-open span:nth-child(2){transform:translateX(-50%) translateY(-2.5px) rotate(-45deg)}

/* fullscreen menu */
.menu{
  position:fixed;inset:0;z-index:39;
  display:flex;align-items:center;justify-content:center;
  background:rgba(5,5,5,.86);
  backdrop-filter:blur(36px) saturate(160%);
  -webkit-backdrop-filter:blur(36px) saturate(160%);
  opacity:0;transition:opacity .6s var(--ease);
}
.menu.is-open{opacity:1}
.menu__inner{text-align:center;padding:2rem}
.menu ul{list-style:none;display:flex;flex-direction:column;gap:.35rem}
.menu li{
  opacity:0;transform:translateY(28px);
  transition:opacity .7s var(--ease-out) var(--d,0ms),transform .7s var(--ease-out) var(--d,0ms);
}
.menu.is-open li{opacity:1;transform:translateY(0)}
.menu a{
  font-size:clamp(1.75rem,7vw,2.75rem);font-weight:500;letter-spacing:-.04em;
  transition:color .5s var(--ease);
}
.menu a:hover{color:var(--clay)}
.menu__meta{
  margin-top:2.5rem;color:var(--faint);font-size:.8rem;
  opacity:0;transform:translateY(28px);
  transition:opacity .7s var(--ease-out) var(--d,0ms),transform .7s var(--ease-out) var(--d,0ms);
}
.menu.is-open .menu__meta{opacity:1;transform:translateY(0)}

/* =========================================================
   BUTTONS — island / button-in-button
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;gap:.75rem;
  font-size:.85rem;font-weight:500;letter-spacing:-.015em;white-space:nowrap;
  cursor:pointer;border:none;
  transition:transform .5s var(--ease),background .5s var(--ease),color .5s var(--ease),box-shadow .5s var(--ease);
}
.btn:active{transform:scale(.975)}
.btn--pill{
  padding:.55rem .55rem .55rem 1.15rem;
  border-radius:999px;
  background:var(--glass-2);
  border:1px solid var(--hair);
  color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.btn--pill:hover{background:rgba(255,255,255,.09)}
.btn--primary{
  background:linear-gradient(180deg,#E68A66,#C9663F);
  border-color:rgba(255,255,255,.16);
  color:#160B06;font-weight:600;
  box-shadow:0 12px 34px -14px rgba(217,119,87,.75),inset 0 1px 0 rgba(255,255,255,.35);
  padding:.7rem .7rem .7rem 1.5rem;
}
.btn--primary:hover{
  background:linear-gradient(180deg,#EE9370,#D3714A);
  box-shadow:0 18px 46px -14px rgba(217,119,87,.9),inset 0 1px 0 rgba(255,255,255,.4);
}
.btn__icon{
  display:grid;place-items:center;width:28px;height:28px;flex:none;
  border-radius:999px;background:rgba(255,255,255,.11);
  transition:transform .55s var(--ease),background .55s var(--ease);
}
.btn--primary .btn__icon{background:rgba(0,0,0,.14)}
.btn:hover .btn__icon{transform:translate(3px,-1px) scale(1.06);background:rgba(255,255,255,.2)}
.btn--primary:hover .btn__icon{background:rgba(0,0,0,.22)}
.btn--ghost{
  padding:.7rem 1.25rem;border-radius:999px;color:var(--muted);
  border:1px solid transparent;
}
.btn--ghost:hover{color:var(--ink);border-color:var(--hair);background:var(--glass)}

/* =========================================================
   TYPOGRAPHY PRIMITIVES
   ========================================================= */
.eyebrow{
  display:inline-block;
  padding:.3rem .75rem;border-radius:999px;
  background:var(--glass);border:1px solid var(--hair);
  font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.2em;
  color:var(--clay-lo);
}
h1{
  font-size:clamp(3.4rem,10vw,7.2rem);
  font-weight:600;line-height:.88;letter-spacing:-.055em;
  margin:1.75rem 0 0;
}
h1 em{
  font-style:normal;
  background:linear-gradient(100deg,#F6F3F0 0%,#E8A585 45%,#D97757 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
h2{
  font-size:clamp(2.1rem,5.2vw,3.6rem);
  font-weight:600;line-height:1.02;letter-spacing:-.045em;
}
h2 em{
  font-style:normal;
  background:linear-gradient(100deg,#F6F3F0,#D97757);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
h3{font-size:1.2rem;font-weight:600;letter-spacing:-.028em;line-height:1.25}
h4{font-size:.95rem;font-weight:600;letter-spacing:-.02em}
.vs{color:var(--faint);font-weight:300}

.section{padding:clamp(5.5rem,11vw,9rem) 0;position:relative}
.section--alt{background:linear-gradient(180deg,transparent,rgba(255,255,255,.018) 12%,rgba(255,255,255,.018) 88%,transparent)}
.section__head{max-width:62ch;margin-bottom:clamp(3rem,6vw,5rem)}
.section__head h2{margin:1.5rem 0 1.25rem}
.section__head p{color:var(--muted);font-size:1.05rem;max-width:56ch}
.section__head strong{color:var(--ink);font-weight:500}
.section__head em{font-style:normal}
.section__head p em{color:var(--clay-lo)}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  padding:clamp(9rem,17vw,13rem) 0 clamp(4rem,7vw,6rem);
  position:relative;
}
.hero__grid{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(2.5rem,5vw,4.5rem);align-items:center;
}
.hero__lede{
  margin-top:2rem;max-width:52ch;
  font-size:clamp(1.02rem,1.5vw,1.18rem);
  color:var(--muted);line-height:1.65;
}
.hero__lede strong{color:var(--ink);font-weight:500}
.hero__lede em{font-style:normal;color:var(--clay-lo)}
.hero__lede code{color:var(--clay-lo)}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.5rem}

.hero__stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1.25rem;margin-top:3.5rem;
  padding-top:2rem;border-top:1px solid var(--hair);
}
.hero__stats dt{
  font-size:10px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--faint);margin-bottom:.4rem;
}
.hero__stats dd{font-size:1.5rem;font-weight:600;letter-spacing:-.035em;line-height:1}
.hero__stats dd span{font-size:.78rem;font-weight:400;color:var(--faint);letter-spacing:-.01em}

/* spec card */
.spec{padding:0}
.spec__head{
  display:flex;align-items:center;gap:.6rem;
  padding:1rem 1.35rem;border-bottom:1px solid var(--hair-2);
  background:rgba(255,255,255,.02);
}
.spec__head .mono{font-size:.78rem;color:var(--muted);flex:1}
.dot{
  width:7px;height:7px;border-radius:50%;background:var(--mint);flex:none;
  box-shadow:0 0 0 3px rgba(87,217,163,.14);
  animation:pulse 2.6s var(--ease-soft) infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.tag{
  font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.13em;
  padding:.22rem .55rem;border-radius:999px;
  background:var(--glass);border:1px solid var(--hair);color:var(--muted);
}
.tag--live{color:var(--mint);border-color:rgba(87,217,163,.24);background:rgba(87,217,163,.08)}
.tag--win{color:var(--mint);border-color:rgba(87,217,163,.24);background:rgba(87,217,163,.08)}
.tag--loss{color:var(--amber);border-color:rgba(227,179,65,.24);background:rgba(227,179,65,.08)}

.spec__list{list-style:none;padding:.5rem .35rem}
.spec__list li{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:.7rem 1rem;border-radius:.75rem;
  transition:background .5s var(--ease);
}
.spec__list li:hover{background:rgba(255,255,255,.03)}
.spec__list span{font-size:.82rem;color:var(--faint);padding-top:.1rem}
.spec__list b{
  font-size:.88rem;font-weight:500;text-align:right;display:flex;flex-direction:column;gap:.1rem;
}
.spec__list i{font-style:normal;font-size:.7rem;color:var(--faint);font-weight:400}
.spec__foot{
  display:flex;flex-wrap:wrap;gap:.4rem;
  padding:1rem 1.35rem;border-top:1px solid var(--hair-2);
  background:rgba(255,255,255,.015);
}
.spec__foot span{
  font-size:10px;letter-spacing:.05em;color:var(--faint);
  padding:.22rem .5rem;border-radius:999px;border:1px solid var(--hair-2);
}

/* =========================================================
   MARQUEE BAND
   ========================================================= */
.band{
  border-block:1px solid var(--hair);
  background:rgba(255,255,255,.014);
  overflow:hidden;position:relative;z-index:1;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.band__track{display:flex;width:max-content;animation:slide 46s linear infinite}
.band:hover .band__track{animation-play-state:paused}
.band__set{display:flex;align-items:center;gap:2.5rem;padding:1.1rem 1.25rem;white-space:nowrap}
.band__set span{font-size:.82rem;color:var(--faint)}
.band__set b{color:var(--ink);font-weight:500}
.band__set i{color:var(--clay);font-size:.5rem;font-style:normal}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* =========================================================
   BENTO
   ========================================================= */
.bento{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1rem;grid-auto-flow:dense;
}
.bento__card{grid-column:span 1}
.bento__card--wide{grid-column:span 2}
.bento__card--tall{grid-column:span 2;grid-row:span 2}
.bento__card .bezel,.bento__card .bezel__core{height:100%}

.card{display:flex;flex-direction:column;gap:.85rem}
.card__idx{
  font-size:.7rem;color:var(--clay);letter-spacing:.12em;
  opacity:.75;
}
.card p{font-size:.9rem;color:var(--muted);line-height:1.62}
.card p strong{color:var(--ink);font-weight:500}
.card p em{font-style:normal;color:var(--clay-lo)}
.card code{color:var(--clay-lo);background:rgba(217,119,87,.09);padding:.08em .35em;border-radius:.3rem}

.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.35rem}
.chips li{
  font-size:.7rem;color:var(--faint);
  padding:.28rem .6rem;border-radius:999px;
  background:var(--glass);border:1px solid var(--hair-2);
}

/* context bars */
.ctx{margin-top:auto;padding-top:1.25rem;display:flex;flex-direction:column;gap:.55rem}
.ctx__bar{height:34px;border-radius:.6rem;background:rgba(255,255,255,.03);border:1px solid var(--hair-2);overflow:hidden;position:relative}
.ctx__bar span{
  position:absolute;inset:0;width:var(--w);
  background:linear-gradient(90deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  display:flex;align-items:center;padding-left:.7rem;
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.3s var(--ease) .2s;
}
.is-in .ctx__bar span{transform:scaleX(1)}
.ctx__bar--full span{background:linear-gradient(90deg,rgba(217,119,87,.4),rgba(217,119,87,.13))}
.ctx__bar i{font-style:normal;font-size:.72rem;font-family:var(--mono);color:var(--ink)}
.ctx__legend{font-size:.7rem!important;color:var(--faint)!important;margin-top:.15rem}

/* =========================================================
   COMPARISON TABLES
   ========================================================= */
.table-wrap{padding:0;overflow-x:auto}
.cmp{width:100%;border-collapse:collapse;min-width:720px;font-size:.86rem}
.cmp thead th{
  position:sticky;top:0;z-index:2;
  text-align:left;padding:1.1rem 1.35rem;
  font-size:10px;text-transform:uppercase;letter-spacing:.16em;font-weight:500;
  color:var(--faint);
  background:#0B0B0D;
  border-bottom:1px solid var(--hair);
}
.cmp thead th.is-hero{color:var(--clay-lo)}
.cmp tbody th{
  text-align:left;font-weight:500;font-size:.86rem;
  padding:1rem 1.35rem;color:var(--ink);vertical-align:top;
  width:24%;
}
.cmp tbody td{
  padding:1rem 1.35rem;color:var(--muted);vertical-align:top;line-height:1.5;
}
.cmp tbody tr{
  border-bottom:1px solid var(--hair-2);
  transition:background .5s var(--ease);
}
.cmp tbody tr:last-child{border-bottom:none}
.cmp tbody tr:hover{background:rgba(255,255,255,.022)}
.cmp td.is-hero{
  color:var(--ink);
  background:linear-gradient(90deg,rgba(217,119,87,.055),rgba(217,119,87,.018));
  box-shadow:inset 1px 0 0 rgba(217,119,87,.16);
}
.cmp td.is-hero b{font-weight:600;color:#fff}
.cmp em{font-style:normal;color:var(--faint);font-size:.92em}
.cmp code{
  color:var(--clay-lo);background:rgba(217,119,87,.09);
  padding:.12em .4em;border-radius:.35rem;white-space:nowrap;
}
.cmp .is-break td.is-hero{box-shadow:inset 1px 0 0 rgba(227,179,65,.4)}
.pill{
  display:inline-block;margin-left:.4rem;vertical-align:middle;
  font-size:9px;text-transform:uppercase;letter-spacing:.14em;font-weight:600;
  padding:.18rem .45rem;border-radius:999px;
}
.pill--warn{background:rgba(227,179,65,.14);color:var(--amber);border:1px solid rgba(227,179,65,.28)}

.cmp--matrix tbody th{width:20%}
.cmp--matrix tbody th code{
  display:block;margin-top:.3rem;font-size:.72rem;
  background:none;padding:0;color:var(--faint);
}
.cmp--matrix .is-hero-row{
  background:linear-gradient(90deg,rgba(217,119,87,.07),rgba(217,119,87,.01));
  box-shadow:inset 2px 0 0 var(--clay);
}
.cmp--matrix .is-hero-row td,.cmp--matrix .is-hero-row th{color:var(--ink)}

.note{
  margin-top:1.5rem;font-size:.85rem;color:var(--muted);
  max-width:78ch;line-height:1.6;
}
.note b{color:var(--ink);font-weight:600}
.note code{color:var(--clay-lo)}

/* =========================================================
   BENCHMARKS
   ========================================================= */
.bm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.bm{display:block}
.bm--wide{grid-column:span 2}
.bm .bezel__core{display:flex;flex-direction:column;gap:1.1rem;height:100%}
.bm__head{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
.bm__head .tag{align-self:flex-start}
.bm__claim{font-size:.88rem;color:var(--muted);line-height:1.6}
.bm__claim b{color:var(--ink);font-weight:600}
.bm__claim code{color:var(--clay-lo);background:rgba(217,119,87,.09);padding:.08em .35em;border-radius:.3rem}
.bm__claim em{font-style:normal;color:var(--clay-lo)}
.bm__foot{font-size:.75rem;color:var(--faint);margin-top:auto}
.bm__foot b{color:var(--ink)}

.bars{display:flex;flex-direction:column;gap:.6rem;margin-top:auto}
.bar{display:grid;grid-template-columns:88px 1fr 46px;align-items:center;gap:.7rem}
.bar__label{font-size:.72rem;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar__track{height:9px;border-radius:999px;background:rgba(255,255,255,.045);overflow:hidden;position:relative}
.bar__track i{
  position:absolute;inset:0;border-radius:999px;
  background:linear-gradient(90deg,rgba(255,255,255,.28),rgba(255,255,255,.1));
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.2s var(--ease) var(--bd,0ms);
}
.bar__track i.is-hero{background:linear-gradient(90deg,#E68A66,#D97757)}
.is-in .bar__track i{transform:scaleX(var(--sx,0))}
.bar__val{font-family:var(--mono);font-size:.74rem;color:var(--ink);text-align:right}

.pp{display:flex;gap:2rem;flex-wrap:wrap;margin-top:auto}
.pp__item{display:flex;flex-direction:column}
.pp__num{
  font-size:2.6rem;font-weight:600;letter-spacing:-.05em;line-height:1;
  background:linear-gradient(100deg,#F6F3F0,#D97757);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.pp__unit{font-size:.72rem;color:var(--faint);margin-top:.2rem}
.pp__lbl{font-size:.8rem;color:var(--muted);margin-top:.5rem}

.sweep{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin-top:auto}
.sweep li{
  display:flex;flex-direction:column;gap:.15rem;
  padding:.8rem 1rem;border-radius:.85rem;
  background:rgba(255,255,255,.026);border:1px solid var(--hair-2);
  transition:background .5s var(--ease),transform .5s var(--ease);
}
.sweep li:hover{background:rgba(255,255,255,.05);transform:translateY(-2px)}
.sweep b{font-size:.86rem;font-weight:600}
.sweep span{font-size:.72rem;color:var(--faint)}

/* callouts */
.callout{
  display:flex;gap:1rem;align-items:flex-start;
  margin-top:2rem;padding:1.35rem 1.5rem;
  border-radius:1.25rem;
  background:rgba(255,255,255,.026);border:1px solid var(--hair);
  font-size:.85rem;color:var(--muted);line-height:1.6;max-width:92ch;
}
.callout b{color:var(--ink);font-weight:600}
.callout strong{color:var(--ink);font-weight:500}
.callout em{font-style:normal;color:var(--clay-lo)}
.callout code{color:var(--clay-lo);background:rgba(217,119,87,.09);padding:.08em .35em;border-radius:.3rem}
.callout__icon{flex:none;color:var(--faint);margin-top:.15rem}
.callout--info .callout__icon{color:var(--violet)}
.callout--warn{background:rgba(227,179,65,.045);border-color:rgba(227,179,65,.16)}
.callout--warn .callout__icon{color:var(--amber)}

/* =========================================================
   COMPETENCIA — duel cards
   ========================================================= */
.duel{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}
.duel__card .bezel__core{display:flex;flex-direction:column;gap:1rem;height:100%}
.duel__card .tag{align-self:flex-start}

.ticks{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.ticks li{
  position:relative;padding-left:1.6rem;
  font-size:.86rem;color:var(--muted);line-height:1.55;
}
.ticks li b{color:var(--ink);font-weight:600}
.ticks li::before{
  content:"";position:absolute;left:0;top:.5rem;
  width:9px;height:9px;border-radius:50%;
  background:rgba(87,217,163,.16);border:1px solid rgba(87,217,163,.5);
}
.ticks--minus li::before{background:rgba(227,179,65,.14);border-color:rgba(227,179,65,.5)}

/* =========================================================
   EFFORT LADDER
   ========================================================= */
.effort{display:grid;grid-template-columns:230px 1fr;gap:1.25rem;align-items:start}
.effort__rail{
  position:relative;display:flex;flex-direction:column;gap:.35rem;
  padding:.5rem;border-radius:1.35rem;
  background:rgba(255,255,255,.026);border:1px solid var(--hair);
}
.effort__step{
  position:relative;z-index:1;
  display:flex;align-items:baseline;gap:.55rem;
  padding:.85rem 1rem;border-radius:1rem;
  background:none;border:none;cursor:pointer;text-align:left;
  color:var(--faint);font-family:var(--mono);font-size:.9rem;
  transition:color .55s var(--ease),transform .55s var(--ease);
}
.effort__step em{
  font-family:var(--sans);font-style:normal;font-size:.62rem;
  text-transform:uppercase;letter-spacing:.13em;color:var(--faint);
  margin-left:auto;
}
.effort__step:hover{color:var(--muted)}
.effort__step.is-active{color:var(--ink)}
.effort__step.is-active em{color:var(--clay)}
.effort__glow{
  position:absolute;left:.5rem;right:.5rem;height:48px;top:.5rem;
  border-radius:1rem;z-index:0;
  background:linear-gradient(100deg,rgba(217,119,87,.19),rgba(217,119,87,.05));
  border:1px solid rgba(217,119,87,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .7s var(--ease);
}
.effort__panelwrap .bezel__core{min-height:340px;display:flex;flex-direction:column;gap:1.5rem}
.effort__body h3{
  font-family:var(--mono);font-size:1.6rem;color:var(--clay-lo);
  letter-spacing:-.03em;margin-bottom:.6rem;
}
.effort__body p{color:var(--muted);font-size:.95rem;max-width:60ch}
.effort__meta{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.5rem}
.effort__meta li{display:flex;flex-direction:column;gap:.3rem;padding-top:.9rem;border-top:1px solid var(--hair)}
.effort__meta span{font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:var(--faint)}
.effort__meta b{font-size:.82rem;font-weight:500;line-height:1.4}

.effort__notes{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.25rem}
.note-card{
  padding:1.35rem 1.5rem;border-radius:1.25rem;
  background:rgba(255,255,255,.024);border:1px solid var(--hair);
  transition:background .6s var(--ease),transform .6s var(--ease);
}
.note-card:hover{background:rgba(255,255,255,.045);transform:translateY(-3px)}
.note-card h4{margin-bottom:.5rem}
.note-card h4 code{color:var(--clay-lo)}
.note-card p{font-size:.82rem;color:var(--muted);line-height:1.6}
.note-card code{color:var(--clay-lo)}
.note-card em{font-style:normal;color:var(--clay-lo)}

/* =========================================================
   CODE
   ========================================================= */
.code{
  margin-top:auto;padding:1.15rem 1.35rem;
  border-radius:1rem;
  background:#070708;border:1px solid var(--hair-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  overflow-x:auto;
}
.code code{
  font-family:var(--mono);font-size:.78rem;line-height:1.75;
  color:rgba(246,243,240,.82);white-space:pre;display:block;
}
.code--lg code{font-size:.82rem}
.code .k{color:#C792EA}
.code .s{color:#98D3A4}
.code .n{color:#E8A585}
.code .c{color:rgba(246,243,240,.32)}
.code .err{color:#F0796B}
.code .ok{color:var(--mint)}

.codeblock .bezel__core{padding:0}
.codeblock__head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.35rem;border-bottom:1px solid var(--hair-2);
  background:rgba(255,255,255,.02);
}
.codeblock__head .mono{font-size:.75rem;color:var(--faint)}
.codeblock .code{margin:1.35rem;border-radius:.9rem}
.codeblock__foot{
  padding:0 1.35rem 1.35rem;font-size:.78rem;color:var(--faint);line-height:1.6;
}
.codeblock__foot code{color:var(--clay-lo)}
.copy{
  padding:.35rem .8rem;border-radius:999px;cursor:pointer;
  background:var(--glass-2);border:1px solid var(--hair);color:var(--muted);
  font-family:var(--sans);font-size:.72rem;
  transition:background .5s var(--ease),color .5s var(--ease);
}
.copy:hover{background:rgba(255,255,255,.1);color:var(--ink)}
.copy.is-done{color:var(--mint);border-color:rgba(87,217,163,.3)}

/* =========================================================
   PROMPTING
   ========================================================= */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.pcol .bezel__core{display:flex;flex-direction:column;gap:1rem;height:100%}
.pcol .tag{align-self:flex-start}
.pcol--remove .bezel__core{box-shadow:inset 0 1px 1px rgba(255,255,255,.05),inset 0 -30px 60px -50px rgba(227,179,65,.35)}
.pcol--add .bezel__core{box-shadow:inset 0 1px 1px rgba(255,255,255,.05),inset 0 -30px 60px -50px rgba(87,217,163,.3)}

.prompts{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1rem}
.prompt-card .bezel__core{padding:0;display:flex;flex-direction:column}
.prompt-card header{
  display:flex;align-items:center;gap:.85rem;
  padding:1.1rem 1.35rem;border-bottom:1px solid var(--hair-2);
}
.prompt-card header .mono{font-size:.72rem;color:var(--clay);opacity:.8}
.prompt-card .code{margin:1.25rem;border-radius:.9rem}

/* =========================================================
   STEPS
   ========================================================= */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1rem}
.steps li{display:block}
.steps .bezel,.steps .bezel__core{height:100%}
.step{display:flex;flex-direction:column;gap:.85rem}
.step__n{font-size:.7rem;color:var(--clay);letter-spacing:.12em;opacity:.8}
.step p{font-size:.86rem;color:var(--muted);line-height:1.6}
.step p code,.step h3 code{color:var(--clay-lo);background:rgba(217,119,87,.09);padding:.08em .35em;border-radius:.3rem}
.step p em{font-style:normal;color:var(--clay-lo)}

/* =========================================================
   SAFETY
   ========================================================= */
.safety{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.safety__hero{grid-column:span 1;grid-row:span 2}
.safety__card--wide{grid-column:span 2}
.safety__hero .bezel__core{justify-content:center}
.safety .bezel__core{height:100%;display:flex;flex-direction:column;gap:.85rem}
.safety h3{font-size:1.05rem}
.safety p{font-size:.86rem;color:var(--muted);line-height:1.6}
.safety p b{color:var(--ink);font-weight:600}
.big{
  font-size:clamp(4rem,9vw,6rem);font-weight:600;letter-spacing:-.06em;line-height:.9;
  background:linear-gradient(160deg,#F6F3F0,#D97757);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* =========================================================
   QUOTES
   ========================================================= */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.quote .bezel__core{display:flex;flex-direction:column;gap:1.5rem;height:100%}
.quote p{font-size:1rem;line-height:1.55;letter-spacing:-.02em;color:var(--ink)}
.quote p::before{content:"“";color:var(--clay);margin-right:.1em}
.quote p::after{content:"”";color:var(--clay)}
.quote footer{margin-top:auto;display:flex;flex-direction:column;gap:.1rem;padding-top:1rem;border-top:1px solid var(--hair-2)}
.quote b{font-size:.85rem;font-weight:600}
.quote span{font-size:.75rem;color:var(--faint)}

/* =========================================================
   CTA
   ========================================================= */
.cta{padding:0 0 clamp(6rem,10vw,9rem)}
.cta__box .bezel__core{
  padding:clamp(2.5rem,6vw,5rem);
  background:
    radial-gradient(120% 130% at 50% 0%,rgba(217,119,87,.16),transparent 62%),
    linear-gradient(175deg,#0C0C0E,#08080A);
  text-align:center;
}
.cta__box h2{margin:1.5rem 0 1.25rem}
.cta__box > .bezel__core > p{color:var(--muted);max-width:60ch;margin-inline:auto;font-size:1rem}
.cta__actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:2.5rem}
.cta__ids{
  list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
  margin-top:3.5rem;padding-top:2rem;border-top:1px solid var(--hair);
}
.cta__ids li{display:flex;flex-direction:column;gap:.35rem;align-items:center}
.cta__ids span{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--faint)}
.cta__ids code{font-size:.78rem;color:var(--clay-lo)}

/* =========================================================
   FOOTER
   ========================================================= */
.foot{border-top:1px solid var(--hair);padding:4rem 0 2rem;position:relative;z-index:1}
.foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:3rem;padding-bottom:3rem}
.foot__note{margin-top:1.25rem;font-size:.78rem;color:var(--faint);max-width:44ch;line-height:1.6}
.foot h4{font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:var(--faint);margin-bottom:1rem;font-weight:500}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.foot ul a{font-size:.84rem;color:var(--muted);transition:color .5s var(--ease)}
.foot ul a:hover{color:var(--clay-lo)}
.foot__bar{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  padding-top:2rem;border-top:1px solid var(--hair-2);
  font-size:.75rem;color:var(--faint);
}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal{
  opacity:0;transform:translate3d(0,44px,0);filter:blur(8px);
  transition:opacity .9s var(--ease-out) var(--d,0ms),transform .9s var(--ease-out) var(--d,0ms),filter .9s var(--ease-out) var(--d,0ms);
  will-change:transform,opacity;
}
.reveal.is-in{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento__card--wide,.bento__card--tall{grid-column:span 2}
  .bento__card--tall{grid-row:span 1}
  .bm-grid{grid-template-columns:repeat(2,1fr)}
  .bm--wide{grid-column:span 2}
  .quotes{grid-template-columns:repeat(2,1fr)}
  .safety{grid-template-columns:repeat(2,1fr)}
  .safety__hero{grid-row:span 1}
  .safety__card--wide{grid-column:span 2}
  .effort__notes{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:1024px){
  .nav__links{display:none}
  .nav__cta{display:none}
  .burger{display:block}
  .nav{padding:.5rem .5rem .5rem 1.25rem}
  .hero__grid{grid-template-columns:1fr}
  .hero__card{max-width:520px}
  .effort{grid-template-columns:1fr}
  .effort__rail{flex-direction:row;overflow-x:auto;gap:.25rem}
  .effort__step{flex-direction:column;align-items:flex-start;gap:.2rem;white-space:nowrap}
  .effort__step em{margin-left:0}
  .effort__glow{display:none}
  .effort__step.is-active{
    background:linear-gradient(100deg,rgba(217,119,87,.19),rgba(217,119,87,.05));
    border:1px solid rgba(217,119,87,.2);
  }
  .steps{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr 1fr;gap:2.5rem}
  .foot__grid > div{grid-column:span 2}
}

@media (max-width:768px){
  :root{--r-out:1.5rem;--r-in:calc(1.5rem - .3125rem);--pad:.3125rem}
  .shell{width:calc(100% - 2rem)}
  .section{padding:5.5rem 0}
  .bezel__core{padding:1.5rem}
  .hero{padding:8.5rem 0 3rem}
  .hero__stats{grid-template-columns:repeat(2,1fr);gap:1.5rem 1rem}
  .hero__actions{gap:.6rem}
  .hero__actions .btn--primary{width:100%;justify-content:space-between}
  .hero__actions .btn--ghost{
    width:100%;justify-content:center;
    border-color:var(--hair);background:var(--glass);
  }
  .bento{grid-template-columns:1fr;gap:.85rem}
  .bento__card,.bento__card--wide,.bento__card--tall{grid-column:span 1}
  .bm-grid{grid-template-columns:1fr}
  .bm--wide{grid-column:span 1}
  .sweep{grid-template-columns:1fr}
  .duel,.pgrid,.prompts{grid-template-columns:1fr}
  .quotes,.safety,.effort__notes{grid-template-columns:1fr}
  .safety__card--wide{grid-column:span 1}
  .effort__meta{grid-template-columns:1fr;gap:.85rem}
  .cta__ids{grid-template-columns:repeat(2,1fr)}
  .foot__grid{grid-template-columns:1fr}
  .foot__grid > div{grid-column:span 1}
  .pp{gap:1.5rem}
  .orb{filter:blur(80px);opacity:.4}
  .bar{grid-template-columns:76px 1fr 42px;gap:.5rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .reveal{opacity:1;transform:none;filter:none}
  .is-in .bar__track i,.is-in .ctx__bar span{transform:scaleX(1)}
}