body.stratos-theme {
    --bg: #0b1020;
    --ink: #0f172a;
    --muted: #5b647a;
    --brand: #2563eb;
    --brand-2: #0ea5e9;
    --surface: #ffffff;
    --surface-2: #f7f8fc;
    --ring: rgba(2,6,23,.08);
    --radius: 16px;
    --workflow-gap-x: clamp(16px, 3vw, 24px);
    --workflow-box-width: 180px;
    --workflow-box-height: 120px;
    --workflow-radius: 12px;
    --tf-gap-x: 48px;
    --tf-gap-y: 22px;
    --tf-box-width: 220px;
    --tf-box-min-height: 96px;
    --tf-radius: 12px;
    --tf-card-width: 200px; /* shared width for every box */
    --tf-arrow-width: 26px; /* shared width for every arrow gap */
    color: var(--ink);
    background: #ffffff;
    background: radial-gradient(1000px 1000px at 20% 10%, #eef4ff 0%, #ffffff 60%);
}


.text-brand{color:var(--brand);}
.bg-brand{background:var(--brand);}
.border-brand{border-color:var(--brand);}

body.stratos-theme a{color:inherit; text-decoration:none}
body.stratos-theme .container{max-width:1200px; margin-inline:auto; padding-inline:24px}
@media (min-width:1024px){
  body.stratos-theme .container{padding-inline:32px}
}
body.stratos-theme .btn{display:inline-flex; align-items:center; gap:.5rem; padding:12px 20px; border-radius:12px; font-weight:600; border:1px solid transparent; text-decoration:none; transition:background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease}
body.stratos-theme .btn svg{width:18px;height:18px}
body.stratos-theme .btn-demo{background:var(--brand); color:#fff; box-shadow:0 6px 20px rgba(37,99,235,.15)}
body.stratos-theme .btn-demo:hover{box-shadow:0 10px 24px rgba(37,99,235,.22)}
body.stratos-theme .btn-primary{background:var(--brand); color:#fff; box-shadow:0 6px 20px rgba(37,99,235,.15)}
body.stratos-theme .btn-primary:hover{box-shadow:0 10px 24px rgba(37,99,235,.22)}
body.stratos-theme .btn-dark{background:#0f172a; color:#fff}
body.stratos-theme .btn-dark:hover{background:#1e293b}
body.stratos-theme .btn-secondary, body.stratos-theme .btn-outline{background:#fff; color:#0f172a; border-color:#e2e8f0; box-shadow:none}
body.stratos-theme .btn-secondary:hover, body.stratos-theme .btn-outline:hover{border-color:#cbd5f5}
body.stratos-theme .tag{display:inline-flex; align-items:center; gap:.5rem; border:1px solid #e2e8f0; background:#fff; padding:4px 12px; border-radius:999px; font-size:12px; font-weight:500; color:#475569}
body.stratos-theme .tag svg{width:14px;height:14px;color:var(--brand)}

/* Header */
header{position:sticky; top:0; background:#fff; border-bottom:1px solid transparent; z-index:100}
.nav{display:flex; align-items:center; justify-content:space-between; min-height:72px}
.nav-links{display:none; align-items:center; gap:32px; color:#475569; font-size:.95rem; transition:color .2s ease}
.nav-links a{color:inherit; font-weight:500}
.nav-links a:hover{color:#0f172a}
body.stratos-theme .logo{display:flex; align-items:center; gap:.6rem; font-weight:600; color:#0f172a}
body.stratos-theme .logo span{font-size:1rem}
body.stratos-theme .beaker{display:grid; place-items:center; width:36px;height:36px; border-radius:10px; background:var(--brand); color:#fff}
body.stratos-theme .beaker svg{width:22px;height:22px}

/* Hero */
.hero{position:relative; padding:96px 0 0}
@media (min-width:1024px){
  .hero{padding-top:120px}
}
.hero-grid{display:grid; gap:32px}
.hero-grid--solo{grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){
  .hero-grid{align-items:start; gap:48px}
  .hero-grid:not(.hero-grid--solo){grid-template-columns:1.1fr 0.9fr}
  .hero-grid.hero-grid--solo{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:1280px){
  .hero-grid{gap:64px}
}
.badge-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.hero-heading{margin:0; font-size:clamp(44px,6vw,68px); line-height:1.05; letter-spacing:-0.02em; font-weight:800; color:#0f172a}
.hero-sub{margin-top:24px; max-width:640px; font-size:18px; line-height:1.6; color:#475569}
.cta-row{margin-top:32px; display:flex; flex-wrap:wrap; align-items:center; gap:16px}
.kpi-row{margin-top:40px; display:flex; flex-wrap:nowrap; gap:40px}
.kpi-item{flex:1 1 0; min-width:0}
.kpi-value{font-size:1.25rem; font-weight:700; color:#0f172a}
.kpi-caption{margin-top:4px; font-size:14px; color:#64748b; white-space:normal; word-break:break-word}
.nowrap{white-space:nowrap}

/* Agents card */
.agents-card{border:1px solid #e5e7eb; border-radius:20px; background:#fff; box-shadow:0 18px 40px -24px rgba(15,23,42,.35); padding:24px; width:100%; max-width:520px; margin-left:auto}
.agents-header{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#64748b}
.status-dot{width:10px; height:10px; border-radius:999px; background:#10b981}
.agents-grid{margin-top:16px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.agent-tile{border:1px solid #e2e8f0; border-radius:14px; padding:12px; background:#fff; transition:box-shadow .2s ease, border-color .2s ease}
.agent-tile:hover{box-shadow:0 6px 16px rgba(15,23,42,.08); border-color:#dbe3f2}
.agent-title{font-size:13px; font-weight:600; color:#1e293b}
.agent-desc{margin-top:4px; font-size:12px; line-height:1.45; color:#64748b}
.agents-footer{margin-top:16px; display:flex; align-items:center; gap:8px; font-size:12px; color:#64748b}
.agents-footer svg{width:18px; height:18px}

/* What band */
.what-band {
    padding: 0 0 0;
}

/* How band */
.how-band {
    position: relative;
    padding: 48px 0 64px;
    background: var(--surface-2);
    scroll-margin-top: 120px;
}

.how-grid {
    display: grid;
    gap: 32px
}

@media (min-width:1024px) {
    .how-grid {
        grid-template-columns: minmax(0,1fr) minmax(0,480px);
        align-items: start;
        gap: 48px
    }
}

.how-copy {
    max-width: 640px
}

.how-description {
    margin: 0;
    font-size: 18px;
    line-height: 1.65;
    color: #475569
}

.track-legend{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:16px;
    margin:0;
    font-size:12px;
    font-weight:500;
    line-height:1.4;
    color:#475569;
}
.track-legend .legend-item{
    display:flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
}
.track-legend .legend-swatch{
    width:12px;
    height:12px;
    border-radius:4px;
    box-shadow:0 0 0 1px rgba(15,23,42,.15);
}
.legend-swatch--agent {
    background: rgba(37,99,235,.55);
    box-shadow: 0 0 0 1px rgba(37,99,235,.4);
}
.legend-swatch--human {
    background: rgba(245,158,11,.6);
    box-shadow: 0 0 0 1px rgba(245,158,11,.5);
}
.legend-swatch--merge {
    background: rgba(5,150,105,.5); /* dark green fill */
    box-shadow: 0 0 0 1px rgba(4,120,87,.6); /* darker green border */
}


/* Workflow */
.workflow-flow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--workflow-box-width), 1fr));
    column-gap: var(--workflow-gap-x);
    row-gap: 24px;
    justify-items: center;
    padding: 24px 0;
    max-width: 100%
}
.workflow-box{position:relative; width:100%; max-width:var(--workflow-box-width); height:var(--workflow-box-height); background:#fff; border-radius:var(--workflow-radius); padding:12px; display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; text-align:left; gap:8px; box-shadow:0 6px 18px rgba(15,23,42,.05); transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease, border-width .18s ease; border:1px solid var(--workflow-accent, #d0d7de); box-sizing:border-box}
.workflow-box::before{content:""; position:absolute; top:12px; right:12px; width:10px; height:10px; border-radius:999px; background:var(--workflow-accent, #2563eb); box-shadow:0 0 0 3px rgba(15,23,42,.04); opacity:0; transform:scale(.4); transition:opacity .18s ease, transform .18s ease; pointer-events:none}
.workflow-box:hover{box-shadow:0 10px 26px rgba(15,23,42,.1); transform:translateY(-2px); border-color:var(--workflow-accent, #7aa7ff)}
.workflow-box.is-selected{border-width:2px; box-shadow:0 10px 28px rgba(15,23,42,.12); transform:translateY(-2px)}
.workflow-box.is-selected::before{opacity:1; transform:scale(1)}
.workflow-title{font-weight:650; font-size:15px; display:flex; align-items:center; justify-content:flex-start; gap:8px; margin-bottom:6px}
.workflow-desc{color:var(--muted); font-size:13px; text-align:left}
.workflow-icon{width:18px; height:18px}
.workflow-box::after{content:""; position:absolute; top:50%; left:100%; margin-left:calc(0.5 * var(--workflow-gap-x)); transform:translate(-50%, -50%); width:22px; height:22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain; pointer-events:none}
.workflow-box:last-child::after{display:none}
.workflow-box--solutions { --workflow-accent: #a78bfa; }  /* violet-400 */
.workflow-box--market { --workflow-accent: #f59e0b; }     /* amber-500 */
.workflow-box--segments { --workflow-accent: #14b8a6; }   /* teal-500 */
.workflow-box--data { --workflow-accent: #ef4444; }       /* red-500 */
.workflow-box--analysis { --workflow-accent: #3b82f6; }   /* blue-500 */
.workflow-box--outputs { --workflow-accent: #22c55e; }    /* green-500 */

@media (max-width:1099px){
  .workflow-box::after{display:none}
}


@media (min-width:1100px){
  .workflow-flow{grid-template-columns:repeat(6, minmax(0, 1fr))}
}

@media (max-width:720px){
  .workflow-flow{column-gap:20px; row-gap:20px}
  .workflow-box{height:auto; min-height:var(--workflow-box-height)}
}

/* Quote band */
.quote-band{padding:40px 0 70px; background:linear-gradient(180deg, rgba(209,233,255,.5) 0%, #ffffff 70%)}
.quote-grid{display:grid; gap:20px}
@media (min-width:900px){
  .quote-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px}
}
.quote-card{position:relative; border:1px solid rgba(37,99,235,.12); border-radius:20px; background:#fff; padding:32px 28px; box-shadow:0 24px 48px -32px rgba(15,23,42,.35)}
.quote-card::after{content:""; position:absolute; inset:0; border-radius:20px; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(37,99,235,.08)}
.quote-mark{font-size:42px; line-height:1; color:var(--brand); font-weight:700; margin-bottom:16px}
.quote-card blockquote{margin:0; font-size:18px; line-height:1.65; color:#0f172a}
.quote-card figcaption{margin-top:20px; font-size:14px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#2563eb}

.section-divider{height:1px; background:linear-gradient(90deg, rgba(148,163,184,0) 0%, rgba(148,163,184,.5) 45%, rgba(148,163,184,0) 100%)}

/* Advantages */
.advantages-header{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px}
.advantages-heading{flex:1 1 360px; max-width:640px}
.advantages-cta{flex-shrink:0}
.advantages-header h2{margin:0; font-size:clamp(30px,4vw,40px); font-weight:800; color:#0f172a; letter-spacing:-0.02em}
.advantages-header p{margin:14px 0 0; font-size:17px; line-height:1.65; color:#475569}
.advantages-grid{margin-top:40px; display:grid; gap:20px}
@media (min-width:900px){
  .advantages-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
}
.adv-card{height:100%; border-radius:22px; border:1px solid rgba(15,23,42,.08); background:#fff; padding:30px 28px; box-shadow:0 32px 60px -38px rgba(15,23,42,.35); display:flex; flex-direction:column; gap:20px; transition:transform .25s ease, box-shadow .25s ease}
.adv-card:hover{transform:translateY(-6px); box-shadow:0 30px 70px -32px rgba(37,99,235,.25)}
.adv-icon{display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:18px; background:linear-gradient(135deg, rgba(37,99,235,.12), rgba(14,165,233,.16)); color:#1d4ed8}
.adv-icon svg{width:28px; height:28px}
.adv-icon--data{background:linear-gradient(135deg, rgba(30,64,175,.12), rgba(59,130,246,.2)); color:#1e3a8a}
.adv-icon--automation{background:linear-gradient(135deg, rgba(8,145,178,.14), rgba(14,165,233,.28)); color:#0f766e}
.adv-icon--qualification{background:linear-gradient(135deg, rgba(56,189,248,.12), rgba(59,130,246,.22)); color:#0369a1}
.adv-card h3{margin:0; font-size:20px; font-weight:700; color:#0f172a}
.adv-card p{margin:0; font-size:15.5px; line-height:1.7; color:#475569}

/* Sections */
section{padding:64px 0}
.section-title{font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight:800}
.muted{color:var(--muted)}

/* Cards */
.card{border:1px solid rgba(2,6,23,.08); border-radius:16px; background:#fff}
.card-h{display:flex; align-items:center; gap:12px; padding:16px 16px 0}
.card-ico{background:#eff6ff; color:#1e3a8a; padding:10px; border-radius:12px}
.card-c{padding:14px 16px 18px; color:var(--muted); font-size:.95rem; line-height:1.6}
.hero-sidecard{display:grid; gap:24px}
@media (min-width:768px){
  .hero-sidecard{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.discovery-card,.booking-card{padding:28px; display:flex; flex-direction:column; gap:16px}
.booking-card .btn{align-self:flex-start}
.next-steps{text-align:center}
.next-steps .timeline{margin:32px auto 0; max-width:520px; text-align:left}
.final-cta{text-align:center}
.final-cta__content{max-width:640px; margin:0 auto}
.final-cta__content .cta-row{justify-content:center}
.featuregrid{display:grid; gap:18px; grid-template-columns:1fr}

#detail { position: relative; min-height: 240px; display: flex; flex-direction: column; justify-content: center; }
.detail-close { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; border: none; background: transparent; color: #64748b; font-size: 18px; line-height: 1; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.detail-close:hover,
.detail-close:focus-visible { background-color: rgba(148, 163, 184, 0.15); color: #0f172a; outline: none; }
#detail:not(.is-locked) .detail-close { display: none; }
.detail-panel { display: none; }
.detail-panel.is-visible { display: block; }
#detail-analysis .detail-analysis-grid,
#detail-solutions .detail-analysis-grid,
#detail-market .detail-analysis-grid,
#detail-segments .detail-analysis-grid,
#detail-outputs .detail-analysis-grid {
  display: grid;
  gap: 24px;
  padding: 8px 0;
}
@media (min-width: 900px) {
  #detail-analysis .detail-analysis-grid,
  #detail-solutions .detail-analysis-grid,
  #detail-market .detail-analysis-grid,
  #detail-segments .detail-analysis-grid,
  #detail-outputs .detail-analysis-grid {
    grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr));
    gap: 28px;
  }
}
#detail-analysis .detail-analysis-col,
#detail-solutions .detail-analysis-col,
#detail-market .detail-analysis-col,
#detail-segments .detail-analysis-col,
#detail-outputs .detail-analysis-col {
  position: relative;
  padding: 12px 0;
}
@media (min-width: 900px) {
  #detail-analysis .detail-analysis-col,
  #detail-solutions .detail-analysis-col,
  #detail-market .detail-analysis-col,
  #detail-segments .detail-analysis-col,
  #detail-outputs .detail-analysis-col {
    padding: 6px 24px;
  }
  #detail-analysis .detail-analysis-col + .detail-analysis-col::before,
  #detail-solutions .detail-analysis-col + .detail-analysis-col::before,
  #detail-market .detail-analysis-col + .detail-analysis-col::before,
  #detail-segments .detail-analysis-col + .detail-analysis-col::before,
  #detail-outputs .detail-analysis-col + .detail-analysis-col::before {
    content: "";
    position: absolute;
    inset-block: 18%;
    inset-inline-start: 0;
    width: 1px;
    background: linear-gradient(180deg, rgba(148, 163, 184, 0), rgba(148, 163, 184, 0.45), rgba(148, 163, 184, 0));
  }
}
#detail-analysis h3,
#detail-solutions h3,
#detail-market h3,
#detail-segments h3,
#detail-outputs h3 {
  margin: 0 0 18px;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #0f172a;
}
#detail-analysis h4,
#detail-solutions h4,
#detail-market h4,
#detail-segments h4,
#detail-outputs h4 {
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
}
#detail-analysis .detail-analysis-title,
#detail-solutions .detail-analysis-title,
#detail-market .detail-analysis-title,
#detail-segments .detail-analysis-title,
#detail-outputs .detail-analysis-title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
#detail-analysis .detail-analysis-icon,
#detail-solutions .detail-analysis-icon,
#detail-market .detail-analysis-icon,
#detail-segments .detail-analysis-icon,
#detail-outputs .detail-analysis-icon {
  width: 28px;
  height: 28px;
  color: #1d4ed8;
}
#detail-analysis p,
#detail-solutions p,
#detail-market p,
#detail-segments p,
#detail-outputs p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.65;
  color: var(--muted);
}
#detail-analysis .detail-analysis-intro,
#detail-solutions .detail-analysis-intro,
#detail-market .detail-analysis-intro,
#detail-segments .detail-analysis-intro,
#detail-outputs .detail-analysis-intro {
  display: grid;
  gap: 18px;
}
#detail-analysis .detail-analysis-illustration {
  width: min(100%, 320px);
  height: auto;
  filter: drop-shadow(0 20px 38px rgba(15, 23, 42, 0.12));
}
#detail-data {
    --tf-agent: #2563eb;
    --tf-agent-shadow: rgba(37, 99, 235, 0.15);
    --tf-human: #f59e0b;
    --tf-human-shadow: rgba(245, 158, 11, 0.18);
    --tf-merge: #059669;
    --tf-merge-shadow: rgba(5, 150, 105, 0.18);
}

#detail-data .detail-data-flow { display: flex; flex-direction: column; gap: 18px; }
#detail-data .detail-data-head { display: flex; flex-direction: column; gap: 12px; }
#detail-data .detail-data-head h3 { margin: 0; font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 700; letter-spacing: -0.015em; color: #0f172a; }
#detail-data .detail-data-head p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--muted); max-width: 520px; }
#detail-data .detail-data-title { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; row-gap: 10px; }
#detail-data .detail-data-title .track-legend { margin: 0 auto 0 0; }


/* ===========================
   TECHNICAL FLOW CONFIG
   =========================== */

.technical-flow {
    display: grid;
    /* 9 columns: box | arrow | box | arrow | box | arrow | box | arrow | box */
    grid-template-columns: var(--tf-card-width) /* col 1: Crawler / Internal Sources */
    var(--tf-arrow-width) /* col 2: Arrow */
    var(--tf-card-width) /* col 3: Organization Resolver / Data Team */
    var(--tf-arrow-width) /* col 4: Arrow */
    var(--tf-card-width) /* col 5: Fact Scorer */
    var(--tf-arrow-width) /* col 6: Arrow */
    var(--tf-card-width) /* col 7: Deduplication (spans both rows) */
    var(--tf-arrow-width) /* col 8: Arrow */
    var(--tf-card-width); /* col 9: Data Store (spans both rows) */
    /* Two lanes (top and bottom) */
    grid-template-rows: auto auto;
    /* Align cards to the top by default, we’ll override where needed */
    align-items: start;
    /* Grid is a fixed layout, so we don't need column-gap anymore —
       arrow columns ARE the gaps */
    column-gap: 0;
    row-gap: 32px;
    justify-content: center;
    padding: 0;
}

    /* Default alignment for all direct children so arrows/boxes don't hug edges */
    .technical-flow > * {
        justify-self: center;
    }

/* ===========================
   BOX STYLE
   =========================== */

.tf-box {
    width: var(--tf-card-width); /* <- all boxes same width */
    min-height: var(--tf-box-min-height); /* you already defined this var */
    background: #fff;
    border: 1px solid #d0d7de;
    border-radius: var(--tf-radius);
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(15,23,42,.05);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

    .tf-box:hover {
        box-shadow: 0 10px 26px rgba(15,23,42,.1);
        transform: translateY(-1px);
        border-color: #7aa7ff;
}


.tf-box--crawler,
.tf-box--resolver,
.tf-box--scorer {
    border-color: var(--tf-agent);

}

.tf-box--sources,
.tf-box--transform,
.tf-box--alignment {
    border-color: var(--tf-human);

}

.tf-box--deduplication,
.tf-box--datastore {
    border-color: var(--tf-merge);

}

.tf-box--crawler:hover,
.tf-box--resolver:hover,
.tf-box--scorer:hover {
    box-shadow: 0 10px 26px rgba(37, 99, 235, 0.28);
    border-color: var(--tf-agent);
}

.tf-box--sources:hover,
.tf-box--transform:hover,
.tf-box--alignment:hover {
    box-shadow: 0 10px 26px rgba(245, 158, 11, 0.28);
    border-color: var(--tf-human);
}

.tf-box--deduplication:hover,
.tf-box--datastore:hover {
    box-shadow: 0 10px 26px rgba(5, 150, 105, 0.28);
    border-color: var(--tf-merge);
}

.tf-title {
    font-weight: 650;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.tf-desc {
    color: var(--muted);
    font-size: 13px;
}

.tf-icon {
    width: 18px;
    height: 18px;
}

.tf-arrow {
    font-size: 18px;
    color: #94a3b8;
    text-align: center;
    width: var(--tf-arrow-width);
    justify-self: center;
    align-self: center;
}

.tf-arrow--a1,
.tf-arrow--a4 {
    color: var(--tf-agent);
}

.tf-arrow--a2,
.tf-arrow--a8 {
    color: var(--tf-human);
}

.tf-arrow--a5,
.tf-arrow--a6,
.tf-arrow--a7 {
    color: var(--tf-merge);
}


/* ===========================
   DESKTOP PLACEMENT MAP
   ===========================
   Each box/arrow is manually assigned to a grid cell.
   Columns are 1 through 9 (see template above).
   Rows are 1 or 2.
   ----------------------------------------------- */

/* Left column boxes (col 1) */
.tf-box--crawler {
    grid-column: 1;
    grid-row: 1;
}

.tf-box--sources {
    grid-column: 1;
    grid-row: 2;
}

/* Arrows after first column (col 2) */
.tf-arrow--a1 {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: center;
}

.tf-arrow--a2 {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    justify-self: center;
}

.tf-box--transform {
    grid-column: 3;
    grid-row: 2;
}

.tf-box--alignment {
    grid-column: 5;
    grid-row: 2;
}

/* Organization Resolver (col 3) */
.tf-box--resolver {
    grid-column: 3;
    grid-row: 1;
}

/* Arrow after resolver (col 4) */
.tf-arrow--a4 {
    grid-column: 4;
    grid-row: 1;
    align-self: center;
}

/* Fact Scorer (col 5) */
.tf-box--scorer {
    grid-column: 5;
    grid-row: 1;
}

/* Arrow leading to deduplication (col 6) */
.tf-arrow--a5 {
    grid-column: 6;
    grid-row: 1;
    align-self: center;
}

/* Arrow from alignment to deduplication (col 6, row 2) */
.tf-arrow--a6 {
    grid-column: 6;
    grid-row: 2;
    align-self: center;
}

/* Deduplication (col 7), spans both rows */
.tf-box--deduplication {
    grid-column: 7;
    grid-row: 1 / 3; /* spans row 1 + row 2 */
    align-self: center; /* vertically center between the two lanes */
}

/* Arrow between dedupe and datastore (col 8) */
.tf-arrow--a7 {
    grid-column: 8;
    grid-row: 1 / 3;
    align-self: center;
}

/* Arrow between  */
.tf-arrow--a8 {
    grid-column: 4;
    grid-row: 2;
    align-self: center;
}

/* Data Store (col 9), also spans both rows */
.tf-box--datastore {
    grid-column: 9;
    grid-row: 1 / 3;
    align-self: center;
}






/* ===========================
   MOBILE FALLBACK
   ===========================
   Below 1100px we give up on the grid diagram
   and just stack everything vertically.
   ----------------------------------------------- */

@media (max-width:1100px) {
    .technical-flow {
        grid-template-columns: minmax(0,1fr); /* 1-column stack */
        gap: 18px;
        padding: 0;
    }

.technical-flow > * {
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: stretch;
}

    .tf-box {
        width: 100%;
    }

    .tf-arrow {
        display: none;
    }
}




/* How it works */
.steps{list-style:none; padding:0; margin:24px 0 0}
.steps li{display:flex; gap:14px}
.num{flex:0 0 auto; display:grid; place-items:center; width:28px; height:28px; border-radius:999px; background:var(--brand); color:#fff; font-size:.72rem; font-weight:800; box-shadow:0 8px 20px -10px rgba(29,78,216,.6)}

/* CTA */
.cta{text-align:center; scroll-margin-top: 120px}

/* Footer */
footer{border-top:1px solid rgba(2,6,23,.08); background:#fff}

/* Responsive */
@media (min-width: 900px){
  .featuregrid{grid-template-columns: repeat(3, 1fr)}
}
@media (min-width: 640px){
  .nav-links{display:flex}
}
.services-section {
    padding: 56px 0 16px
}

.services-header {
    display: grid;
    gap: 10px;
    justify-items: center;
    margin-bottom: 22px
}

.services-eyebrow {
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 700
}

.services-title {
    margin: 0;
    font-size: clamp(28px,3.4vw,40px);
    font-weight: 800;
    letter-spacing: -.02em;
    color: #0f172a;
    text-align: center
}

.services-sub {
    margin: 6px 0 0;
    max-width: 780px;
    text-align: center;
    color: #475569
}

.services-grid {
    display: grid;
    gap: 20px
}

@media (min-width:900px) {
    .services-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 24px
    }
}

.service-card {
    position: relative;
    height: 100%;
    border-radius: 22px;
    background: #fff;
    border: 1px solid rgba(2,6,23,.08);
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 26px 56px -34px rgba(15,23,42,.35);
    transition: transform .22s ease, box-shadow .22s ease
}

    .service-card::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 22px;
        pointer-events: none;
        box-shadow: inset 0 0 0 1px rgba(2,6,23,.06)
    }

    .service-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 38px 78px -34px rgba(37,99,235,.22)
    }

.service-head {
    display: flex;
    align-items: center;
    gap: 12px
}

.service-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    color: #0f172a
}

    .service-ico svg {
        width: 28px;
        height: 28px
    }

.service-ico--sales {
    background: linear-gradient(135deg, rgba(168,85,247,.14), rgba(59,130,246,.18));
    color: #1e3a8a
}

.service-ico--data {
    background: linear-gradient(135deg, rgba(14,165,233,.16), rgba(5,150,105,.18));
    color: #0f766e
}

.service-ico--assets {
    background: linear-gradient(135deg, rgba(59,130,246,.14), rgba(37,99,235,.22));
    color: #1d4ed8
}

.service-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 750;
    color: #0f172a
}

.service-desc {
    margin: 0;
    color: var(--muted);
    line-height: 1.7
}

.service-list {
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px
}

    .service-list li {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        color: #475569
    }

    .service-list svg {
        width: 18px;
        height: 18px;
        color: var(--brand);
        flex: 0 0 auto;
        margin-top: 2px
    }

.services-cta {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 64px 0 64px 0;
}

.anchor-target {
    scroll-margin-top: 50px; /* height of your fixed header */
}