/* ============================================================
   Linaria — Website v2
   Palette + components derived directly from the real app UI
   (midnight navy base, violet glow cards, green→cyan→blue
   gradient actions, neon line-art, glowing borders)
   ============================================================ */

:root {
  --ink-0: #060b16;
  --ink-1: #0a1120;
  --ink-2: #0c1628;
  --ink-3: #0e1a30;

  --card: #101b30;
  --card-2: #0c1424;
  --card-hi: #14223c;
  --violet-a: #1a1640;
  --violet-b: #251c54;

  --line: rgba(255,255,255,.07);
  --line-2: rgba(255,255,255,.13);
  --line-glow: rgba(45,212,200,.45);

  --cyan: #2dd4e6;
  --teal: #2bd4a8;
  --green: #35d39a;
  --blue: #3b82f6;
  --gold: #f0c463;
  --lav: #a78bfa;
  --rose: #f0728a;

  --text: #eef4fe;
  --body: rgba(205,220,245,.75);
  --muted: rgba(158,178,212,.52);

  --grad: linear-gradient(100deg,#2bd6a2 0%,#22b6dd 52%,#3b82f6 100%);
  --grad-soft: linear-gradient(100deg,rgba(43,214,162,.16),rgba(59,130,246,.16));
  --htext: linear-gradient(105deg,#3ce0b0,#34c8e6 50%,#5b9dff);

  /* themable overlays / chrome */
  --ov: rgba(255,255,255,.035);
  --ov-2: rgba(255,255,255,.06);
  --ov-3: rgba(255,255,255,.09);
  --hdr-bg: rgba(10,17,32,.72);
  --final-a: rgba(20,40,66,.7);
  --final-b: rgba(14,26,48,.5);
  --input-bg: rgba(255,255,255,.03);

  --font: "Sora","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono: "JetBrains Mono",ui-monospace,monospace;

  --maxw: 1240px;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-cine: cubic-bezier(.16,1,.3,1);

  --glow-cyan: 0 0 0 1px rgba(45,212,230,.4), 0 0 32px rgba(45,212,230,.22);
  color-scheme: dark;
}

/* ---- LIGHT THEME ---- */
:root[data-theme="light"] {
  --ink-0: #e9eef6;
  --ink-1: #f4f7fc;
  --ink-2: #eef3fa;
  --ink-3: #e7eef7;

  --card: #ffffff;
  --card-2: #f4f7fb;
  --card-hi: #ffffff;

  --line: rgba(18,32,58,.10);
  --line-2: rgba(18,32,58,.17);
  --line-glow: rgba(12,158,132,.42);

  --cyan: #0a9bbe;
  --teal: #0c9c82;
  --green: #16a56d;
  --blue: #2f6fe0;
  --gold: #b9871c;
  --lav: #7a5ce0;
  --rose: #d4567a;

  --text: #0d1a2e;
  --body: rgba(28,44,70,.82);
  --muted: rgba(58,78,108,.62);

  --htext: linear-gradient(105deg,#0c9c82,#0a93c4 48%,#2f6fe0);
  --grad-soft: linear-gradient(100deg,rgba(12,156,130,.12),rgba(47,111,224,.12));

  --ov: rgba(14,27,51,.04);
  --ov-2: rgba(14,27,51,.07);
  --ov-3: rgba(14,27,51,.10);
  --hdr-bg: rgba(244,247,252,.82);
  --final-a: rgba(223,235,250,.85);
  --final-b: rgba(236,242,250,.6);
  --input-bg: rgba(14,27,51,.03);

  color-scheme: light;
}

/* phone stays dark in BOTH themes — it is a device showing the app */
.phone {
  --text: #eef4fe; --body: rgba(205,220,245,.75); --muted: rgba(158,178,212,.52);
  --line: rgba(255,255,255,.07); --line-2: rgba(255,255,255,.13);
  --cyan: #2dd4e6; --teal: #2bd4a8; --green: #35d39a; --blue: #3b82f6;
  --gold: #f0c463; --lav: #a78bfa; --rose: #f0728a;
  --card: #101b30; --card-2: #0c1424; --ov: rgba(255,255,255,.035);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--ink-1);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: rgba(45,212,200,.3); color: #fff; }

.wrap { width: min(100% - 48px, var(--maxw)); margin-inline: auto; }

/* ambient page background */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(900px 600px at 78% -5%, rgba(59,130,246,.16), transparent 60%),
    radial-gradient(800px 620px at 12% 8%, rgba(43,214,162,.12), transparent 58%),
    radial-gradient(1000px 800px at 50% 108%, rgba(167,139,250,.12), transparent 60%),
    linear-gradient(180deg, var(--ink-1), var(--ink-0));
}
.grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ============================ HEADER ============================ */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .4s var(--ease), backdrop-filter .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.hdr.scrolled {
  background: var(--hdr-bg);
  backdrop-filter: blur(18px) saturate(150%);
  border-bottom-color: var(--line);
}
.hdr .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
.brand img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 4px 14px rgba(45,212,200,.4)); }
.nav { display: flex; gap: 6px; }
.nav a {
  font-size: 14.5px; font-weight: 500; color: var(--body);
  padding: 9px 14px; border-radius: 10px; transition: color .2s, background .2s;
}
.nav a:hover { color: var(--text); background: var(--ov-2); }
.hdr-cta { display: flex; align-items: center; gap: 14px; }
.btn {
  display: inline-flex; align-items: center; gap: 9px; font-family: inherit;
  font-weight: 600; font-size: 15px; cursor: pointer; border: 0;
  border-radius: 999px; padding: 12px 22px; color: #06121a;
  background: var(--grad); position: relative; overflow: hidden;
  box-shadow: 0 8px 24px rgba(43,170,200,.32), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .25s var(--ease), box-shadow .25s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(43,170,200,.42), inset 0 1px 0 rgba(255,255,255,.5); }
.btn.lg { padding: 16px 30px; font-size: 16.5px; }
.btn-ghost {
  background: var(--ov); color: var(--text);
  border: 1px solid var(--line-2); box-shadow: none;
}
.btn-ghost:hover { background: var(--ov-3); box-shadow: none; }

/* shimmer sweep on primary */
.btn:not(.btn-ghost)::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg); animation: sweep 4.5s var(--ease) 1.2s infinite;
}
@keyframes sweep { 0%,100% { left: -60%; } 18%,100% { left: 160%; } }

/* ============================ HERO ============================ */
.hero { position: relative; padding: 150px 0 90px; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--teal);
  padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(45,212,200,.28);
  background: rgba(43,214,162,.07); margin-bottom: 26px;
}
.eyebrow .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--teal);
  box-shadow: 0 0 0 0 rgba(43,214,162,.6); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(43,214,162,.5);} 70%{ box-shadow:0 0 0 10px rgba(43,214,162,0);} 100%{ box-shadow:0 0 0 0 rgba(43,214,162,0);} }

.hero h1 {
  font-size: clamp(40px, 5.6vw, 74px); line-height: 1.02; letter-spacing: -.035em;
  font-weight: 700; margin-bottom: 24px;
}
.hero h1 .grad-text {
  background: var(--htext);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .lede { font-size: 19px; line-height: 1.62; color: var(--body); max-width: 33em; margin-bottom: 34px; }
.cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.store-row { display: flex; gap: 12px; margin-top: 30px; }
.store {
  display: inline-flex; align-items: center; gap: 11px; padding: 11px 18px;
  border-radius: 14px; border: 1px solid var(--line-2); background: var(--ov);
  transition: border-color .2s, background .2s, transform .2s;
}
.store:hover { border-color: var(--line-glow); background: var(--ov-2); transform: translateY(-2px); }
.store svg { width: 24px; height: 24px; }
.store .st { line-height: 1.15; }
.store .st small { display: block; font-size: 10.5px; color: var(--muted); letter-spacing: .04em; }
.store .st b { font-size: 15px; font-weight: 600; }

.hero-foot { display: flex; gap: 26px; margin-top: 40px; flex-wrap: wrap; }
.hero-foot .hf { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--muted); }
.hero-foot .hf svg { width: 17px; height: 17px; color: var(--teal); }

/* reveal animations */
.fade { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-cine), transform .9s var(--ease-cine); transition-delay: var(--d,0ms); }
.fade.in { opacity: 1; transform: none; }

/* ============================ PHONE ============================ */
.phone-stage { display: flex; justify-content: center; perspective: 1600px; }
.phone {
  width: 320px; height: 746px; border-radius: 46px; position: relative;
  background: linear-gradient(160deg,#1b2740,#0b1322); padding: 11px;
  box-shadow:
    0 2px 0 rgba(255,255,255,.08) inset,
    0 50px 100px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,255,255,.06),
    0 0 80px rgba(45,170,230,.18);
  transform: rotateY(-13deg) rotateX(5deg) rotateZ(.6deg);
  transition: transform .9s var(--ease-cine);
}
.phone:hover { transform: rotateY(-4deg) rotateX(2deg); }
.phone::after { /* notch pill */
  content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 26px; background: #060b14; border-radius: 999px; z-index: 6;
}
.screen {
  width: 100%; height: 100%; border-radius: 36px; overflow: hidden; position: relative;
  background: linear-gradient(185deg,#0b1830 0%,#0a1326 42%,#090f1f 100%);
}
.screen-pane { position: absolute; inset: 0; opacity: 0; transition: opacity .7s var(--ease); pointer-events: none; overflow: hidden; }
.screen-pane.on { opacity: 1; pointer-events: auto; }

/* status bar */
.sbar { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px 6px; font-size: 12px; color: var(--text); font-weight: 600; }
.sbar .right { display: flex; gap: 5px; align-items: center; opacity: .85; }
.sbar .batt { color: var(--green); font-weight: 700; }

/* generic app card */
.app { padding: 6px 16px 78px; height: 100%; overflow: hidden; }
.app-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 14px; }
.app-top .lg { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; }
.app-top .lg img { width: 22px; height: 22px; }
.app-top .lg span { color: var(--cyan); }
.app-top .icons { display: flex; gap: 14px; opacity: .8; }
.app-top .icons svg { width: 19px; height: 19px; }

/* greeting card */
.greet { border-radius: 20px; padding: 14px 16px; position: relative; overflow: hidden;
  background: linear-gradient(150deg,#102a4a,#0c1b38); border: 1px solid rgba(70,140,220,.28); }
.greet .wave { position: absolute; right: -10px; bottom: -20px; width: 150px; height: 90px;
  background: radial-gradient(closest-side, rgba(70,150,230,.3), transparent); }
.greet h4 { font-size: 19px; line-height: 1.1; letter-spacing: -.02em; }
.greet h4 b { color: var(--cyan); font-weight: 700; }
.greet p { font-size: 12px; color: var(--body); margin-top: 6px; max-width: 82%; }
.greet .leaf2 { position: absolute; top: 16px; right: 16px; width: 40px; opacity: .9; }

/* metric duo (metabolism + stomach) */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 11px; }
.tile { border-radius: 18px; padding: 12px 12px 13px; border: 1px solid var(--line); position: relative; overflow: hidden; min-height: 150px; }
.tile.meta { background: linear-gradient(165deg,#0e1c33,#0a1424); }
.tile.stom { background: linear-gradient(165deg,var(--violet-a),var(--violet-b)); border-color: rgba(140,110,230,.3); }
.tile .kk { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--cyan); }
.tile.stom .kk { color: var(--lav); }
.tile h5 { font-size: 16px; margin-top: 5px; letter-spacing: -.01em; line-height: 1.1; }
.tile .sm { font-size: 11px; color: var(--muted); margin-top: 3px; }
.orb { width: 46px; height: 46px; border-radius: 50%; margin: 12px auto 0; position: relative;
  background: radial-gradient(circle at 50% 45%, #bdeeff, #38b6e6 38%, #1666c4 70%, transparent 72%);
  box-shadow: 0 0 30px rgba(56,182,230,.7); animation: breathe 4s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: scale(.92); opacity:.85;} 50% { transform: scale(1.06); opacity:1; } }
.orb::after { content:""; position:absolute; inset:-9px; border-radius:50%; border:1px solid rgba(56,182,230,.3); }

/* stomach svg */
.stomach { width: 100%; max-width: 132px; height: auto; margin: 6px auto 0; display: block; overflow: visible; }
.stomach .organ { stroke: #2dd4e6; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(45,212,230,.6)); }
.stomach .dash { stroke: rgba(255,255,255,.32); stroke-width: 1.4; stroke-dasharray: 4 4; }
.stomach .dash.gold { stroke: var(--gold); stroke-dasharray: 5 4; }
.stomach .lvl { fill: rgba(214,228,250,.55); font-size: 11px; font-weight: 700; font-family: var(--font); }
.stomach .lvl.gold { fill: var(--gold); }
.stom .pct { font-size: 22px; font-weight: 700; color: var(--lav); margin-top: 1px; }
.stom .note { font-size: 9.5px; color: var(--muted); margin-top: 6px; display: flex; gap: 5px; align-items: center; }

/* log a meal cta */
.logmeal { margin-top: 10px; border-radius: 18px; padding: 13px 18px; display: flex; align-items: center; justify-content: space-between;
  background: var(--grad); color: #062018; box-shadow: 0 12px 30px rgba(40,160,180,.34); }
.logmeal .l { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 16px; }
.logmeal .ring { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; }
.logmeal .ring svg { width: 18px; height: 18px; }

/* quick action row */
.quick { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin-top: 10px; }
.qa { border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.025); padding: 10px 5px 9px; text-align: center; }
.qa .ico { width: 28px; height: 28px; margin: 0 auto 7px; display: grid; place-items: center; border-radius: 10px; }
.qa .ico svg { width: 19px; height: 19px; }
.qa span { font-size: 10px; color: var(--body); line-height: 1.1; display: block; }
.qa.c1 .ico { background: rgba(45,212,230,.14); color: var(--cyan); box-shadow: 0 0 16px rgba(45,212,230,.3); }
.qa.c2 .ico { background: rgba(240,114,138,.14); color: var(--rose); box-shadow: 0 0 16px rgba(240,114,138,.28); }
.qa.c3 .ico { background: rgba(53,211,154,.14); color: var(--green); box-shadow: 0 0 16px rgba(53,211,154,.28); }
.qa.c4 .ico { background: rgba(59,130,246,.16); color: var(--blue); box-shadow: 0 0 16px rgba(59,130,246,.3); }

/* bottom nav */
.bnav { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 56px; border-radius: 20px;
  background: rgba(12,20,38,.86); backdrop-filter: blur(12px); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-around; }
.bnav a { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12.5px; font-weight: 600; padding: 8px 12px; border-radius: 13px; }
.bnav a svg { width: 20px; height: 20px; }
.bnav a.act { color: var(--cyan); background: linear-gradient(120deg,rgba(43,214,162,.16),rgba(59,130,246,.16)); box-shadow: inset 0 0 0 1px rgba(45,212,200,.3); }

/* ===== meal logger pane ===== */
.logger { padding: 6px 16px 78px; }
.logger .lh { display: flex; align-items: center; gap: 12px; padding: 6px 2px 14px; font-size: 17px; font-weight: 700; }
.logger .lh svg { width: 19px; height: 19px; opacity: .8; }
.meals { display: flex; gap: 8px; overflow: hidden; }
.chip { font-size: 12.5px; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--body); white-space: nowrap; }
.chip.on { background: var(--grad); color: #06121a; border-color: transparent; font-weight: 600; }
.flabel { font-size: 14px; font-weight: 600; margin: 16px 0 8px; }
.finput { display: flex; align-items: center; gap: 10px; }
.finput .box { flex: 1; border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; color: var(--muted); font-size: 13px; background: rgba(255,255,255,.02); }
.finput .add { width: 42px; height: 42px; border-radius: 50%; background: rgba(45,212,230,.16); border: 1px solid rgba(45,212,230,.4); color: var(--cyan); display: grid; place-items: center; }
.finput .add svg { width: 20px; height: 20px; }
.portions { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 8px; }
.por { aspect-ratio: 1; border-radius: 16px; border: 1px solid var(--line-2); display: grid; place-items: center; gap: 6px; padding: 8px; }
.por.on { border-color: var(--cyan); background: rgba(45,212,230,.08); box-shadow: var(--glow-cyan); }
.por .pie { width: 30px; height: 30px; border-radius: 50%; }
.por small { font-size: 11px; color: var(--body); }
.dens { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.den { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 16px; padding: 13px 14px; }
.den.on { border-color: rgba(45,212,230,.5); background: rgba(45,212,230,.05); }
.den .emo { font-size: 22px; }
.den .dt { flex: 1; }
.den .dt b { font-size: 14px; }
.den .dt p { font-size: 11px; color: var(--muted); line-height: 1.3; margin-top: 2px; }
.den .rad { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-2); }
.den.on .rad { border-color: var(--cyan); background: radial-gradient(circle, var(--cyan) 40%, transparent 45%); }

/* ===== mirrors / weight pane ===== */
.mir { padding: 6px 16px 78px; }
.mir .mh { display: flex; align-items: center; gap: 12px; padding: 6px 2px 14px; font-size: 17px; font-weight: 700; }
.mir-card { border: 1px solid rgba(240,196,99,.3); border-radius: 20px; padding: 16px; box-shadow: 0 0 30px rgba(240,196,99,.08); }
.mir-tags { display: flex; gap: 9px; margin-bottom: 14px; }
.mtag { font-size: 12px; font-weight: 600; padding: 7px 13px; border-radius: 999px; display: flex; align-items: center; gap: 7px; }
.mtag.now { background: rgba(240,196,99,.12); color: var(--gold); border: 1px solid rgba(240,196,99,.3); }
.mtag.goal { background: rgba(53,211,154,.12); color: var(--green); border: 1px solid rgba(53,211,154,.3); }
.mtrack { height: 8px; border-radius: 999px; position: relative; margin: 18px 4px 8px;
  background: linear-gradient(90deg,#3b82f6,#2bd4a8 55%,#8a6a2a); }
.mtrack .knob { position: absolute; top: 50%; width: 22px; height: 22px; border-radius: 50%; background: var(--gold);
  transform: translate(-50%,-50%); box-shadow: 0 0 0 4px rgba(240,196,99,.2), 0 4px 10px rgba(0,0,0,.4); cursor: grab; }
.mtrack .goalpin { position: absolute; top: -5px; width: 3px; height: 18px; border-radius: 2px; background: var(--green); transform: translateX(-50%); }
.mzone { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; }
.mzone .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.mzone b { font-size: 14px; color: var(--green); }
.mzone span { font-size: 11px; color: var(--muted); line-height: 1.35; }
.trend { margin-top: 16px; }
.trend .tl { display: flex; justify-content: space-between; align-items: center; }
.trend .tl small { font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.trend .pill { font-size: 12px; font-weight: 700; color: var(--green); background: rgba(53,211,154,.12); padding: 5px 11px; border-radius: 999px; display: flex; align-items: center; gap: 5px; }
.tabs { display: flex; gap: 6px; background: rgba(255,255,255,.03); border-radius: 12px; padding: 4px; margin: 12px 0; }
.tabs span { flex: 1; text-align: center; font-size: 12px; padding: 7px; border-radius: 9px; color: var(--muted); }
.tabs span.on { background: rgba(240,196,99,.14); color: var(--gold); }
.spark { width: 100%; height: 84px; }

/* ===== journal pane ===== */
.jr { padding: 6px 16px 78px; }
.jr .jh { display: flex; align-items: center; justify-content: space-between; padding: 6px 2px 12px; font-size: 19px; font-weight: 700; }
.jr .jh .ic { display: flex; gap: 14px; opacity: .8; } .jr .jh .ic svg { width: 19px; height: 19px; }
.daterow { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 15px; font-weight: 600; padding: 6px 0 12px; }
.daterow svg { width: 18px; height: 18px; opacity: .6; }
.days { display: flex; justify-content: space-between; gap: 5px; margin-bottom: 16px; }
.day { flex: 1; aspect-ratio: .72; border: 1px solid var(--line); border-radius: 12px; display: grid; place-items: center; font-size: 14px; font-weight: 600; color: var(--body); }
.day.on { border-color: var(--cyan); color: var(--cyan); box-shadow: var(--glow-cyan); }
.jrow { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 16px; padding: 13px 14px; margin-bottom: 10px; }
.jrow .ji { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; background: rgba(255,255,255,.04); }
.jrow .jt { flex: 1; } .jrow .jt b { font-size: 14.5px; } .jrow .jt p { font-size: 11px; color: var(--muted); margin-top: 2px; }
.jrow .tm { font-size: 12px; color: var(--green); font-weight: 600; }
.jtotal { display: flex; align-items: center; gap: 12px; border-radius: 16px; padding: 14px 16px; margin-top: 4px;
  background: linear-gradient(110deg, rgba(45,212,200,.08), rgba(240,196,99,.06)); border: 1px solid var(--line); }
.jtotal .jt { flex: 1; font-weight: 600; font-size: 14px; }
.jtotal .amt { color: var(--gold); font-weight: 700; font-size: 14px; }

/* phone caption rail */
.rail-caps { display: flex; gap: 10px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.rail-caps button { font-family: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer;
  background: var(--ov); border: 1px solid var(--line); border-radius: 999px; padding: 9px 17px; transition: all .25s; }
.rail-caps button.on { color: var(--text); border-color: var(--line-glow); background: rgba(45,212,200,.08); }

/* ============================ THEME TOGGLE ============================ */
.theme-toggle {
  width: 42px; height: 42px; border-radius: 50%; flex: none; cursor: pointer;
  display: grid; place-items: center; color: var(--text);
  background: var(--ov); border: 1px solid var(--line-2);
  transition: background .25s, border-color .25s, transform .25s;
}
.theme-toggle:hover { background: var(--ov-2); border-color: var(--line-glow); transform: translateY(-1px); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .i-moon { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-moon { display: block; }

/* ============================ LANGUAGE SWITCHER ============================ */
.lang { position: relative; }
.lang-btn {
  display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 13px;
  border-radius: 999px; cursor: pointer; font-family: inherit; color: var(--text);
  background: var(--ov); border: 1px solid var(--line-2);
  transition: background .25s, border-color .25s, transform .25s;
}
.lang-btn:hover { background: var(--ov-2); border-color: var(--line-glow); transform: translateY(-1px); }
.lang-btn .globe { width: 18px; height: 18px; color: var(--teal); }
.lang-btn .lang-code { font-size: 13.5px; font-weight: 700; letter-spacing: .04em; }
.lang-btn .chev { width: 14px; height: 14px; opacity: .6; transition: transform .25s var(--ease); }
.lang.open .lang-btn .chev { transform: rotate(180deg); }
.lang-menu {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 190px; z-index: 120;
  background: var(--card); border: 1px solid var(--line-2); border-radius: 16px; padding: 6px;
  box-shadow: 0 24px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  opacity: 0; transform: translateY(-8px) scale(.97); transform-origin: top right;
  pointer-events: none; transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.lang.open .lang-menu { opacity: 1; transform: none; pointer-events: auto; }
.lang-menu button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 13px; border-radius: 11px; border: 0; cursor: pointer; font-family: inherit;
  font-size: 14.5px; font-weight: 500; color: var(--body); background: transparent; transition: background .18s, color .18s;
}
.lang-menu button:hover { background: var(--ov-2); color: var(--text); }
.lang-menu button.on { color: var(--teal); background: var(--ov); }
.lang-menu .ln-c { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .06em; }
.lang-menu button.on .ln-c { color: var(--teal); }
@media (max-width: 460px) { .lang-btn .lang-code { display: none; } .lang-btn { padding: 0 11px; } }
/* Hide the "Linaria" wordmark in the header on phones — the mark alone is
   enough; the header CTA (lang + theme + Get) leaves no room for the text. */
@media (max-width: 600px) { .hdr .brand-txt { display: none; } }

/* ============================ PORTED WEIGHT WIDGET ============================ */
.demo-card {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 44px;
  border-radius: 28px; padding: 38px; position: relative; overflow: hidden;
  border: 1px solid var(--line); background: linear-gradient(165deg, var(--card-hi), var(--card-2));
  box-shadow: 0 40px 90px rgba(0,0,0,.28);
}
.demo-card::before { content: ""; position: absolute; top: -45%; right: -12%; width: 340px; height: 340px;
  background: radial-gradient(closest-side, rgba(45,212,200,.16), transparent); pointer-events: none; }
.demo-inputs { position: relative; }
.field { margin-bottom: 24px; }
.field > label { display: block; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--muted); margin-bottom: 10px; }
.input {
  width: 100%; font-family: inherit; font-size: 18px; font-weight: 600; color: var(--text);
  background: var(--input-bg); border: 1px solid var(--line-2); border-radius: 14px; padding: 13px 16px;
  transition: border-color .2s, box-shadow .2s;
}
.input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(43,214,162,.16); }
.seg { display: flex; gap: 6px; background: var(--ov); border: 1px solid var(--line); border-radius: 14px; padding: 5px; }
.seg button { flex: 1; height: 44px; border-radius: 11px; font-family: inherit; font-weight: 700; font-size: 14px; color: var(--muted); background: transparent; border: 0; cursor: pointer; transition: all .2s; }
.seg button.on { background: rgba(43,214,162,.16); color: var(--teal); }
.slider-wrap { margin-top: 4px; }
.slider-val { display: flex; align-items: baseline; gap: 8px; margin-bottom: 16px; }
.slider-val .n { font-size: 42px; font-weight: 700; letter-spacing: -.03em; color: var(--text); }
.slider-val .u { font-size: 16px; font-weight: 600; color: var(--muted); }
.range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 999px; outline: none;
  background: linear-gradient(90deg, var(--blue) 0%, var(--cyan) 28%, var(--teal) 52%, var(--gold) 76%, var(--lav) 100%);
}
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 5px solid var(--teal); cursor: grab; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.range::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 5px solid var(--teal); cursor: grab; }

.bmi-readout { display: flex; flex-direction: column; justify-content: center; position: relative; }
.bmi-label { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.bmi-big { display: flex; align-items: baseline; gap: 14px; margin-top: 8px; }
.bmi-big .v { font-size: 68px; font-weight: 700; letter-spacing: -.04em; line-height: .95; color: var(--text); }
.bmi-zone { font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; align-self: center; }
.bmi-stats { display: flex; gap: 30px; margin-top: 28px; }
.bmi-stat .k { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.bmi-stat .val { font-size: 24px; font-weight: 700; margin-top: 5px; color: var(--text); letter-spacing: -.01em; }
.lina-bubble { margin-top: 28px; display: flex; gap: 13px; align-items: flex-start; }
.lina-av { width: 40px; height: 40px; border-radius: 50%; flex: none; background: var(--grad); display: grid; place-items: center; box-shadow: 0 6px 16px rgba(43,170,200,.3); }
.lina-av img { width: 22px; }
.lina-text { background: var(--ov); border: 1px solid var(--line); border-radius: 6px 16px 16px 16px; padding: 14px 16px; font-size: 14px; line-height: 1.55; color: var(--body); }
.lina-text b { color: var(--text); font-weight: 700; }

.demo-callouts { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 22px; }
.callout { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; color: var(--body); line-height: 1.5; padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--ov); }
.callout .ic { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: rgba(45,212,200,.12); color: var(--teal); }
.callout .ic svg { width: 18px; height: 18px; }
.callout b { display: block; color: var(--text); font-weight: 700; font-size: 14px; margin-bottom: 3px; }
@media (max-width: 820px) {
  .demo-card { grid-template-columns: 1fr; gap: 30px; padding: 28px; }
  .demo-callouts { grid-template-columns: 1fr; }
}

/* ============================ SECTIONS ============================ */
section.band { padding: clamp(80px,11vw,150px) 0; }
.shead { max-width: 720px; margin-bottom: 60px; }
.shead.center { margin-inline: auto; text-align: center; }
.kick { font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); display: block; margin-bottom: 16px; }
.shead h2 { font-size: clamp(30px,4.2vw,50px); line-height: 1.05; letter-spacing: -.03em; font-weight: 700; }
.shead p { font-size: 18px; line-height: 1.6; color: var(--body); margin-top: 18px; }

/* feature cards (real mechanics) */
.feat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.fcard { border-radius: 24px; padding: 28px; border: 1px solid var(--line); background: linear-gradient(165deg, var(--card), var(--card-2));
  position: relative; overflow: hidden; transition: transform .4s var(--ease), border-color .4s, box-shadow .4s; }
.fcard:hover { transform: translateY(-6px); border-color: var(--line-glow); box-shadow: 0 30px 60px rgba(0,0,0,.4), 0 0 40px rgba(45,212,200,.1); }
.fcard .fic { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 22px;
  background: rgba(45,212,230,.1); border: 1px solid rgba(45,212,230,.25); }
.fcard .fic svg { width: 26px; height: 26px; color: var(--cyan); }
.fcard.v .fic { background: rgba(167,139,250,.12); border-color: rgba(167,139,250,.3); } .fcard.v .fic svg { color: var(--lav); }
.fcard.g .fic { background: rgba(53,211,154,.12); border-color: rgba(53,211,154,.3); } .fcard.g .fic svg { color: var(--green); }
.fcard.gd .fic { background: rgba(240,196,99,.12); border-color: rgba(240,196,99,.3); } .fcard.gd .fic svg { color: var(--gold); }
.fcard.b .fic { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.3); } .fcard.b .fic svg { color: var(--blue); }
.fcard.r .fic { background: rgba(240,114,138,.12); border-color: rgba(240,114,138,.3); } .fcard.r .fic svg { color: var(--rose); }
.fcard h3 { font-size: 21px; letter-spacing: -.02em; margin-bottom: 11px; }
.fcard p { font-size: 14.5px; line-height: 1.6; color: var(--body); }

/* split feature (mirrors interactive) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split.rev > .split-media { order: -1; }
.split-copy h2 { font-size: clamp(28px,3.6vw,44px); line-height: 1.08; letter-spacing: -.03em; margin-bottom: 20px; }
.split-copy p { font-size: 17px; line-height: 1.62; color: var(--body); margin-bottom: 16px; }
.split-list { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; }
.split-list li { display: flex; gap: 13px; font-size: 15px; color: var(--body); list-style: none; align-items: flex-start; }
.split-list .ck { flex: none; width: 24px; height: 24px; border-radius: 50%; background: rgba(53,211,154,.14); display: grid; place-items: center; margin-top: 1px; }
.split-list .ck svg { width: 13px; height: 13px; color: var(--green); }

/* interactive weight demo box */
.demo {
  border-radius: 28px; padding: 34px; border: 1px solid var(--line);
  background: linear-gradient(165deg, var(--card-hi), var(--card-2));
  box-shadow: 0 40px 80px rgba(0,0,0,.4); position: relative; overflow: hidden;
}
.demo::before { content: ""; position: absolute; top: -40%; right: -20%; width: 300px; height: 300px;
  background: radial-gradient(closest-side, rgba(45,212,200,.18), transparent); }
.demo .dtop { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 26px; position: relative; }
.demo .dnow { font-size: 13px; color: var(--muted); }
.demo .dnow b { display: block; font-size: 40px; font-weight: 700; color: var(--text); letter-spacing: -.03em; margin-top: 4px; }
.demo .dbmi { text-align: right; }
.demo .zbadge { font-size: 14px; font-weight: 700; padding: 8px 16px; border-radius: 999px; display: inline-block; }
.demo .dsub { font-size: 12px; color: var(--muted); margin-top: 8px; max-width: 180px; }
.demo .rng { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 999px; outline: none; margin: 8px 0 4px;
  background: linear-gradient(90deg,#5b9dff,#2bd4a8 45%,#f0c463 72%,#f0728a); }
.demo .rng::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; cursor: grab;
  box-shadow: 0 4px 14px rgba(0,0,0,.45), 0 0 0 5px rgba(255,255,255,.12); }
.demo .rng::-moz-range-thumb { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #fff; cursor: grab; box-shadow: 0 4px 14px rgba(0,0,0,.45); }
.demo .scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 6px; }
.demo .dlina { display: flex; gap: 12px; margin-top: 24px; padding: 16px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.demo .dlina .av { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--grad); display: grid; place-items: center; }
.demo .dlina .av img { width: 20px; }
.demo .dlina p { font-size: 13.5px; line-height: 1.5; color: var(--body); } .demo .dlina b { color: var(--text); }

/* journey map — six lands */
.lands { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.land { border-radius: 20px; padding: 22px; border: 1px solid var(--line); background: linear-gradient(165deg,var(--card),var(--card-2)); position: relative; overflow: hidden; }
.land .ln { font-size: 12px; font-weight: 700; color: var(--muted); }
.land h4 { font-size: 18px; margin: 10px 0 6px; letter-spacing: -.01em; }
.land p { font-size: 13px; color: var(--body); line-height: 1.5; }
.land .glow { position: absolute; top: -30px; right: -30px; width: 110px; height: 110px; border-radius: 50%; opacity: .5; filter: blur(12px); }

/* manifesto quote */
.manifesto { text-align: center; }
.manifesto .mq { font-size: clamp(28px,4vw,46px); line-height: 1.18; letter-spacing: -.02em; font-weight: 600; max-width: 16em; margin: 0 auto; }
.manifesto .mq em { font-style: italic; color: var(--gold); }
.manifesto .msig { margin-top: 30px; font-size: 14px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }

/* privacy strip */
.privacy { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 50px; }
.pcard { text-align: center; padding: 30px 24px; border-radius: 20px; border: 1px solid var(--line); background: var(--ov); }
.pcard .pic { width: 48px; height: 48px; border-radius: 14px; margin: 0 auto 18px; display: grid; place-items: center; background: rgba(45,212,200,.1); border: 1px solid rgba(45,212,200,.25); }
.pcard .pic svg { width: 24px; height: 24px; color: var(--teal); }
.pcard h4 { font-size: 17px; margin-bottom: 8px; }
.pcard p { font-size: 13.5px; color: var(--body); line-height: 1.55; }

/* final cta */
.final { text-align: center; padding: clamp(70px,9vw,120px) 0; }
.final-box { border-radius: 36px; padding: clamp(48px,7vw,90px) 40px; position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--final-a), var(--final-b)); border: 1px solid var(--line-2); }
.final-box::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(700px 400px at 50% 0%, rgba(45,212,200,.2), transparent 60%); }
.final-box h2 { font-size: clamp(34px,5vw,62px); line-height: 1.04; letter-spacing: -.035em; font-weight: 700; margin-bottom: 22px; }
.final-box p { font-size: 19px; color: var(--body); max-width: 30em; margin: 0 auto 38px; }

/* footer */
footer { border-top: 1px solid var(--line); padding: 64px 0 48px; }
footer .wrap { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
footer .fcol h5 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
footer .fcol a { display: block; font-size: 14.5px; color: var(--body); padding: 6px 0; transition: color .2s; }
footer .fcol a:hover { color: var(--text); }
footer .fbrand { max-width: 280px; }
footer .fbrand .brand { margin-bottom: 16px; }
footer .fbrand p { font-size: 14px; color: var(--muted); line-height: 1.6; }
.fbot { position: relative; margin-top: 50px; padding-top: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; font-size: 13px; color: var(--muted); }
.fbot::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; border-top: 1px solid var(--line); }
.fbot .foot-motto { order: -1; color: var(--teal); font-weight: 600; font-size: 14.5px; letter-spacing: .005em; max-width: 32em; margin: 0 auto; }
.fbot [data-i18n="foot_copy"] { max-width: 30em; margin: 0 auto; }

/* "Coming soon" — iOS / App Store pending */
.store.soon { position: relative; opacity: .78; cursor: default; }
.store.soon:hover { transform: none; }
.soon-badge { position: absolute; top: -9px; right: -8px; font: 600 10px/1 "Sora", system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #08182a; background: linear-gradient(120deg, #3ce0b0, #3b82f6); padding: 4px 8px; border-radius: 999px; box-shadow: 0 4px 14px rgba(59,130,246,.4); white-space: nowrap; }
.btn.soon-btn { opacity: .72; cursor: default; pointer-events: none; }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 980px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 50px; }
  .hero { padding-top: 120px; text-align: center; }
  .hero .lede { margin-inline: auto; }
  .cta-row, .store-row, .hero-foot { justify-content: center; }
  .eyebrow { margin-inline: auto; }
  .feat-grid { grid-template-columns: 1fr 1fr; }
  .split, .split.rev { grid-template-columns: 1fr; gap: 40px; }
  .split.rev > .split-media { order: 0; }
  .lands { grid-template-columns: 1fr 1fr; }
  footer .wrap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .nav { display: none; }
  .feat-grid, .lands, .privacy { grid-template-columns: 1fr; }
  footer .wrap { grid-template-columns: 1fr; }
  .fbot { flex-direction: column; gap: 12px; }
  .demo { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .fade { transition: none; opacity: 1; transform: none; }
  .orb, .btn::after, .eyebrow .pulse { animation: none; }
}