/* ============================================================
   MAKE Marketing — design system
   Black tone + restrained logo gradient (blue → purple → pink)
   ============================================================ */

:root{
  /* surfaces */
  --bg:        #08080a;
  --bg-1:      #0d0d10;
  --bg-2:      #131318;
  --bg-3:      #1a1a20;
  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.14);

  /* ink */
  --ink:       #f6f6f8;
  --ink-2:     #c7c7ce;
  --muted:     #8a8a93;
  --muted-2:   #5e5e67;

  /* brand gradient (from logo) */
  --c-blue:    #5aa9f0;
  --c-violet:  #9b82d6;
  --c-pink:    #f3a0ce;
  --grad:      linear-gradient(118deg, var(--c-blue) 0%, var(--c-violet) 52%, var(--c-pink) 100%);
  --grad-soft: linear-gradient(118deg, rgba(90,169,240,.9), rgba(155,130,214,.9), rgba(243,160,206,.9));

  /* glow used behind brand moments — tunable by Tweaks */
  --accent-strength: 1;

  --maxw: 1280px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --nav-h: 64px;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.no-smooth{ scroll-behavior:auto; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
::selection{ background:rgba(155,130,214,.4); color:#fff; }

/* ---------- utilities ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }
.grad-text{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.eyebrow{
  font-size:13px; font-weight:600; letter-spacing:.34em; text-transform:uppercase;
  color:var(--muted);
}
.eyebrow.brand{ color:transparent; background:var(--grad); -webkit-background-clip:text; background-clip:text; }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); will-change:opacity,transform; }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }
.reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--nav-h); display:flex; align-items:center;
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(8,8,10,.72);
  backdrop-filter:saturate(160%) blur(18px);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav-logo{ display:flex; align-items:center; height:var(--nav-h); }
.nav-logo img{ height:30px; width:auto; }
.nav-menu{ display:flex; align-items:center; gap:34px; }
.nav-menu a{
  font-size:14px; font-weight:500; color:var(--ink-2); position:relative;
  transition:color .25s;
}
.nav-menu a:hover{ color:var(--ink); }
.nav-menu a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:var(--grad); border-radius:2px; transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease-out);
}
.nav-menu a:hover::after{ transform:scaleX(1); }
.nav-cta{
  font-size:13.5px; font-weight:600; color:#0a0a0c;
  background:#fff; padding:9px 17px; border-radius:999px;
  transition:transform .2s var(--ease), box-shadow .3s;
}
.nav-cta:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(155,130,214,.35); }
.nav-burger{ display:none; }

@media (max-width:860px){
  .nav-menu{ display:none; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ border-top:1px solid var(--line); padding:72px 0 56px; background:var(--bg); }
.footer .wrap{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; }
.footer-brand img{ height:30px; margin-bottom:20px; }
.footer-brand p{ color:var(--muted); font-size:14px; max-width:30ch; }
.footer h4{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-2); margin-bottom:16px; font-weight:600; }
.footer ul{ list-style:none; display:flex; flex-direction:column; gap:11px; }
.footer ul a{ font-size:14px; color:var(--ink-2); transition:color .2s; }
.footer ul a:hover{ color:var(--ink); }
.footer-bottom{ border-top:1px solid var(--line); margin-top:56px; padding-top:28px; }
.footer-bottom .wrap{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.footer-bottom span{ font-size:12.5px; color:var(--muted-2); line-height:1.7; }
@media (max-width:760px){
  .footer .wrap{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1/-1; }
}

/* ============================================================
   Shared buttons / pills
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-size:15px; font-weight:600; border-radius:999px; padding:14px 26px;
  cursor:pointer; border:1px solid transparent; transition:transform .2s var(--ease), box-shadow .35s, background .3s, color .3s;
}
.btn-grad{ background:var(--grad); color:#0a0a0c; }
.btn-grad:hover{ transform:translateY(-2px); box-shadow:0 14px 40px rgba(155,130,214,.4); }
.btn-ghost{ border-color:var(--line-2); color:var(--ink); background:rgba(255,255,255,.02); }
.btn-ghost:hover{ border-color:var(--ink-2); transform:translateY(-2px); background:rgba(255,255,255,.05); }
.btn .arr{ transition:transform .25s var(--ease-out); }
.btn:hover .arr{ transform:translateX(4px); }

/* page hero (subpages) */
.page-hero{ padding:calc(var(--nav-h) + 120px) 0 90px; position:relative; overflow:hidden; }
.page-hero h1{ font-size:clamp(40px,7vw,84px); font-weight:800; letter-spacing:-.03em; line-height:1.02; }
.page-hero p{ color:var(--muted); font-size:clamp(16px,2vw,20px); margin-top:22px; max-width:54ch; }