/* ============================================================
   AETHER — Creative Studio  ·  bespoke template
   ============================================================ */
:root{
  --bg:#07060c; --bg2:#0b0916; --ink:#f4f1fb; --muted:#9a93b5;
  --violet:#a78bfa; --violet2:#8b5cf6; --cyan:#38bdf8;
  --line:rgba(255,255,255,.09);
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Manrope', system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; overflow-x:hidden; line-height:1.6;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--violet2);color:#fff}
img{max-width:100%;display:block}

/* grain + vignette overlays */
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%,transparent 40%,rgba(0,0,0,.55) 100%);}
body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(20px,5vw,64px);}
.nav .brand{font-family:var(--serif);font-size:1.6rem;font-weight:600;letter-spacing:.32em;padding-left:.32em}
.nav .brand b{font-style:italic;font-weight:500}
.nav .links{display:flex;gap:34px;align-items:center;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.nav .links a{transition:color .3s}
.nav .links a:hover{color:var(--ink)}
.nav .cta{border:1px solid var(--line);padding:10px 20px;border-radius:999px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;transition:.3s}
.nav .cta:hover{background:var(--ink);color:#0a0710;border-color:var(--ink)}
@media(max-width:820px){.nav .links{display:none}}

/* ---------- HERO ---------- */
.hero{position:relative;height:100svh;min-height:640px;display:grid;place-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;
  background:radial-gradient(80% 60% at 50% 45%,rgba(124,58,237,.22),transparent 60%),
             radial-gradient(60% 50% at 70% 80%,rgba(56,189,248,.10),transparent 60%),var(--bg);}
#gem{position:absolute;inset:0;z-index:3;width:100%;height:100%;display:block}
.hero-head{position:relative;z-index:5;text-align:center;pointer-events:none;padding:0 20px}
.hero-head .kick{font-size:.74rem;letter-spacing:.5em;text-transform:uppercase;color:var(--violet);
  padding-left:.5em;margin-bottom:8px;opacity:0;animation:fade 1.2s .2s forwards}
.hero-head h1{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:.92;
  font-size:clamp(3rem,13vw,10rem);text-shadow:0 20px 80px rgba(0,0,0,.6);
  display:flex;flex-direction:column;align-items:center;gap:clamp(90px,18vh,220px)}
.hero-head h1 .row1{display:block;font-size:.4em;letter-spacing:.2em;font-weight:500;color:#efeaff}
.hero-head h1 .big{display:block;font-style:italic;
  background:linear-gradient(180deg,#fff 30%,#b9a9e6 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-head .row1,.hero-head .big{opacity:0;animation:fade 1.4s .4s forwards}
.hero-head .big{animation-delay:.55s}

/* corner micro-labels */
.hero-tag{position:absolute;z-index:4;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);pointer-events:none;
  opacity:0;animation:fade 1.4s 1s forwards}
.hero-tag.tr{top:auto;right:clamp(20px,5vw,64px);bottom:auto;top:26%;text-align:right;max-width:150px;line-height:1.5}
.hero-tag.bl{left:clamp(20px,5vw,64px);bottom:16%;max-width:170px;line-height:1.5}
.hero-scroll{position:absolute;z-index:4;bottom:26px;left:50%;transform:translateX(-50%);font-size:.66rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;animation:fade 1.4s 1.3s forwards}
.hero-scroll .bar{width:1px;height:44px;background:linear-gradient(var(--violet),transparent);animation:drop 2s ease-in-out infinite}
@keyframes fade{to{opacity:1}}
@keyframes drop{0%,100%{transform:scaleY(.4);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ---------- MARQUEE ---------- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;overflow:hidden;position:relative;z-index:2;background:var(--bg)}
.marquee-track{display:flex;gap:60px;white-space:nowrap;width:max-content;animation:scroll 30s linear infinite;font-family:var(--serif);font-size:1.7rem;font-style:italic;color:var(--muted)}
.marquee-track span{display:inline-flex;align-items:center;gap:60px}
.marquee-track span::after{content:"✦";color:var(--violet);font-style:normal;font-size:.8em}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- SECTIONS ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,48px);position:relative;z-index:2}
.intro{padding:130px 0 90px;text-align:center}
.intro .ey{font-size:.72rem;letter-spacing:.4em;text-transform:uppercase;color:var(--violet);margin-bottom:22px}
.intro h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,5vw,3.6rem);line-height:1.18;max-width:20ch;margin:0 auto}
.intro h2 i{color:var(--violet)}

.work{padding:40px 0 120px}
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.card{position:relative;border:1px solid var(--line);border-radius:20px;overflow:hidden;min-height:340px;
  background:linear-gradient(160deg,var(--bg2),#0a0713);display:flex;flex-direction:column;justify-content:flex-end;
  padding:30px;transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .4s}
.card::before{content:"";position:absolute;inset:0;opacity:.5;transition:opacity .5s;
  background:radial-gradient(120% 100% at 80% 0%,rgba(124,58,237,.28),transparent 60%)}
.card:hover{transform:translateY(-8px);border-color:rgba(167,139,250,.4)}
.card:hover::before{opacity:1}
.card .num{position:absolute;top:26px;left:30px;font-family:var(--serif);font-size:1rem;color:var(--muted);letter-spacing:.2em}
.card .tag{position:relative;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--violet);margin-bottom:10px}
.card h3{position:relative;font-family:var(--serif);font-weight:400;font-size:2rem;line-height:1.1}
.card p{position:relative;color:var(--muted);font-size:.92rem;margin-top:10px;max-width:34ch}
.card.tall{grid-row:span 1}
@media(max-width:760px){.work-grid{grid-template-columns:1fr}.card{min-height:280px}}

/* ---------- STATS ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:20px 0 120px}
.stat{text-align:center;border-left:1px solid var(--line);padding:14px 10px}
.stat:first-child{border-left:none}
.stat b{display:block;font-family:var(--serif);font-size:clamp(2.4rem,5vw,3.6rem);font-weight:500;
  background:linear-gradient(180deg,#fff,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
@media(max-width:620px){.stats{grid-template-columns:1fr 1fr;gap:30px 20px}.stat:nth-child(3){border-left:none}}

/* ---------- CTA ---------- */
.cta-sec{text-align:center;padding:120px 0 140px;position:relative;z-index:2}
.cta-sec h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,8vw,6rem);line-height:1;letter-spacing:-.02em}
.cta-sec h2 i{color:var(--violet)}
.cta-sec p{color:var(--muted);max-width:46ch;margin:22px auto 34px;font-size:1.05rem}
.btn{display:inline-flex;align-items:center;gap:12px;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  padding:16px 34px;border-radius:999px;background:linear-gradient(100deg,var(--violet2),var(--cyan));color:#0a0710;font-weight:700;
  transition:transform .3s,box-shadow .3s;box-shadow:0 16px 44px rgba(124,58,237,.36)}
.btn:hover{transform:translateY(-3px);box-shadow:0 22px 60px rgba(124,58,237,.5)}

/* ---------- FOOTER ---------- */
.foot{border-top:1px solid var(--line);padding:40px clamp(20px,5vw,48px);display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:16px;position:relative;z-index:2;color:var(--muted);font-size:.8rem;letter-spacing:.06em}
.foot .brand{font-family:var(--serif);font-size:1.3rem;letter-spacing:.3em;color:var(--ink)}

/* rise-in — hidden only when JS is active, so content always shows without JS */
.js [data-rise]{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.js [data-rise].in{opacity:1;transform:none}
.js [data-rise].d1{transition-delay:.08s}.js [data-rise].d2{transition-delay:.16s}.js [data-rise].d3{transition-delay:.24s}