/* ============================================================
   AI eCommOps — ecom.akontec.com
   Design: operations console. Hairline grid, mono index rails,
   tabular figures, red as the only chromatic voice.
   ============================================================ */

:root{
  --ink:#08080A; --ink2:#0E0E11; --ink3:#141418; --ink4:#1B1B20;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.17);
  --paper:#FFFFFF; --mute:#8B8B94; --mute2:#5B5B64;
  --red:#C00000; --hot:#E4262C; --red-dim:rgba(192,0,0,.14);
  --live:#2ED3A7; --warn:#E9A23B;
  --display:'Bricolage Grotesque',Georgia,serif;
  --body:'Instrument Sans',-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --rail:clamp(0px,4vw,72px);
  --pad:clamp(20px,5vw,64px);
  --maxw:1320px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--body);font-size:16.5px;line-height:1.62;
  font-weight:400;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 128px),
    radial-gradient(1100px 600px at 78% -8%,rgba(192,0,0,.16),transparent 62%);
  opacity:.5;
}
main,header,footer{position:relative;z-index:1}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
hr{border:0;border-top:1px solid var(--line);margin:0}

h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.035em;line-height:1.02;margin:0}
h1{font-size:clamp(2.6rem,7.2vw,5.4rem)}
h2{font-size:clamp(2rem,4.4vw,3.35rem)}
h3{font-size:clamp(1.28rem,2.2vw,1.72rem);letter-spacing:-.025em}
h4{font-size:1.06rem;letter-spacing:-.015em;font-weight:600}
p{margin:0 0 1.1em}
strong{font-weight:600;color:var(--paper)}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.sec{padding:clamp(56px,8vw,116px) 0;border-top:1px solid var(--line);position:relative}
.sec--flush{border-top:0}
.sec--panel{background:var(--ink2)}

/* --- mono furniture --------------------------------------- */
.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--mute2);
  display:flex;align-items:center;gap:12px;margin:0 0 22px
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--red);flex:none}
.idx{font-family:var(--mono);font-size:11px;color:var(--red);letter-spacing:.16em}
.lede{font-size:clamp(1.05rem,1.7vw,1.24rem);color:#C9C9D0;max-width:62ch;line-height:1.58}
.mute{color:var(--mute)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* --- header ------------------------------------------------ */
.nav{position:sticky;top:0;z-index:60;background:rgba(8,8,10,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav__in{display:flex;align-items:center;gap:26px;height:66px;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand__mk{width:30px;height:30px;flex:none}
.brand__tx{font-family:var(--display);font-weight:700;font-size:16.5px;letter-spacing:-.03em;line-height:1}
.brand__sub{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--mute2);text-transform:uppercase;display:block;margin-top:3px}
.nav__links{display:flex;gap:2px;margin-left:auto;align-items:center}
.nav__links a{
  font-size:13.5px;color:#B9B9C2;padding:8px 11px;border-radius:2px;
  transition:color .18s,background .18s;white-space:nowrap
}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.06)}
.nav__cta{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--red);color:#fff;padding:11px 17px;margin-left:10px;
  border:1px solid var(--red);transition:background .18s
}
.nav__cta:hover{background:var(--hot)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line2);color:#fff;width:40px;height:36px;cursor:pointer;font-size:16px}

/* --- ticker ------------------------------------------------ */
.ticker{border-bottom:1px solid var(--line);background:var(--ink2);overflow:hidden}
.ticker__t{display:flex;gap:0;width:max-content;animation:slide 46s linear infinite}
.ticker__t span{
  font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--mute2);padding:10px 26px;white-space:nowrap;position:relative
}
.ticker__t span::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:3px;height:3px;background:var(--red)}
.ticker__t b{color:#D6D6DD;font-weight:500}
@keyframes slide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker__t{animation:none}}

/* --- hero -------------------------------------------------- */
.hero{padding:clamp(52px,8vw,104px) 0 0;position:relative}
.hero__grid{display:grid;grid-template-columns:var(--rail) 1fr;gap:0}
.hero__rail{border-right:1px solid var(--line);padding-top:8px}
.hero__rail span{font-family:var(--mono);font-size:10px;color:var(--mute2);writing-mode:vertical-rl;letter-spacing:.28em;text-transform:uppercase}
.hero__body{padding-left:clamp(16px,3vw,42px)}
.hero h1 em{font-style:normal;color:var(--red);}
.hero__sub{margin:26px 0 0;max-width:58ch}
.hero__meta{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.tag{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line2);padding:5px 11px;color:#C4C4CC
}
.tag--red{border-color:rgba(192,0,0,.5);color:#FF9A9A;background:var(--red-dim)}

.figs{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);margin:44px 0 0}
.fig{padding:24px 22px;border-right:1px solid var(--line);background:var(--ink2)}
.fig:last-child{border-right:0}
.fig__k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute2);margin-bottom:12px}
.fig__v{font-family:var(--display);font-size:clamp(1.8rem,3.4vw,2.5rem);font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.fig__n{font-size:13px;color:var(--mute);margin-top:9px;line-height:1.45}
.fig--hot{background:linear-gradient(180deg,rgba(192,0,0,.2),rgba(192,0,0,.04))}

/* --- buttons ----------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  padding:15px 26px;border:1px solid var(--red);background:var(--red);color:#fff;
  transition:background .2s,transform .2s;cursor:pointer
}
.btn:hover{background:var(--hot);transform:translateY(-1px)}
.btn--ghost{background:transparent;border-color:var(--line2);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.07);border-color:#fff}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* --- generic grids ----------------------------------------- */
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.cell{background:var(--ink);padding:clamp(22px,2.6vw,32px)}
.cell--p{background:var(--ink2)}
.cell h4{margin-bottom:10px}
.cell p{font-size:14.5px;color:var(--mute);margin:0}
.cell p+p{margin-top:.8em}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(22px,3.2vw,48px);align-items:start}
.split>*:first-child{position:sticky;top:92px}
.split--even{grid-template-columns:1fr 1fr}
.stack>*+*{margin-top:14px}

/* --- lists ------------------------------------------------- */
.chk{list-style:none;padding:0;margin:0}
.chk li{position:relative;padding:11px 0 11px 30px;border-bottom:1px solid var(--line);font-size:15px;color:#C7C7D0}
.chk li::before{content:"";position:absolute;left:0;top:19px;width:11px;height:1px;background:var(--red)}
.chk li:last-child{border-bottom:0}
.chk b{color:#fff;font-weight:600}

.nope{list-style:none;padding:0;margin:0}
.nope li{position:relative;padding:14px 0 14px 34px;border-bottom:1px solid var(--line);font-size:15px;color:#C7C7D0}
.nope li::before{
  content:"×";position:absolute;left:0;top:12px;color:var(--red);
  font-family:var(--mono);font-size:16px;font-weight:700
}
.nope li:last-child{border-bottom:0}

.steps{list-style:none;padding:0;margin:0;counter-reset:s}
.steps li{
  counter-increment:s;position:relative;padding:22px 0 22px 62px;
  border-bottom:1px solid var(--line)
}
.steps li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:22px;
  font-family:var(--mono);font-size:12px;color:var(--red);letter-spacing:.1em
}
.steps li:last-child{border-bottom:0}
.steps h4{margin-bottom:7px}
.steps p{font-size:14.5px;color:var(--mute);margin:0}

/* --- tables ------------------------------------------------ */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);background:var(--ink2)}
table.dt{width:100%;border-collapse:collapse;min-width:560px}
table.dt th{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute2);text-align:left;padding:14px 18px;border-bottom:1px solid var(--line2);
  background:var(--ink3);white-space:nowrap;font-weight:500
}
table.dt td{padding:15px 18px;border-bottom:1px solid var(--line);font-size:14.5px;color:#C7C7D0;vertical-align:top}
table.dt tr:last-child td{border-bottom:0}
table.dt td:first-child{color:#fff}
table.dt .n{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;color:#fff}
table.dt th.n{text-align:right}
table.dt tr.tot td{background:rgba(192,0,0,.12);color:#fff;font-weight:600;border-top:1px solid rgba(192,0,0,.45)}
table.dt tr.hl td{background:rgba(255,255,255,.035)}

/* --- badges ------------------------------------------------ */
.bdg{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border:1px solid var(--line2);color:#C4C4CC;white-space:nowrap}
.bdg--sup{border-color:rgba(46,211,167,.45);color:var(--live);background:rgba(46,211,167,.09)}
.bdg--draft{border-color:rgba(233,162,59,.45);color:var(--warn);background:rgba(233,162,59,.09)}
.bdg--core{border-color:rgba(192,0,0,.5);color:#FF9A9A;background:var(--red-dim)}

/* --- callout ----------------------------------------------- */
.call{border:1px solid rgba(192,0,0,.42);background:linear-gradient(180deg,rgba(192,0,0,.16),rgba(192,0,0,.03));padding:clamp(24px,3.4vw,40px)}
.call h3{margin-bottom:12px}
.call p:last-child{margin-bottom:0}
.note{border-left:2px solid var(--red);padding:4px 0 4px 18px;font-size:14.5px;color:var(--mute)}

/* --- panel mockup ------------------------------------------ */
.pm{border:1px solid var(--line2);background:var(--ink2);overflow:hidden;font-size:12px}
.pm__top{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--ink3)}
.pm__dot{width:8px;height:8px;border-radius:50%;background:var(--red);flex:none}
.pm__title{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#C4C4CC}
.pm__live{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--live);display:flex;align-items:center;gap:6px}
.pm__live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--live);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.pm__body{display:grid;grid-template-columns:172px 1fr}
.pm__side{border-right:1px solid var(--line);padding:14px 0;background:var(--ink)}
.pm__grp{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute2);padding:12px 16px 6px}
.pm__nav{padding:6px 16px;color:#A9A9B3;font-size:12.5px;border-left:2px solid transparent}
.pm__nav.on{color:#fff;border-left-color:var(--red);background:rgba(192,0,0,.1)}
.pm__main{padding:16px}
.pm__kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:14px}
.pm__kpi{background:var(--ink);padding:12px}
.pm__kpi span{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute2);display:block;margin-bottom:7px}
.pm__kpi b{font-family:var(--display);font-size:1.4rem;font-weight:600;letter-spacing:-.03em;display:block}
.pm__kpi i{font-style:normal;font-size:10.5px;color:var(--mute)}
.pm table{width:100%;border-collapse:collapse}
.pm table th{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute2);text-align:left;padding:9px 10px;border-bottom:1px solid var(--line2);font-weight:500}
.pm table td{padding:9px 10px;border-bottom:1px solid var(--line);color:#BDBDC6;font-size:12px}
.pm table tr:last-child td{border-bottom:0}
.pm table td:first-child{color:#fff}

/* --- faq --------------------------------------------------- */
.faq{border:1px solid var(--line);background:var(--ink2)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{
  padding:20px 54px 20px 22px;cursor:pointer;list-style:none;position:relative;
  font-size:15.5px;font-weight:600;color:#fff
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:22px;top:18px;color:var(--red);
  font-family:var(--mono);font-size:19px;transition:transform .2s
}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{background:rgba(255,255,255,.03)}
.faq__a{padding:0 22px 22px;font-size:14.8px;color:var(--mute);max-width:78ch}
.faq__a p:last-child{margin-bottom:0}

/* --- form -------------------------------------------------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f{display:flex;flex-direction:column;gap:7px}
.f--full{grid-column:1/-1}
.f label{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute2)}
.f input,.f select,.f textarea{
  background:var(--ink2);border:1px solid var(--line2);color:#fff;padding:13px 14px;
  font-family:var(--body);font-size:15px;border-radius:0;width:100%
}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--red);background:var(--ink3)}
.f textarea{min-height:118px;resize:vertical}
.f small{font-size:12px;color:var(--mute2)}
.f--chk{flex-direction:row;align-items:flex-start;gap:11px}
.f--chk input{width:17px;height:17px;flex:none;margin-top:3px;accent-color:var(--red)}
.f--chk label{font-family:var(--body);font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--mute)}

/* --- cta band ---------------------------------------------- */
.band{background:linear-gradient(120deg,rgba(192,0,0,.22),rgba(8,8,10,0) 62%),var(--ink2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band__in{padding:clamp(46px,6vw,84px) 0;display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center}

/* --- footer ------------------------------------------------ */
.ft{background:var(--ink);border-top:1px solid var(--line);padding:clamp(46px,6vw,72px) 0 30px}
.ft__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
.ft h5{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute2);margin:0 0 16px;font-weight:500}
.ft ul{list-style:none;padding:0;margin:0}
.ft li{margin-bottom:9px}
.ft a{font-size:14px;color:#A9A9B3;transition:color .16s}
.ft a:hover{color:var(--red)}
.ft__bot{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--mute2);letter-spacing:.08em}
.ft__dis{margin-top:22px;padding:16px 18px;border:1px solid var(--line);background:var(--ink2);font-size:12.5px;color:var(--mute2);line-height:1.6}

/* --- page head --------------------------------------------- */
.phead{padding:clamp(46px,6vw,86px) 0 clamp(34px,4vw,54px);border-bottom:1px solid var(--line);position:relative}
.phead__k{display:flex;align-items:baseline;gap:16px;margin-bottom:20px}
.crumb{font-family:var(--mono);font-size:11px;color:var(--mute2);letter-spacing:.1em}
.crumb a:hover{color:var(--red)}

/* --- reveal ------------------------------------------------ */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* --- responsive -------------------------------------------- */
@media(max-width:1020px){
  .split>*:first-child{position:static}
  .nav__links{
    position:fixed;inset:66px 0 auto 0;background:var(--ink2);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;padding:12px var(--pad) 20px;display:none;max-height:calc(100vh - 66px);overflow-y:auto
  }
  .nav__links.open{display:flex}
  .nav__links a{padding:12px 4px;border-bottom:1px solid var(--line)}
  .nav__cta{margin:12px 0 0;justify-content:center;display:flex}
  .burger{display:block}
  .g4{grid-template-columns:repeat(2,1fr)}
  .split,.split--even,.band__in{grid-template-columns:1fr}
  .ft__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  body{font-size:16px}
  .hero__grid{grid-template-columns:1fr}
  .hero__rail{display:none}
  .hero__body{padding-left:0}
  .figs,.g2,.g3,.g4{grid-template-columns:1fr}
  .fig{border-right:0;border-bottom:1px solid var(--line)}
  .fig:last-child{border-bottom:0}
  .pm__body{grid-template-columns:1fr}
  .pm__side{display:none}
  .form{grid-template-columns:1fr}
  .ft__grid{grid-template-columns:1fr}
}