/* ==========================================================================
   Gemba Digital — site stili (CSS değişkeni tabanlı; admin'den düzenlenebilir)
   Tokenlar <style id="cms-tokens"> ile :root üzerinde ezilir.
   ========================================================================== */
:root {
  --red: #ec0628;
  --red-dark: #c4051f;
  --red-soft: #fdecee;
  --canvas: #f7f6f4;
  --surface: #ffffff;
  --surface-2: #f1efeb;
  --ink: #0a0a0b;
  --ink-800: #17171a;
  --body: #3f3f46;
  --muted: #6b6b70;
  --brandgray: #838383;
  --line: #e7e5e1;
  --line-dark: #2a2a2e;
  --font: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --base: 16px;
  --h1: 4.1rem;
  --h2: 2.6rem;
  --body-size: 1.125rem;
  --radius: 14px;
  --shadow-card: 0 1px 2px rgba(10,10,11,.04), 0 8px 24px rgba(10,10,11,.05);
  --shadow-lift: 0 2px 4px rgba(10,10,11,.05), 0 20px 48px rgba(10,10,11,.1);
  --shadow-red: 0 18px 40px rgba(236,6,40,.18);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: var(--base); scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--canvas);
  color: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
::selection { background: var(--red); color: #fff; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 600; letter-spacing: -.02em; line-height: 1.08; }
.tnum { font-variant-numeric: tabular-nums; }

.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 1.5rem; }
@media (min-width:1024px){ .container { padding-inline: 2rem; } }

.eyebrow { display:inline-flex; align-items:center; gap:.5rem; font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--red); }
.eyebrow::before { content:""; width:1.6rem; height:1px; background:var(--red); }
.eyebrow.on-dark { color:#ff5169; } .eyebrow.on-dark::before { background:#ff5169; }
.label-red { font-size:.9rem; font-weight:600; color:var(--red); }

/* ---- Buttons (pill + arrow bubble) ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.6rem; font-weight:600; font-size:.95rem; line-height:1; border-radius:9999px; padding:.7rem .75rem .7rem 1.4rem; transition:transform .2s cubic-bezier(.16,1,.3,1),background-color .2s,box-shadow .2s,border-color .2s,color .2s; white-space:nowrap; }
.btn.plain { padding:.72rem 1.5rem; }
.btn:active { transform:translateY(1px) scale(.99); }
.btn .bubble { display:grid; place-items:center; width:1.7rem; height:1.7rem; border-radius:9999px; transition:transform .25s cubic-bezier(.16,1,.3,1); }
.btn .bubble svg { width:14px; height:14px; }
.btn:hover .bubble { transform:translate(2px,-2px); }
.btn-primary { background:var(--red); color:#fff; box-shadow:var(--shadow-red); }
.btn-primary:hover { background:var(--red-dark); transform:translateY(-1px); }
.btn-primary .bubble { background:rgba(255,255,255,.22); color:#fff; }
.btn-ghost { background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn-ghost:hover { border-color:var(--ink); transform:translateY(-1px); }
.btn-ghost .bubble { background:var(--ink); color:#fff; }
.btn-white { background:#fff; color:var(--ink); }
.btn-white:hover { background:#f2f0ec; transform:translateY(-1px); }
.btn-white .bubble { background:var(--red); color:#fff; }
.btn-onblack-ghost { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35); }
.btn-onblack-ghost:hover { border-color:#fff; transform:translateY(-1px); }
.btn-onblack-ghost .bubble { background:rgba(255,255,255,.18); color:#fff; }

.grid-bg { background-image:linear-gradient(to right,var(--line) 1px,transparent 1px),linear-gradient(to bottom,var(--line) 1px,transparent 1px); background-size:64px 64px; }
.grid-bg-dark { background-image:linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px); background-size:64px 64px; }

/* ---- Reveal ---- */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal { opacity:1; transform:none; transition:none; } html{scroll-behavior:auto;} }

/* ==================== HEADER ==================== */
.header { position:fixed; inset:0 0 auto 0; z-index:50; transition:background-color .3s,border-color .3s; border-bottom:1px solid transparent; }
.header.solid { background:rgba(255,255,255,.95); backdrop-filter:blur(12px); border-bottom-color:var(--line); }
.header .bar { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:76px; }
.header .logo { position:relative; display:block; height:34px; width:160px; flex-shrink:0; }
.header .logo img { position:absolute; inset:0; height:100%; width:100%; object-fit:contain; object-position:left; transition:opacity .3s; }
.header .logo .lc { opacity:0; } .header .logo .lw { opacity:1; }
.header.solid .logo .lc { opacity:1; } .header.solid .logo .lw { opacity:0; }
.nav { display:none; align-items:center; gap:.25rem; }
@media (min-width:1024px){ .nav { display:flex; } }
.nav > a, .nav > button { display:inline-flex; align-items:center; gap:.4rem; border-radius:9999px; padding:.5rem .9rem; font-size:.92rem; font-weight:500; color:rgba(255,255,255,.9); transition:color .2s; }
.nav > a:hover, .nav > button:hover { color:#fff; }
.header.solid .nav > a, .header.solid .nav > button { color:var(--body); }
.header.solid .nav > a:hover, .header.solid .nav > button:hover { color:var(--ink); }
.nav .plus { transition:transform .3s,color .3s; }
.nav button[aria-expanded="true"] .plus { transform:rotate(45deg); color:var(--red); }
.header.solid .nav button[aria-expanded="true"] { color:var(--ink); }
.header .actions { display:flex; align-items:center; gap:.75rem; }
.header .demo-desktop { display:none; }
@media (min-width:640px){ .header .demo-desktop { display:inline-flex; } }
.burger { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:9999px; border:1px solid rgba(255,255,255,.4); color:#fff; }
.header.solid .burger { border-color:var(--line); color:var(--ink); }
@media (min-width:1024px){ .burger { display:none; } }

/* Mega panel */
.mega { position:absolute; inset:100% 0 auto 0; display:none; background:var(--surface); border-bottom:1px solid var(--line); box-shadow:var(--shadow-lift); }
.mega.open { display:block; animation:megaIn .22s cubic-bezier(.16,1,.3,1); }
@media (max-width:1023px){ .mega { display:none !important; } }
@keyframes megaIn { from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;} }
.mega .inner { display:grid; grid-template-columns:repeat(12,1fr); gap:2rem; padding:2.25rem 0; }
.mega .cols { grid-column:span 9; display:grid; grid-template-columns:1fr 1fr; gap:0 2rem; }
.mega .col-title { margin-bottom:.5rem; border-bottom:1px solid var(--line); padding-bottom:.75rem; font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--brandgray); }
.mega .link { display:flex; gap:.75rem; border-radius:12px; padding:.6rem .75rem; transition:background-color .2s; }
.mega .link:hover { background:var(--surface-2); }
.mega .link .lk-title { display:flex; align-items:center; gap:.35rem; font-size:.98rem; font-weight:600; color:var(--ink); transition:color .2s; }
.mega .link:hover .lk-title { color:var(--red); }
.mega .link .lk-desc { margin-top:.15rem; font-size:.82rem; line-height:1.4; color:var(--muted); }
.mega .featured { grid-column:span 3; display:flex; flex-direction:column; justify-content:space-between; border-radius:16px; background:var(--surface-2); padding:1.75rem; transition:background-color .2s; }
.mega .featured:hover { background:var(--red-soft); }
.mega .featured .ic { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--red); color:#fff; }
.mega .featured h3 { margin-top:1.25rem; font-size:1.125rem; }
.mega .featured p { margin-top:.5rem; font-size:.92rem; line-height:1.5; color:var(--muted); }
.mega .featured .more { margin-top:1.5rem; display:inline-flex; align-items:center; gap:.4rem; font-size:.875rem; font-weight:600; color:var(--red); }

/* Mobile menu */
.mobile { display:none; background:var(--surface); border-bottom:1px solid var(--line); overflow:hidden; }
.mobile.open { display:block; }
@media (min-width:1024px){ .mobile { display:none !important; } }
.mobile .inner { padding:1.5rem 0; }
.mobile .grp { margin-bottom:1.5rem; }
.mobile .grp-title { font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--brandgray); margin-bottom:.5rem; }
.mobile .grp a { display:block; padding:.5rem 0; color:var(--body); }
.mobile .demo { margin-top:.5rem; }

/* ==================== HERO ==================== */
.hero { position:relative; min-height:100dvh; width:100%; overflow:hidden; display:flex; align-items:center; }
.hero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:70% center; }
.hero .ov1 { position:absolute; inset:0; background:linear-gradient(100deg,rgba(10,10,11,.94) 0%,rgba(10,10,11,.82) 34%,rgba(10,10,11,.5) 58%,rgba(10,10,11,.2) 100%); }
.hero .ov2 { position:absolute; inset:0; background:radial-gradient(80% 60% at 0% 100%,rgba(236,6,40,.22),transparent 55%); }
.hero .ovtop { position:absolute; inset:0 0 auto 0; height:128px; background:linear-gradient(180deg,rgba(10,10,11,.55),transparent); }
.hero .inner { position:relative; padding:7rem 0 4rem; width:100%; }
.hero .kicker { display:inline-flex; align-items:center; gap:.5rem; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.05); backdrop-filter:blur(4px); border-radius:9999px; padding:.4rem .9rem; font-size:.78rem; font-weight:500; color:rgba(255,255,255,.85); }
.hero .kicker .dot { width:6px; height:6px; border-radius:9999px; background:var(--red); }
.hero h1 { margin-top:1.5rem; max-width:40rem; font-size:clamp(2.7rem, 6vw, var(--h1)); color:#fff; }
.hero h1 .accent { color:var(--red); }
.hero .sub { margin-top:1.5rem; max-width:36rem; font-size:var(--body-size); color:rgba(255,255,255,.75); }
.hero .cta { margin-top:2.25rem; display:flex; flex-wrap:wrap; gap:.75rem; }
.hero .badges { margin-top:2.5rem; display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; }
.hero .badges span { display:inline-flex; align-items:center; gap:.5rem; font-size:.85rem; color:rgba(255,255,255,.7); }
.hero .badges svg { color:var(--red); width:16px; height:16px; }

/* ==================== SECTIONS ==================== */
section { position:relative; }
.sec { padding:6rem 0; }
@media (min-width:1024px){ .sec { padding:8rem 0; } }
.sec-tint { background:color-mix(in srgb, var(--surface-2) 50%, transparent); }
h2.section { font-size:clamp(2rem, 4vw, var(--h2)); line-height:1.1; }
.lead { font-size:var(--body-size); color:var(--body); line-height:1.7; }
.max2 { max-width:42rem; } .max-lg { max-width:32rem; } .max-3 { max-width:48rem; }

/* Trust strip */
.trust { border-block:1px solid var(--line); background:color-mix(in srgb,var(--surface-2) 60%,transparent); }
.trust .inner { padding:2.5rem 0; }
.trust .lbl { text-align:center; font-size:.875rem; font-weight:500; color:var(--muted); }
.trust .stats { margin-top:1.75rem; display:grid; grid-template-columns:repeat(2,1fr); gap:1px; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--line); }
@media (min-width:768px){ .trust .stats { grid-template-columns:repeat(4,1fr); } }
.trust .stat { background:var(--surface); padding:1.5rem 1.25rem; text-align:center; }
.trust .stat .v { font-size:1.75rem; font-weight:700; color:var(--red); }
.trust .stat .l { margin-top:.35rem; font-size:.82rem; line-height:1.3; color:var(--muted); }

/* Split (two-col) */
.split { display:grid; grid-template-columns:1fr; gap:3rem; align-items:center; }
@media (min-width:1024px){ .split { grid-template-columns:1fr 1fr; gap:4rem; } }
.frame { position:relative; overflow:hidden; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface-2); box-shadow:var(--shadow-card); }
.frame img { width:100%; height:100%; object-fit:cover; }
.pointlist { margin-top:2rem; border-top:1px solid var(--line); padding-top:2rem; display:flex; flex-direction:column; gap:1.5rem; }
.point { display:flex; gap:1rem; }
.point .ic { margin-top:2px; display:grid; place-items:center; width:24px; height:24px; flex-shrink:0; border-radius:9999px; background:var(--red-soft); color:var(--red); }
.point .ic svg { width:14px; height:14px; }
.point h3 { font-size:1rem; } .point p { margin-top:.25rem; font-size:.95rem; color:var(--muted); }
.bullets { margin-top:2rem; display:flex; flex-direction:column; gap:.75rem; }
.bullet { display:flex; align-items:center; gap:.75rem; }
.bullet .ic { display:grid; place-items:center; width:24px; height:24px; flex-shrink:0; border-radius:9999px; background:var(--red-soft); color:var(--red); }
.bullet .ic svg { width:14px; height:14px; }

/* Live dashboard */
.dash { position:relative; }
.dash .glow { position:absolute; inset:-24px; border-radius:32px; background:radial-gradient(60% 60% at 70% 20%,rgba(236,6,40,.12),transparent 70%); filter:blur(20px); z-index:-1; }
.dash .panel { border-radius:18px; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-lift); overflow:hidden; }
.dash .top { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding:.75rem 1rem; }
.dash .top .brand { display:flex; align-items:center; gap:.5rem; font-size:13px; font-weight:600; color:var(--ink); }
.dash .top .g { display:grid; place-items:center; width:24px; height:24px; border-radius:6px; background:var(--ink); color:#fff; font-size:11px; font-weight:700; }
.dash .tabs { display:none; gap:.75rem; font-size:12px; color:var(--muted); }
@media (min-width:640px){ .dash .tabs { display:flex; } }
.dash .tabs .active { color:var(--red); font-weight:600; }
.dash .live { display:inline-flex; align-items:center; gap:.4rem; border-radius:9999px; background:var(--surface-2); padding:.25rem .6rem; font-size:11px; font-weight:500; }
.dash .live .d { width:6px; height:6px; border-radius:9999px; background:var(--red); animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }
.dash .body { display:grid; grid-template-columns:1fr; gap:1rem; padding:1rem; }
@media (min-width:640px){ .dash .body { grid-template-columns:2fr 3fr; } }
.dash .gauge { display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:12px; border:1px solid var(--line); background:color-mix(in srgb,var(--surface-2) 60%,transparent); padding:1rem; }
.dash .ring { position:relative; width:136px; height:136px; }
.dash .ring svg { transform:rotate(-90deg); width:100%; height:100%; }
.dash .ring .ctr { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.dash .ring .ctr .k { font-size:11px; font-weight:600; text-transform:uppercase; color:var(--muted); }
.dash .ring .ctr .val { font-size:1.875rem; font-weight:700; color:var(--ink); }
.dash .gcap { margin-top:.5rem; font-size:12px; color:var(--muted); text-align:center; }
.dash .right { display:flex; flex-direction:column; gap:.75rem; }
.dash .kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.dash .kpi { border-radius:10px; border:1px solid var(--line); background:var(--surface); padding:.6rem; }
.dash .kpi .v { margin-top:.35rem; font-size:15px; font-weight:700; color:var(--ink); }
.dash .kpi .l { font-size:10.5px; color:var(--muted); }
.dash .chart { border-radius:10px; border:1px solid var(--line); background:var(--surface); padding:.75rem; }
.dash .chart .hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:.25rem; font-size:11px; }
.dash .chart .hd .t { font-weight:600; color:var(--ink); }
.dash .chart .hd .up { color:#059669; font-weight:500; }
.dash .bars { border-top:1px solid var(--line); padding:.75rem 1rem; }
.dash .bars .hd { display:flex; justify-content:space-between; margin-bottom:.5rem; font-size:11px; }
.dash .bars .hd .t { font-weight:600; color:var(--ink); } .dash .bars .hd .w { color:var(--muted); }
.dash .barrow { display:flex; align-items:flex-end; gap:.5rem; height:56px; }
.dash .barrow .col { flex:1; display:flex; flex-direction:column; align-items:center; gap:.25rem; }
.dash .barrow .track { display:flex; align-items:flex-end; height:44px; width:100%; }
.dash .barrow .bar { width:100%; border-radius:3px 3px 0 0; background:rgba(10,10,11,.8); }
.dash .barrow .bar.red { background:var(--red); }
.dash .barrow .lab { font-size:9.5px; color:var(--muted); }

/* Modules bento */
.bento { margin-top:3.5rem; display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:640px){ .bento { grid-template-columns:1fr 1fr; } .bento .wide { grid-column:span 2; } }
@media (min-width:1024px){ .bento { grid-template-columns:repeat(3,1fr); } .bento .wide { grid-column:span 2; } }
.mod { display:flex; flex-direction:column; overflow:hidden; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-card); transition:transform .3s,border-color .3s,box-shadow .3s; }
.mod:hover { transform:translateY(-4px); border-color:rgba(236,6,40,.4); box-shadow:var(--shadow-red); }
.mod .thumb { position:relative; overflow:hidden; background:var(--surface-2); aspect-ratio:16/10; }
.mod.wide .thumb { aspect-ratio:16/7; }
.mod .thumb img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.mod:hover .thumb img { transform:scale(1.03); }
.mod .cap { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; padding:1.25rem; flex:1; }
.mod .cap h3 { font-size:1.05rem; } .mod .cap p { margin-top:.25rem; font-size:.9rem; line-height:1.35; color:var(--muted); }
.mod .arrow { margin-top:2px; display:grid; place-items:center; width:32px; height:32px; flex-shrink:0; border-radius:9999px; border:1px solid var(--line); color:var(--ink); transition:all .3s; }
.mod:hover .arrow { border-color:var(--red); background:var(--red); color:#fff; }
.mod .arrow svg { width:15px; height:15px; }

/* Services */
.banner { position:relative; margin-top:3rem; aspect-ratio:21/7; overflow:hidden; border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow-card); }
@media (max-width:640px){ .banner { aspect-ratio:16/9; } }
.banner img { width:100%; height:100%; object-fit:cover; object-position:center 35%; }
.banner .grad { position:absolute; inset:0; background:linear-gradient(to top,rgba(10,10,11,.5),transparent 60%); }
.cards2 { margin-top:2rem; display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:768px){ .cards2 { grid-template-columns:1fr 1fr; } }
.card { height:100%; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-card); padding:1.75rem; }
.card .ic { display:grid; place-items:center; width:44px; height:44px; border-radius:10px; background:var(--red-soft); color:var(--red); }
.card .ic svg { width:22px; height:22px; }
.card h3 { margin-top:1.25rem; font-size:1.25rem; } .card p { margin-top:.6rem; color:var(--muted); line-height:1.6; }

/* Integrations diagram */
.arch { position:relative; margin-top:3.5rem; overflow:hidden; border-radius:18px; border:1px solid var(--line); background:color-mix(in srgb,var(--surface) 70%,transparent); padding:1.5rem; }
@media (min-width:640px){ .arch { padding:2.5rem; } }
.arch .row { display:flex; flex-direction:column; gap:1.5rem; }
@media (min-width:1024px){ .arch .row { flex-direction:row; align-items:stretch; } }
.arch .colh { margin-bottom:.75rem; font-size:.75rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--brandgray); }
.arch .src { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
@media (min-width:1024px){ .arch .sources { width:30%; } .arch .src { grid-template-columns:1fr 1fr; } .arch .outputs { width:30%; } .arch .core { width:26%; } }
.arch .chip { display:flex; align-items:center; gap:.35rem; border-radius:10px; border:1px solid var(--line); background:var(--surface); padding:.5rem .6rem; font-size:.82rem; font-weight:500; color:var(--body); }
.arch .chip svg { width:14px; height:14px; color:var(--brandgray); }
.arch .conn { position:relative; display:none; flex:1; align-self:center; height:1px; background:linear-gradient(to right,var(--line),rgba(236,6,40,.4),var(--line)); }
@media (min-width:1024px){ .arch .conn { display:block; } }
.arch .conn .d { position:absolute; left:50%; top:50%; width:8px; height:8px; border-radius:9999px; background:var(--red); transform:translate(-50%,-50%); animation:pulse 1.8s ease-in-out infinite; }
.arch .corebox { display:flex; flex-direction:column; align-items:center; justify-content:center; }
.arch .corebox .inner { width:100%; border-radius:14px; border:1px solid rgba(236,6,40,.3); background:var(--ink); padding:1.25rem; text-align:center; color:#fff; box-shadow:var(--shadow-red); }
.arch .corebox img { height:28px; width:auto; margin:0 auto; opacity:.95; }
.arch .corebox .cap { margin-top:.75rem; font-size:.8rem; color:rgba(255,255,255,.6); }
.arch .corebox .tag { margin-top:.75rem; display:inline-flex; align-items:center; gap:.4rem; border-radius:9999px; background:rgba(255,255,255,.1); padding:.25rem .6rem; font-size:.72rem; font-weight:500; }
.arch .corebox .tag .d { width:6px; height:6px; border-radius:9999px; background:var(--red); }
.arch .out { display:grid; grid-template-columns:1fr; gap:.5rem; }
@media (min-width:640px) and (max-width:1023px){ .arch .out { grid-template-columns:1fr 1fr; } }
.arch .outchip { display:flex; align-items:center; gap:.5rem; border-radius:10px; border:1px solid var(--line); background:var(--surface); padding:.6rem .75rem; font-size:.85rem; font-weight:500; color:var(--ink); }
.arch .outchip .ic { display:grid; place-items:center; width:24px; height:24px; border-radius:6px; background:var(--red-soft); color:var(--red); }
.arch .outchip .ic svg { width:13px; height:13px; }
@media (min-width:1024px){ .arch .outputs .colh { text-align:right; } }

/* Why grid */
.whygrid { margin-top:3.5rem; overflow:hidden; border-radius:18px; border:1px solid var(--line); display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); }
@media (min-width:640px){ .whygrid { grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .whygrid { grid-template-columns:repeat(3,1fr); } }
.why { background:var(--surface); padding:2rem; transition:background-color .3s; }
.why:hover { background:color-mix(in srgb,var(--surface-2) 60%,transparent); }
.why .ic { display:grid; place-items:center; width:44px; height:44px; border-radius:10px; border:1px solid var(--line); background:var(--canvas); color:var(--ink); transition:all .3s; }
.why:hover .ic { border-color:var(--red); background:var(--red); color:#fff; }
.why .ic svg { width:21px; height:21px; }
.why h3 { margin-top:1.25rem; font-size:1.125rem; } .why p { margin-top:.5rem; font-size:.95rem; color:var(--muted); line-height:1.6; }

/* CTA (dark form) */
.ctaband { position:relative; overflow:hidden; background:var(--ink); color:#fff; }
.ctaband > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.2; }
.ctaband .ov { position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,10,11,.92),rgba(10,10,11,.97)); }
.ctaband .inner { position:relative; display:grid; grid-template-columns:1fr; gap:3rem; padding:6rem 0; }
@media (min-width:1024px){ .ctaband .inner { grid-template-columns:1fr 1fr; gap:5rem; padding:8rem 0; } }
.ctaband h2 { color:#fff; font-size:clamp(2rem,4vw,2.7rem); }
.ctaband .sub { margin-top:1.25rem; max-width:28rem; color:rgba(255,255,255,.6); font-size:var(--body-size); }
.offices { margin-top:2.5rem; display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:640px){ .offices { grid-template-columns:1fr 1fr; } }
.office { border-radius:12px; border:1px solid var(--line-dark); padding:1.25rem; }
.office .c { font-size:.875rem; font-weight:600; color:#fff; }
.office a { margin-top:.5rem; display:flex; align-items:center; gap:.5rem; font-size:.875rem; color:rgba(255,255,255,.6); transition:color .2s; }
.office a:hover { color:#fff; } .office a svg { width:15px; height:15px; color:var(--red); }
.formcard { border-radius:18px; border:1px solid var(--line-dark); background:var(--ink-800); padding:1.5rem; }
@media (min-width:640px){ .formcard { padding:2rem; } }
.formrow { display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:640px){ .formrow { grid-template-columns:1fr 1fr; } }
.field { margin-bottom:1rem; }
.field label { display:block; margin-bottom:.4rem; font-size:.875rem; font-weight:500; color:rgba(255,255,255,.8); }
.field .opt { color:rgba(255,255,255,.4); }
.field input, .field select, .field textarea { width:100%; border-radius:10px; border:1px solid var(--line-dark); background:var(--ink); color:#fff; padding:.65rem .875rem; font-family:inherit; font-size:1rem; outline:none; transition:border-color .2s; }
.field input::placeholder, .field textarea::placeholder { color:rgba(255,255,255,.35); }
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--red); }
.field textarea { resize:none; }
.field .err { margin-top:.25rem; font-size:.75rem; color:var(--red); }
.field input[aria-invalid="true"] { border-color:var(--red); }
.form-note { margin-top:.75rem; text-align:center; font-size:.75rem; color:rgba(255,255,255,.4); }
.form-success { min-height:420px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.form-success .ic { display:grid; place-items:center; width:56px; height:56px; border-radius:9999px; background:rgba(236,6,40,.15); color:var(--red); }
.form-success h3 { margin-top:1.25rem; color:#fff; font-size:1.25rem; } .form-success p { margin-top:.5rem; max-width:20rem; color:rgba(255,255,255,.6); }

/* ==================== FOOTER ==================== */
.footer { border-top:1px solid var(--line-dark); background:var(--ink); color:#fff; }
.footer .inner { padding:4rem 0; }
@media (min-width:1024px){ .footer .inner { padding:5rem 0; } }
.footer .grid { display:grid; grid-template-columns:1fr; gap:3rem; }
@media (min-width:1024px){ .footer .grid { grid-template-columns:repeat(12,1fr); } .footer .brandcol { grid-column:span 5; } .footer .navcols { grid-column:span 7; } }
.footer .logo img { height:36px; width:auto; }
.footer .tag { margin-top:1.25rem; max-width:24rem; font-size:.875rem; line-height:1.6; color:rgba(255,255,255,.55); }
.footer .offs { margin-top:2rem; display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width:640px){ .footer .offs { grid-template-columns:1fr 1fr; } }
.footer .off .c { font-size:.875rem; font-weight:600; color:#fff; }
.footer .off p { margin-top:.5rem; display:flex; gap:.5rem; font-size:.82rem; color:rgba(255,255,255,.55); }
.footer .off svg { flex-shrink:0; width:14px; height:14px; color:var(--red); margin-top:2px; }
.footer .navcols { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
@media (min-width:640px){ .footer .navcols { grid-template-columns:repeat(3,1fr); } }
.footer .navcol .t { font-size:.875rem; font-weight:600; color:#fff; }
.footer .navcol ul { list-style:none; margin-top:1rem; display:flex; flex-direction:column; gap:.625rem; }
.footer .navcol a { font-size:.85rem; color:rgba(255,255,255,.55); transition:color .2s; }
.footer .navcol a:hover { color:#fff; }
.footer .bottom { margin-top:3.5rem; padding-top:1.75rem; border-top:1px solid var(--line-dark); display:flex; flex-direction:column; gap:1rem; align-items:flex-start; }
@media (min-width:640px){ .footer .bottom { flex-direction:row; align-items:center; justify-content:space-between; } }
.footer .bottom .cp { font-size:.75rem; color:rgba(255,255,255,.4); }
.footer .social { display:flex; gap:.5rem; }
.footer .social a { display:grid; place-items:center; width:36px; height:36px; border-radius:9999px; border:1px solid var(--line-dark); color:rgba(255,255,255,.6); transition:all .2s; }
.footer .social a:hover { border-color:var(--red); color:#fff; }
.footer .social svg { width:16px; height:16px; }

/* ==================== DETAIL PAGE ==================== */
.d-hero { border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--surface-2) 40%,transparent); }
.d-hero .inner { display:grid; grid-template-columns:1fr; gap:3rem; align-items:center; padding:8rem 0 4rem; }
@media (min-width:1024px){ .d-hero .inner { grid-template-columns:1fr 1fr; gap:4rem; padding:9rem 0 5rem; } }
.crumb { display:flex; align-items:center; gap:.4rem; font-size:.82rem; color:var(--muted); flex-wrap:wrap; }
.crumb svg { width:12px; height:12px; } .crumb .cur { font-weight:500; color:var(--ink); } .crumb a:hover { color:var(--ink); }
.d-hero h1 { margin-top:.75rem; font-size:clamp(2.3rem,4vw,3rem); line-height:1.08; }
.d-hero .sub { margin-top:1.25rem; max-width:36rem; font-size:var(--body-size); color:var(--body); }
.d-hero .cta { margin-top:2rem; display:flex; flex-wrap:wrap; gap:.75rem; }
.d-hero .placeholder { position:relative; overflow:hidden; border-radius:var(--radius); border:1px solid rgba(236,6,40,.2); background:var(--ink); color:#fff; padding:2.5rem; box-shadow:var(--shadow-card); }
.d-hero .placeholder .lbl { font-size:.875rem; font-weight:600; color:var(--red); }
.d-hero .placeholder h3 { margin-top:.75rem; color:#fff; font-size:1.5rem; }
.d-hero .placeholder p { margin-top:.75rem; color:rgba(255,255,255,.6); }
.d-overview { padding:5rem 0; } .d-overview p { font-size:1.35rem; line-height:1.6; color:var(--body); }
.steps { margin-top:2.5rem; display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:640px){ .steps { grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .steps { grid-template-columns:repeat(4,1fr); } }
.step { height:100%; border-radius:16px; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-card); padding:1.5rem; }
.step .n { display:grid; place-items:center; width:36px; height:36px; border-radius:9999px; background:var(--red); color:#fff; font-weight:700; font-size:.875rem; }
.step h3 { margin-top:1rem; font-size:1.125rem; } .step p { margin-top:.5rem; font-size:.95rem; color:var(--muted); line-height:1.5; }
.feat-grid { margin-top:2.5rem; display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:640px){ .feat-grid { grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .feat-grid { grid-template-columns:repeat(3,1fr); } }
.feat { height:100%; border-radius:16px; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-card); padding:1.75rem; transition:transform .3s,border-color .3s,box-shadow .3s; }
.feat:hover { transform:translateY(-4px); border-color:rgba(236,6,40,.4); box-shadow:var(--shadow-red); }
.feat .ic { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--red-soft); color:var(--red); transition:all .3s; }
.feat:hover .ic { background:var(--red); color:#fff; } .feat .ic svg { width:22px; height:22px; }
.feat h3 { margin-top:1.25rem; font-size:1.125rem; } .feat p { margin-top:.5rem; font-size:.95rem; color:var(--muted); line-height:1.6; }
.benefits-sec { display:grid; grid-template-columns:1fr; gap:3rem; }
@media (min-width:1024px){ .benefits-sec { grid-template-columns:1fr 1fr; gap:4rem; } }
.benefits { list-style:none; display:flex; flex-direction:column; gap:1rem; }
.benefits li { display:flex; gap:.75rem; border-bottom:1px solid var(--line); padding-bottom:1rem; }
.benefits li .ic { margin-top:2px; display:grid; place-items:center; width:24px; height:24px; flex-shrink:0; border-radius:9999px; background:var(--red-soft); color:var(--red); }
.benefits li .ic svg { width:14px; height:14px; } .benefits li span.tx { font-size:1.02rem; color:var(--body); }
.compare-wrap { overflow-x:auto; }
.compare { width:100%; min-width:640px; border-collapse:collapse; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface); text-align:left; }
.compare th { padding:1.25rem; font-size:.875rem; font-weight:600; border-bottom:1px solid var(--line); }
.compare thead th:not(:first-child) { text-align:center; color:var(--ink); }
.compare thead th.plus { color:var(--red); }
.compare td { padding:1.25rem; font-size:.95rem; color:var(--body); border-bottom:1px solid var(--line); }
.compare tr:last-child td { border-bottom:none; }
.compare td.ck { text-align:center; }
.compare svg { display:inline-block; width:20px; height:20px; color:var(--red); }
.compare .no { display:inline-block; width:12px; height:2px; border-radius:2px; background:var(--line); }
.faq-wrap { max-width:48rem; margin:0 auto; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface); }
.faq-item { border-bottom:1px solid var(--line); } .faq-item:last-child { border-bottom:none; }
.faq-q { display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%; text-align:left; padding:1.25rem 1.5rem; font-size:1.02rem; font-weight:600; color:var(--ink); }
.faq-q svg { flex-shrink:0; width:18px; height:18px; color:var(--brandgray); transition:transform .3s,color .3s; }
.faq-item.open .faq-q svg { transform:rotate(45deg); color:var(--red); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a p { padding:0 1.5rem 1.25rem; color:var(--muted); line-height:1.6; }
.related { margin-top:2rem; display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:640px){ .related { grid-template-columns:repeat(3,1fr); } }
.relcard { display:flex; flex-direction:column; justify-content:space-between; height:100%; border-radius:16px; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-card); padding:1.5rem; transition:transform .3s,border-color .3s,box-shadow .3s; }
.relcard:hover { transform:translateY(-4px); border-color:rgba(236,6,40,.4); box-shadow:var(--shadow-red); }
.relcard h3 { font-size:1.125rem; transition:color .2s; } .relcard:hover h3 { color:var(--red); }
.relcard p { margin-top:.5rem; font-size:.9rem; color:var(--muted); line-height:1.35; }
.relcard .more { margin-top:1.25rem; display:inline-flex; align-items:center; gap:.4rem; font-size:.875rem; font-weight:600; color:var(--red); }
.closing { position:relative; overflow:hidden; background:var(--ink); color:#fff; }
.closing .inner { position:relative; display:flex; flex-direction:column; gap:1.5rem; padding:4rem 0; align-items:flex-start; }
@media (min-width:768px){ .closing .inner { flex-direction:row; align-items:center; justify-content:space-between; } }
.closing h2 { color:#fff; font-size:clamp(1.8rem,3vw,2.2rem); } .closing p { margin-top:.75rem; max-width:36rem; color:rgba(255,255,255,.6); }
.mt3 { margin-top:.75rem; } .mt5 { margin-top:1.25rem; } .mt8 { margin-top:2rem; } .mt9 { margin-top:2.25rem; }