/* =====================================================================
   360 Odoo MCP — marketing site styles
   Site-specific layout on top of the design system (tokens/base/presets
   + 360 flavour). Tokens only — no raw hex/px outside token vars.
   ===================================================================== */

@layer site;

@layer site{

/* ---------- page scaffold ---------- */
html{scroll-behavior:smooth}
body{margin:0}
.container{max-width:var(--content-max);margin:0 auto;padding-inline:var(--sp-6)}

/* ---------- top nav ---------- */
.nav{position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--c-bg) 82%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--c-line)}
.nav-inner{display:flex;align-items:center;gap:var(--sp-6);padding-block:var(--sp-3)}
.brand{display:flex;align-items:center;gap:var(--sp-2);text-decoration:none;color:var(--c-txt);
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-18);letter-spacing:var(--tracking-display)}
.brand .logo{height:26px;width:auto;display:block}
.brand .sep{width:1px;align-self:stretch;background:var(--c-line-2)}
.brand .suffix{color:var(--c-accent)}
.nav-links{display:flex;gap:var(--sp-5);margin-left:auto;align-items:center}
.nav-links a:not(.ds-btn){color:var(--c-txt-2);text-decoration:none;font-size:var(--fs-14);transition:color var(--t)}
.nav-links a:not(.ds-btn):hover{color:var(--c-txt)}
.nav .ds-btn-pill{padding:.55rem 1.25rem;font-size:var(--fs-14)}
@media (max-width:820px){.nav-links a:not(.ds-btn){display:none}}

/* ---------- hero ---------- */
.hero-band{position:relative;overflow:hidden}
.hero-band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(720px 420px at 12% -10%,color-mix(in srgb,var(--c-360-vermilion) 13%,transparent),transparent 65%),
    radial-gradient(820px 480px at 95% 8%,color-mix(in srgb,var(--c-360-indigo) 10%,transparent),transparent 60%)}
.hero-grid{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:var(--sp-12);align-items:center;
  padding-block:var(--sp-16) var(--sp-12)}
.hero-copy h1{font-family:var(--font-display);font-size:clamp(var(--fs-36),5.4vw,58px);line-height:1.04;
  letter-spacing:-.025em;margin:0 0 var(--sp-5)}
.hero-copy h1 .grad{background:var(--grad-signature);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy .sub{font-size:var(--fs-18);line-height:var(--lh);color:var(--c-txt-2);max-width:52ch;margin:0 0 var(--sp-6)}
.hero-ctas{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center}
.hero-note{margin-top:var(--sp-4);font-size:var(--fs-13);color:var(--c-muted);display:flex;align-items:center;gap:var(--sp-2)}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr;gap:var(--sp-8);padding-block:var(--sp-12) var(--sp-8)}}

/* ---------- chat mock ---------- */
.chat{padding:0;overflow:hidden;box-shadow:var(--sh-pop)}
.chat-bar{display:flex;align-items:center;gap:var(--sp-2);padding:10px 14px;border-bottom:1px solid var(--c-line);background:var(--c-surface-2)}
.chat-bar .dot{width:10px;height:10px;border-radius:50%;background:var(--c-line-2)}
.chat-bar .dot:first-child{background:color-mix(in srgb,var(--c-360-vermilion) 65%,var(--c-line-2))}
.chat-bar .ttl{margin-left:var(--sp-2);font-size:var(--fs-12);color:var(--c-muted);font-family:var(--font-mono)}
.chat-body{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5)}
.msg{max-width:88%;padding:10px 14px;border-radius:var(--r-lg);font-size:var(--fs-14);line-height:var(--lh)}
.msg.user{align-self:flex-end;background:var(--c-360-indigo);color:#fff;border-bottom-right-radius:var(--r-sm)}
.msg.ai{align-self:flex-start;background:var(--c-surface-2);border:1px solid var(--c-line);border-bottom-left-radius:var(--r-sm)}
.msg.ai b{color:var(--c-txt)}
.toolcalls{display:flex;flex-direction:column;gap:6px;align-self:flex-start;max-width:88%}
.toolcall{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:var(--fs-12);
  color:var(--c-txt-2);background:color-mix(in srgb,var(--c-accent) 7%,var(--c-surface));
  border:1px solid color-mix(in srgb,var(--c-accent) 28%,var(--c-line));border-radius:var(--r-pill);padding:5px 12px}
.toolcall .ds-icon{color:var(--c-accent)}
.toolcall .ok{margin-left:auto;color:var(--c-good)}
.chat-foot{display:flex;align-items:center;gap:var(--sp-2);border-top:1px solid var(--c-line);
  padding:9px 14px;font-size:var(--fs-12);color:var(--c-muted);background:var(--c-surface-2)}
.chat-foot .ds-icon{color:var(--c-good)}

/* ---------- compatibility chips ---------- */
.works-with{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);align-items:center;justify-content:center;
  padding-block:var(--sp-6) var(--sp-10)}
.works-with .lbl{font-size:var(--fs-12);text-transform:uppercase;letter-spacing:.08em;color:var(--c-muted);font-weight:var(--fw-semi);margin-right:var(--sp-2)}
.works-with .ds-chip{padding:5px 14px;font-size:var(--fs-13);color:var(--c-txt-2);background:var(--c-surface)}

/* ---------- section rhythm ---------- */
section{padding-block:var(--sp-16)}
.sec-head{max-width:64ch;margin-bottom:var(--sp-10)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{font-family:var(--font-display);font-size:clamp(var(--fs-24),3.4vw,var(--fs-36));letter-spacing:-.02em;line-height:var(--lh-tight);margin:0 0 var(--sp-3)}
.sec-head .ds-lead{font-size:var(--fs-16)}
.eyebrow{display:inline-block;color:var(--c-accent);font-weight:var(--fw-semi);font-size:var(--fs-13);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--sp-2)}
.band-surface{background:var(--c-surface);border-block:1px solid var(--c-line)}
.band-stone{background:var(--c-surface-2);border-block:1px solid var(--c-line)}

/* ---------- KPI strip ---------- */
.kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);padding-block:0 var(--sp-16)}
.kpi-strip .ds-kpi .val{font-size:var(--fs-36)}
.kpi-strip .ds-kpi .sub{font-size:var(--fs-13);color:var(--c-txt-2);margin-top:2px}
@media (max-width:820px){.kpi-strip{grid-template-columns:repeat(2,1fr)}}

/* ---------- how it works: steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.step{position:relative;padding:var(--sp-5)}
.step .num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  background:var(--grad-signature);color:#fff;font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:var(--fs-15);margin-bottom:var(--sp-3)}
.step h3{font-family:var(--font-display);font-size:var(--fs-18);margin:0 0 var(--sp-2)}
.step p{margin:0;color:var(--c-txt-2);font-size:var(--fs-14)}
.step p code{font-family:var(--font-mono);font-size:.9em;background:var(--c-surface-2);border:1px solid var(--c-line);border-radius:6px;padding:1px 5px}
@media (max-width:820px){.steps{grid-template-columns:1fr}}

/* ---------- architecture diagram ---------- */
.arch{display:grid;grid-template-columns:1fr auto 1.15fr auto 1fr;gap:var(--sp-3);align-items:stretch;
  margin-top:var(--sp-10)}
.arch-node{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-5);text-align:left}
.arch-node .t{display:flex;align-items:center;gap:var(--sp-2);font-family:var(--font-display);font-weight:var(--fw-semi);font-size:var(--fs-16)}
.arch-node .t .ds-icon{color:var(--c-accent)}
.arch-node .d{font-size:var(--fs-13);color:var(--c-txt-2)}
.arch-node ul{margin:0;padding-left:1.1em;font-size:var(--fs-12);color:var(--c-muted)}
.arch-node li{margin:.2em 0}
.arch-node.hub{position:relative;overflow:hidden}
.arch-node.hub::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;background:var(--grad-signature)}
.arch-link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:96px}
.arch-link .wire{position:relative;width:100%;height:2px;background:var(--grad-signature);border-radius:2px}
.arch-link .wire::after{content:"";position:absolute;right:-1px;top:50%;width:8px;height:8px;translate:0 -50%;rotate:45deg;
  border-top:2px solid var(--c-360-indigo);border-right:2px solid var(--c-360-indigo)}
.arch-link .proto{font-family:var(--font-mono);font-size:var(--fs-11);color:var(--c-muted);text-align:center;line-height:1.4}
@media (max-width:960px){
  .arch{grid-template-columns:1fr}
  .arch-link{min-height:56px;min-width:0}
  .arch-link .wire{width:2px;height:100%;min-height:34px;background:var(--grad-signature-v)}
  .arch-link .wire::after{right:auto;top:auto;bottom:-1px;left:50%;translate:-50% 0;rotate:135deg;
    border-color:var(--c-360-indigo)}
}

/* ---------- tools grid ---------- */
.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--sp-4)}
.tool{padding:var(--sp-5)}
.tool .ds-icon{color:var(--c-accent);margin-bottom:var(--sp-3)}
.tool .name{font-family:var(--font-mono);font-size:var(--fs-14);font-weight:var(--fw-semi);color:var(--c-txt);display:block;margin-bottom:var(--sp-1)}
.tool p{margin:0;font-size:var(--fs-13);color:var(--c-txt-2)}
.tool .ds-badge{float:right}

/* ---------- security band (dark) ---------- */
.sec-dark{background:var(--c-bg-grad),var(--c-bg);color:var(--c-txt)}
.sec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.sec-card{padding:var(--sp-5)}
.sec-card .ds-icon{color:var(--c-accent);margin-bottom:var(--sp-3)}
.sec-card h3{font-family:var(--font-display);font-size:var(--fs-16);margin:0 0 var(--sp-2)}
.sec-card p{margin:0;font-size:var(--fs-13);color:var(--c-txt-2)}
.proto-chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:center;margin-top:var(--sp-10)}
.sec-shot{max-width:860px;margin:var(--sp-10) auto 0}
.sec-shot figcaption{font-size:var(--fs-13);color:var(--c-muted);margin-top:var(--sp-2);text-align:center}
@media (max-width:900px){.sec-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.sec-grid{grid-template-columns:1fr}}

/* ---------- product shots ---------- */
.shots{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6);align-items:start}
.frame{border:1px solid var(--c-line);border-radius:var(--r-lg);overflow:hidden;background:var(--c-surface);box-shadow:var(--sh-2)}
.frame .bar{display:flex;gap:6px;padding:9px 12px;border-bottom:1px solid var(--c-line);background:var(--c-surface-2)}
.frame .bar i{width:9px;height:9px;border-radius:50%;background:var(--c-line-2)}
.frame img{display:block;width:100%;height:auto}
.shots figcaption{font-size:var(--fs-13);color:var(--c-muted);margin-top:var(--sp-2);text-align:center}
.shots figure{margin:0}
.shots figure.wide{grid-column:1/-1}
.shots figcaption .ds-code{font-size:var(--fs-12)}
@media (max-width:900px){.shots{grid-template-columns:1fr}}

/* ---------- use cases ---------- */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.case{padding:var(--sp-5)}
.case .ds-icon{color:var(--c-accent);margin-bottom:var(--sp-3)}
.case h3{font-family:var(--font-display);font-size:var(--fs-18);margin:0 0 var(--sp-2)}
.case p{margin:0 0 var(--sp-3);font-size:var(--fs-14);color:var(--c-txt-2)}
.case .prompt{font-size:var(--fs-13);color:var(--c-txt-2);background:var(--c-surface-2);border:1px solid var(--c-line);
  border-radius:var(--r);padding:9px 12px;margin-top:var(--sp-2);font-style:italic}
.case .prompt::before{content:"“"}
.case .prompt::after{content:"”"}
@media (max-width:900px){.cases{grid-template-columns:1fr}}

/* ---------- get started ---------- */
.gs-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--sp-10);align-items:center}
.gs-grid > *{min-width:0}
.gs-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-4)}
.gs-list li{display:flex;gap:var(--sp-3);font-size:var(--fs-15);color:var(--c-txt-2)}
.gs-list .ds-icon{color:var(--c-good);flex:none;margin-top:2px}
.gs-list b{color:var(--c-txt)}
.snippet{position:relative}
.snippet .ds-pre{margin:0;box-shadow:var(--sh-2)}
.snippet .copy{position:absolute;top:10px;right:10px}
@media (max-width:900px){.gs-grid{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:var(--sp-3)}
.faq details{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:0;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);font-family:var(--font-display);font-weight:var(--fw-semi);font-size:var(--fs-15)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ds-icon{flex:none;color:var(--c-muted);transition:transform var(--t)}
.faq details[open] summary .ds-icon{transform:rotate(45deg)}
.faq .a{padding:0 var(--sp-5) var(--sp-4);color:var(--c-txt-2);font-size:var(--fs-14);line-height:var(--lh)}
.faq .a code{font-family:var(--font-mono);font-size:.9em;background:var(--c-surface-2);border:1px solid var(--c-line);border-radius:6px;padding:1px 5px}

/* ---------- final CTA ---------- */
.final{text-align:center}
.final h2{font-family:var(--font-display);font-size:clamp(var(--fs-24),4vw,var(--fs-44));letter-spacing:-.02em;line-height:var(--lh-tight);margin:0 0 var(--sp-4)}
.final p{color:var(--c-txt-2);font-size:var(--fs-16);max-width:56ch;margin:0 auto var(--sp-6)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--c-line);padding-block:var(--sp-8);background:var(--c-surface)}
.foot{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;font-size:var(--fs-13);color:var(--c-muted)}
.foot a{color:var(--c-txt-2);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.foot a:hover{color:var(--c-accent)}
.foot .right{margin-left:auto;display:flex;gap:var(--sp-4);flex-wrap:wrap}

/* ---------- reveal on scroll (JS adds .js to <html>) ---------- */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity var(--d-5) var(--e-entrance),transform var(--d-5) var(--e-entrance)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* lightbox comes from the design system (.ds-lightbox in ds/base.css) — imgs carry data-ds-lightbox */
}