:root{
  --accent-h:222; --accent-c:0.19; --accent-l:56%;
  --accent: oklch(var(--accent-l) var(--accent-c) var(--accent-h));
  --accent-bright: oklch(calc(var(--accent-l) + 12%) calc(var(--accent-c) + 0.02) var(--accent-h));
  --accent-deep: oklch(calc(var(--accent-l) - 16%) var(--accent-c) var(--accent-h));
  --accent-glow: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / .42);
  /* orange secondary tint (logo's S) */
  --accent-2: oklch(70% 0.17 45);

  --radius:22px;
  --depth:1;
  --gloss:0.9;

  --bg: oklch(96.5% 0.004 250);
  --bg-2: oklch(93% 0.006 250);
  --surface: oklch(97.5% 0.003 250);
  --ink: oklch(24% 0.02 260);
  --ink-soft: oklch(46% 0.015 260);
  --hair: oklch(100% 0 0 / .55);

  --top-gloss: oklch(100% 0 0 / calc(.85 * var(--gloss)));
  --inner-dark: oklch(40% 0.03 260 / calc(.18 * var(--depth)));
  --neu-dark: oklch(58% 0.02 260 / calc(.22 * var(--depth)));
  --neu-light: oklch(100% 0 0 / calc(.9 * var(--depth)));
  --glass-tint: oklch(100% 0 0 / .42);
  --glass-edge: oklch(100% 0 0 / .7);

  --spring: cubic-bezier(.32,.72,0,1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
}
[data-theme="dark"]{
  --bg: oklch(22% 0.012 264);
  --bg-2: oklch(17% 0.014 264);
  --surface: oklch(27% 0.014 264);
  --ink: oklch(95% 0.01 260);
  --ink-soft: oklch(72% 0.012 260);
  --hair: oklch(100% 0 0 / .12);
  --top-gloss: oklch(100% 0 0 / calc(.22 * var(--gloss)));
  --inner-dark: oklch(0% 0 0 / calc(.5 * var(--depth)));
  --neu-dark: oklch(0% 0 0 / calc(.55 * var(--depth)));
  --neu-light: oklch(100% 0 0 / calc(.07 * var(--depth)));
  --glass-tint: oklch(70% 0.02 264 / .14);
  --glass-edge: oklch(100% 0 0 / .22);
}

*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
body{
  font-family:var(--font);
  color:var(--ink);
  background:
    radial-gradient(120% 90% at 12% -8%, var(--accent-glow), transparent 46%),
    radial-gradient(90% 80% at 100% 0%, oklch(70% 0.1 45 / .12), transparent 50%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  background-attachment: fixed;
  min-height:100dvh;
  padding: clamp(20px, 5vw, 64px);
  transition: background .6s var(--spring), color .4s ease;
  position:relative;
  overflow-x:hidden;
}
/* fractal-noise texture (kept as-is: overlay blend on a fixed layer, not content) */
body::before{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.04; mix-blend-mode:overlay;
  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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Mylestech watermark: behind everything, NO blend mode, very low opacity so it
   never tints text/buttons/titles. z-index:-1 keeps it under every panel/card. */
.mylestech-watermark{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:url("/static/mylestech-logo.png");
  background-repeat:no-repeat; background-position:center;
  background-size:min(60vw, 640px);
  opacity:0.05;
}
[data-theme="dark"] .mylestech-watermark{opacity:0.08}

.wrap{max-width:1180px; margin:0 auto; display:flex; flex-direction:column; gap:clamp(28px,4vw,48px)}

/* top bar */
.topbar{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:12px}
.brand img{width:38px; height:38px; border-radius:11px; object-fit:contain}
.brand .name{font-weight:700; letter-spacing:-.02em; font-size:17px}
.brand .name span{color:var(--accent)}
.topbar .spacer{flex:1}
.who{font-size:13px; color:var(--ink-soft)}

.eyebrow{
  align-self:flex-start; display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); padding:7px 14px; border-radius:999px;
  background:var(--surface);
  box-shadow: inset 0 1px 0 var(--neu-light), 0 1px 2px var(--neu-dark), 0 6px 16px oklch(0% 0 0 / .06);
}
.eyebrow b{width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 10px var(--accent-glow), inset 0 1px 1px oklch(100% 0 0 / .6)}

h1{font-size:clamp(30px,5vw,52px); font-weight:700; letter-spacing:-.03em; line-height:1.04}
h1 .lg{background:linear-gradient(180deg, var(--accent-bright), var(--accent-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.sub{font-size:clamp(14px,2vw,17px); color:var(--ink-soft); line-height:1.55; max-width:62ch}

section{display:flex; flex-direction:column; gap:20px}
.shead{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
.shead h2{font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink)}
.shead p{font-size:13px; color:var(--ink-soft)}

.panel{
  border-radius:30px; padding:clamp(20px,3vw,34px);
  background:var(--surface);
  box-shadow:
    inset 0 1px 0 var(--neu-light),
    inset 0 -10px 30px var(--inner-dark),
    0 1px 2px var(--neu-dark),
    0 26px 60px -28px oklch(0% 0 0 / .4);
}
.panel.narrow{max-width:440px; margin:0 auto; width:100%}

/* nav segmented */
.segmented{display:inline-flex; padding:4px; border-radius:16px; gap:2px;
  background:var(--bg-2);
  box-shadow: inset 0 2px 5px var(--inner-dark), inset 0 -1px 0 var(--neu-light)}
.seg{position:relative; z-index:1; border:none; background:transparent; cursor:pointer;
  font-family:var(--font); font-size:13.5px; font-weight:600; color:var(--ink-soft);
  padding:9px 18px; border-radius:12px; transition:color .3s var(--spring); text-decoration:none}
.seg.on{color:var(--ink); background:var(--surface);
  box-shadow: inset 0 1px 0 var(--neu-light), 0 1px 2px var(--neu-dark), 0 4px 10px oklch(0% 0 0 / .14)}

/* buttons */
.btn{
  position:relative; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font); font-size:15px; font-weight:600; letter-spacing:-.01em;
  color:var(--ink); border:none; cursor:pointer; text-decoration:none;
  padding:14px 24px; border-radius:var(--radius);
  background:linear-gradient(180deg, oklch(100% 0 0 / .6), oklch(92% 0.005 250 / .2)), var(--surface);
  box-shadow:
    inset 0 1px 0 var(--neu-light),
    inset 0 -2px 4px var(--inner-dark),
    0 2px 3px var(--neu-dark),
    0 14px 26px -14px oklch(0% 0 0 / .35);
  transition: transform .35s var(--spring), box-shadow .35s var(--spring), filter .3s ease;
  overflow:hidden;
}
.btn::before{content:""; position:absolute; inset:1px 1px 50% 1px; border-radius:calc(var(--radius) - 1px);
  background:linear-gradient(180deg, var(--top-gloss), transparent); pointer-events:none; z-index:2; opacity:.9}
.btn:active{transform:translateY(2px) scale(.985);
  box-shadow: inset 0 2px 6px var(--inner-dark), inset 0 1px 0 var(--neu-light), 0 1px 2px var(--neu-dark)}
.btn.primary{color:#fff;
  background:linear-gradient(180deg, var(--accent-bright), var(--accent), var(--accent-deep));
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / .55), inset 0 -3px 6px oklch(0% 0 0 / .28), 0 3px 6px var(--accent-glow), 0 18px 34px -16px var(--accent-glow)}
.btn.destructive{color:#fff;
  background:linear-gradient(180deg, oklch(70% 0.2 22), oklch(58% 0.22 25), oklch(46% 0.2 25));
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / .5), inset 0 -3px 6px oklch(0% 0 0 / .3), 0 14px 28px -14px oklch(58% 0.22 25 / .6)}
.btn.sm{padding:9px 16px; font-size:13px; border-radius:calc(var(--radius) - 6px)}
.btn.block{width:100%}
.btn.ghost{background:transparent; box-shadow:none; color:var(--ink-soft)}
.btn.ghost::before{display:none}
.btn.ghost:hover{color:var(--ink)}

/* forms */
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:16px}
.field label{font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--ink-soft)}
.input, select.input{
  font-family:var(--font); font-size:15px; color:var(--ink);
  padding:13px 16px; border:none; border-radius:15px; width:100%;
  background:var(--bg-2);
  box-shadow: inset 0 2px 5px var(--inner-dark), inset 0 -1px 0 var(--neu-light);
  transition: box-shadow .3s var(--spring)}
.input:focus{outline:none;
  box-shadow: inset 0 2px 5px var(--inner-dark), 0 0 0 3px var(--accent-glow)}

.err{color:oklch(58% 0.22 25); font-size:13px; font-weight:600; margin-bottom:14px}
.ok{color:oklch(55% 0.17 152); font-size:13px; font-weight:600; margin-bottom:14px}
.hint{font-size:12px; color:var(--ink-soft); margin-top:4px}

/* tables / rows */
.rows{display:flex; flex-direction:column; gap:12px}
.row{display:flex; align-items:center; gap:16px; padding:16px 18px; border-radius:18px;
  background:var(--surface);
  box-shadow: inset 0 1px 0 var(--neu-light), 0 1px 2px var(--neu-dark), 0 10px 22px -14px oklch(0% 0 0 / .3)}
.row .grow{flex:1; min-width:0}
.row .title{font-weight:600; letter-spacing:-.01em}
.row .meta{font-size:12.5px; color:var(--ink-soft); margin-top:2px}
.tag{display:inline-block; font-size:11px; font-weight:600; letter-spacing:.04em;
  padding:4px 10px; border-radius:999px; background:var(--bg-2); color:var(--ink-soft)}
.tag.premium{background:linear-gradient(180deg, var(--accent-bright), var(--accent-deep)); color:#fff}
.tag.active{background:linear-gradient(180deg, oklch(78% 0.17 150), oklch(55% 0.17 152)); color:#fff}
.tag.revoked{background:oklch(58% 0.22 25); color:#fff}

.grid2{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:18px}

/* progress (usage) */
.bar{height:10px; border-radius:999px; background:var(--bg-2); overflow:hidden; margin-top:8px;
  box-shadow: inset 0 2px 5px var(--inner-dark)}
.bar > i{display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--accent), var(--accent-bright))}
.bar > i.hot{background:linear-gradient(90deg, oklch(70% 0.2 40), oklch(58% 0.22 25))}

.rowform{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap}
.rowform .field{margin-bottom:0}

@media (max-width:560px){
  .row{flex-wrap:wrap}
  .segmented{width:100%; overflow-x:auto}
}