/* Quixo — Agent brand shell (logo + fonts from agent.quixomarketing.com) */

:root,html[data-theme="light"]{
  --brand-blue:#0842A0;
  --brand-ink:#1F1F1F;
  --shell:#FFFFFF;
  --shell-2:#F4F7FC;
  --surface:#FFFFFF;
  --panel:#EEF3FA;
  --panel2:#E4EBF7;
  --hover:#E4EBF7;
  --ink:#13253F;
  --ink-strong:#1F1F1F;
  --muted:rgba(10,22,40,.58);
  --line:rgba(10,37,64,.10);
  --line2:rgba(8,66,160,.28);
  --accent:#0842A0;
  --accent-ink:#FFFFFF;
  --copper:#0A2540;
  --copper2:#0842A0;
  --navy:#0A2540;
  --navy-deep:#061833;
  --gold:#0842A0;
  --gold-2:#0B3D91;
  --gold-deep:#061833;
  --parchment:#0A1628;
  --charcoal:#1F1F1F;
  --grad:linear-gradient(135deg,#0A2540 0%,#0842A0 55%,#0B3D91 100%);
  --dash-grad:linear-gradient(155deg,#FFFFFF 0%,#F4F7FC 32%,#C8D7F0 68%,#0A2540 100%);
  --dash-soft:linear-gradient(160deg,#FFFFFF 0%,#F4F7FC 40%,#D7E3F6 100%);
  --dash-card:linear-gradient(150deg,#FFFFFF 0%,#E8F0FA 50%,#B8CAE8 100%);
  /* Attractive light washes (bold hues, soft opacity — never on the logo) */
  --wash-blue:rgba(8,66,160,.10);
  --wash-violet:rgba(124,108,240,.12);
  --wash-coral:rgba(234,88,12,.10);
  --wash-amber:rgba(217,119,6,.11);
  --sans:"Inter","Noto Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Inter Tight","Inter","Noto Sans Arabic",var(--sans);
  --mono:"Roboto Mono",ui-monospace,monospace;
  --radius:16px;
  --radius-pill:980px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-apple:cubic-bezier(.25,.1,.25,1);
  --glass:#fff;
  --glass-border:var(--line);
  --glass-shadow:0 1px 2px rgba(10,37,64,.06),0 8px 24px rgba(8,66,160,.06);
  --appbar-h:64px;
}

html[data-theme="dark"]{
  --shell:#1F1F1F;
  --surface:#292A2D;
  --panel:#292A2D;
  --panel2:#13253F;
  --hover:#394457;
  --ink:#E8EAED;
  --ink-strong:#FFFFFF;
  --muted:#9AA0A6;
  --line:#13253F;
  --line2:#394457;
  --accent:#8AB4F8;
  --accent-ink:#062E6F;
  --copper:#8AB4F8;
  --copper2:#8AB4F8;
  --navy:#8AB4F8;
  --navy-deep:#1F1F1F;
  --gold:#8AB4F8;
  --gold-2:#87A9FF;
  --grad:#8AB4F8;
  --dash-grad:#292A2D;
  --dash-soft:#1F1F1F;
  --dash-card:#292A2D;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  background:
    radial-gradient(ellipse 70% 55% at 8% -10%, var(--wash-blue), transparent 55%),
    radial-gradient(ellipse 55% 45% at 100% 8%, var(--wash-violet), transparent 50%),
    radial-gradient(ellipse 50% 40% at 85% 100%, var(--wash-coral), transparent 55%),
    radial-gradient(ellipse 40% 35% at 0% 80%, var(--wash-amber), transparent 50%),
    var(--shell);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  font-weight:400;
  line-height:1.55;
  letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
.qm-theme-toggle,.theme-toggle,.theme-tab{display:none!important}
img,svg{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:#C8D7F0;color:var(--ink-strong)}

.wrap{width:min(1120px,calc(100% - 48px));margin:0 auto}
@media(min-width:1200px){.wrap{width:min(1120px,calc(100% - 96px))}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* —— Google app bar (Chrome Web Store / AI Studio) —— */
.top,.top.dock{
  position:fixed;z-index:80;
  top:0;left:0;right:0;
  width:100%;
  transform:none!important;
  opacity:1!important;
  animation:none!important;
  background:var(--surface);
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:none;
  transition:box-shadow .2s var(--ease);
}
.top.on{box-shadow:0 1px 2px rgba(60,64,67,.08),0 2px 6px rgba(60,64,67,.06)}
.top .bar{
  width:min(1280px,calc(100% - 32px));
  margin:0 auto;
  min-height:var(--appbar-h);
  display:flex;
  align-items:center;
  gap:8px;
  padding:0;
  position:relative;
}
.logo{
  display:inline-flex;align-items:center;gap:10px;
  height:48px;padding:0 8px 0 0;
  color:var(--ink-strong);text-decoration:none!important;
}
.logo:hover{opacity:.9;text-decoration:none!important}
.logo .mark,.logo img.mark,.logo svg.mark{
  display:block!important;width:28px;height:28px;flex:0 0 28px;
}
.logo .word{
  display:inline-flex;align-items:baseline;gap:.28em;
  font-family:var(--display);font-weight:500;
  font-size:20px;letter-spacing:-0.02em;line-height:1.15;
  white-space:nowrap;
}
.logo .word .name{color:#0842A0;font-weight:600}
.logo .word .prod{color:#1F1F1F;font-weight:500}
.logo .word .prod,.hero-brand .word .prod{display:inline!important}

.burger{
  display:none;width:48px;height:48px;border-radius:50%;
  position:relative;margin-left:auto;
}
.burger:hover{background:rgba(60,64,67,.08)}
.burger span{
  position:absolute;left:14px;right:14px;height:2px;background:var(--ink-strong);border-radius:1px;
}
.burger span:first-child{top:18px}
.burger span:last-child{top:28px}

.nav{
  display:flex;align-items:center;gap:4px;margin-left:auto;
}
.nav a{
  padding:0 12px;min-height:40px;
  color:var(--ink-strong);opacity:1;
  font-size:14px;font-weight:500;border-radius:20px;
  display:inline-flex;align-items:center;
  border:0;text-decoration:none!important;
  transition:background .15s var(--ease), color .15s;
}
.nav a:hover{background:rgba(60,64,67,.08);text-decoration:none!important}
.nav .signin{
  margin-left:4px;
  color:#0842A0;font-weight:500;
}
.nav .signin:hover{background:#E4EBF7}
.nav .cta{
  margin-left:8px;
  background:var(--grad)!important;
  color:#fff!important;
  font-weight:500;
  border-radius:12px!important;
  padding:0 18px!important;
  box-shadow:0 8px 22px rgba(8,66,160,.22)!important;
}
.nav .cta:hover{opacity:.92;filter:none!important;transform:none!important}

.lang-switch{
  display:inline-flex;align-items:center;gap:0;
  margin-inline-start:8px;padding:2px;
  border:1px solid var(--line);border-radius:8px;background:var(--surface);
}
.lang-btn{
  min-width:36px;min-height:28px;padding:0 8px;border-radius:6px;
  font-size:12px;font-weight:500;color:var(--muted);
}
.lang-btn.on{background:#E4EBF7;color:#0B3D91}
.lang-btn:hover:not(.on){background:rgba(60,64,67,.06);color:var(--ink-strong)}

@media(max-width:900px){
  .burger{display:inline-flex;align-items:center;justify-content:center;margin-left:auto}
  html[dir="rtl"] .burger{margin-left:0;margin-right:auto}
  .nav{
    display:none;position:fixed;inset:var(--appbar-h) 0 0 0;
    background:var(--surface);border-bottom:0;
    flex-direction:column;align-items:stretch;padding:8px 16px 24px;gap:4px;
    margin:0;box-shadow:none;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    z-index:79;
  }
  .nav.open{display:flex;z-index:200}
  .nav a{border-radius:8px;min-height:48px;padding:12px 14px;width:100%;justify-content:flex-start}
  .nav .cta,.nav .signin{margin-left:0;margin-right:0;justify-content:center}
  .nav .lang-switch{margin:8px 0;align-self:flex-start}
  .wrap{width:min(1120px,calc(100% - 32px))}
  .top .bar{width:min(1280px,calc(100% - 32px))}
  body.nav-open{overflow:hidden}
  body.nav-open .top{z-index:200}
}

/* —— Brand buttons (Agent CTA gradient) —— */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:40px;padding:0 24px;border-radius:12px;
  background:var(--grad);
  color:#fff;font-family:var(--sans);font-weight:500;font-size:14px;
  letter-spacing:-0.01em;text-transform:none;text-decoration:none!important;
  border:1px solid transparent;
  transition:opacity .15s, box-shadow .15s, color .15s;
  box-shadow:0 8px 22px rgba(8,66,160,.22);
  cursor:pointer;
}
.btn:hover{opacity:.92;text-decoration:none!important;transform:none;filter:none}
.btn:active{opacity:.85}
.btn.ghost{
  background:transparent;
  border:1px solid var(--line);
  color:#0842A0;
  box-shadow:none;
}
.btn.ghost:hover{background:#E4EBF7;border-color:#C8D7F0;color:#0B3D91;transform:none;opacity:1}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* —— Type (Material / AI Studio density) —— */
.kick{
  font-size:12px;font-weight:500;
  letter-spacing:.02em;text-transform:none;color:#0842A0;
  margin-bottom:8px;
}
h1{
  font-family:var(--display);
  font-weight:400;font-size:clamp(28px,4vw,36px);
  line-height:1.2;letter-spacing:0;margin-bottom:12px;
  color:var(--ink-strong);
}
h1 em,h2 em{font-style:normal;color:#0842A0;font-weight:400}
h2{
  font-family:var(--display);
  font-weight:400;font-size:clamp(22px,2.6vw,28px);
  letter-spacing:0;line-height:1.25;margin-bottom:8px;
  color:var(--ink-strong);
}
h3{font-weight:500;font-size:16px;letter-spacing:0;color:var(--ink-strong)}
.lede{font-size:14px;font-weight:400;color:var(--muted);max-width:40em;line-height:1.55}

/* —— Hero — AI Studio welcome surface —— */
.hero,.hero.hero-blend{
  position:relative;min-height:auto;
  display:block;
  overflow:hidden;isolation:isolate;
  background:
    radial-gradient(ellipse 70% 60% at 100% 0%, var(--wash-blue), transparent 55%),
    radial-gradient(ellipse 50% 45% at 0% 100%, var(--wash-violet), transparent 50%),
    radial-gradient(ellipse 40% 40% at 60% 100%, var(--wash-amber), transparent 45%),
    linear-gradient(180deg,#FFFFFF 0%,#F4F7FC 100%);
  padding:calc(var(--appbar-h) + 48px) 0 56px;
}
.hero-media,.hero-spot{display:none!important}
.hero .inner,.hero-blend .inner{
  max-width:1120px;
  width:min(1120px,calc(100% - 48px));
  margin:0 auto;
  padding:0;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);
  gap:40px;
  align-items:center;
  position:relative;z-index:2;
}
/* Inner pages: single-column page hero (no helper strip) */
.hero:not(.hero-blend) .inner{
  grid-template-columns:1fr;
  max-width:720px;
  margin-inline:auto 0;
}
.hero:not(.hero-blend){min-height:auto;padding:calc(var(--appbar-h) + 48px) 0 40px}
.hero:not(.hero-blend) h1{max-width:18ch}
.hero-blend .hero-copy{max-width:560px}
.hero-brand{
  display:none; /* brand already in app bar — Chrome Web Store style */
}
.hero-blend h1,.hero h1{
  color:var(--ink-strong);
  font-size:clamp(28px,4vw,40px);
  max-width:14ch;
  text-shadow:none;
  opacity:1;transform:none;animation:none;
}
.hero-blend .lede,.hero .lede{
  color:var(--muted);
  font-size:16px;
  line-height:1.5;
  max-width:36em;
  opacity:1;transform:none;animation:none;
}
.hero .btnrow{opacity:1;transform:none;animation:none;margin-top:28px}

/* Agents → Material helper cards (AI Studio tools strip) */
.agent-stage{
  position:relative;z-index:2;
  min-height:auto;
  display:block;
  opacity:1;transform:none;animation:none;
  perspective:none;
}
.agents-scene{
  width:100%;height:auto;
  display:flex;flex-direction:column;gap:8px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
  box-shadow:var(--glass-shadow);
  transform:none;
  overflow:visible;
  max-height:none;
}
.tools-label{
  margin:4px 8px 8px;
  font-size:12px;font-weight:500;color:var(--muted);
  letter-spacing:.02em;
}
.agent{
  --i:0;
  width:100%;
  display:flex;align-items:center;gap:12px;
  padding:12px;
  border-radius:12px;
  background:var(--shell);
  border:1px solid transparent;
  transform:none!important;
  animation:none!important;
  transition:background .15s, border-color .15s;
}
.agent:hover{background:#E4EBF7;border-color:#C8D7F0}
.agent-rig{
  position:relative;width:40px;height:40px;flex:none;
  transform:none!important;
}
.agent-halo,.agent-torso,.agent-base{display:none!important}
.agent-head{
  position:absolute;inset:0;margin:0;width:40px;height:40px;
  border-radius:10px;
  background:#E4EBF7;
  border:1px solid #C8D7F0;
  box-shadow:none;
  transform:none;
}
.agent-head i{
  position:absolute;top:14px;width:6px;height:6px;border-radius:50%;
  background:#0842A0;box-shadow:none;animation:none;
}
.agent-head i:first-child{left:10px}
.agent-head i:nth-child(2){right:10px}
.agent-head b{
  position:absolute;left:10px;right:10px;bottom:10px;height:3px;
  border-radius:2px;background:rgba(26,115,232,.35);
}
.agent-meta{min-width:0;flex:1}
.agent-role{
  margin:0;text-align:left;
  font-size:14px;font-weight:500;color:var(--ink-strong);
  background:none;border:0;padding:0;box-shadow:none;border-radius:0;
}
.agent-desc{
  margin:2px 0 0;font-size:12px;line-height:1.4;color:var(--muted);
}

@media(max-width:900px){
  .hero,.hero.hero-blend{padding:calc(var(--appbar-h) + 28px) 0 40px;overflow:visible}
  .hero .inner,.hero-blend .inner{
    grid-template-columns:1fr;
    width:min(1120px,calc(100% - 32px));
    gap:24px;
  }
  .agent-stage{order:1;min-height:auto;margin:0}
  .agents-scene{flex-direction:column;height:auto;overflow:visible}
  .agent{width:100%}
  .hero-blend h1{font-size:28px;max-width:12ch}
  .hero-blend .lede{font-size:14px}
  .hero-copy,.agent-stage{width:100%;max-width:100%}
  .btnrow{width:100%}
  .btnrow .btn{flex:1 1 auto;min-width:0;text-align:center}
}

/* —— Sections —— */
.section{
  padding:56px 0;
  position:relative;
  background:var(--shell);
}
.section .head{text-align:left;margin-bottom:28px;max-width:640px}
.section .head .lede{margin-top:8px}

/* Explainer — Chrome Web Store style cards */
.explainer-strip{background:var(--shell)}
.explainer-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px;
}
@media(max-width:960px){.explainer-grid{grid-template-columns:repeat(2,1fr)}}
.explainer-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  box-shadow:none;
  transition:box-shadow .2s var(--ease), border-color .2s;
  cursor:default;
  min-width:0;
}
.explainer-card:hover{
  transform:none;
  box-shadow:var(--glass-shadow);
  border-color:#C2C7CC;
}
.explainer-card .pic,
.explainer-card picture{
  display:block;width:100%;
  background:var(--panel2);
  overflow:hidden;
}
.explainer-card img{
  width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;object-position:center;
  border-radius:0;border:0;box-shadow:none;
  filter:saturate(.85) contrast(1.02);
}
.explainer-card:hover img{transform:none;filter:saturate(.85) contrast(1.02);box-shadow:none}
.explainer-card h3{margin:14px 16px 6px;font-size:16px;font-weight:500}
.explainer-card p{margin:0 16px 16px;color:var(--muted);font-size:13px;line-height:1.45}

/* Mobile: horizontal snap rail (Play Store / Chrome Web Store) */
@media(max-width:640px){
  .explainer-strip{overflow-x:clip}
  .explainer-strip .wrap{
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;
    box-sizing:border-box;
  }
  .explainer-strip .head{
    width:auto;
    max-width:none;
    margin:0 16px 0;
    padding:0;
  }
  .explainer-grid{
    display:flex;
    grid-template-columns:none;
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scroll-padding-inline:16px;
    padding:4px 16px 16px;
    margin:0;
    scrollbar-width:none;
    max-width:100%;
  }
  .explainer-grid::-webkit-scrollbar{display:none}
  .explainer-card{
    flex:0 0 min(78vw,300px);
    width:min(78vw,300px);
    max-width:min(78vw,300px);
    scroll-snap-align:start;
    border-radius:14px;
  }
  .explainer-card img{
    aspect-ratio:4/3;
    max-height:180px;
    object-position:center 30%;
  }
  .explainer-card h3{margin:12px 14px 4px;font-size:15px}
  .explainer-card p{margin:0 14px 14px;font-size:12px;line-height:1.4;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}

/* Onboarding steps */
.onboard-section{background:var(--surface);border-block:1px solid var(--line)}
.onboard-steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:8px;list-style:none;padding:0;
}
@media(max-width:960px){.onboard-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.onboard-steps{grid-template-columns:1fr}}
.onboard-step{
  background:var(--shell);
  border:1px solid var(--line);
  border-radius:16px;
  padding:20px 18px;
}
.onboard-ico{display:block;color:#0842A0;font-size:16px;margin-bottom:10px}
.onboard-step h3{font-size:15px;margin-bottom:6px;font-weight:500}
.onboard-step p{color:var(--muted);font-size:13px;line-height:1.45;margin:0}
.social-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.social-chips span{
  font-size:12px;font-weight:500;color:#0B3D91;
  background:#E4EBF7;border:0;border-radius:8px;padding:4px 10px;
}

/* Mix helpers */
.mix-section{background:var(--shell)}
.mix-hint{margin-top:8px;font-size:13px;color:var(--muted)}
.mix-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
@media(max-width:900px){.mix-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.mix-grid{grid-template-columns:1fr}}
.mix-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  cursor:pointer;
  transition:border-color .15s, background .15s, box-shadow .15s;
  display:flex;flex-direction:column;gap:6px;
  position:relative;
  box-shadow:none;
}
.mix-card:hover{transform:none;box-shadow:var(--glass-shadow);border-color:#C2C7CC}
.mix-card.on{
  border-color:#0842A0;
  background:#E4EBF7;
  box-shadow:none;
}
.mix-check{
  width:18px;height:18px;border-radius:50%;border:2px solid var(--line);
  position:absolute;top:16px;right:16px;
}
.mix-card.on .mix-check{border-color:#0842A0;background:#0842A0}
.mix-card.on .mix-check::after{
  content:"";position:absolute;left:4px;top:1px;width:6px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.mix-card h3{font-size:15px;margin:0 28px 0 0;font-weight:500}
.mix-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.mix-summary{
  margin-top:20px;padding:16px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
}
.mix-count{font-size:14px;color:var(--ink);margin:0}
.mix-count b{color:#0842A0;font-size:20px;font-weight:500}
.mix-list{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.mix-list li{
  font-size:12px;font-weight:500;color:#0B3D91;
  background:#E4EBF7;border-radius:8px;padding:4px 10px;
}
.mix-empty{color:#0842A0;font-size:13px;margin-top:8px}

/* Dashboard phone */
.dash-section{background:var(--surface);border-block:1px solid var(--line)}
.product{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
}
@media(max-width:900px){.product{grid-template-columns:1fr;gap:28px}}
.dash-device{
  width:min(320px,100%);margin:0 auto;
  background:#1F1F1F;border-radius:28px;padding:12px;
  box-shadow:var(--glass-shadow);
}
.dash-device::before{display:none}
.dash-screen{
  background:#fff;border-radius:20px;padding:16px;min-height:420px;
  display:flex;flex-direction:column;gap:12px;
}
.dash-top{
  display:flex;align-items:center;justify-content:space-between;
  font-size:12px;font-weight:500;color:var(--muted);
}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:#1E8E3E}
.dash-brand{font-size:16px}
.dash-brand .name{color:#0842A0;font-weight:600}
.dash-brand .prod{color:#1F1F1F;font-weight:500}
.dash-panels{display:flex;flex-direction:column;gap:8px;flex:1}
.dash-panel{
  background:var(--shell);border:1px solid var(--line);border-radius:12px;padding:12px;
}
.dash-panel.on{background:#E4EBF7;border-color:#C8D7F0}
.dash-panel span,.dash-panel small{display:block;color:var(--muted);font-size:12px}
.dash-panel b{display:block;font-size:22px;font-weight:400;color:var(--ink-strong);margin:4px 0}
.dash-foot{display:flex;flex-direction:column;gap:8px}
.dash-social{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.dash-social i{width:8px;height:8px;border-radius:50%;background:#0842A0;display:inline-block}
.dash-week{font-size:11px;color:var(--muted)}
.dash-week .bars{display:flex;gap:4px;margin-top:6px;align-items:flex-end;height:28px}
.dash-week .bars i{flex:1;background:#87A9FF;border-radius:2px;display:block;height:40%}
.dash-week .bars i:nth-child(2){height:55%}
.dash-week .bars i:nth-child(3){height:70%}
.dash-week .bars i:nth-child(4){height:48%}
.dash-week .bars i:nth-child(5){height:85%}
.dash-week .bars i:nth-child(6){height:62%}
.dash-week .bars i:nth-child(7){height:90%;background:#0842A0}

/* Project / stand out */
.project-section{background:var(--shell)}
.project-stage{
  --p:.62;margin-top:20px;
  display:grid;grid-template-columns:1.4fr .9fr;gap:20px;align-items:stretch;
}
@media(max-width:900px){.project-stage{grid-template-columns:1fr}}
.project-field{
  position:relative;min-height:300px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);
  overflow:hidden;padding:24px;display:grid;grid-template-columns:1.1fr .9fr;gap:16px;
}
.project-field::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(60,64,67,.04) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg, rgba(60,64,67,.03) 0 1px, transparent 1px 48px);
  mask-image:linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.comp-lane,.you-lane{position:relative;z-index:1;display:flex;align-items:flex-end;gap:12px;min-height:240px}
.comp-lane{opacity:.85}
.comp{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;height:100%}
.comp i{
  display:block;width:100%;height:calc(var(--base) * 200px);
  border-radius:10px 10px 5px 5px;
  border:1px solid transparent;
  transition:height .45s var(--ease), opacity .3s, filter .3s;
  position:relative;
  overflow:hidden;
}
/* Distinct competitor pillars — not matching gray blocks */
.comp--agency i{
  background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.55) 0 6px, transparent 6px 12px),
    linear-gradient(180deg, #A8B4C4, #6E7C8F);
  border-color:#8A97A8;
}
.comp--inhouse i{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.4) 0 3px, transparent 3px 9px),
    linear-gradient(180deg, #D4B896, #9A7B55);
  border-color:#B8956A;
}
.comp--freelance i{
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.45) 0 18%, transparent 19%),
    linear-gradient(180deg, #C9A8C0, #8E6A8A);
  border-color:#A67FA0;
  border-style:dashed;
}
.project-stage[data-active="1"] .comp i{height:calc(var(--base) * 200px * (1 - var(--p) * .18));opacity:.72;filter:saturate(.85)}
.comp span{font-size:11px;font-weight:500;color:var(--muted);text-align:center;line-height:1.25}
.you-lane{justify-content:center}
.you-pillar{position:relative;width:min(160px,100%);height:100%;display:flex;align-items:flex-end;justify-content:center}
.beam{
  position:absolute;left:50%;bottom:0;width:140%;height:calc(40% + var(--p) * 55%);
  transform:translateX(-50%);
  background:linear-gradient(180deg, transparent, rgba(26,115,232,.12));
  clip-path:polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  transition:height .45s var(--ease);pointer-events:none;
}
.you-glow{display:none}
.you-fill{
  width:100%;height:calc(28% + var(--p) * 58%);min-height:80px;
  border-radius:12px 12px 6px 6px;
  background:linear-gradient(180deg,#87A9FF,#0842A0);
  border:0;box-shadow:none;
  transform:none;transition:height .45s var(--ease);
}
.you-tag{
  position:absolute;left:50%;bottom:calc(28% + var(--p) * 58% + 10px);
  transform:translateX(-50%);width:max-content;max-width:160px;text-align:center;
  transition:bottom .45s var(--ease);
}
.you-tag .name{color:#0842A0;font-weight:500;font-size:12px}
.you-tag strong{display:block;margin-top:2px;font-weight:500;font-size:14px;color:var(--ink-strong)}
.you-tag em{display:inline-block;margin-top:4px;font-style:normal;font-weight:500;font-size:12px;color:#0842A0}
.project-control{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:8px 4px}
.project-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.project-meta span{font-size:13px;font-weight:400;color:var(--muted)}
.project-meta b{font-weight:400;font-size:24px;color:#0842A0}
.project-control input[type="range"]{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border:0;border-radius:2px;
  background:linear-gradient(90deg,#0842A0 0%,#0842A0 var(--p), #E8EAED var(--p), #E8EAED 100%);
  padding:0;outline:none;cursor:pointer;
}
.project-control input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:#0842A0;border:3px solid #fff;
  box-shadow:0 1px 3px rgba(60,64,67,.3);cursor:grab;
}
.project-control input[type="range"]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:#0842A0;border:3px solid #fff;cursor:grab;
}
.project-hint{margin:0;font-size:13px;line-height:1.45;color:var(--muted);max-width:32em}

/* Outcomes */
.outcomes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
@media(max-width:760px){.outcomes{grid-template-columns:1fr}}
.outcome{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;
}
.outcome .n{font-size:32px;font-weight:400;color:#0842A0;margin-bottom:8px}
.outcome .n em{font-style:normal;color:#0842A0;font-weight:400}
.outcome p{color:var(--muted);font-size:13px;line-height:1.45;margin:0}

/* Close / CTA band — Material tonal surface */
.closeband{
  margin:0 auto;width:min(1120px,calc(100% - 48px));
  padding:40px 32px;border-radius:16px;text-align:left;
  border:1px solid #C8D7F0;
  background:#E4EBF7;
  color:var(--ink-strong);
  box-shadow:none;
}
@media(max-width:640px){.closeband{width:min(1120px,calc(100% - 32px));padding:28px 20px}}
.closeband h2,.closeband .lede{color:var(--ink-strong)}
.closeband .lede{opacity:1;color:var(--muted)!important;margin:0 0 8px}
.closeband .kick{color:#0842A0}
.closeband .btn.ghost{
  background:#fff;border-color:var(--line);color:#0842A0;
}
.closeband .btn.ghost:hover{background:#F4F7FC;border-color:#C2C7CC}

/* Pricing / cards / misc pages */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.price{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:20px;display:flex;flex-direction:column;gap:10px;box-shadow:none;
}
.price:hover{border-color:#C2C7CC;box-shadow:var(--glass-shadow);transform:none;background:var(--surface)}
.price.featured{border-color:#0842A0;background:#E4EBF7;color:var(--ink-strong)}
.price.featured .amt,.price.featured h3,.price.featured p{color:var(--ink-strong)}
.price .amt{font-size:28px;font-weight:400;color:var(--ink-strong)}
.price p{color:var(--muted);font-size:13px;flex:1}
.price .btnrow{margin-top:8px}

details{border-bottom:1px solid var(--line);padding:14px 0}
summary{
  cursor:pointer;font-weight:500;min-height:40px;
  display:flex;align-items:center;list-style:none;color:var(--ink-strong);font-size:14px;
}
summary::-webkit-details-marker{display:none}
details p{margin-top:8px;color:var(--muted);font-size:14px;max-width:48em}

.steps{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.step{display:flex;gap:12px;align-items:flex-start}
.step .n{
  width:28px;height:28px;border-radius:50%;flex:none;
  background:#E4EBF7;border:0;color:#0B3D91;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;
}
.step p{color:var(--muted);font-size:14px;margin-top:2px;max-width:40em}
.grid{display:grid;gap:12px;margin-top:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.g2,.g3{grid-template-columns:1fr}}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:18px;color:var(--ink);box-shadow:none;
  transition:box-shadow .2s, border-color .2s;
}
a.card:hover{transform:none;box-shadow:var(--glass-shadow);border-color:#C2C7CC;text-decoration:none}
.card p{color:var(--muted);font-size:13px;margin-top:6px}
.band{
  background:#E4EBF7;border:1px solid #C8D7F0;border-radius:16px;
  padding:32px 24px;text-align:left;color:var(--ink-strong);
}
.band h2,.band p,.band .lede{color:var(--ink-strong)}
.page-hero{padding:calc(var(--appbar-h) + 40px) 0 32px}

input,textarea,select{
  background:var(--surface);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:10px 12px;font:inherit;
  display:block;width:100%;max-width:100%;box-sizing:border-box;
}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:#0842A0;box-shadow:0 0 0 2px #C8D7F0;
}

/* Contact / message forms — stacked fields, never inline staircase */
.form{
  display:grid;
  gap:16px;
  max-width:560px;
  width:100%;
  margin:0;
  box-sizing:border-box;
}
.form > div{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  min-width:0;
  width:100%;
}
.form label{
  display:block;
  font-size:13px;
  font-weight:500;
  color:var(--ink-strong,#1F1F1F);
  margin:0;
}
.form input,
.form textarea,
.form select{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  background:#FFFFFF;
  border:1px solid #C2C7CC;
  border-radius:10px;
  padding:12px 14px;
  font:inherit;
  color:var(--ink-strong,#1F1F1F);
}
.form textarea{min-height:120px;resize:vertical}
.form .btn,
.form button.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  max-width:100%;
  margin-top:4px;
  background:#0842A0;
  color:#FFFFFF;
  border:0;
}
.form .msg{min-height:1.2em;font-size:14px;color:var(--muted)}
@media(max-width:640px){
  .form{max-width:100%}
  .form .btn,.form button.btn{width:100%}
}

/* Wordmark colors */
.logo .word .name,
.hero-brand .word .name,
.qm-lockup .name,
.qm-footer-brand .name{color:#0842A0!important;font-weight:600}
.logo .word .prod,
.hero-brand .word .prod,
.qm-lockup .prod,
.qm-footer-brand .prod{color:#1F1F1F!important;font-weight:500}
.logo svg:not(.mark),.hero-brand svg:not(.mark),.qm-lockup svg:not(.mark),.qm-footer-brand svg:not(.mark){display:none!important}
.logo .mark,.hero-brand .mark,.qm-lockup .mark,.qm-footer-brand .mark,
.hero-brand-lockup .mark{display:block!important;width:28px;height:28px;flex:0 0 28px}
.hero-brand,.hero-brand-lockup,.qm-lockup,.qm-footer-brand{display:inline-flex;align-items:center;gap:10px}
.orb-stage,.orb{display:none!important}

/* Soft motion — Google-like fades */
.rv{
  opacity:0;transform:translate3d(0,12px,0);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.rv.in{opacity:1;transform:none}
.explainer-card.rv{transition-delay:calc(var(--d, 0) * 40ms)}
.explainer-grid .explainer-card:nth-child(1){--d:0}
.explainer-grid .explainer-card:nth-child(2){--d:1}
.explainer-grid .explainer-card:nth-child(3){--d:2}
.explainer-grid .explainer-card:nth-child(4){--d:3}
.explainer-grid .explainer-card:nth-child(5){--d:4}
.explainer-grid .explainer-card:nth-child(6){--d:5}

.stage{display:flex;gap:8px;min-height:280px}
.stage-pane{
  flex:1;position:relative;overflow:hidden;border-radius:16px;
  border:1px solid var(--line);background:var(--surface);
  transition:flex .4s var(--ease)!important;
  text-decoration:none!important;color:inherit;
}
.stage-pane:hover,.stage-pane:focus-visible,.stage-pane.active{flex:1.6}
.stage-pane .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.9}
.stage-pane .shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(32,33,36,.75))}
.stage-pane .copy{position:relative;z-index:1;padding:20px;color:#fff;display:flex;flex-direction:column;height:100%;justify-content:flex-end}
.stage-pane .num{font-size:12px;font-weight:500;opacity:.85;margin-bottom:6px}
.stage-pane h3{font-size:16px;margin:0;font-weight:500;color:#fff}
.stage-pane p{max-height:0;opacity:0;overflow:hidden;margin:8px 0 0;font-size:13px;transition:max-height .35s, opacity .35s}
.stage-pane:hover p,.stage-pane.active p{max-height:80px;opacity:.92}
.stage-pane .go{opacity:0;margin-top:10px;font-size:13px;font-weight:500}
.stage-pane:hover .go,.stage-pane.active .go{opacity:1}
@media(max-width:860px){
  .stage{flex-direction:column;height:auto}
  .stage-pane{min-height:120px}
  .stage-pane p,.stage-pane .go{max-height:80px;opacity:1}
}


/* Mosaic — Chrome Web Store style tile grid */
.mosaic{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px;
}
@media(max-width:900px){.mosaic{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.mosaic{grid-template-columns:1fr}}
.mosaic .tile{
  min-height:160px;text-decoration:none!important;color:inherit;
  transition:box-shadow .2s, border-color .2s;
}
.mosaic .tile:hover{box-shadow:var(--glass-shadow);border-color:#C2C7CC;text-decoration:none!important}

.tile{
  position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--line);
  background:var(--surface);padding:18px;min-height:140px;
}
.tile .viz{
  position:absolute;inset:0;opacity:.28;
  background-size:cover;background-position:center;
  pointer-events:none;z-index:0;
}
.tile .label,.tile h3,.tile p{position:relative;z-index:1}
.tile .label{font-size:12px;color:#0842A0;margin-bottom:6px;font-weight:500}
.tile h3{margin-bottom:4px}
.tile p{color:var(--muted);font-size:13px;max-width:24ch}
@media(max-width:560px){
  .mosaic .tile{min-height:132px;padding:16px}
  .tile .viz{opacity:.22}
  .tile p{max-width:none}
}

/* Phone mock — keep inside viewport on small screens */
.dash-device{width:min(280px,86vw);margin:0 auto}
@media(max-width:560px){
  .dash-screen{min-height:360px;padding:14px}
  .project-field{
    grid-template-columns:1fr;min-height:auto;padding:16px;
  }
  .comp-lane,.you-lane{min-height:180px}
}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .agent,.agent-halo,.agent-head i{animation:none!important}
  .explainer-grid{scroll-snap-type:none}
}


/* —— Global mobile alignment —— */
@media(max-width:640px){
  html,body{max-width:100%;overflow-x:clip}
  main,header,footer,.qm-footer,.section,.wrap{max-width:100%;overflow-x:clip;min-width:0}
  .section{padding:40px 0}
  .section .head,.section .head h2,.section .head .lede{
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:normal;
  }
  .wrap{width:calc(100% - 32px);box-sizing:border-box}
  .closeband{width:auto;margin:0 16px;box-sizing:border-box}
  .page-hero,.hero .inner,.hero-blend .inner{box-sizing:border-box}
  .project-section{overflow-x:clip}
  .project-stage,.project-field,.project-control{min-width:0;max-width:100%}
  .beam{width:100%;max-width:160%;}
  .you-tag{max-width:min(160px,100%)}
}


/* —— Case studies —— */
.case-header{
  padding:calc(var(--appbar-h) + 48px) 0 40px;
  border-bottom:1px solid var(--line);
}
.case-header h1{
  font-family:var(--display);
  font-size:clamp(28px,4vw,44px);
  font-weight:600;
  letter-spacing:-0.03em;
  line-height:1.12;
  color:var(--ink-strong);
  max-width:22ch;
  margin-top:8px;
}
.case-header h1 em{font-style:normal;color:var(--accent)}
.case-header .lede{margin-top:16px;max-width:62ch;font-size:15px}
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:12px;color:var(--muted);margin-bottom:18px;
}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--accent);text-decoration:underline}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tag-row .tag,.case-header .tag{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ink);
  background:var(--surface);
}
.case-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:40px;
  align-items:start;
}
@media(max-width:900px){.case-layout{grid-template-columns:1fr;gap:24px}}
.case-prose h2{
  font-family:var(--display);
  font-size:22px;font-weight:600;letter-spacing:-0.02em;
  margin:36px 0 12px;color:var(--ink-strong);
}
.case-prose h2:first-child{margin-top:0}
.case-prose p,.case-prose li{
  color:var(--muted);font-size:15px;line-height:1.65;max-width:68ch;
}
.case-prose ul{padding-inline-start:22px;margin:0 0 8px}
.case-prose li{margin-bottom:8px}
.case-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:24px 0;
}
@media(max-width:720px){.case-metrics{grid-template-columns:1fr}}
.case-metrics .m{
  padding:20px;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(165deg,#FFFFFF 0%,#F4F7FC 45%,#EEF3FA 100%);
}
.case-metrics .m .n{
  font-family:var(--display);
  font-size:clamp(26px,3vw,34px);
  font-weight:600;
  letter-spacing:-0.03em;
  line-height:1.1;
  color:var(--ink-strong);
}
.case-metrics .m .n em{font-style:normal;color:var(--accent)}
.case-metrics .m .l{
  display:block;
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
}
.case-quote{
  margin:32px 0;
  padding:22px 24px;
  border-inline-start:3px solid var(--accent);
  background:rgba(8,66,160,.06);
  border-radius:0 16px 16px 0;
}
html[dir="rtl"] .case-quote{border-radius:16px 0 0 16px}
.case-quote p{
  font-family:var(--display);
  font-size:18px;
  font-weight:500;
  color:var(--ink-strong);
  line-height:1.4;
  max-width:40ch;
}
.case-quote cite{
  display:block;
  margin-top:10px;
  font-style:normal;
  font-size:12px;
  color:var(--muted);
}
.case-quote cite span{opacity:.8}
.case-aside{display:flex;flex-direction:column;gap:12px;position:sticky;top:calc(var(--appbar-h) + 16px)}
@media(max-width:900px){.case-aside{position:static}}
.case-aside .card .label{font-size:12px;color:var(--accent);font-weight:500;margin-bottom:6px}
.case-aside .card h3{font-size:16px;margin-bottom:4px}
.case-services{list-style:none;padding:0;margin:8px 0 0}
.case-services li{margin:0 0 6px}
.case-services a{font-size:14px;font-weight:500}
.case-mosaic .case-tile{
  min-height:200px;
  display:flex;
  flex-direction:column;
  gap:4px;
  text-decoration:none!important;
  color:inherit;
  transition:box-shadow .2s, border-color .2s, transform .2s var(--ease);
}
.case-mosaic .case-tile:hover{
  box-shadow:var(--glass-shadow);
  border-color:#C2C7CC;
  text-decoration:none!important;
  transform:translateY(-2px);
}
.case-tile .n{
  width:28px;height:28px;border-radius:50%;
  background:#E4EBF7;border:0;color:#0B3D91;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:500;margin-bottom:8px;
}
.case-tile h3{
  font-size:16px;font-weight:600;letter-spacing:-0.02em;
  line-height:1.3;margin:2px 0 4px;max-width:28ch;
}
.case-tile p{max-width:none}
.case-metric-line{
  margin-top:auto!important;
  padding-top:10px;
  font-size:12px!important;
  color:var(--ink)!important;
  opacity:.78;
}

/* Soft bold gradient surfaces (attraction — never on logo) */
.mix-card,.agent,.outcome,.price,.help-card,.onboard-step,.dash-panel{
  background:linear-gradient(165deg,#FFFFFF 0%,#F4F7FC 45%,#EEF3FA 100%);
}
.mix-card.on,.price.featured{
  background:linear-gradient(150deg,#FFFFFF 0%,#E4EBF7 40%,#C8D7F0 100%);
}
.closeband{
  background:
    radial-gradient(ellipse 60% 80% at 0% 50%, var(--wash-violet), transparent 55%),
    radial-gradient(ellipse 50% 70% at 100% 50%, var(--wash-blue), transparent 50%),
    linear-gradient(180deg,#F4F7FC,#FFFFFF);
}
.section.band-soft{
  background:
    radial-gradient(ellipse 50% 60% at 100% 0%, var(--wash-coral), transparent 55%),
    radial-gradient(ellipse 40% 50% at 0% 100%, var(--wash-amber), transparent 50%),
    transparent;
}
/* merge-deploy 20260806T192639Z */