/* ============================================================
   MedCode — design tokens + base + motion utilities
   Light lavender system, navy ink, General Sans
   ============================================================ */
:root{
  --bg:        #edecf6;
  --bg-top:    #f5f4fc;
  --bg-deep:   #e7e5f3;
  --ink:       #14162a;
  --ink-2:     #2b2e46;
  --muted:     #6c6f84;
  --muted-2:   #9a9eb1;
  --card:      #ffffff;
  --card-2:    #faf9fe;
  --line:      #ecebf5;
  --line-2:    #e2e0ef;

  --purple:     #6a5cd0;
  --purple-ink: #5648b8;
  --purple-soft:#efecfb;
  --green:      #2c9a6a;
  --green-soft: #e3f4ec;
  --blue:       #4f81e6;
  --blue-soft:  #e8f0fd;
  --amber:      #c98a2b;

  --navy:      #16182a;
  --navy-2:    #1f2238;

  --grad: linear-gradient(108deg,#d9d4f4 0%,#ecd2e8 48%,#f7ddd0 100%);
  --grad-strong: linear-gradient(108deg,#c9c2f1 0%,#e6c4df 50%,#f5cfbe 100%);

  --radius:    22px;
  --radius-lg: 28px;
  --radius-sm: 14px;

  --shadow-sm: 0 1px 2px rgba(20,22,45,.05), 0 4px 12px -8px rgba(40,40,90,.22);
  --shadow:    0 1px 2px rgba(20,22,45,.04), 0 22px 48px -28px rgba(45,40,95,.32);
  --shadow-lg: 0 2px 4px rgba(20,22,45,.05), 0 50px 90px -40px rgba(45,40,95,.40);

  --maxw: 1180px;

  /* motion intensity 0..1, set from tweaks */
  --motion: 1;
  --font: "General Sans", "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{ background:#d8d2f5; color:#1d1840; }

/* ambient page background: layered orbs + faint grid */
.page-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(1200px 700px at 78% -8%, #efe6fb 0%, transparent 60%),
    radial-gradient(900px 600px at 8% 4%, #e6effb 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 30%, var(--bg-deep) 100%);
}
.page-bg .grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(90,80,160,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,80,160,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(1100px 760px at 50% 0%, #000 0%, transparent 78%);
}
.orb{
  position:absolute; border-radius:50%; filter:blur(58px); opacity:.55;
  will-change:transform;
}

canvas.particles{ position:fixed; inset:0; z-index:1; pointer-events:none; }

/* layout */
.shell{ position:relative; z-index:2; }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 32px; }
.section{ position:relative; padding:104px 0; }
.section-tight{ padding:72px 0; }

.eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted-2); text-align:center; margin:0 0 14px;
}
.h-sec{
  font-size:clamp(30px,3.6vw,46px); font-weight:600; letter-spacing:-.02em;
  line-height:1.06; text-align:center; margin:0 auto; max-width:18ch; color:var(--ink);
  text-wrap:balance;
}
.sub-sec{
  font-size:17px; line-height:1.6; color:var(--muted); text-align:center;
  max-width:54ch; margin:18px auto 0; text-wrap:pretty;
}

/* cards */
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
}

/* ===== buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer; border:none;
  font-family:inherit; font-weight:550; font-size:15px; line-height:1;
  padding:13px 20px; border-radius:999px; transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, background .25s;
  white-space:nowrap; color:var(--ink);
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-grad{ background:var(--grad); color:#27203f; box-shadow:0 10px 26px -12px rgba(170,120,180,.7); }
.btn-grad:hover{ box-shadow:0 16px 34px -12px rgba(170,120,180,.85); }
.btn-grad .ic{ background:rgba(255,255,255,.55); }
.btn-dark{ background:var(--navy); color:#fff; }
.btn-dark:hover{ background:#23263e; }
.btn-ghost{ background:rgba(255,255,255,.6); border:1px solid var(--line-2); color:var(--ink); }
.btn-ghost:hover{ background:#fff; }
.btn .ic{
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  background:rgba(20,22,45,.08); flex:none;
}
.btn-dark .ic{ background:rgba(255,255,255,.16); }

/* pill nav */
.navbar{ position:fixed; top:0; left:0; right:0; z-index:60; transition:padding .35s, background .35s; }
.navbar-inner{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:20px 32px; transition:all .35s;
}
.navbar.scrolled .navbar-inner{ padding:12px 32px; }
.brand{ display:flex; align-items:center; gap:11px; font-weight:600; font-size:18px; letter-spacing:-.01em; }
.brand .logo{ width:30px; height:30px; flex:none; }
.navpill{
  display:flex; align-items:center; gap:2px; padding:6px;
  background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.9);
  border-radius:999px; box-shadow:var(--shadow-sm); backdrop-filter:blur(14px);
}
.navpill button{
  border:none; background:none; font-family:inherit; cursor:pointer;
  font-size:14.5px; font-weight:500; color:var(--ink-2); padding:9px 17px;
  border-radius:999px; transition:color .2s; position:relative; white-space:nowrap;
}
.navpill button:hover{ color:var(--ink); }
.navpill button.active{ color:#fff; }
.navpill .pill-bg{
  position:absolute; inset:0; background:var(--navy); border-radius:999px; z-index:0;
}
.navpill button span{ position:relative; z-index:1; }
.nav-right{ display:flex; align-items:center; gap:10px; justify-content:flex-end; }

/* reveal */
.reveal{ opacity:0; transform:translateY(28px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal.scale{ transform:translateY(20px) scale(.96); }
.reveal.scale.in{ transform:none; }
.reveal.instant{ transition:none !important; opacity:1; transform:none; }

/* badges */
.badge{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
  padding:5px 11px; border-radius:999px; letter-spacing:.01em; }
.badge.purple{ color:var(--purple-ink); background:var(--purple-soft); }
.badge.green{ color:var(--green); background:var(--green-soft); }
.badge.blue{ color:var(--blue); background:var(--blue-soft); }

/* mac window */
.mac{ border-radius:var(--radius); background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-lg); overflow:hidden; }
.mac-bar{ display:flex; align-items:center; gap:8px; padding:14px 18px; border-bottom:1px solid var(--line); position:relative; }
.mac-dot{ width:11px; height:11px; border-radius:50%; }
.mac-title{ position:absolute; left:0; right:0; text-align:center; font-size:13px; color:var(--muted-2); font-weight:500; pointer-events:none; }

/* mono code */
.code{ font-family:var(--mono); font-size:13.5px; line-height:1.75; }
.tok-key{ color:#b58bff; } .tok-str{ color:#5fd39a; } .tok-num{ color:#f0a868; }
.tok-punc{ color:#8a8fb5; } .tok-null{ color:#e08fb0; } .tok-bool{ color:#f0a868; }

/* float / ambient keyframes (scaled by --motion via animation gating) */
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }
@keyframes floaty-2{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(10px) } }
@keyframes orbDrift{ 0%,100%{ transform:translate(0,0) scale(1) } 50%{ transform:translate(40px,30px) scale(1.08) } }
@keyframes pulseRing{ 0%{ transform:scale(.6); opacity:.7 } 100%{ transform:scale(2.4); opacity:0 } }
@keyframes shimmer{ 0%{ background-position:-200% 0 } 100%{ background-position:200% 0 } }
@keyframes dash{ to{ stroke-dashoffset:-1000 } }
@keyframes blink{ 0%,49%{ opacity:1 } 50%,100%{ opacity:0 } }
@keyframes spin{ to{ transform:rotate(360deg) } }
@keyframes barGrow{ from{ transform:scaleY(.15) } }
@keyframes popIn{ from{ opacity:0; transform:translateY(12px) scale(.96) } to{ opacity:1; transform:none } }

.float{ animation:floaty calc(7s / (var(--motion)*.7 + .3)) ease-in-out infinite; }
.float-2{ animation:floaty-2 calc(8s / (var(--motion)*.7 + .3)) ease-in-out infinite; }

/* caret */
.caret{ display:inline-block; width:2px; height:1.05em; background:var(--purple); vertical-align:-2px; margin-left:1px; animation:blink 1s step-end infinite; }

/* marquee */
.marquee{ display:flex; gap:14px; width:max-content; animation:marq calc(38s / (var(--motion)*.6+.4)) linear infinite; }
@keyframes marq{ to{ transform:translateX(-50%) } }

/* form fields */
.field{ width:100%; font-family:inherit; font-size:15px; color:var(--ink); background:#fff;
  border:1px solid var(--line-2); border-radius:999px; padding:14px 18px; transition:border .2s, box-shadow .2s; }
.field:focus{ outline:none; border-color:#bcb4ea; box-shadow:0 0 0 4px rgba(106,92,208,.12); }
textarea.field{ border-radius:18px; resize:none; line-height:1.6; }
.flabel{ font-size:14.5px; font-weight:600; color:var(--ink); margin-bottom:9px; display:block; }
.fhint{ font-size:13px; color:var(--muted); margin-top:9px; line-height:1.5; }

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.08s !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}

@media (max-width:980px){
  .wrap{ padding:0 22px; }
  .section{ padding:74px 0; }
  .navbar-inner{ grid-template-columns:auto 1fr; }
  .navpill{ display:none; }
}