/* ============================================================
   Kida David — shared design system
   Used by every public page so the whole site keeps one look.
   ============================================================ */
:root{
  --void:#050a18;
  --ink:#0c0c14;
  --panel:#12121c;
  --cyan:#3b82ff;
  --violet:#1f6dff;
  --amber:#ffb454;
  --mist:#94a1b8;
  --line:rgba(255,255,255,0.10);
  --danger:#ff6b6b;
  --font-display: "Trebuchet MS", "Segoe UI", Avenir, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  --vh: 1vh;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden; width:100%;}
body{
  margin:0; background:var(--void); color:#e6e8ef; font-family:var(--font-body);
  overflow-x:hidden; width:100%; line-height:1.5; position:relative;
}
a{color:inherit; text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}
img,svg{display:block;}
::selection{background:var(--cyan); color:#fff;}
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--void);}
::-webkit-scrollbar-thumb{background:#23233a; border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:var(--cyan);}

.wrap{max-width:1152px; margin:0 auto; padding:0 20px; width:100%;}
@media(min-width:640px){ .wrap{padding:0 32px;} }
.icon{width:1em; height:1em; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:-0.15em;}

.glass{background:rgba(18,18,28,0.6); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid var(--line);}
.rounded{border-radius:18px;}
.rounded-full{border-radius:999px;}

.scene{opacity:0; transform:scale(.94) translateY(24px); filter:blur(6px);
  transition:opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1), filter 1.1s cubic-bezier(.16,1,.3,1);
  will-change:transform,opacity,filter;}
.scene.in-view{opacity:1; transform:scale(1) translateY(0); filter:blur(0);}
.slate{position:absolute; top:50%; left:0; transform:translateY(-50%) translateX(-40px);
  font-family:var(--font-display); font-weight:700; font-size:min(22vw,220px);
  color:rgba(255,255,255,.045); letter-spacing:-.02em; white-space:nowrap;
  pointer-events:none; z-index:0; opacity:0; transition:opacity 1.2s ease, transform 1.6s cubic-bezier(.16,1,.3,1);}
.scene.in-view .slate{opacity:1; transform:translateY(-50%) translateX(0);}

/* same big background word, but always visible — for hero sections that are
   on-screen immediately (no scroll-triggered .scene wrapper needed) */
.slate-static{position:absolute; top:50%; left:0; transform:translateY(-50%);
  font-family:var(--font-display); font-weight:700; font-size:min(20vw,200px);
  color:rgba(255,255,255,.045); letter-spacing:-.02em; white-space:nowrap;
  pointer-events:none; z-index:0;}

.reveal{opacity:0; transform:translateY(40px) scale(.98); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); will-change:transform,opacity;}
.reveal.in-view{opacity:1; transform:translateY(0) scale(1);}
.reveal.d1.in-view{transition-delay:.08s;} .reveal.d2.in-view{transition-delay:.16s;} .reveal.d3.in-view{transition-delay:.24s;}

.kinetic{display:block; overflow:hidden;}
.kinetic .word{display:inline-block; opacity:0; transform:translateY(110%) rotate(4deg); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);}
.kinetic.in-view .word{opacity:1; transform:translateY(0) rotate(0);}

.grid-field{position:absolute; inset:0;
  background-image:linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 90%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 90%);
  pointer-events:none;}

@keyframes drift{0%{transform:translate3d(0,0,0) scale(1);}50%{transform:translate3d(2%,-3%,0) scale(1.04);}100%{transform:translate3d(0,0,0) scale(1);}}
.orb{position:absolute; border-radius:999px; filter:blur(90px); pointer-events:none; animation:drift 14s ease-in-out infinite;}
.orb.slow{animation-duration:22s;}
@keyframes blink{0%,45%{opacity:1;}50%,95%{opacity:0;}100%{opacity:1;}}
.caret{animation:blink 1s step-end infinite; color:var(--cyan);}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
.float{animation:floaty 5s ease-in-out infinite;}
.glow-text{text-shadow:0 0 30px rgba(57,242,214,.35);}

.card-hover{transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease, border-color .5s ease;}
.card-hover:hover{transform:translateY(-8px); border-color:rgba(57,242,214,.4); box-shadow:0 20px 60px -20px rgba(57,242,214,.25);}

.btn{position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:none; font:inherit;}
.ripple{position:absolute; border-radius:999px; background:rgba(255,255,255,.5); transform:scale(0); animation:rip .7s ease-out; pointer-events:none;}
@keyframes rip{to{transform:scale(4); opacity:0;}}
.btn-primary{background:var(--cyan); color:var(--void); font-weight:600; padding:14px 28px; border-radius:999px; transition:box-shadow .3s ease, transform .3s ease;}
.btn-primary:hover{box-shadow:0 0 30px rgba(57,242,214,.5); transform:translateY(-2px);}
.btn-outline{border:1px solid rgba(255,255,255,.2); padding:13px 27px; border-radius:999px; transition:border-color .3s ease, color .3s ease, transform .3s ease; background:transparent; color:inherit;}
.btn-outline:hover{border-color:rgba(57,242,214,.6); color:var(--cyan); transform:translateY(-2px);}
.btn-danger{background:rgba(255,107,107,.15); border:1px solid rgba(255,107,107,.5); color:var(--danger); padding:10px 18px; border-radius:999px;}
.btn-danger:hover{background:rgba(255,107,107,.28);}
.btn[disabled]{opacity:.5; cursor:not-allowed;}
.btn-sm{padding:9px 16px !important; font-size:13px;}

.cursor-glow{position:fixed; top:0; left:0; width:420px; height:420px; border-radius:999px;
  background:radial-gradient(circle, rgba(57,242,214,.10) 0%, rgba(139,107,255,.06) 40%, transparent 70%);
  pointer-events:none; transform:translate(-50%,-50%); z-index:0;}
@media(pointer:coarse){ .cursor-glow{display:none;} }

.mono{font-family:var(--font-mono); letter-spacing:.08em;}
.section-line{background:linear-gradient(to right, transparent, rgba(57,242,214,.5), transparent); height:1px;}

#progress-track{position:fixed; top:0; left:0; width:100%; height:2px; z-index:60; background:rgba(255,255,255,.05);}
#progress-bar{height:100%; width:0%; background:linear-gradient(to right, var(--cyan), var(--violet), var(--amber));}

#nav{position:fixed; top:0; left:0; width:100%; z-index:50; padding:16px 0; transition:padding .4s ease;}
#nav.scrolled{padding:10px 0;}
#nav .bar{max-width:1152px; margin:0 auto; padding:4px 16px; display:flex; align-items:center; justify-content:space-between; border-radius:16px; transition:all .4s ease;}
@media(min-width:640px){ #nav .bar{padding:4px 32px;} }
#nav.scrolled .bar{background:rgba(18,18,28,.65); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid var(--line); padding:10px 16px;}
@media(min-width:640px){ #nav.scrolled .bar{padding:12px 32px;} }
.logo{font-family:var(--font-display); font-size:17px; font-weight:700; display:flex; align-items:center; gap:8px; white-space:nowrap;}
.logo .dot{width:8px; height:8px; border-radius:999px; background:var(--cyan); box-shadow:0 0 12px 2px rgba(57,242,214,.7); flex-shrink:0;}
.nav-links{display:none; align-items:center; gap:32px; font-family:var(--font-mono); font-size:14px; color:var(--mist);}
.nav-links a{position:relative; padding:2px 0;}
.nav-links a::after{content:''; position:absolute; bottom:-2px; left:0; width:0; height:1px; background:var(--cyan); transition:width .3s ease;}
.nav-links a:hover, .nav-links a.active{color:var(--cyan);}
.nav-links a:hover::after, .nav-links a.active::after{width:100%;}
@media(min-width:768px){ .nav-links{display:flex;} .nav-cta{display:inline-flex !important;} }
.nav-cta{display:none; align-items:center; gap:8px; border-radius:999px; background:rgba(57,242,214,.1); border:1px solid rgba(57,242,214,.4); color:var(--cyan); padding:9px 18px; font-size:14px; font-family:var(--font-mono); flex-shrink:0;}
.nav-cta:hover{background:rgba(57,242,214,.2);}
#menu-btn{display:inline-flex; background:none; border:none; color:#fff; padding:8px; cursor:pointer; flex-shrink:0;}
@media(min-width:768px){ #menu-btn{display:none;} }
#mobile-menu{max-height:0; overflow:hidden; margin:0 16px; padding:0 20px; display:flex; flex-direction:column; gap:0; font-family:var(--font-mono); color:var(--mist); transition:max-height .4s ease, padding .4s ease, margin .4s ease;}
#mobile-menu.open{max-height:320px; margin:8px 16px 0; padding:20px;}
#mobile-menu a{padding:8px 0; display:block;}
#mobile-menu a:hover, #mobile-menu a.active{color:var(--cyan);}

/* hero (home) */
.hero{position:relative; min-height:calc(var(--vh, 1vh) * 100); display:flex; align-items:center; overflow:hidden; padding:100px 0 56px; width:100%;}
.hero-grid{position:relative; z-index:10; display:grid; gap:48px; align-items:center; width:100%;}
@media(min-width:1024px){ .hero-grid{grid-template-columns:1.05fr .95fr; gap:56px;} }
.eyebrow{font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.3em; color:var(--cyan); margin-bottom:16px; display:flex; align-items:center; gap:10px;}
.eyebrow .rule{width:28px; height:1px; background:rgba(57,242,214,.6); flex-shrink:0;}
h1.title{font-family:var(--font-display); font-size:clamp(40px, 12vw, 76px); font-weight:700; line-height:1.02; letter-spacing:-0.01em; margin:0;}
.subtitle{font-family:var(--font-display); font-size:clamp(19px, 5vw, 28px); color:var(--mist); margin:8px 0 20px; font-weight:400;}
.lead{color:var(--mist); font-size:16px; max-width:460px; line-height:1.7; margin-bottom:32px;}
@media(min-width:640px){ .lead{font-size:17px;} }
.cta-row{display:flex; flex-wrap:wrap; align-items:center; gap:14px;}
.cta-row .btn{font-size:15px;}

.orbit-stage{position:relative; width:100%; max-width:420px; display:flex; align-items:center; justify-content:center;}
.orbit-ring{position:absolute; inset:0; margin:auto; width:100%; height:100%; animation:spin 26s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.orbit-chip{position:absolute; top:50%; left:50%; width:44px; height:44px; margin:-22px; border-radius:999px; display:flex; align-items:center; justify-content:center; animation:counter-spin 26s linear infinite;}
@keyframes counter-spin{from{transform:rotate(0deg) translate(0,0) rotate(0deg);}to{transform:rotate(-360deg) translate(0,0) rotate(360deg);}}
@media (max-width:480px){ .orbit-stage{max-width:300px;} .orbit-chip{width:34px; height:34px; margin:-17px;} }

.terminal{max-width:420px; width:100%; padding:20px; box-shadow:0 30px 80px -30px rgba(0,0,0,.6); position:relative; z-index:2;}
.terminal .dots{display:flex; align-items:center; gap:8px; margin-bottom:16px;}
.terminal .dots span{width:12px; height:12px; border-radius:999px; flex-shrink:0;}
.terminal .dots .r{background:#ff5f57;} .terminal .dots .y{background:#febc2e;} .terminal .dots .g{background:#28c840;}
.terminal .filename{margin-left:10px; font-family:var(--font-mono); font-size:12px; color:var(--mist);}
.terminal pre{font-family:var(--font-mono); font-size:13px; line-height:1.7; margin:0; white-space:pre-wrap; word-break:break-word; min-height:180px;}
@media(min-width:640px){ .terminal pre{font-size:14px;} }

.scroll-cue{position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:10; display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--mist); font-family:var(--font-mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase;}
.scroll-cue:hover{color:var(--cyan);}

/* sub-page hero (Work / Pricing / Contact / Admin login) — smaller than home hero */
.page-hero{position:relative; padding:150px 0 60px; overflow:hidden;}
.page-hero .orb{opacity:.8;}
.page-hero .eyebrow{margin-bottom:14px;}
.page-hero h1{font-family:var(--font-display); font-size:clamp(32px, 8vw, 54px); font-weight:700; letter-spacing:-0.01em; margin:0 0 14px; position:relative; z-index:1;}
.page-hero p.lead{margin-bottom:0; max-width:640px; position:relative; z-index:1;}

.section-head{margin-bottom:48px; max-width:640px; position:relative; z-index:1;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head h2{font-family:var(--font-display); font-size:clamp(28px, 7vw, 46px); font-weight:700; letter-spacing:-0.01em; margin:0;}
.section-head p{color:var(--mist); margin-top:14px; line-height:1.7; font-size:15px;}
@media(min-width:640px){ .section-head{margin-bottom:56px;} .section-head p{font-size:16px;} }

section{position:relative; padding:88px 0; overflow:hidden;}
@media(min-width:640px){ section{padding:120px 0;} }
section.tight{padding:56px 0;}

/* projects */
.proj-grid{display:grid; gap:20px; grid-template-columns:1fr; position:relative; z-index:1;}
@media(min-width:640px){ .proj-grid{grid-template-columns:1fr 1fr; gap:24px;} }
@media(min-width:1024px){ .proj-grid{grid-template-columns:1fr 1fr 1fr;} }
.proj-card{display:flex; flex-direction:column; overflow:hidden;}
.proj-thumb{position:relative; height:190px; display:flex; flex-direction:column; background:var(--ink) no-repeat center top/cover; overflow:hidden; transition:background-size .6s ease;}
.proj-thumb::before{content:''; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(7,7,12,.75) 0%, rgba(7,7,12,.1) 30%, rgba(7,7,12,.1) 65%, rgba(7,7,12,.85) 100%); z-index:1;}
.thumb-top{position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:12px 14px;}
.sys-tag{font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--cyan);}
.cat-pill{font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; padding:4px 10px; border-radius:999px; background:rgba(7,7,12,.55); border:1px solid rgba(255,255,255,.15); color:var(--mist);}
.proj-thumb .scanline{position:absolute; left:0; right:0; height:40%; background:linear-gradient(to bottom, transparent, rgba(57,242,214,.14), transparent); transform:translateY(-120%); transition:transform 1.4s cubic-bezier(.16,1,.3,1); z-index:1;}
.proj-card:hover .scanline{transform:translateY(220%);}
.proj-card:hover .proj-thumb{background-size:auto 112%;}
.thumb-bottom{position:relative; z-index:2; margin-top:auto; padding:10px 14px; display:flex; justify-content:flex-end;}
.view-live{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11px; padding:6px 12px; border-radius:999px; background:rgba(57,242,214,.15); border:1px solid rgba(57,242,214,.45); color:var(--cyan); transition:background .3s ease, transform .3s ease;}
.view-live:hover{background:rgba(57,242,214,.28); transform:translateY(-2px);}
.private-tag{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11px; padding:6px 12px; border-radius:999px; background:rgba(7,7,12,.55); border:1px solid rgba(255,255,255,.15); color:var(--mist);}
.proj-body{padding:22px; display:flex; flex-direction:column; flex:1;}
.proj-body h3{font-family:var(--font-display); font-size:19px; font-weight:700; margin:0 0 8px;}
.proj-body p{color:var(--mist); font-size:14px; line-height:1.7; margin:0 0 18px; flex:1;}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px;}
.tag{font-family:var(--font-mono); font-size:11px; padding:5px 10px; border-radius:999px; border:1px solid var(--line); color:var(--mist); background:rgba(255,255,255,.05);}
.proj-stat{display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px dashed var(--line); font-size:12.5px;}
.proj-stat .label{font-family:var(--font-mono); color:var(--mist); letter-spacing:.03em;}
.proj-stat .value{font-weight:700; color:#e6e8ef;}

.cat-filter{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:36px; position:relative; z-index:1;}
.cat-filter a{font-family:var(--font-mono); font-size:12.5px; padding:8px 16px; border-radius:999px; border:1px solid var(--line); color:var(--mist); transition:all .25s ease;}
.cat-filter a:hover{border-color:rgba(57,242,214,.5); color:var(--cyan);}
.cat-filter a.active{background:rgba(57,242,214,.14); border-color:rgba(57,242,214,.5); color:var(--cyan);}

/* pricing */
.price-grid{display:grid; gap:20px; grid-template-columns:1fr; position:relative; z-index:1;}
@media(min-width:1024px){ .price-grid{grid-template-columns:1fr 1fr 1fr; gap:24px;} }
.price-card{position:relative; padding:30px; display:flex; flex-direction:column;}
.price-card.highlight{border-color:rgba(57,242,214,.4); box-shadow:0 0 60px -15px rgba(57,242,214,.35);}
@media(min-width:1024px){ .price-card.highlight{transform:translateY(-12px);} }
.badge{position:absolute; top:-12px; left:30px; font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em; background:var(--cyan); color:var(--void); padding:5px 12px; border-radius:999px; font-weight:700;}
.price-card h3{font-family:var(--font-display); font-size:19px; font-weight:700; margin:0 0 4px;}
.price-card .tier-desc{color:var(--mist); font-size:14px; margin-bottom:20px;}
.price-tag{margin-bottom:20px;}
.price-tag .amount{font-family:var(--font-display); font-size:34px; font-weight:700;}
.price-tag .period{color:var(--mist); font-size:12px; margin-left:6px; font-family:var(--font-mono);}
.feat-list{display:flex; flex-direction:column; gap:11px; margin-bottom:26px; flex:1;}
.feat-list li{display:flex; gap:10px; align-items:flex-start; color:var(--mist); font-size:13.5px;}
.feat-list .icon{color:var(--cyan); margin-top:3px; flex-shrink:0;}
.price-card .btn{justify-content:center; width:100%;}

/* contact */
.contact-grid{display:grid; gap:20px; grid-template-columns:1fr; position:relative; z-index:1;}
@media(min-width:1024px){ .contact-grid{grid-template-columns:2fr 3fr; gap:24px;} }
.wa-card{padding:28px; display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(to bottom right, rgba(57,242,214,.1), transparent);}
.wa-icon{width:46px; height:46px; border-radius:999px; background:rgba(57,242,214,.15); border:1px solid rgba(57,242,214,.4); display:flex; align-items:center; justify-content:center; margin-bottom:22px; color:var(--cyan);}
.wa-card h3{font-family:var(--font-display); font-size:21px; margin:0 0 8px;}
.wa-card p{color:var(--mist); font-size:14px; line-height:1.6; margin:0;}
.wa-link{margin-top:28px; display:inline-flex; align-items:center; gap:8px; color:var(--cyan); font-family:var(--font-mono); font-size:14px;}

.info-card{padding:28px; display:grid; gap:22px; grid-template-columns:1fr;}
@media(min-width:480px){ .info-card{grid-template-columns:1fr 1fr;} }
.info-item{display:flex; align-items:flex-start; gap:13px; min-width:0;}
.info-icon{width:42px; height:42px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:color .3s ease, border-color .3s ease;}
a.info-item:hover .info-icon{color:var(--cyan); border-color:rgba(57,242,214,.5);}
a.info-item:hover .info-val{color:var(--cyan);}
.info-label{font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--mist); margin:0 0 4px;}
.info-val{font-size:13.5px; margin:0; transition:color .3s ease; word-break:break-word; min-width:0;}

/* contact form */
.form-card{padding:30px; position:relative; z-index:1;}
.form-row{display:grid; gap:16px; grid-template-columns:1fr; margin-bottom:16px;}
@media(min-width:640px){ .form-row.two{grid-template-columns:1fr 1fr;} }
.field label{display:block; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--mist); margin-bottom:8px;}
.field input, .field textarea, .field select{
  width:100%; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:12px;
  padding:13px 14px; color:#e6e8ef; font-family:var(--font-body); font-size:14.5px; transition:border-color .25s ease, background .25s ease;
}
.field input:focus, .field textarea:focus, .field select:focus{outline:none; border-color:rgba(57,242,214,.55); background:rgba(255,255,255,.06);}
.field textarea{resize:vertical; min-height:140px;}
.field.required label::after{content:' *'; color:var(--cyan);}
.form-note{font-size:12px; color:var(--mist); margin-top:10px;}

.alert{padding:14px 18px; border-radius:12px; font-size:14px; margin-bottom:22px; display:flex; align-items:flex-start; gap:10px;}
.alert-success{background:rgba(57,242,214,.1); border:1px solid rgba(57,242,214,.35); color:#c9fff3;}
.alert-error{background:rgba(255,107,107,.1); border:1px solid rgba(255,107,107,.35); color:#ffd7d7;}

.social-row{margin-top:22px; padding:22px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; position:relative; z-index:1;}
.social-pill{display:flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; border:1px solid var(--line); color:var(--mist); font-size:13.5px; font-family:var(--font-mono); transition:border-color .3s ease, color .3s ease, transform .3s ease;}
.social-pill:hover{border-color:rgba(57,242,214,.5); color:var(--cyan); transform:translateY(-2px);}

footer.site-footer{margin-top:56px; padding:28px 0; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; font-size:12px; color:var(--mist); font-family:var(--font-mono); position:relative; z-index:1;}
footer.site-footer a:hover{color:var(--cyan);}
footer .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; width:100%;}

/* ---------------- Admin ---------------- */
.admin-body{background:var(--void);}
.admin-shell{display:flex; min-height:100vh;}
.admin-sidebar{width:230px; flex-shrink:0; background:var(--panel); border-right:1px solid var(--line); padding:24px 18px; position:sticky; top:0; height:100vh; display:flex; flex-direction:column;}
.admin-sidebar .logo{margin-bottom:36px;}
.admin-nav{display:flex; flex-direction:column; gap:4px; flex:1;}
.admin-nav a{padding:11px 14px; border-radius:10px; font-family:var(--font-mono); font-size:13.5px; color:var(--mist); display:flex; align-items:center; gap:10px;}
.admin-nav a:hover{background:rgba(255,255,255,.05); color:#e6e8ef;}
.admin-nav a.active{background:rgba(57,242,214,.12); color:var(--cyan);}
.admin-main{flex:1; padding:36px; max-width:100%; overflow-x:hidden;}
@media(max-width:860px){ .admin-shell{flex-direction:column;} .admin-sidebar{width:100%; height:auto; position:relative; flex-direction:row; align-items:center; justify-content:space-between; padding:14px 18px;} .admin-sidebar .logo{margin-bottom:0;} .admin-nav{flex-direction:row; flex-wrap:wrap;} .admin-main{padding:22px;} }
.admin-topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:30px; flex-wrap:wrap; gap:14px;}
.admin-topbar h1{font-family:var(--font-display); font-size:26px; margin:0;}
.admin-card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:26px; margin-bottom:24px;}
.stat-grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); margin-bottom:28px;}
.stat-card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px;}
.stat-card .num{font-family:var(--font-display); font-size:32px; font-weight:700; color:var(--cyan);}
.stat-card .lbl{font-family:var(--font-mono); font-size:12px; color:var(--mist); margin-top:6px;}
table.admin-table{width:100%; border-collapse:collapse; font-size:13.5px;}
table.admin-table th{text-align:left; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--mist); padding:10px 12px; border-bottom:1px solid var(--line);}
table.admin-table td{padding:12px; border-bottom:1px solid var(--line); vertical-align:middle;}
table.admin-table tr:hover td{background:rgba(255,255,255,.02);}
.admin-thumb{width:56px; height:38px; object-fit:cover; border-radius:6px; background:#000;}
.pill-yes{color:var(--cyan); font-family:var(--font-mono); font-size:12px;}
.pill-no{color:var(--mist); font-family:var(--font-mono); font-size:12px;}
.row-actions{display:flex; gap:8px; flex-wrap:wrap;}
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.login-card{width:100%; max-width:400px; padding:34px;}
.login-card h1{font-family:var(--font-display); font-size:24px; margin:0 0 6px;}
.login-card p.sub{color:var(--mist); font-size:13.5px; margin:0 0 26px;}
.checkbox-row{display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.checkbox-row input{width:16px; height:16px;}
.checkbox-row label{font-size:13.5px; color:var(--mist); margin:0;}

@media(max-width:640px){ .orb{filter:blur(60px);} }
@media(prefers-reduced-motion:reduce){
  .orb, .float, .caret, .orbit-ring, .orbit-chip{animation:none !important;}
  .reveal, .scene, .kinetic .word{transition:none !important; opacity:1 !important; transform:none !important; filter:none !important;}
  html{scroll-behavior:auto;}
}

/* ============================================================
   Mobile polish — tighten spacing and fix small-screen quirks
   without changing the desktop layout.
   ============================================================ */
@media(max-width:640px){
  section{padding:64px 0;}
  section.tight{padding:40px 0;}
  .hero{padding:96px 0 44px;}
  .hero-grid{gap:32px;}
  .page-hero{padding:120px 0 44px;}
  .section-head{margin-bottom:36px;}
  .terminal{padding:16px;}
  .terminal pre{font-size:12.5px; min-height:150px;}
  .orbit-stage{margin-top:8px;}
  .proj-body{padding:18px;}
  .price-card{padding:24px;}
  .form-card{padding:22px;}
  .wa-card, .info-card{padding:22px;}
  .admin-main{padding:16px;}
  .admin-card{padding:20px;}
  .login-card{padding:26px;}
  .cta-row{gap:10px;}
  .cta-row .btn{flex:1 1 auto; justify-content:center; text-align:center;}
  .price-card.highlight{transform:none;}
  .badge{left:24px;}
  .stat-grid{grid-template-columns:1fr 1fr; gap:12px;}
  .stat-card{padding:16px;}
  .social-row{padding:16px; gap:10px;}
  .social-pill{padding:9px 13px; font-size:12.5px;}
  footer.site-footer{text-align:center; justify-content:center;}
  footer .wrap{justify-content:center; text-align:center;}
}
@media(max-width:400px){
  h1.title{font-size:clamp(34px, 13vw, 48px);}
  .page-hero h1{font-size:clamp(26px, 9vw, 36px);}
  .stat-grid{grid-template-columns:1fr;}
  .logo{font-size:15px;}
}
/* prevent the decorative big background word from ever forcing horizontal scroll */
.slate, .slate-static{max-width:100vw; overflow:hidden;}
@media(max-width:640px){
  .slate, .slate-static{font-size:min(26vw,120px);}
}