/* medem AI / TRAQ / Ledgr — shared design system.
   Loaded by index.html, traq.html, ledgr.html. Keep changes here so the
   three pages don't drift out of sync with copy-pasted CSS. */
:root{
  --bg:#000000;--panel-1:#161616;--panel-2:#0B0B0B;--panel-3:#1c1c1c;
  --line:rgba(255,255,255,.09);--line-soft:rgba(255,255,255,.05);--line-strong:rgba(255,255,255,.16);
  --fg:#F5F6F7;--fg-dim:#9AA3AF;--fg-dimmer:#68707C;
  --gold:#D6BFA3;--gold-deep:#B89B7A;--gold-soft:rgba(214,191,163,.12);
  --cyan:#7FDBFF;--cyan-deep:#00A1E0;--cyan-soft:rgba(127,219,255,.12);
  --warn:#F0B429;--warn-soft:rgba(240,180,41,.12);--danger:#FF5C6A;--danger-soft:rgba(255,92,106,.12);
  --r:16px;--r-lg:2rem;--r-xl:2.75rem;--wrap:1200px;--pad:clamp(1.25rem,4vw,2.5rem);
  --ease:cubic-bezier(.22,1,.36,1);
  --gold-grad:linear-gradient(180deg,var(--gold),var(--gold-deep));
  --cyan-grad:linear-gradient(105deg,var(--cyan),var(--cyan-deep));
  --shadow:0 24px 60px -18px rgba(0,0,0,.85);
  --glow-gold:0 0 40px -6px rgba(214,191,163,.35);
  --glow-cyan:0 0 40px -6px rgba(127,219,255,.35);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg-dim);font-family:"Inter",system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:#141110}
::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:10px}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.section{padding:clamp(4.5rem,9vw,7.5rem) 0;position:relative}
h1,h2,h3{font-family:"Manrope",sans-serif;color:var(--fg);font-weight:800;letter-spacing:-.03em;line-height:1.04}
.gold{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cyan-txt{background:var(--cyan-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.fade-w{background:linear-gradient(180deg,#fff,rgba(255,255,255,.42));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- section identifier (numbered header) ---- */
.sec-id{display:flex;align-items:center;gap:1.6rem;margin-bottom:2.4rem}
.sec-id .num{font-family:"JetBrains Mono";font-size:.72rem;letter-spacing:.35em;color:var(--gold);font-weight:600}
.sec-id .rule{height:1px;width:64px;background:linear-gradient(90deg,rgba(214,191,163,.6),transparent)}
.sec-id .lbl{font-family:"JetBrains Mono";font-size:.68rem;text-transform:uppercase;letter-spacing:.3em;color:rgba(255,255,255,.45)}
.sec-head{display:flex;flex-direction:column;gap:2.4rem;justify-content:space-between;margin-bottom:3.2rem}
.sec-head h2{font-size:clamp(2rem,4.4vw,3.1rem)}
.sec-head .desc{max-width:46ch;font-size:1.03rem;color:var(--fg-dim);font-weight:300}
@media(min-width:1000px){.sec-head{flex-direction:row;align-items:flex-end;gap:3.2rem}.sec-head h2{flex:1;max-width:34rem}.sec-head .desc-wrap{flex:1;max-width:34rem}}

/* ---- reveal-on-scroll ---- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal.in{opacity:1;transform:none}
.anim{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.loaded .anim{opacity:1;transform:none}
.loaded .a1{transition-delay:.05s}.loaded .a2{transition-delay:.15s}.loaded .a3{transition-delay:.25s}.loaded .a4{transition-delay:.35s}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.001s!important}html{scroll-behavior:auto}.anim,.reveal{opacity:1!important;transform:none!important}}

/* ---- buttons ---- */
.btn{font-weight:600;font-size:.92rem;padding:.8rem 1.5rem;border-radius:999px;display:inline-flex;align-items:center;gap:.55em;cursor:pointer;border:1px solid transparent;white-space:nowrap;transition:transform .25s var(--ease),box-shadow .25s,background .25s,border-color .25s,color .25s}
.btn-primary{position:relative;background:var(--gold-grad);color:#171310;box-shadow:0 8px 26px -8px rgba(214,191,163,.55),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 38px -8px rgba(214,191,163,.6),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-ghost{background:rgba(255,255,255,.03);color:var(--fg);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px)}
.btn .arw{transition:transform .2s var(--ease)}.btn:hover .arw{transform:translateX(3px)}
.btn-lg{padding:1.1rem 2.3rem;font-size:.95rem}

/* ---- header / nav ---- */
header{position:sticky;top:0;z-index:60;padding:.9rem var(--pad) 0}
.nav-shell{max-width:var(--wrap);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 1.6rem;border-radius:999px;border:1px solid transparent;transition:all .5s var(--ease)}
header.scrolled .nav-shell{background:rgba(20,20,20,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-color:var(--line);box-shadow:0 20px 40px -16px rgba(0,0,0,.7)}
.brand{display:inline-flex;align-items:center;gap:.55rem;font-family:"Manrope";font-weight:800;font-size:1.1rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg)}
.brand .ai{font-family:"JetBrains Mono";font-size:.56rem;letter-spacing:.1em;color:var(--gold);align-self:flex-start;margin-top:.15rem}
.mark{display:inline-block;flex-shrink:0;fill:currentColor;height:auto}
.nav-links{display:flex;align-items:center;gap:2.1rem}
.nav-links a.link{font-size:.86rem;color:var(--fg-dim);transition:color .2s;font-weight:500}
.nav-links a.link:hover{color:var(--fg)}
.nav-actions{display:flex;align-items:center;gap:1rem}
.menu-btn{display:none;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;color:var(--fg);width:40px;height:40px;align-items:center;justify-content:center;cursor:pointer}

.dropdown{position:relative}
.drop-btn{background:none;border:none;color:var(--fg-dim);font-size:.86rem;font-weight:500;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:.4em;padding:0;transition:color .2s}
.drop-btn:hover,.dropdown.open .drop-btn{color:var(--fg)}
.drop-btn .chev{transition:transform .25s var(--ease)}
.dropdown.open .drop-btn .chev{transform:rotate(180deg)}
.drop-menu{position:absolute;top:calc(100% + 18px);left:50%;transform:translate(-50%,-8px);min-width:300px;background:rgba(18,18,18,.97);backdrop-filter:blur(20px);border:1px solid var(--line);border-radius:20px;padding:.6rem;box-shadow:var(--shadow);opacity:0;visibility:hidden;transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;z-index:70}
.dropdown.open .drop-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.drop-item{display:flex;align-items:center;gap:.9rem;padding:.75rem .85rem;border-radius:14px;transition:background .2s}
.drop-item:hover{background:rgba(255,255,255,.05)}
.di-mark{width:38px;height:38px;border-radius:11px;background:var(--gold-soft);border:1px solid rgba(214,191,163,.25);display:flex;align-items:center;justify-content:center;color:var(--gold);flex-shrink:0}
.di-txt{display:flex;flex-direction:column;line-height:1.3}
.di-txt b{color:var(--fg);font-family:"Manrope";font-weight:700;font-size:.92rem}
.di-txt small{color:var(--fg-dim);font-size:.75rem}
.drop-more{padding:.7rem .85rem .3rem;font-family:"JetBrains Mono";font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-dimmer);border-top:1px solid var(--line);margin-top:.4rem}

/* mobile slide-in menu */
#mob-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
#mob-overlay.open{opacity:1;visibility:visible}
#mob-panel{position:absolute;top:0;right:0;bottom:0;width:min(320px,88vw);background:linear-gradient(180deg,#171717,#0A0A0A);border-left:1px solid var(--line);box-shadow:-20px 0 60px rgba(0,0,0,.7);transform:translateX(100%);transition:transform .4s var(--ease);display:flex;flex-direction:column}
#mob-overlay.open #mob-panel{transform:translateX(0)}
.mob-head{display:flex;align-items:center;justify-content:space-between;padding:1.3rem 1.4rem;border-bottom:1px solid var(--line-soft)}
.mob-close{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--fg-dim);cursor:pointer}
.mob-links{flex:1;display:flex;flex-direction:column;padding:.6rem 0}
.mob-links a{padding:1rem 1.4rem;font-size:.98rem;color:var(--fg);border-bottom:1px solid var(--line-soft);font-weight:500}
.mob-links a.sub{padding-left:2.2rem;font-size:.85rem;color:var(--fg-dim)}
.mob-foot{padding:1.4rem;border-top:1px solid var(--line-soft)}
.mob-status{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:1rem}
.mob-status span.dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px rgba(127,219,255,.8);animation:pulse-dot 2s infinite}

/* ---- hero ---- */
.hero{position:relative;overflow:hidden;padding-top:clamp(3rem,7vw,5.5rem);padding-bottom:clamp(3rem,6vw,4rem);text-align:center}
#neural{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.55;-webkit-mask-image:radial-gradient(90% 60% at 50% 0%,#000 20%,transparent 80%);mask-image:radial-gradient(90% 60% at 50% 0%,#000 20%,transparent 80%)}
.hero::before{content:"";position:absolute;top:-20%;left:50%;transform:translateX(-50%);width:90%;height:90%;z-index:0;background:radial-gradient(circle at 50% 20%,rgba(214,191,163,.14),transparent 60%),radial-gradient(circle at 70% 40%,rgba(127,219,255,.12),transparent 55%);pointer-events:none}
.hero-inner{position:relative;z-index:2;max-width:820px;margin-inline:auto}
.pill-badge{display:inline-flex;align-items:center;gap:.6rem;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px;padding:.55rem 1.1rem;box-shadow:0 0 24px rgba(214,191,163,.12);backdrop-filter:blur(6px)}
.pill-badge .dot-wrap{position:relative;width:8px;height:8px}
.pill-badge .dot-wrap .ping{position:absolute;inset:0;border-radius:50%;background:var(--cyan);opacity:.75;animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite}
.pill-badge .dot-wrap .dot{position:absolute;inset:0;border-radius:50%;background:var(--cyan)}
.pill-badge span.txt{font-family:"JetBrains Mono";font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600}
@keyframes ping{75%,100%{transform:scale(2.4);opacity:0}}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.35}}
h1.hero-h1{font-size:clamp(2.6rem,6.4vw,4.6rem);font-weight:400;letter-spacing:-.03em;margin:1.6rem 0 0;line-height:1}
.hero .lede{font-size:clamp(1.02rem,1.6vw,1.2rem);color:var(--fg-dim);margin:1.6rem auto 0;max-width:52ch;font-weight:300}
.hero-cta{display:flex;align-items:center;gap:1.1rem;margin-top:2.3rem;flex-wrap:wrap;justify-content:center}
.hero-note{margin-top:1.6rem;font-family:"JetBrains Mono",monospace;font-size:.72rem;color:var(--fg-dimmer);display:flex;align-items:center;justify-content:center;gap:.55em;flex-wrap:wrap}
.hero-note .d{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 3px rgba(127,219,255,.16)}

/* glow cta button (primary hero button) */
.glow-btn{position:relative;display:inline-flex;isolation:isolate}
.glow-btn .halo{position:absolute;inset:-14px;background:linear-gradient(90deg,rgba(214,191,163,.5),rgba(127,219,255,.5),rgba(214,191,163,.5));opacity:.45;border-radius:999px;filter:blur(26px);transition:opacity .5s;pointer-events:none;z-index:-1}
.glow-btn:hover .halo{opacity:.85}
.glow-btn .core{overflow:hidden;display:flex;align-items:center;gap:.9rem;background:rgba(22,22,22,.9);border:1px solid rgba(214,191,163,.35);border-radius:999px;padding:1.05rem 2.1rem;box-shadow:var(--shadow),inset 0 1px 1px rgba(255,255,255,.08);backdrop-filter:blur(10px);transition:all .4s var(--ease)}
.glow-btn:hover .core{border-color:rgba(127,219,255,.5);box-shadow:0 24px 50px -12px rgba(127,219,255,.28),inset 0 1px 1px rgba(255,255,255,.12)}
.glow-btn .core span.lbl{font-family:"JetBrains Mono";font-size:.86rem;font-weight:600;letter-spacing:.1em;color:var(--gold);text-transform:uppercase;transition:color .3s}
.glow-btn:hover .core span.lbl{color:var(--fg)}
.glow-btn svg{color:var(--cyan);flex-shrink:0}

/* ---- ticker ---- */
.ticker-sec{padding:1.7rem 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.ticker-lbl{text-align:center;font-family:"JetBrains Mono";font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-dimmer);margin-bottom:1.3rem}
.ticker{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ticker-track{display:flex;gap:3rem;width:max-content;animation:tickscroll 34s linear infinite}
.ticker-track span{font-family:"Manrope";font-weight:600;font-size:1rem;color:#535353;letter-spacing:.01em;display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap}
.ticker-track span svg{color:#3d3d3d}
@keyframes tickscroll{to{transform:translateX(-50%)}}

/* ---- glass card base ---- */
.glass{position:relative;background:linear-gradient(180deg,var(--panel-1),var(--panel-2));border:1px solid var(--line);border-radius:var(--r-xl);padding:.4rem;box-shadow:var(--shadow)}
.glass::before{content:"";position:absolute;left:12%;right:12%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);opacity:.6;pointer-events:none}
.glass-in{position:relative;background:var(--panel-2);border:1px solid var(--line-soft);border-radius:calc(var(--r-xl) - .5rem);overflow:hidden}

/* ---- split layout ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.split h2{font-size:clamp(1.9rem,4vw,2.7rem);margin:1.1rem 0 1.1rem;font-weight:800}
.split .body{font-size:1.03rem;color:var(--fg-dim);font-weight:300}
.split .body b{color:var(--fg);font-weight:600}
.quote{margin-top:1.5rem;padding-left:1.2rem;border-left:2px solid var(--gold);color:var(--fg);font-size:1.02rem;line-height:1.55;font-weight:300}
.eyebrow{font-family:"JetBrains Mono",monospace;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:.7em;font-weight:600}

/* ---- ops dashboard glass card (platform section) ---- */
.dash-card{padding:1.7rem}
.dash-top{display:flex;align-items:center;justify-content:space-between}
.dash-top .t{display:flex;align-items:center;gap:.55rem;font-family:"Manrope";font-weight:700;color:var(--fg);letter-spacing:.02em;font-size:.95rem}
.live{font-family:"JetBrains Mono";font-size:.62rem;color:var(--cyan);display:inline-flex;align-items:center;gap:.4em;font-weight:600;letter-spacing:.05em}
.live .dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 3px rgba(127,219,255,.16);animation:pulse-dot 2s infinite}
.kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1.4rem}
.kpi-tile{background:rgba(255,255,255,.025);border:1px solid var(--line-soft);border-radius:14px;padding:.9rem 1rem}
.kpi-tile .k{font-family:"JetBrains Mono";font-size:.6rem;color:var(--fg-dimmer);letter-spacing:.05em}
.kpi-tile .v{font-family:"Manrope";font-weight:700;color:var(--fg);font-size:1.28rem;margin-top:.28rem;display:flex;align-items:baseline;gap:.4rem}
.kpi-tile .v small{font-size:.68rem;font-weight:500;color:var(--fg-dim);font-family:"Inter"}
.kpi-tile.warn{border-color:rgba(240,180,41,.32)}
.kpi-tile.warn .v{color:var(--warn)}
.flag-strip{margin-top:1rem;background:var(--warn-soft);border:1px solid rgba(240,180,41,.28);border-radius:14px;padding:.85rem 1rem;display:flex;align-items:center;gap:.7rem}
.flag-strip .fi{color:var(--warn);flex-shrink:0}
.flag-strip p{font-size:.84rem;color:var(--fg)}
.flag-strip .mono{color:var(--warn)}
.mini-row{display:flex;gap:1.3rem;margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--line-soft)}
.mini{flex:1}.mini .m-l{font-family:"JetBrains Mono";font-size:.6rem;color:var(--fg-dimmer)}
.mini .m-v{font-family:"Manrope";font-weight:700;color:var(--fg);font-size:1rem;margin-top:.2rem}

/* ---- bento capabilities ---- */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.bento-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.tile{position:relative;background:linear-gradient(180deg,var(--panel-1),var(--panel-2));border:1px solid var(--line);border-radius:var(--r-xl);padding:.35rem;box-shadow:0 20px 40px -14px rgba(0,0,0,.6);transition:transform .35s var(--ease),border-color .35s}
.tile:hover{transform:translateY(-5px)}
.tile::before{content:"";position:absolute;left:10%;right:10%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);opacity:.5;pointer-events:none}
.tile-viz{background:var(--panel-2);border-radius:calc(var(--r-xl) - .35rem);height:11rem;position:relative;overflow:hidden;padding:1.1rem;display:flex;flex-direction:column;box-shadow:inset 0 2px 10px rgba(0,0,0,.5);border-bottom:1px solid var(--line-soft)}
.tile-body{padding:1.4rem 1.3rem 1.5rem}
.tile-body h3{font-size:1.1rem;margin-bottom:.4rem;font-weight:700}
.tile-body p{font-size:.88rem;color:var(--fg-dim);font-weight:300;line-height:1.55}
.tile-glow-gold::before{background:radial-gradient(circle,rgba(214,191,163,.16),transparent 70%)}
.viz-glow{position:absolute;border-radius:999px;filter:blur(50px);pointer-events:none;z-index:0}

/* mini visual: doc rows */
.doc-row{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.03);border:1px solid var(--line-soft);border-radius:10px;padding:.5rem .7rem;font-size:.72rem;position:relative;z-index:1}
.doc-row + .doc-row{margin-top:.5rem}
.doc-row .n{color:var(--fg);font-weight:600;font-family:"JetBrains Mono";font-size:.68rem}
.doc-row .s{display:inline-flex;align-items:center;gap:.35em;font-family:"JetBrains Mono";font-size:.62rem}
.doc-row .s.ok{color:var(--cyan)}.doc-row .s.warn{color:var(--warn)}
.doc-row .s i{width:5px;height:5px;border-radius:50%;background:currentColor}

/* mini visual: progress ring */
.ring-wrap{margin:auto;position:relative;width:88px;height:88px}
.ring-wrap svg{transform:rotate(-90deg)}
.ring-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-txt b{font-family:"Manrope";color:var(--fg);font-size:1.1rem;font-weight:800}
.ring-txt small{font-family:"JetBrains Mono";font-size:.55rem;color:var(--fg-dimmer)}

/* mini visual: mini terminal */
.mini-term{background:#000;border:1px solid var(--line);border-radius:10px;padding:.75rem .85rem;font-family:"JetBrains Mono";font-size:.66rem;line-height:1.7;position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:center}
.mini-term .l1{color:var(--fg-dimmer)}
.mini-term .l2{color:var(--gold)}
.mini-term .l3{color:var(--fg)}
.mini-term .warn{color:var(--warn)}

/* mini visual: orbit */
.orbit-wrap{position:relative;flex:1;display:flex;align-items:center;justify-content:center}
.orbit-core{width:44px;height:44px;border-radius:50%;background:var(--cyan-grad);box-shadow:0 0 24px rgba(127,219,255,.45);display:flex;align-items:center;justify-content:center;color:#04222e;z-index:2}
.orbit-ring{position:absolute;border:1px solid var(--line);border-radius:50%}
.orbit-ring.r1{width:96px;height:96px;animation:spin 9s linear infinite}
.orbit-ring.r2{width:140px;height:140px;animation:spin 14s linear infinite reverse}
.orbit-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px rgba(214,191,163,.7)}
.orbit-ring.r1 .orbit-dot{top:-4px;left:50%;transform:translateX(-50%)}
.orbit-ring.r2 .orbit-dot{top:50%;right:-4px;transform:translateY(-50%);background:var(--cyan);box-shadow:0 0 8px rgba(127,219,255,.7)}
@keyframes spin{to{transform:rotate(360deg)}}

/* mini visual: calendar */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem;position:relative;z-index:1;margin:auto}
.cal-cell{width:100%;aspect-ratio:1;border-radius:5px;background:rgba(255,255,255,.04)}
.cal-cell.a{background:var(--gold-soft);border:1px solid rgba(214,191,163,.4)}
.cal-cell.b{background:var(--cyan-soft);border:1px solid rgba(127,219,255,.4)}

/* mini visual: shield spin badge */
.shield-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;position:relative;z-index:1}
.shield-ring{position:relative;width:76px;height:76px}
.shield-ring .base{position:absolute;inset:0;border-radius:50%;border:3px solid rgba(255,255,255,.08)}
.shield-ring .spin{position:absolute;inset:0;border-radius:50%;border:3px solid transparent;border-top-color:var(--cyan);animation:spin 3s linear infinite;filter:drop-shadow(0 0 6px rgba(127,219,255,.6))}
.shield-ring .core{position:absolute;inset:9px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--cyan)}
.rls-badge{font-family:"JetBrains Mono";font-size:.6rem;font-weight:700;letter-spacing:.1em;color:var(--cyan);background:var(--cyan-soft);border:1px solid rgba(127,219,255,.3);border-radius:999px;padding:.3rem .7rem;display:inline-flex;align-items:center;gap:.4em}
.rls-badge i{width:5px;height:5px;border-radius:50%;background:var(--cyan);animation:pulse-dot 2s infinite}

/* ---- flagged fuel card ---- */
.flag-card{padding:1.7rem}
.flag-head{display:flex;align-items:center;justify-content:space-between}
.flag-head .t{font-family:"Manrope";font-weight:700;color:var(--fg);display:flex;align-items:center;gap:.55rem;font-size:.98rem}
.flag-head .t .fi{color:var(--warn)}
.restricted{font-family:"JetBrains Mono";font-size:.6rem;color:var(--warn);border:1px solid rgba(240,180,41,.35);border-radius:999px;padding:.3rem .75rem;display:inline-flex;align-items:center;gap:.4em;font-weight:600}
.flag-veh{font-family:"Manrope";font-weight:700;color:var(--fg);font-size:1.2rem;margin-top:1.3rem}
.flag-veh small{font-family:"JetBrains Mono";font-size:.64rem;color:var(--fg-dimmer);font-weight:400;margin-left:.5rem}
.flag-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:1.1rem}
.fm{background:rgba(255,255,255,.025);border:1px solid var(--line-soft);border-radius:12px;padding:.8rem .95rem}
.fm .k{font-family:"JetBrains Mono";font-size:.6rem;color:var(--fg-dimmer)}
.fm .v{font-family:"Manrope";font-weight:700;color:var(--fg);font-size:1.08rem;margin-top:.2rem}
.fm .v.hi{color:var(--danger)}.fm .v.warn{color:var(--warn)}
.risk-bar{height:6px;border-radius:99px;background:var(--panel-2);margin-top:.5rem;overflow:hidden}
.risk-bar i{display:block;height:100%;width:87%;background:linear-gradient(90deg,var(--warn),var(--danger));border-radius:99px}
.flag-note{font-family:"JetBrains Mono";font-size:.66rem;color:var(--fg-dimmer);margin-top:1.15rem;display:flex;align-items:center;gap:.5em}
.flag-actions{display:flex;gap:.6rem;margin-top:1.15rem}
.flag-actions .b{font-family:"JetBrains Mono";font-size:.7rem;padding:.55rem .95rem;border-radius:8px;border:1px solid var(--line);color:var(--fg)}
.flag-actions .b.p{background:var(--warn);color:#1a1206;border-color:transparent;font-weight:600}

/* ---- code card ---- */
.code-card{background:#000;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;font-family:"JetBrains Mono",monospace;box-shadow:var(--shadow)}
.code-bar{display:flex;align-items:center;gap:.5rem;padding:.9rem 1.15rem;border-bottom:1px solid var(--line)}
.code-bar i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.14)}
.code-bar .fn{margin-left:.6rem;font-size:.72rem;color:var(--fg-dimmer)}
.code-body{padding:1.4rem 1.5rem;font-size:.8rem;line-height:1.9;color:#C7CDD6;overflow-x:auto}
.code-body .c{color:#57606B}.code-body .k{color:var(--cyan)}.code-body .s{color:var(--gold)}.code-body .f{color:var(--cyan-deep)}.code-body .p{color:var(--warn)}

/* ---- permissions table ---- */
.perm-wrap{overflow-x:auto}
.perm{width:100%;border-collapse:collapse;font-size:.85rem;min-width:420px}
.perm th,.perm td{padding:.9rem .6rem;border-bottom:1px solid var(--line-soft);text-align:center}
.perm th{font-family:"JetBrains Mono";font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-dimmer);font-weight:500}
.perm th:first-child,.perm td.role{text-align:left}
.perm td.role{font-family:"JetBrains Mono";color:var(--fg);font-size:.8rem}
.perm .y{color:var(--cyan);font-weight:700}.perm .n{color:var(--danger);opacity:.6}
.perm .partial{color:var(--gold);font-family:"JetBrains Mono";font-size:.64rem}

/* ---- device showcase tabs ---- */
.device-frame{position:relative}
.device-window{background:linear-gradient(180deg,var(--panel-1),var(--panel-2));border:1px solid var(--line);border-radius:var(--r-xl);padding:.4rem;box-shadow:var(--shadow)}
.device-in{background:var(--panel-2);border-radius:calc(var(--r-xl) - .4rem);height:440px;position:relative;overflow:hidden;box-shadow:inset 0 2px 10px rgba(0,0,0,.6)}
.device-in .grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:36px 36px;opacity:.6}
.dv-panel{position:relative;z-index:2;height:100%;display:none;flex-direction:column}
.dv-panel.active{display:flex}
.dv-head{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;border-bottom:1px solid var(--line-soft)}
.dv-head h4{font-family:"Manrope";font-weight:700;color:var(--fg);font-size:1.02rem}
.dv-body{flex:1;padding:1.6rem;overflow-y:auto}
.tabs-row{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-soft);margin-top:1.2rem}
.dv-tab{padding:1.2rem 1rem;cursor:pointer;border-top:2px solid transparent;transition:all .3s var(--ease);border-radius:14px 14px 0 0}
.dv-tab.active{border-top-color:var(--cyan);background:rgba(255,255,255,.025);transform:translateY(-3px)}
.dv-tab .tt{display:flex;align-items:center;gap:.55rem;margin-bottom:.4rem}
.dv-tab .tt svg{color:var(--fg-dimmer);transition:color .3s}
.dv-tab.active .tt svg{color:var(--cyan)}
.dv-tab .tt span{font-family:"Manrope";font-weight:600;font-size:.9rem;color:var(--fg-dimmer);transition:color .3s}
.dv-tab.active .tt span{color:var(--fg)}
.dv-tab p{font-size:.78rem;color:var(--fg-dimmer);font-weight:300;line-height:1.5}

/* ---- steps ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.step{position:relative;background:linear-gradient(180deg,var(--panel-1),var(--panel-2));border:1px solid var(--line);border-radius:var(--r-xl);padding:2rem}
.step .num{font-family:"Manrope";font-size:1.5rem;font-weight:800;letter-spacing:.01em}
.step h3{font-size:1.18rem;margin:.6rem 0 .55rem;font-weight:700}
.step p{font-size:.9rem;color:var(--fg-dim);font-weight:300}
.step .conn{position:absolute;top:2.5rem;right:-1rem;color:var(--fg-dimmer);z-index:2}
@media(max-width:900px){.step .conn{display:none}}

/* ---- stats ---- */
.stats{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.stat .n{font-family:"Manrope";font-size:clamp(1.7rem,3.6vw,2.4rem);font-weight:800;letter-spacing:-.02em;color:var(--fg);line-height:1.05}
.stat .l{color:var(--fg-dim);font-size:.88rem;margin-top:.6rem;max-width:22ch;font-weight:300}

/* ---- testimonial carousel ---- */
.tcard-wrap{position:relative;height:520px;perspective:1400px}
.tcard{position:absolute;top:50%;left:50%;width:100%;max-width:420px;transition:all .8s cubic-bezier(.25,1,.5,1);cursor:pointer}
.tcard .inner{background:linear-gradient(180deg,var(--panel-1),var(--panel-2));border:1px solid var(--line);border-radius:var(--r-xl);padding:.4rem;box-shadow:var(--shadow)}
.tcard .core{background:var(--panel-2);border-radius:calc(var(--r-xl) - .4rem);padding:2.2rem;position:relative;overflow:hidden}
.tcard .stars{display:flex;gap:.25rem;color:var(--gold);margin-bottom:1.2rem}
.tcard blockquote{font-size:1.02rem;color:var(--fg-dim);font-weight:300;line-height:1.6;margin-bottom:1.6rem}
.tcard .who{display:flex;align-items:center;gap:.9rem;padding-top:1.2rem;border-top:1px solid var(--line-soft)}
.tcard .av{width:46px;height:46px;border-radius:50%;background:var(--panel-1);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:"Manrope";font-weight:700;color:var(--fg-dim);font-size:.85rem}
.tcard .name{font-family:"Manrope";font-weight:700;color:var(--fg);font-size:.92rem}
.tcard .role{font-size:.78rem;color:var(--fg-dimmer)}
.tcard .sample-tag{position:absolute;top:1.1rem;right:1.1rem;font-family:"JetBrains Mono";font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dimmer);border:1px dashed var(--line-strong);border-radius:999px;padding:.25rem .6rem}
.t-pos-l{transform:translate(-155%,-58%) rotate(-7deg) scale(.82);z-index:1;opacity:.35;filter:blur(1px)}
.t-pos-c{transform:translate(-50%,-62%) scale(1.06);z-index:3;opacity:1}
.t-pos-r{transform:translate(55%,-58%) rotate(7deg) scale(.82);z-index:1;opacity:.35;filter:blur(1px)}
.tcard:hover.t-pos-l,.tcard:hover.t-pos-r{opacity:.7;filter:none}
.t-arrows{display:flex;justify-content:center;gap:1.1rem;margin-top:1.5rem}
.t-arrow{width:48px;height:48px;border-radius:50%;background:linear-gradient(180deg,var(--panel-1),var(--panel-2));border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--fg-dim);cursor:pointer;transition:all .3s var(--ease)}
.t-arrow:hover{color:var(--fg);border-color:var(--line-strong);transform:scale(1.08)}
@media(max-width:900px){.tcard-wrap{height:auto;perspective:none}.tcard{position:static;transform:none!important;opacity:1!important;filter:none!important;max-width:none;margin-bottom:1.2rem}}

/* ---- pricing ---- */
.pricing{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.price-toggle{display:inline-flex;align-items:center;gap:.7rem;margin-top:1.6rem;font-family:"JetBrains Mono";font-size:.78rem;color:var(--fg-dim)}
.price-toggle .on-lbl{color:var(--fg)}
.switch{width:46px;height:26px;border-radius:99px;background:var(--panel-3);border:1px solid var(--line);position:relative;cursor:pointer;transition:background .2s;flex-shrink:0}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--gold);transition:transform .25s var(--ease)}
.switch.on{background:var(--gold-soft)}
.switch.on::after{transform:translateX(20px)}
.price-toggle .save{color:var(--gold)}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:2.8rem;align-items:stretch}
.tier{position:relative;background:linear-gradient(180deg,var(--panel-1),var(--panel-2));border:1px solid var(--line);border-radius:var(--r-xl);padding:.4rem;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.tier:hover{transform:translateY(-10px)}
.tier-in{background:var(--panel-2);border-radius:calc(var(--r-xl) - .4rem);padding:2rem;display:flex;flex-direction:column;height:100%;position:relative;overflow:hidden}
.tier.pop{border-color:rgba(214,191,163,.4)}
.tier.pop .tier-in{box-shadow:inset 0 0 0 1px rgba(214,191,163,.12)}
.tier.pop:hover{box-shadow:0 30px 60px -18px rgba(214,191,163,.25)}
.badge-pop{position:absolute;top:1.3rem;right:1.3rem;background:var(--gold-soft);color:var(--gold);font-family:"JetBrains Mono";font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.35rem .75rem;border-radius:999px;border:1px solid rgba(214,191,163,.3);z-index:2}
.tier h3{font-size:1.3rem;margin-bottom:.4rem;font-weight:800}
.tier .desc{font-size:.86rem;color:var(--fg-dim);min-height:2.8em;font-weight:300}
.tier .price{margin:1.3rem 0 .1rem;display:flex;align-items:baseline;gap:.25rem;flex-wrap:wrap}
.tier .price .cur{font-family:"Manrope";font-weight:800;color:var(--fg);font-size:1.25rem}
.tier .price .amt{font-family:"Manrope";font-weight:800;color:var(--fg);font-size:2.7rem;letter-spacing:-.02em;line-height:1}
.tier .price .per{font-size:.8rem;color:var(--fg-dim)}
.tier .sub-price{font-family:"JetBrains Mono";font-size:.72rem;color:var(--gold)}
.tier .bill-note{font-family:"JetBrains Mono";font-size:.64rem;color:var(--fg-dimmer);margin-top:.45rem;min-height:1em}
.tier > .tier-in > .btn{margin-top:1.5rem;width:100%;justify-content:center}
.tier ul{list-style:none;margin-top:1.5rem;display:grid;gap:.75rem}
.tier li{display:flex;gap:.6rem;font-size:.87rem;color:var(--fg-dim);line-height:1.4;font-weight:300}
.tier li svg{color:var(--gold);flex-shrink:0;margin-top:.2rem}
.tier li.grp{color:var(--fg);font-weight:700;font-size:.64rem;font-family:"JetBrains Mono";text-transform:uppercase;letter-spacing:.1em;margin-top:.5rem}
@media(max-width:900px){.tiers{grid-template-columns:1fr}}

/* ---- CTA banner ---- */
.cta-outer{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--panel-1),var(--panel-2));border:1px solid var(--line);border-radius:3rem;padding:.4rem;box-shadow:var(--shadow)}
.cta-inner{background:#000;border-radius:calc(3rem - .4rem);padding:clamp(3rem,8vw,6rem) clamp(1.5rem,5vw,3rem);position:relative;overflow:hidden;text-align:center}
.cta-gridbg{position:absolute;inset:0;background-image:linear-gradient(rgba(127,219,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(127,219,255,.05) 1px,transparent 1px);background-size:40px 40px;animation:gridflow 3s linear infinite}
@keyframes gridflow{to{background-position:40px 40px}}
.cta-glow{position:absolute;top:-30%;left:50%;transform:translateX(-50%);width:70%;height:80%;background:radial-gradient(circle,rgba(214,191,163,.16),transparent 65%);pointer-events:none}
.cta-stream{position:absolute;top:0;width:1px;height:45%;background:linear-gradient(180deg,transparent,var(--cyan),transparent);opacity:.6;animation:flow 5s ease-in-out infinite}
@keyframes flow{0%{transform:translateY(-100%);opacity:0}50%{opacity:1}100%{transform:translateY(220%);opacity:0}}
.cta-inner .content{position:relative;z-index:3;max-width:680px;margin-inline:auto}
.cta-inner h2{font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.08;margin:1.6rem 0 1.3rem;font-weight:400}
.cta-inner .sub{color:var(--fg-dim);font-size:1.05rem;font-weight:300;max-width:52ch;margin-inline:auto}
.signup{display:flex;gap:.7rem;margin-top:2.2rem;max-width:560px;flex-wrap:wrap;justify-content:center;margin-inline:auto}
.field-wrap{display:flex;gap:.7rem;flex:1;flex-wrap:wrap;justify-content:center}
.signup input{flex:1;min-width:200px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:999px;color:var(--fg);padding:.85rem 1.3rem;font-family:"JetBrains Mono";font-size:.84rem}
.signup input::placeholder{color:var(--fg-dimmer)}.signup input:focus{outline:none;border-color:var(--gold)}
.lead-msg{flex-basis:100%;width:100%;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:16px;color:var(--fg);padding:.85rem 1.3rem;font-family:"JetBrains Mono";font-size:.84rem;resize:vertical;min-height:4.4em}
.lead-msg::placeholder{color:var(--fg-dimmer)}.lead-msg:focus{outline:none;border-color:var(--gold)}
.signup.done .field-wrap,.signup.done .lead-msg{display:none}
.confirm{display:none;margin-top:2rem;font-family:"JetBrains Mono";font-size:.9rem;color:var(--cyan);align-items:center;justify-content:center;gap:.5em}
.signup.done ~ .confirm{display:flex}
.cta-alt{margin-top:1.4rem;font-family:"JetBrains Mono";font-size:.76rem;color:var(--fg-dimmer)}
.cta-alt a{color:var(--gold)}

/* ---- footer ---- */
footer{border-top:1px solid var(--line-soft);padding:clamp(3.5rem,6vw,5rem) 0 2.5rem}
.foot-top{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:2rem 1.5rem;margin-bottom:3rem}
.foot-brand p{color:var(--fg-dim);font-size:.88rem;max-width:32ch;margin-top:1.1rem;font-weight:300}
.foot-brand .tag{font-family:"JetBrains Mono";font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-top:1.1rem}
.foot-col h4{font-family:"Manrope";font-weight:700;color:var(--fg);font-size:.86rem;margin-bottom:1.1rem;letter-spacing:.02em}
.foot-col a{display:block;color:var(--fg-dim);font-size:.88rem;margin-bottom:.7rem;transition:color .2s;font-weight:300}
.foot-col a:hover{color:var(--gold)}
.foot-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding-top:2.2rem;border-top:1px solid var(--line-soft);color:var(--fg-dimmer);font-size:.82rem;font-family:"JetBrains Mono"}
.status-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .9rem;border-radius:999px;background:var(--cyan-soft);border:1px solid rgba(127,219,255,.25)}
.status-pill span.dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 6px rgba(127,219,255,.8);animation:pulse-dot 2s infinite}
.status-pill span.txt{color:var(--cyan);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600}

a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}

/* ---- hero dashboard mockup grid (traq.html) ---- */
.dash-grid{display:grid;grid-template-columns:230px 1fr 260px;min-height:600px}
@media(max-width:900px){
  .dash-grid{grid-template-columns:1fr;min-height:0}
  .dash-grid .dash-sidebar{display:none}
  .dash-grid .dash-right{border-left:none;border-top:1px solid var(--line-soft)}
}

/* ---- hero dashboard mockup bar chart (traq.html) ---- */
.bar{flex:1;background:linear-gradient(180deg,var(--cyan),transparent);opacity:.5;border-radius:4px 4px 0 0;animation:barpulse 2.6s ease-in-out infinite}
.bar:nth-child(1){height:35%}.bar:nth-child(2){height:52%}.bar:nth-child(3){height:28%}.bar:nth-child(4){height:65%}.bar:nth-child(5){height:80%}
.bar-peak{height:100%!important;background:linear-gradient(180deg,var(--gold),var(--cyan))!important;opacity:1!important;box-shadow:0 0 20px rgba(214,191,163,.4)}
.bar:nth-child(7){height:70%}.bar:nth-child(8){height:45%}.bar:nth-child(9){height:30%}
@keyframes barpulse{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.85)}}

@media(max-width:1000px){
  .split{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .foot-top{grid-template-columns:1fr 1fr}
  .kpi-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .nav-actions .desk-cta{display:none}
  .menu-btn{display:inline-flex}
  .split .order-first{order:-1}
  .tabs-row{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .section{padding:3.6rem 0}
  .bento,.bento-2{grid-template-columns:1fr}
  .sec-head{margin-bottom:2.2rem}
  .cta-inner{padding:2.2rem 1.4rem}
  .tier-in{padding:1.6rem}
  .dash-card,.flag-card{padding:1.2rem}
  .foot-bar{flex-direction:column;align-items:flex-start;gap:.5rem}
  .price-toggle{flex-wrap:wrap}
  .device-in{height:auto;min-height:520px}
  .tabs-row{grid-template-columns:1fr}
}
@media(max-width:420px){
  .stat-grid{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  .flag-grid{grid-template-columns:1fr}
  .hero-cta{width:100%}
  .hero-cta .btn,.hero-cta .glow-btn{flex:1 1 auto;justify-content:center;width:100%}
  .mini-row{flex-wrap:wrap;gap:1rem .5rem}
  .mini{min-width:40%}
}