/* ======================================================================
   Ucent — shared styles
   Brand: AI Made for You. Palette faithful to the orbiting-U logo.
   Type: Hanken Grotesk (warm humanist sans).
   ====================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ---- Brand accents (shared across themes) ---- */
:root{
  --cobalt:  #4b3fe4;
  --indigo:  #6a2fd6;
  --violet:  #b23df0;
  --cyan:    #2bd4e6;
  --navy:    #141d54;

  --accent-grad: linear-gradient(105deg, var(--cyan) 0%, var(--cobalt) 38%, var(--indigo) 64%, var(--violet) 100%);
  --accent-grad-soft: linear-gradient(105deg, color-mix(in oklab, var(--cyan) 70%, transparent), color-mix(in oklab, var(--violet) 70%, transparent));

  --maxw: 1180px;
  --radius: 18px;
  --radius-lg: 26px;

  --font: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;

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

  /* heights */
  --nav-h: 76px;
}

/* ---- Dark theme (default — futuristic) ---- */
:root,[data-theme="dark"]{
  --bg:        #06081c;
  --bg-2:      #090d29;
  --surface:   rgba(255,255,255,.045);
  --surface-2: rgba(255,255,255,.07);
  --border:    rgba(255,255,255,.10);
  --border-2:  rgba(255,255,255,.16);
  --text:      #eef1ff;
  --text-dim:  #9aa2c8;
  --text-mute: #6b73a0;
  --glow:      color-mix(in oklab, var(--cobalt) 55%, transparent);
  --hero-veil: radial-gradient(120% 90% at 50% -10%, color-mix(in oklab, var(--indigo) 26%, transparent), transparent 60%);
  --shadow: 0 30px 80px -30px rgba(0,0,0,.7);
  --logo-invert: 0;
  color-scheme: dark;
}

/* ---- Light theme (airy) ---- */
[data-theme="light"]{
  --bg:        #f6f7fc;
  --bg-2:      #eef1fa;
  --surface:   #ffffff;
  --surface-2: #ffffff;
  --border:    rgba(20,29,84,.10);
  --border-2:  rgba(20,29,84,.16);
  --text:      #0e1330;
  --text-dim:  #515a86;
  --text-mute: #8b92b6;
  --glow:      color-mix(in oklab, var(--cobalt) 28%, transparent);
  --hero-veil: radial-gradient(120% 90% at 50% -10%, color-mix(in oklab, var(--indigo) 12%, transparent), transparent 60%);
  --shadow: 0 30px 70px -34px rgba(20,29,84,.28);
  --logo-invert: 0;
  color-scheme: light;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
  overflow-x:hidden;
  transition: background .5s var(--ease), color .4s var(--ease);
}

/* page background ambience */
body::before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(60% 50% at 82% 8%, color-mix(in oklab, var(--violet) 16%, transparent), transparent 70%),
    radial-gradient(55% 45% at 8% 88%, color-mix(in oklab, var(--cyan) 13%, transparent), transparent 70%),
    var(--bg);
  z-index:-2;
  transition: opacity .5s var(--ease);
}

::selection{ background: color-mix(in oklab, var(--cobalt) 45%, transparent); color:#fff; }

a{ color:inherit; text-decoration:none; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* ============================ NAV ============================ */
.nav{
  position:fixed; top:0; left:0; right:0; height:var(--nav-h);
  display:flex; align-items:center; z-index:50;
  transition: background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom:1px solid var(--border);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; }

.brand{ display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.02em; }
.brand .mark{ width:38px; height:38px; flex:0 0 auto; }
.brand .word{ font-size:21px; letter-spacing:.16em; font-weight:700; }
.brand .word b{ font-weight:800; }

.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a{
  padding:9px 15px; border-radius:999px; font-size:15px; font-weight:500;
  color:var(--text-dim); transition: color .2s, background .2s;
}
.nav-links a:hover{ color:var(--text); background:var(--surface); }
.nav-links a.active{ color:var(--text); }

.nav-right{ display:flex; align-items:center; gap:10px; }

.btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:600; border:none;
  padding:11px 20px; border-radius:999px; transition: transform .25s var(--ease-out), box-shadow .3s, opacity .2s;
  white-space:nowrap;
}
.btn-primary{
  color:#fff; background:var(--accent-grad); background-size:160% 160%;
  box-shadow: 0 8px 26px -8px var(--glow);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -8px var(--glow); }
.btn-ghost{ color:var(--text); background:var(--surface); border:1px solid var(--border-2); }
.btn-ghost:hover{ background:var(--surface-2); transform:translateY(-2px); }

/* theme toggle */
.theme-toggle{
  width:42px; height:42px; border-radius:999px; cursor:pointer;
  display:grid; place-items:center; border:1px solid var(--border-2);
  background:var(--surface); color:var(--text); transition: background .2s, transform .3s var(--ease-out);
}
.theme-toggle:hover{ background:var(--surface-2); transform:rotate(18deg); }
.theme-toggle svg{ width:19px; height:19px; }
.theme-toggle .ic-sun{ display:none; }
[data-theme="light"] .theme-toggle .ic-sun{ display:block; }
[data-theme="light"] .theme-toggle .ic-moon{ display:none; }

/* mobile nav toggle */
.nav-burger{ display:none; }

/* ============================ TYPE ============================ */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-dim);
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }

h1,h2,h3{ line-height:1.04; letter-spacing:-.02em; font-weight:700; margin:0; }
.display{ font-size: clamp(46px, 8.5vw, 104px); font-weight:800; letter-spacing:-.035em; }
.grad-text{
  background:var(--accent-grad); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.lead{ font-size: clamp(17px,1.6vw,21px); color:var(--text-dim); line-height:1.55; }

.section{ padding: clamp(80px,11vw,150px) 0; position:relative; }
.section-head{ max-width:760px; }
.section-head h2{ font-size: clamp(32px,4.4vw,56px); margin-bottom:18px; }

/* ============================ CARDS / GRID ============================ */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:30px;
  transition: transform .4s var(--ease-out), border-color .35s, background .35s, box-shadow .4s;
  position:relative; overflow:hidden;
}
.card:hover{ transform:translateY(-5px); border-color:var(--border-2); background:var(--surface-2); }

footer.foot{
  border-top:1px solid var(--border); padding:72px 0 40px; position:relative;
}
.foot-grid{ display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between; align-items:flex-start; }
.foot a{ color:var(--text-dim); transition:color .2s; }
.foot a:hover{ color:var(--text); }
.foot-links{ display:flex; gap:48px; flex-wrap:wrap; }
.foot-col{ display:flex; flex-direction:column; gap:12px; font-size:15px; }
.foot-col .h{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-mute); font-weight:600; margin-bottom:2px; }
.foot-bottom{ margin-top:54px; padding-top:26px; border-top:1px solid var(--border); display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; color:var(--text-mute); font-size:14px; }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }

@media (max-width:860px){
  :root{ --nav-h:64px; }
  .nav-links{ display:none; }
  .nav-burger{
    display:grid; place-items:center; width:42px;height:42px;border-radius:12px;
    border:1px solid var(--border-2); background:var(--surface); cursor:pointer;
  }
  .nav-burger span{ display:block; width:18px;height:2px;background:var(--text);border-radius:2px; box-shadow:0 6px 0 var(--text), 0 -6px 0 var(--text); }
  .nav-links.open{
    display:flex; flex-direction:column; position:fixed; top:var(--nav-h); left:0; right:0;
    background:color-mix(in oklab, var(--bg) 96%, transparent); backdrop-filter:blur(18px);
    padding:18px 28px 26px; border-bottom:1px solid var(--border); gap:4px;
  }
  .nav-links.open a{ font-size:18px; padding:13px 12px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; }
  html{ scroll-behavior:auto; }
}