/* ============================================================
   StarScaling — web design studio
   Cosmic ink · starlight gold · electric violet
   No external libraries. All motion is CSS + a little vanilla JS.
   ============================================================ */

:root{
  --ink:#07080f; --ink-2:#0a0c18; --card:#0d1022; --card-2:#10142c;
  --text:#eceefb; --muted:#9aa2c4; --line:rgba(255,255,255,.10);
  --star:#ffd87a; --star-2:#ffb24d; --violet:#7b6bff; --violet-2:#a98bff;
  --grad:linear-gradient(120deg,var(--star),var(--star-2) 42%,var(--violet));
  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --radius:20px; --container:1200px; --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--ink); color:var(--text); font-family:var(--body); font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img,svg,canvas{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; font-family:var(--display); font-weight:700; line-height:1.05; letter-spacing:-.02em}
p{margin:0}
section[id]{scroll-margin-top:80px}
.container{width:100%; max-width:var(--container); margin:0 auto; padding:0 28px}
.skip-link{position:absolute; left:-999px; top:0; background:var(--star); color:#000; padding:10px 16px; border-radius:8px; z-index:200}
.skip-link:focus{left:16px; top:16px}
.section{padding:clamp(80px,11vh,140px) 0; position:relative}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5em; font-family:var(--display); font-weight:600; font-size:.98rem; padding:.85em 1.5em; border-radius:999px; border:1px solid transparent; cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s}
.btn--primary{background:var(--grad); color:#1a1206; box-shadow:0 12px 34px -12px rgba(255,178,77,.6)}
.btn--primary:hover{transform:translateY(-2px); box-shadow:0 18px 44px -12px rgba(255,178,77,.72)}
.btn--ghost{background:rgba(255,255,255,.04); border-color:var(--line); color:var(--text)}
.btn--ghost:hover{background:rgba(255,255,255,.09); transform:translateY(-2px)}
.btn--small{padding:.6em 1.1em; font-size:.9rem}
.btn--block{width:100%; padding:1em}

/* ---------- Headings ---------- */
.eyebrow{display:inline-flex; align-items:center; gap:.6em; font-family:var(--display); font-weight:600; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 1.1rem}
.eyebrow--center{justify-content:center}
.eyebrow__dot{width:8px; height:8px; border-radius:50%; background:var(--grad); box-shadow:0 0 14px var(--star-2)}
.h-display{font-size:clamp(2rem,4.8vw,3.4rem)}
.grad{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{font-size:clamp(1.05rem,1.4vw,1.24rem); color:var(--muted); max-width:46ch}
.lead--center{margin:1.1rem auto 0; text-align:center}
.section-head{max-width:760px; margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center}
.section-head.between{display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; max-width:none}
@media (max-width:680px){.section-head.between{flex-direction:column; align-items:flex-start}}

/* ---------- Reveal (vanilla, robust) ---------- */
.js [data-reveal]{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.js [data-reveal].is-in{opacity:1; transform:none}
.js [data-reveal-delay="1"]{transition-delay:.08s}
.js [data-reveal-delay="2"]{transition-delay:.16s}
.js [data-reveal-delay="3"]{transition-delay:.24s}
.js [data-reveal-delay="4"]{transition-delay:.32s}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed; inset:0 0 auto 0; z-index:90; border-bottom:1px solid transparent; transition:background .4s, backdrop-filter .4s, border-color .4s}
.nav.is-stuck{background:rgba(7,8,15,.72); backdrop-filter:blur(14px); border-bottom-color:var(--line)}
.nav__inner{display:flex; align-items:center; max-width:var(--container); margin:0 auto; padding:15px 28px}
.brand{display:inline-flex; align-items:center; gap:.55em; font-family:var(--display); font-weight:700; font-size:1.12rem; color:#fff}
.brand__mark{display:grid; place-items:center; filter:drop-shadow(0 0 10px rgba(255,178,77,.45))}
.nav__links{display:flex; align-items:center; gap:1.7rem; margin-left:auto; font-size:.96rem}
.nav__links a{color:var(--muted); transition:color .2s}
.nav__links a:hover{color:#fff}
.nav__links .nav__cta{color:#1a1206}
.nav__toggle{display:none; margin-left:auto; width:42px; height:42px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.04); cursor:pointer; padding:0; flex-direction:column; align-items:center; justify-content:center; gap:5px}
.nav__toggle span{width:18px; height:2px; background:#fff; border-radius:2px; transition:transform .3s, opacity .3s}
.nav.is-open .nav__toggle span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav.is-open .nav__toggle span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media (max-width:860px){
  .nav__toggle{display:flex}
  .nav__links{position:fixed; inset:64px 14px auto 14px; flex-direction:column; align-items:stretch; gap:.4rem; margin:0; padding:14px; background:rgba(12,14,28,.96); backdrop-filter:blur(16px); border:1px solid var(--line); border-radius:16px; transform:translateY(-12px); opacity:0; pointer-events:none; transition:opacity .3s, transform .3s}
  .nav.is-open .nav__links{opacity:1; transform:none; pointer-events:auto}
  .nav__links a{padding:.7em .4em} .nav__links .nav__cta{text-align:center; margin-top:.3rem}
}

/* ============================================================
   BACKDROP (starfield + aurora)
   ============================================================ */
.starfield{position:absolute; inset:0; width:100%; height:100%}
.aurora{position:absolute; border-radius:50%; filter:blur(85px); opacity:.5; mix-blend-mode:screen; animation:drift 24s var(--ease) infinite alternate}
.aurora--gold{width:46vw; height:46vw; left:-8vw; top:-10vw; background:radial-gradient(circle,rgba(255,178,77,.5),transparent 64%)}
.aurora--violet{width:52vw; height:52vw; right:-14vw; bottom:-18vw; background:radial-gradient(circle,rgba(123,107,255,.55),transparent 66%); animation-direction:alternate-reverse; animation-duration:30s}
@keyframes drift{to{transform:translate3d(6%,4%,0) scale(1.12)}}
.grain{position:absolute; inset:0; opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; min-height:100svh; display:flex; align-items:center; padding:120px 0 70px; overflow:hidden}
.hero__bg{position:absolute; inset:0; z-index:0; pointer-events:none}
.hero__grid{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.hero__title{font-size:clamp(2.7rem,7vw,5rem); letter-spacing:-.03em; margin:.15em 0 0}
.hero__sub{font-size:clamp(1.05rem,1.6vw,1.28rem); color:var(--muted); max-width:48ch; margin:1.4rem 0 2rem}
.hero__cta{display:flex; gap:.9rem; flex-wrap:wrap}
.hero__meta{display:flex; gap:2rem; list-style:none; padding:0; margin:2.6rem 0 0}
.hero__meta li{display:flex; flex-direction:column}
.hero__meta b{font-family:var(--display); font-size:1.7rem; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero__meta span{font-size:.82rem; color:var(--muted)}
@media (max-width:920px){.hero__grid{grid-template-columns:1fr} .hero__visual{order:-1}}

/* hero browser mockup */
.hero__visual{position:relative; min-height:340px}
.mock{position:relative; border-radius:16px; background:var(--card); border:1px solid rgba(255,255,255,.12); box-shadow:0 50px 100px -40px rgba(0,0,0,.7)}
.mock--browser{width:100%; max-width:520px; margin-left:auto; animation:float1 7s var(--ease) infinite alternate}
.mock__bar{display:flex; align-items:center; gap:7px; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08)}
.mock__bar i{width:10px; height:10px; border-radius:50%; background:#33405f}
.mock__url{margin-left:12px; font-size:.72rem; color:#7a85ad; background:#0a0e1d; padding:4px 12px; border-radius:7px; flex:1}
.mock__view{padding:18px}
.mock__nav{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px}
.mock__logo{width:64px; height:14px; border-radius:5px; background:var(--grad)}
.mock__links{display:flex; gap:8px}
.mock__links b{width:30px; height:9px; border-radius:5px; background:#2a3556; display:block}
.mock__hero{display:flex; flex-direction:column; gap:11px; padding:14px 0 22px}
.mock__line{height:16px; border-radius:6px; background:#28324f}
.mock__line.w70{width:70%; height:22px; background:linear-gradient(90deg,#cdd6ff,#7e88b0)}
.mock__line.w50{width:48%}
.mock__btn{width:120px; height:34px; border-radius:9px; background:var(--grad); margin-top:6px}
.mock__cards{display:grid; grid-template-columns:repeat(3,1fr); gap:11px}
.mock__cards span{height:64px; border-radius:11px; background:#141a33; border:1px solid rgba(255,255,255,.06)}
.mock--phone{position:absolute; left:-26px; bottom:-34px; width:128px; padding:10px; border-radius:22px; background:#0a0e1d; border:1px solid rgba(255,255,255,.14); animation:float2 6s var(--ease) infinite alternate}
.mock__pview{display:flex; flex-direction:column; gap:8px}
.mock__pbar{height:30px; border-radius:10px; background:var(--grad)}
.mock__pline{height:10px; border-radius:5px; background:#2a3556}
.mock__pline.w60{width:60%}
.mock__pcard{height:30px; border-radius:9px; background:#141a33}
.badge{position:absolute; right:-10px; top:30px; display:inline-flex; align-items:center; gap:.5em; font-family:var(--display); font-size:.8rem; color:#fff; background:rgba(13,16,34,.9); border:1px solid rgba(255,178,77,.4); padding:.55em .9em; border-radius:12px; box-shadow:0 16px 30px -16px rgba(255,178,77,.5); animation:float2 5s var(--ease) infinite alternate-reverse}
.badge--live i{width:8px; height:8px; border-radius:50%; background:#3ad6a0; box-shadow:0 0 10px #3ad6a0; animation:pulse 1.6s infinite}
@keyframes float1{to{transform:translateY(-14px)}}
@keyframes float2{to{transform:translateY(12px)}}
@keyframes pulse{50%{opacity:.4}}

.scroll-cue{position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:.5rem; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.scroll-cue__rail{width:2px; height:40px; border-radius:2px; background:rgba(255,255,255,.14); position:relative; overflow:hidden}
.scroll-cue__dot{position:absolute; top:0; left:0; width:100%; height:10px; background:var(--star); border-radius:2px; animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-12px);opacity:0}40%{opacity:1}100%{transform:translateY(40px);opacity:0}}
@media (max-width:920px){.scroll-cue{display:none}}

/* ============================================================
   PROMISE STRIP
   ============================================================ */
.strip{padding:clamp(60px,9vh,110px) 0; background:var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.strip__text{font-family:var(--display); font-weight:600; font-size:clamp(1.5rem,3.6vw,2.6rem); line-height:1.25; letter-spacing:-.02em; max-width:20ch}
.strip__text em{font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ============================================================
   SERVICES (bento)
   ============================================================ */
.bento{display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:minmax(150px,auto); gap:16px}
.tile{position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px; overflow:hidden; transition:transform .3s var(--ease), border-color .3s}
.tile:hover{transform:translateY(-4px); border-color:rgba(255,178,77,.35)}
.tile h3{font-size:1.18rem; margin-bottom:.5rem}
.tile p{color:var(--muted); font-size:.98rem}
.tile__icon{display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:rgba(255,178,77,.12); color:var(--star); font-size:1.2rem; margin-bottom:1rem}
.tile--feature{grid-column:1/3; grid-row:1/3; padding:34px; background:radial-gradient(120% 120% at 0 0,rgba(123,107,255,.16),var(--card) 55%)}
.tile--feature h3{font-size:1.7rem}
.tile--feature p{font-size:1.08rem; max-width:46ch}
.tile__art{position:absolute; right:30px; bottom:30px; display:flex; align-items:flex-end; gap:10px; height:90px}
.tile__art .bar{width:24px; border-radius:7px 7px 0 0; background:var(--grad); opacity:.85}
.tile__art .bar:nth-child(1){height:40%} .tile__art .bar:nth-child(2){height:66%} .tile__art .bar:nth-child(3){height:88%} .tile__art .bar:nth-child(4){height:100%}
.tile--cta{grid-column:span 2; display:flex; flex-direction:column; justify-content:center; background:linear-gradient(120deg,rgba(255,178,77,.1),rgba(123,107,255,.1))}
.tile__link{margin-top:1rem; color:var(--star); font-family:var(--display); font-weight:600; font-size:.95rem}
@media (max-width:860px){
  .bento{grid-template-columns:1fr 1fr}
  .tile--feature{grid-column:1/3; grid-row:auto} .tile--cta{grid-column:1/3}
}
@media (max-width:540px){.bento{grid-template-columns:1fr} .tile--feature,.tile--cta{grid-column:auto}}

/* ============================================================
   WORK
   ============================================================ */
.work{background:var(--ink-2)}
.work__cta{flex:none}
.work__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.project{border-radius:var(--radius); overflow:hidden; background:var(--card); border:1px solid var(--line); transition:transform .3s var(--ease)}
.project:hover{transform:translateY(-5px)}
.project__shot{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--card-2)}
.project__shot img{width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .5s var(--ease)}
.project:hover .project__shot img{transform:scale(1.04)}
.project__shot--ph{display:grid; place-items:center; background:linear-gradient(150deg,#14122a,#241a52 55%,#0a0814)}
.project__plus{font-family:var(--display); font-size:2.6rem; color:var(--star); opacity:.7}
.project--cta{display:flex; flex-direction:column}
.project__meta{padding:18px 20px}
.project__meta h3{font-size:1.12rem}
.project__meta span{display:block; color:var(--muted); font-size:.88rem; margin-top:.25rem}
.work__note{margin-top:1.6rem; color:var(--muted); font-size:.92rem; font-style:italic}
@media (max-width:820px){.work__grid{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.work__grid{grid-template-columns:1fr}}

/* ============================================================
   PROCESS
   ============================================================ */
.steps{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(5,1fr); gap:16px; counter-reset:s}
.step{position:relative; padding:22px; border-radius:16px; background:var(--card); border:1px solid var(--line)}
.step__no{font-family:var(--display); font-weight:700; font-size:1.1rem; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.step h3{font-size:1.1rem; margin:.4rem 0}
.step p{color:var(--muted); font-size:.92rem}
@media (max-width:920px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.steps{grid-template-columns:1fr}}

/* ============================================================
   WHY
   ============================================================ */
.why{background:radial-gradient(120% 100% at 50% 0,#10183c,var(--ink) 68%)}
.why__inner{max-width:780px; margin:0 auto; text-align:center}
.why strong{color:var(--star)}
.why__pills{display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin-top:2rem}
.why__pills span{font-family:var(--display); font-size:.86rem; border:1px solid var(--line); border-radius:999px; padding:.5em 1.1em; background:rgba(255,255,255,.04)}

/* ============================================================
   CTA + FORM
   ============================================================ */
.cta{position:relative; overflow:hidden}
.cta__bg{position:absolute; inset:0; z-index:0; pointer-events:none}
.cta__inner{position:relative; z-index:2; max-width:640px; margin:0 auto}
.embed{margin-top:2.2rem}
.embed__slot{background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:20px; padding:26px; backdrop-filter:blur(6px)}
.mockform label{display:block; font-size:.84rem; color:var(--muted); margin-bottom:12px}
.mockform__row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.mockform input,.mockform textarea{width:100%; margin-top:6px; padding:12px 14px; border-radius:11px; border:1px solid var(--line); background:rgba(255,255,255,.04); color:#fff; font-family:var(--body); font-size:.96rem}
.mockform input::placeholder,.mockform textarea::placeholder{color:#6b7290}
.mockform input:focus,.mockform textarea:focus{outline:none; border-color:var(--star); box-shadow:0 0 0 3px rgba(255,178,77,.18)}
.mockform__note{font-size:.78rem; color:var(--muted); text-align:center; margin-top:12px; font-style:italic}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{padding:70px 0 34px; border-top:1px solid var(--line); background:var(--ink-2)}
.footer__inner{display:grid; grid-template-columns:1.4fr 2fr; gap:2.5rem}
.footer__tag{color:var(--muted); margin-top:1rem; max-width:24ch}
.footer__nav{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem}
.footer__nav h4{font-family:var(--display); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:1rem}
.footer__nav a{display:block; color:var(--text); opacity:.85; margin-bottom:.6rem; font-size:.95rem; transition:opacity .2s,color .2s}
.footer__nav a:hover{opacity:1; color:var(--star)}
.footer__addr{color:var(--muted); font-size:.95rem}
.footer__base{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--line); color:var(--muted); font-size:.86rem}
@media (max-width:680px){.footer__inner{grid-template-columns:1fr} .footer__nav{grid-template-columns:1fr 1fr}}

/* ============================================================
   Reduced motion — keep gentle fades, cut transforms & drift
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal]{transform:none !important}
  .mock--browser,.mock--phone,.badge,.aurora,.scroll-cue__dot{animation:none !important}
}