/* ============ TOKENS ============ */
:root{
  --ink:#100E0D;
  --ink-2:#171413;
  --ink-3:#201B19;
  --cream:#F8F5F0;
  --cream-2:#EFE9E1;
  --orange:#F4631E;
  --orange-lite:#FF8A4C;
  --on-dark:#EFEAE4;
  --on-dark-soft:#A49A92;
  --on-light:#191412;
  --on-light-soft:#6C625B;
  --line-dark:rgba(255,255,255,.10);
  --line-light:rgba(25,20,18,.12);
  --r:14px;
  --wrap:1180px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  background:var(--ink);
  color:var(--on-dark);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.wrap{width:min(100% - 44px, var(--wrap)); margin-inline:auto;}
.script{font-family:'Caveat',cursive; font-weight:600;}

/* focus */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--orange); outline-offset:3px; border-radius:4px;
}

/* ============ SHARED ============ */
.eyebrow{
  color:var(--orange); font-size:.76rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; display:block; margin-bottom:14px;
}
.sec-title{
  font-size:clamp(1.7rem, 3.4vw, 2.5rem); font-weight:800;
  letter-spacing:-.02em; line-height:1.15;
}
.sec-title em{font-style:normal; color:var(--orange);}
.sec-lede{margin-top:14px; max-width:46ch; color:var(--on-dark-soft); font-size:.97rem;}
.on-light .sec-lede{color:var(--on-light-soft);}

.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 24px; border-radius:999px; font-weight:600; font-size:.93rem;
  border:1px solid transparent; cursor:pointer; transition:.18s ease;
}
.btn-primary{background:var(--orange); color:#fff;}
.btn-primary:hover{background:#DA5413;}
.btn-outline{border-color:rgba(255,255,255,.28); color:var(--on-dark);}
.btn-outline:hover{border-color:var(--on-dark); background:rgba(255,255,255,.05);}
.on-light .btn-outline{border-color:var(--line-light); color:var(--on-light);}
.on-light .btn-outline:hover{border-color:var(--on-light); background:rgba(0,0,0,.04);}

section{padding:96px 0;}
.on-light{background:var(--cream); color:var(--on-light);}
.on-light .sec-title{color:var(--on-light);}

/* ============ HEADER ============ */
header{
  position:sticky; top:0; z-index:60;
  background:rgba(16,14,13,.88); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-dark);
}
.bar{display:flex; align-items:center; gap:26px; padding:15px 0;}
.brand{display:flex; align-items:center; gap:11px; font-weight:800; font-size:1.06rem; letter-spacing:-.01em;}
.brand .mark{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(145deg,var(--orange),#C94A11); color:#fff;
  font-size:.92rem; font-weight:800; letter-spacing:.02em;
}
nav{margin-left:auto; display:flex; gap:28px; font-size:.91rem; font-weight:500;}
nav a{color:var(--on-dark-soft); transition:color .15s;}
nav a:hover, nav a.on{color:var(--on-dark);}
.bar .btn{padding:10px 20px; font-size:.87rem;}
.menu-btn{display:none; margin-left:auto; background:none; border:1px solid var(--line-dark); color:var(--on-dark); border-radius:9px; padding:8px 11px; cursor:pointer;}

/* ============ HERO ============ */
.hero{
  padding:96px 0 70px;
  background:
    radial-gradient(900px 480px at 78% 18%, rgba(244,99,30,.16), transparent 62%),
    radial-gradient(620px 420px at 6% 78%, rgba(244,99,30,.07), transparent 65%),
    var(--ink);
  position:relative; overflow:hidden;
}
.hero .wrap{display:grid; grid-template-columns:1.06fr .94fr; gap:56px; align-items:center;}
.pill{
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid rgba(244,99,30,.42); background:rgba(244,99,30,.10);
  color:var(--orange-lite); border-radius:999px; padding:7px 16px;
  font-size:.73rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.hero h1{
  margin-top:22px;
  font-size:clamp(2.2rem, 5.1vw, 3.5rem); font-weight:800;
  line-height:1.08; letter-spacing:-.03em;
}
.hero h1 span{color:var(--orange); display:block;}
.hero p.lede{margin-top:20px; color:var(--on-dark-soft); max-width:46ch; font-size:1rem;}
.hero-cta{display:flex; gap:13px; margin-top:30px; flex-wrap:wrap;}
.hero-contact{display:flex; gap:22px; margin-top:30px; flex-wrap:wrap; font-size:.88rem; color:var(--on-dark-soft);}
.hero-contact a{display:inline-flex; align-items:center; gap:8px; transition:color .15s;}
.hero-contact a:hover{color:var(--orange-lite);}
.hero-contact svg{width:17px; height:17px; flex:none;}

/* hero right */
.stage{position:relative;}
.stage-photo{
  border-radius:18px; overflow:hidden; border:1px solid var(--line-dark);
  box-shadow:0 34px 70px -30px rgba(0,0,0,.85);
}
.stage-photo img{width:100%; height:100%; object-fit:cover;}
.scribble{
  position:absolute; top:-44px; right:8px; max-width:210px; text-align:right;
  color:var(--cream-2); font-size:1.3rem; line-height:1.25; transform:rotate(-3deg);
}
.scribble svg{width:120px; margin:2px 0 0 auto; color:var(--orange); display:block;}
.tech-float{
  position:absolute; right:-14px; bottom:22px; width:232px;
  background:var(--ink-3); border:1px solid var(--line-dark); border-radius:16px;
  padding:16px; box-shadow:0 26px 50px -20px rgba(0,0,0,.8);
}
.tech-float h4{font-size:.85rem; font-weight:700; margin-bottom:12px;}
.tech-float ul{list-style:none; display:grid; gap:9px;}
.tech-float li{display:flex; align-items:center; gap:10px; font-size:.83rem; color:var(--on-dark-soft);}
.tech-float .chip{
  width:26px; height:26px; border-radius:8px; display:grid; place-items:center; flex:none;
  background:rgba(244,99,30,.13); color:var(--orange-lite); font-size:.62rem; font-weight:800;
}

/* ============ TECH STRIP ============ */
.strip{background:var(--ink-2); border-block:1px solid var(--line-dark); padding:20px 0;}
.strip .wrap{display:flex; align-items:center; gap:30px; flex-wrap:wrap;}
.strip-label{
  color:var(--orange); font-size:.7rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; flex:none;
}
.strip ul{list-style:none; display:flex; gap:11px; flex-wrap:wrap;}
.strip li{
  display:flex; align-items:center; gap:8px; font-size:.82rem; font-weight:600;
  color:var(--on-dark-soft); background:rgba(255,255,255,.04);
  border:1px solid var(--line-dark); border-radius:9px; padding:7px 13px;
}
.strip .dot{width:7px; height:7px; border-radius:50%; background:var(--orange); flex:none;}

/* ============ ABOUT ============ */
.about{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start;}
.about-copy p{color:var(--on-light-soft); margin-top:16px; font-size:.97rem; max-width:58ch;}
.about-copy p.tagline{
  margin-top:24px; padding-top:20px; border-top:1px solid var(--line-light);
  font-size:1.06rem; color:var(--on-light); max-width:none;
}
.about-copy p.tagline strong{font-weight:800; letter-spacing:-.01em;}
.facts{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:28px;}
.fact{
  background:#fff; border:1px solid var(--line-light); border-radius:12px; padding:15px;
}
.fact .ic{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:rgba(244,99,30,.12); color:var(--orange); margin-bottom:10px;
}
.fact .ic svg{width:16px; height:16px;}
.fact b{display:block; font-size:.9rem; font-weight:800;}
.fact span{font-size:.78rem; color:var(--on-light-soft);}

.about-side{display:grid; gap:20px;}
.editor{
  background:var(--ink); border:1px solid var(--line-dark); border-radius:16px;
  overflow:hidden; box-shadow:0 24px 50px -26px rgba(25,20,18,.6); position:relative;
}
.editor-bar{
  display:flex; align-items:center; gap:7px; padding:11px 14px;
  background:var(--ink-3); border-bottom:1px solid var(--line-dark);
}
.editor-bar i{width:9px; height:9px; border-radius:50%; background:#3B3330;}
.editor-bar i:first-child{background:#F4631E;}
.editor-bar span{
  margin-left:8px; font-size:.72rem; color:var(--on-dark-soft); font-weight:600;
}
.editor pre{
  margin:0; padding:20px 18px 34px; overflow-x:auto;
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:.79rem; line-height:1.85; color:#C9C0B8;
}
.editor .t{color:#FF8A4C;}
.editor .a{color:#8FB8E0;}
.editor .s{color:#9BD4A0;}
.editor-note{
  position:absolute; right:16px; bottom:10px;
  color:var(--on-dark-soft); font-size:1.1rem; transform:rotate(-3deg);
}
.skills{
  background:#fff; border:1px solid var(--line-light); border-radius:16px; padding:22px;
}
.skills h3{font-size:1.02rem; font-weight:800; margin-bottom:16px;}
.skill{display:flex; gap:13px; padding:12px 0; border-top:1px solid var(--line-light);}
.skill:first-of-type{border-top:0; padding-top:0;}
.skill .ic{
  width:32px; height:32px; border-radius:9px; flex:none; display:grid; place-items:center;
  background:rgba(244,99,30,.12); color:var(--orange);
}
.skill .ic svg{width:17px; height:17px;}
.skill b{display:block; font-size:.89rem; font-weight:700;}
.skill span{font-size:.8rem; color:var(--on-light-soft);}

/* ============ PROJECTS ============ */
.work-head{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:38px;}
.work-head .btn{margin-top:22px;}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.card{
  background:var(--ink-2); border:1px solid var(--line-dark); border-radius:14px;
  overflow:hidden; display:flex; flex-direction:column; transition:border-color .18s;
}
.card:hover{border-color:rgba(244,99,30,.42);}
.shot{position:relative; aspect-ratio:16/11; overflow:hidden; background:var(--ink-3);}
.shot iframe{
  width:1440px; height:990px; border:0;
  transform:scale(.236); transform-origin:top left; pointer-events:none;
}
.shot .live{
  position:absolute; right:9px; bottom:9px; z-index:2;
  background:rgba(16,14,13,.82); border:1px solid rgba(255,255,255,.2);
  color:#6EE79B; font-size:.6rem; font-weight:800; letter-spacing:.09em;
  padding:3px 8px; border-radius:5px;
}
.shot .fallback{
  position:absolute; inset:0; display:grid; place-content:center; text-align:center;
  gap:6px; color:var(--on-dark-soft); font-size:.78rem; padding:16px;
}
.shot .fallback b{color:var(--orange-lite); font-size:.82rem;}
.card-body{padding:15px 15px 17px; display:flex; flex-direction:column; flex:1;}
.card-top{display:flex; align-items:baseline; gap:9px;}
.card-no{color:var(--orange); font-size:.78rem; font-weight:800;}
.card h3{font-size:.95rem; font-weight:700; letter-spacing:-.01em;}
.card .kind{display:block; margin-top:5px; font-size:.76rem; color:var(--on-dark-soft);}
.chips{display:flex; gap:6px; flex-wrap:wrap; margin-top:auto; padding-top:14px;}
.chips a, .chips span{
  font-size:.68rem; font-weight:600; border-radius:6px; padding:4px 9px;
  background:rgba(255,255,255,.05); border:1px solid var(--line-dark); color:var(--on-dark-soft);
}
.chips a{border-color:rgba(244,99,30,.35); color:var(--orange-lite);}
.chips a:hover{background:rgba(244,99,30,.13);}

/* ============ SERVICES ============ */
.svc-head{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:34px;}
.svc-head .btn{margin-top:22px;}
.svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.svc{
  background:#fff; border:1px solid var(--line-light); border-radius:14px; padding:22px;
}
.svc .ic{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:rgba(244,99,30,.12); color:var(--orange); margin-bottom:16px;
}
.svc .ic svg{width:19px; height:19px;}
.svc-no{
  display:block; color:var(--orange); font-size:.75rem; font-weight:800;
  letter-spacing:.1em; margin-bottom:5px;
}
.svc h3{font-size:.95rem; font-weight:700; margin-bottom:8px;}
.svc p{font-size:.85rem; color:var(--on-light-soft); line-height:1.6;}

/* ============ PROCESS ============ */
.process{
  background:
    radial-gradient(760px 420px at 82% 40%, rgba(244,99,30,.13), transparent 64%),
    var(--ink-2);
  border-block:1px solid var(--line-dark);
}
.proc-wrap{display:grid; grid-template-columns:.74fr 1.26fr; gap:46px; align-items:center;}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:13px;}
.step{position:relative;}
.step .ic{
  width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  background:rgba(244,99,30,.13); color:var(--orange); border:1px solid rgba(244,99,30,.3);
  margin-bottom:14px;
}
.step .ic svg{width:20px; height:20px;}
.step-no{
  display:block; color:var(--orange); font-size:.76rem; font-weight:800;
  letter-spacing:.1em; margin-bottom:5px;
}
.step b{display:block; font-size:.95rem; font-weight:700; margin-bottom:6px;}
.step p{font-size:.84rem; color:var(--on-dark-soft); line-height:1.6;}
.step:not(:last-child)::after{
  content:"\2192"; position:absolute; top:11px; right:-12px;
  color:rgba(244,99,30,.6); font-size:1rem; line-height:1;
}

/* ============ CONTACT ============ */
.contact-wrap{display:grid; grid-template-columns:.86fr 1.14fr .86fr; gap:26px; align-items:start;}
.form-card{
  background:var(--ink); border:1px solid var(--line-dark); border-radius:16px; padding:24px;
  color:var(--on-dark); box-shadow:0 26px 54px -28px rgba(25,20,18,.55);
}
.field{display:grid; gap:7px; margin-bottom:14px;}
.two{display:grid; grid-template-columns:1fr 1fr; gap:13px;}
.field label{font-size:.78rem; font-weight:600; color:var(--on-dark);}
.field input, .field select, .field textarea{
  font:inherit; font-size:.88rem; color:var(--on-dark);
  background:var(--ink-3); border:1px solid var(--line-dark);
  border-radius:9px; padding:11px 13px; width:100%;
}
.field textarea{resize:vertical; min-height:96px;}
.field input::placeholder, .field textarea::placeholder{color:#6F655E;}
.form-card .btn{width:100%; justify-content:center; margin-top:4px;}
.connect{
  background:#fff; border:1px solid var(--line-light); border-radius:16px; padding:22px;
}
.connect h3{font-size:.98rem; font-weight:800;}
.connect > p{font-size:.84rem; color:var(--on-light-soft); margin-top:6px;}
.connect ul{list-style:none; display:grid; gap:10px; margin-top:16px;}
.connect li a{
  display:flex; align-items:center; gap:11px; font-size:.86rem; font-weight:600;
  padding:11px 13px; border:1px solid var(--line-light); border-radius:10px; transition:.16s;
}
.connect li a:hover{border-color:var(--orange); color:var(--orange);}
.connect svg{width:17px; height:17px; flex:none; color:var(--orange);}
.connect .sign{
  margin-top:20px; text-align:center; color:var(--on-light-soft);
  font-size:1.2rem; line-height:1.25; transform:rotate(-2deg);
}
.connect .sign svg{width:96px; margin:4px auto 0; color:var(--orange);}

/* ============ FOOTER ============ */
footer{background:var(--ink-2); border-top:1px solid var(--line-dark); padding:34px 0;}
.foot{display:flex; align-items:center; gap:26px; flex-wrap:wrap;}
.foot nav{margin:0 auto; gap:24px;}
.foot .rights{font-size:.79rem; color:var(--on-dark-soft); text-align:right; line-height:1.7;}

/* ============ RESPONSIVE ============ */
@media (max-width:1040px){
  .grid{grid-template-columns:repeat(3,1fr);}
  .shot iframe{transform:scale(.256);}
  .svc-grid{grid-template-columns:repeat(2,1fr);}
  .contact-wrap{grid-template-columns:1fr;}
}
@media (max-width:880px){
  section{padding:70px 0;}
  nav{display:none;}
  .menu-btn{display:block;}
  .bar > .btn{display:none;}
  .hero .wrap, .about, .proc-wrap{grid-template-columns:1fr;}
  .work-head, .svc-head{grid-template-columns:1fr; align-items:start;}
  .stage{order:-1;}
  .tech-float{position:static; width:100%; margin-top:16px;}
  .scribble{display:none;}
  .grid{grid-template-columns:repeat(2,1fr);}
  .shot iframe{transform:scale(.287);}
  .steps{grid-template-columns:1fr 1fr; gap:22px;}
  .step:not(:last-child)::after{display:none;}
  .foot{flex-direction:column; text-align:center;}
  .foot .rights{text-align:center;}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr;}
  .shot iframe{transform:scale(.276);}
  .facts{grid-template-columns:1fr;}
  .svc-grid{grid-template-columns:1fr;}
  .two{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; scroll-behavior:auto !important;}
}

/* ============ ADDED: accessibility ============ */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--orange); color:#fff; padding:11px 18px; border-radius:0 0 10px 0;
  font-weight:700; font-size:.88rem;
}
.skip:focus{left:0;}
.vh{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ============ ADDED: brand logos ============ */
.lg{width:1em; height:1em; flex:none; display:block;}
.tech-float li .lg{width:19px; height:19px;}
.strip li .lg{width:17px; height:17px;}

/* ============ ADDED: working mobile nav ============ */
.menu-btn{
  display:none; margin-left:auto; background:none; border:1px solid var(--line-dark);
  color:var(--on-dark); border-radius:9px; padding:9px 11px; cursor:pointer; line-height:0;
}
.menu-btn svg{width:19px; height:19px;}
.menu-btn .x{display:none;}
.menu-btn[aria-expanded="true"] .x{display:block;}
.menu-btn[aria-expanded="true"] .bars{display:none;}
#drawer{
  display:none; border-top:1px solid var(--line-dark);
  background:var(--ink-2); padding:10px 0 18px;
}
#drawer.open{display:block;}
#drawer .wrap{display:grid; gap:2px;}
#drawer a{
  padding:13px 4px; font-size:.97rem; font-weight:600; color:var(--on-dark-soft);
  border-bottom:1px solid var(--line-dark);
}
#drawer a:last-of-type{border-bottom:0;}
#drawer a:hover, #drawer a:focus-visible{color:var(--orange-lite);}
#drawer .btn{margin-top:12px; justify-content:center;}
.scroll-lock{overflow:hidden;}

/* ============ ADDED: lazy project previews ============ */
.shot{background:var(--ink-3);}
.shot .ph{
  position:absolute; inset:0; display:grid; place-content:center; gap:7px;
  text-align:center; padding:14px; color:var(--on-dark-soft); font-size:.74rem;
}
.shot .ph b{color:var(--orange-lite); font-size:.8rem; font-weight:700;}
.shot iframe{opacity:0; transition:opacity .35s ease;}
.shot.ready iframe{opacity:1;}
.shot.ready .ph{display:none;}
.card a.cover{position:absolute; inset:0; z-index:3;}

/* ============ ADDED: FAQ ============ */
.faq-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px 26px; margin-top:32px;}
.faq details{
  background:#fff; border:1px solid var(--line-light); border-radius:12px;
  padding:16px 18px; transition:border-color .16s;
}
.faq details[open]{border-color:rgba(244,99,30,.4);}
.faq summary{
  font-weight:700; font-size:.92rem; cursor:pointer; list-style:none;
  display:flex; align-items:flex-start; gap:12px;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"+"; margin-left:auto; color:var(--orange); font-weight:800;
  font-size:1.2rem; line-height:1; flex:none;
}
.faq details[open] summary::after{content:"\2212";}
.faq p{margin-top:11px; font-size:.86rem; color:var(--on-light-soft); line-height:1.7;}

/* ============ ADDED: form status ============ */
.form-status{
  margin-top:13px; font-size:.84rem; font-weight:600; border-radius:9px;
  padding:11px 13px; display:none;
}
.form-status.show{display:block;}
.form-status.ok{background:rgba(110,231,155,.12); border:1px solid rgba(110,231,155,.4); color:#8BEDB0;}
.form-status.bad{background:rgba(244,99,30,.12); border:1px solid rgba(244,99,30,.4); color:var(--orange-lite);}
.field .err{font-size:.75rem; color:var(--orange-lite); display:none;}
.field.invalid .err{display:block;}
.field.invalid input, .field.invalid textarea{border-color:var(--orange);}

/* ============ FIXED: responsive scoping ============ */
@media (max-width:1040px){
  .faq-grid{gap:12px 18px;}
}
@media (max-width:880px){
  header nav{display:none;}          /* was: nav{display:none} — also killed the footer nav */
  .menu-btn{display:block;}
  .bar > .btn{display:none;}
  .foot nav{display:flex; flex-wrap:wrap; justify-content:center; margin:0 auto;}
  .faq-grid{grid-template-columns:1fr;}
  .stage{margin-top:8px;}
}
@media (max-width:560px){
  .wrap{width:min(100% - 32px, var(--wrap));}
  .hero{padding:58px 0 48px;}
  .hero-contact{gap:12px; flex-direction:column;}
  .chips{gap:5px;}
}

/* ══════════════════════════════════════════════════════════════════
   MULTIPAGE + INTERACTION LAYER
   ══════════════════════════════════════════════════════════════════ */

/* ── page hero (inner pages) ── */
.page-head{
  padding:74px 0 54px;
  background:
    radial-gradient(760px 400px at 78% 25%, rgba(244,99,30,.15), transparent 62%),
    var(--ink);
  border-bottom:1px solid var(--line-dark);
}
.page-head h1{
  font-size:clamp(2rem,4.6vw,3.1rem); font-weight:800;
  letter-spacing:-.03em; line-height:1.08; margin-top:14px;
}
.page-head h1 em{font-style:normal; color:var(--orange);}
.page-head p{margin-top:18px; color:var(--on-dark-soft); max-width:56ch; font-size:1rem;}
.crumbs{display:flex; gap:9px; font-size:.78rem; color:var(--on-dark-soft); flex-wrap:wrap;}
.crumbs a{color:var(--on-dark-soft);}
.crumbs a:hover{color:var(--orange-lite);}
.crumbs span[aria-current]{color:var(--orange);}

/* ── experience badge ── */
.xp{
  display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center;
  border:1px solid rgba(244,99,30,.34); border-radius:18px;
  background:linear-gradient(135deg, rgba(244,99,30,.13), rgba(244,99,30,.03));
  padding:24px 26px; margin-top:32px;
}
.xp-num{
  font-size:clamp(2.6rem,6vw,3.7rem); font-weight:800; line-height:.86;
  letter-spacing:-.05em; color:var(--orange);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.xp-num sup{font-size:.44em; vertical-align:super; margin-left:2px;}
.xp b{display:block; font-size:1.02rem; font-weight:800; letter-spacing:-.01em;}
.xp span{display:block; font-size:.87rem; color:var(--on-dark-soft); margin-top:5px; line-height:1.6;}
.on-light .xp{border-color:rgba(244,99,30,.3);}
.on-light .xp b{color:var(--on-light);}
.on-light .xp span{color:var(--on-light-soft);}

.xp-row{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:30px;}
.xp-cell{
  border:1px solid var(--line-light); border-radius:14px; padding:20px 18px; background:#fff;
}
.xp-cell .n{
  display:block; font-size:2rem; font-weight:800; color:var(--orange);
  letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums;
}
.xp-cell .n sup{font-size:.5em; vertical-align:super;}
.xp-cell b{display:block; font-size:.9rem; font-weight:700; margin-top:11px;}
.xp-cell span{display:block; font-size:.81rem; color:var(--on-light-soft); margin-top:4px;}

/* ── animated code editor ── */
.editor pre{min-height:186px;}
.editor-tabs{display:flex; gap:0; background:var(--ink-3); border-bottom:1px solid var(--line-dark);}
.editor-tabs button{
  font:inherit; font-size:.72rem; font-weight:600; letter-spacing:.02em;
  background:none; border:0; border-right:1px solid var(--line-dark);
  color:var(--on-dark-soft); padding:10px 15px; cursor:pointer; transition:.16s;
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
}
.editor-tabs button:hover{color:var(--on-dark); background:rgba(255,255,255,.04);}
.editor-tabs button[aria-selected="true"]{
  color:var(--orange-lite); background:var(--ink); box-shadow:inset 0 -2px 0 var(--orange);
}
.caret{
  display:inline-block; width:8px; height:1.05em; vertical-align:text-bottom;
  background:var(--orange); margin-left:1px; animation:blink 1.05s steps(1) infinite;
}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.editor-run{
  display:flex; align-items:center; gap:9px; padding:10px 16px;
  border-top:1px solid var(--line-dark); background:var(--ink-3);
  font-size:.72rem; color:var(--on-dark-soft);
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
}
.editor-run .led{
  width:7px; height:7px; border-radius:50%; background:#6EE79B; flex:none;
  box-shadow:0 0 0 0 rgba(110,231,155,.55); animation:pulse 2.1s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(110,231,155,.5)}
  70%{box-shadow:0 0 0 7px rgba(110,231,155,0)}
  100%{box-shadow:0 0 0 0 rgba(110,231,155,0)}
}

/* ── swipeable carousel ── */
.rail-wrap{position:relative; margin-top:30px;}
.rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(272px,1fr);
  gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:4px 4px 18px;
  scrollbar-width:none; -ms-overflow-style:none;
  overscroll-behavior-x:contain;
}
.rail::-webkit-scrollbar{display:none;}
.rail > *{scroll-snap-align:start;}
.rail.grabbing{scroll-behavior:auto; cursor:grabbing; scroll-snap-type:none;}
.rail.grabbing *{pointer-events:none;}
.rail-nav{display:flex; gap:9px; align-items:center; margin-top:4px;}
.rail-btn{
  width:38px; height:38px; border-radius:50%; flex:none; cursor:pointer;
  background:rgba(255,255,255,.05); border:1px solid var(--line-dark);
  color:var(--on-dark); display:grid; place-items:center; transition:.16s;
}
.rail-btn:hover:not(:disabled){border-color:var(--orange); color:var(--orange-lite);}
.rail-btn:disabled{opacity:.32; cursor:default;}
.rail-btn svg{width:16px; height:16px;}
.on-light .rail-btn{background:#fff; border-color:var(--line-light); color:var(--on-light);}
.dots{display:flex; gap:6px; margin-left:auto; flex-wrap:wrap;}
.dots button{
  width:7px; height:7px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:var(--line-dark); transition:.2s;
}
.on-light .dots button{background:rgba(25,20,18,.2);}
.dots button[aria-current="true"]{background:var(--orange); width:20px; border-radius:4px;}
.swipe-hint{
  font-size:.76rem; color:var(--on-dark-soft); display:none;
  align-items:center; gap:7px; margin-top:2px;
}
.on-light .swipe-hint{color:var(--on-light-soft);}
.swipe-hint svg{width:15px; height:15px; animation:nudge 1.9s ease-in-out infinite;}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

/* ── marquee logo strip ── */
.marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
         mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); flex:1; min-width:0;}
.marquee ul{display:flex; gap:11px; width:max-content; animation:slide 34s linear infinite;}
.marquee:hover ul, .marquee:focus-within ul{animation-play-state:paused;}
@keyframes slide{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ── scroll reveal ── */
.rv{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
.rv.in{opacity:1; transform:none;}
.rv-d1{transition-delay:.07s} .rv-d2{transition-delay:.14s}
.rv-d3{transition-delay:.21s} .rv-d4{transition-delay:.28s}

/* ── page nav active state ── */
nav a[aria-current="page"]{color:var(--on-dark); position:relative;}
nav a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-5px;
  height:2px; background:var(--orange); border-radius:2px;
}
.foot nav a[aria-current="page"]::after{display:none;}
.foot nav a[aria-current="page"]{color:var(--orange-lite);}

/* ── next-page pager ── */
.pager{border-top:1px solid var(--line-dark); background:var(--ink-2);}
.pager .wrap{
  display:flex; justify-content:space-between; align-items:center;
  gap:24px; padding:34px 0; flex-wrap:wrap;
}
.pager .lbl{font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-soft);}
.pager b{display:block; font-size:1.3rem; font-weight:800; letter-spacing:-.02em; margin-top:7px;}
.pager a.go{display:inline-flex; align-items:center; gap:10px;}
.pager a.go:hover b{color:var(--orange-lite);}

@media (max-width:880px){
  .swipe-hint{display:flex;}
  .xp{grid-template-columns:1fr; gap:12px; text-align:left;}
  .xp-row{grid-template-columns:1fr;}
  .rail{grid-auto-columns:minmax(252px,1fr);}
  .page-head{padding:54px 0 42px;}
}
@media (max-width:560px){
  .rail{grid-auto-columns:minmax(80%,1fr);}
  .pager .wrap{flex-direction:column; align-items:flex-start; gap:18px;}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none;}
  .marquee ul{animation:none;}
  .caret{animation:none;}
  .editor-run .led{animation:none;}
  .swipe-hint svg{animation:none;}
  .rail{scroll-behavior:auto;}
}

/* ══════════════════════════════════════════════════════════
   MOBILE-ONLY ENHANCEMENTS
   Everything below is scoped to max-width:880px (or a touch/
   fine-pointer check) so nothing here changes the desktop site.
   Goal: give touch the tap-feedback and motion that desktop
   already gets from :hover, plus an app-like quick-action bar.
   ══════════════════════════════════════════════════════════ */
@media (max-width:880px){

  /* --- live tap feedback (touch has no :hover, so give it :active) --- */
  .btn-primary, .btn-outline, .card, .chips a, .rail-btn,
  .connect li a, .svc, .xp-cell, .faq summary, .dots button, .qb-btn{
    -webkit-tap-highlight-color:transparent;
    transition:transform .15s cubic-bezier(.34,1.56,.64,1), background-color .15s ease, border-color .15s ease;
  }
  .btn-primary:active{transform:scale(.95);}
  .btn-outline:active{transform:scale(.95); background:rgba(255,255,255,.06);}
  .on-light .btn-outline:active{background:rgba(0,0,0,.05);}
  .card:active{transform:scale(.98); border-color:rgba(244,99,30,.5);}
  .chips a:active{transform:scale(.94); background:rgba(244,99,30,.16);}
  .connect li a:active{transform:scale(.97); border-color:var(--orange); color:var(--orange);}
  .xp-cell:active{transform:scale(.97);}

  /* --- hero photo gets a slow, gentle float so the page feels alive on load --- */
  .stage-photo{animation:mob-float 5.5s ease-in-out infinite;}
  @keyframes mob-float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)}}

  /* --- scroll-reveal enters with a touch more life on small screens --- */
  .rv{transform:translateY(22px) scale(.98);}
  .rv.in{transform:none;}

  /* --- floating call / WhatsApp quick-action bar --- */
  .mobile-quickbar{
    position:fixed; left:12px; right:12px; bottom:14px; z-index:80;
    display:flex; gap:10px; padding:8px;
    background:rgba(21,16,14,.88);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.09); border-radius:18px;
    box-shadow:0 14px 34px rgba(0,0,0,.38);
    padding-bottom:calc(8px + env(safe-area-inset-bottom));
    animation:qb-in .55s cubic-bezier(.2,.9,.3,1) .25s both;
  }
  .qb-btn{
    flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
    padding:12px 8px; border-radius:13px; font-weight:800; font-size:.85rem;
    text-decoration:none; line-height:1;
  }
  .qb-btn svg{width:17px; height:17px; flex:none;}
  .qb-call{background:var(--orange); color:#fff;}
  .qb-wa{background:#25D366; color:#08210F;}
  .qb-btn:active{transform:scale(.94);}
  body{padding-bottom:72px;}
}
@keyframes qb-in{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
.mobile-quickbar{display:none;}
@media (max-width:880px){.mobile-quickbar{display:flex;}}

@media (max-width:880px) and (prefers-reduced-motion:reduce){
  .stage-photo{animation:none;}
  .mobile-quickbar{animation:none;}
  .btn-primary:active, .btn-outline:active, .card:active, .chips a:active,
  .connect li a:active, .xp-cell:active, .qb-btn:active{transform:none;}
}