/* ══════════════════════════════════════════════════════════════════
   innobu · Homepage Cohesion Layer — "Editorial Dark"
   Loaded LAST on de/ + en/ homepages so it refines the existing
   section styles into ONE cinematic surface that matches the hero.
   Echoes the hero DNA: deep navy, cyan→teal gradient, Fraunces serif,
   hairline borders, soft glass. Mobile-first refinements throughout.
   ══════════════════════════════════════════════════════════════════ */

:root{
    /* --co-accent/teal/ink/line/glass/panel now live globally in variables.css.
       Only the homepage-specific rhythm token remains here. */
    --co-rhythm:clamp(64px,9vw,116px);
}

/* ── 1 · Surface now lives globally in styles.css body{} (Editorial Dark).
   Removed from here to single-source it. ── */

/* ── 2 · Hero → content seam: remove the dead gap, set a calm rhythm ── */
.ino-hero + .container.container-mt-20{margin-top:0}
main > .container.container-mt-20{padding-top:clamp(22px,3.5vw,44px)}
/* the first section sits right under the hero — no extra top margin */
.container.container-mt-20 > section:first-child{margin-top:0}

.hero,
.ki-adoption-stats,
.articles-section,
.transformation-projects-section,
.resources-section,
.cta-section{
    margin-top:var(--co-rhythm);
    margin-bottom:var(--co-rhythm);
}
.hero{padding-bottom:0}

/* ── 3 · Editorial section headings (tie every section to the hero serif) ── */
.section-eyebrow{
    display:flex;align-items:center;justify-content:center;gap:13px;
    font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
    color:rgba(64,192,240,.82);font-weight:600;margin-bottom:16px;
}
.section-eyebrow::before,.section-eyebrow::after{
    content:"";width:32px;height:1px;
    background:linear-gradient(90deg,transparent,rgba(64,192,240,.6));
}
.section-eyebrow::after{transform:scaleX(-1)}

.section-heading,
.ki-adoption-stats .stats-title{
    font-family:'Fraunces',Georgia,serif;font-weight:500;
    letter-spacing:-.015em;line-height:1.15;text-shadow:none;
    background:linear-gradient(120deg,#fff 0%,#e6f2ff 28%,var(--co-accent) 66%,var(--co-teal) 100%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.section-heading-sm{font-family:'Fraunces',Georgia,serif;font-weight:500;color:#eaf4ff}
.stats-subtitle,.projects-subtitle,.insights-intro-text{color:rgba(160,192,224,.7)}

/* ── 4 · Card language: glass-on-dark, hairline, cyan hover-lift ── */

/* Value-prop "pillars" (philosophy section) — match the bento glass */
.value-prop-box{
    background:var(--co-glass);
    border:1px solid var(--co-line);
    border-radius:16px;
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    box-shadow:0 22px 60px -34px rgba(0,0,0,.85);
}
.value-prop-box:hover{border-color:rgba(64,192,240,.45);transform:translateY(-6px)}

/* Big panels → subtle dark glass instead of bright blue blocks */
.ki-adoption-stats,
.transformation-projects-section,
.resources-section{
    background:var(--co-panel);
    border:1px solid var(--co-line);
    border-radius:22px;
    box-shadow:0 36px 90px -46px rgba(0,0,0,.9);
}
/* marquee edge-fades follow the new panel tone */
.logo-fade-left{background:linear-gradient(to right,#0b1426 0%,transparent 100%)}
.logo-fade-right{background:linear-gradient(to left,#0b1426 0%,transparent 100%)}

/* Stat cards — serif numerals echo the hero trust row */
.stat-card{
    background:linear-gradient(150deg,rgba(12,22,40,.5),rgba(20,34,58,.42));
    border:1px solid var(--co-line);
    border-radius:16px;
}
.stat-card:hover{border-color:rgba(64,192,240,.42)}
.stat-card:nth-child(2){border-color:rgba(0,178,169,.22)}
.stat-card:nth-child(3){border-color:rgba(64,192,240,.16)}
.stat-value{
    font-family:'Fraunces',Georgia,serif;font-weight:500;
    text-shadow:0 0 26px rgba(64,192,240,.32);
}

/* Bento + resource cards — align radius/hairline to the system */
.hb-card{border-radius:16px}
.hb-card--featured,.hb-card--standard{border-color:var(--co-line)}
.resource-group{border-top-color:rgba(64,192,240,.3)}

/* ── 5 · CTA — cinematic closer that bookends the hero ── */
.cta-section{
    border-top:1px solid var(--co-line);
    padding-top:clamp(52px,7vw,96px);
}
.cta-section .section-heading{font-size:clamp(2rem,5vw,3.4rem)}
.cta-button{border-radius:100px}
.cta-trust-signals{color:rgba(150,178,208,.55)}

/* ── 6 · Scroll-reveal (JS adds .ino-reveal, then .is-in in view) ── */
.ino-reveal{
    opacity:0;transform:translateY(26px);
    transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);
    will-change:opacity,transform;
}
.ino-reveal.is-in{opacity:1;transform:none}

/* ── 7 · Mobile refinements (great UX over completeness) ── */
@media(max-width:768px){
    :root{--co-rhythm:48px}
    main > .container.container-mt-20{padding-top:14px}
    .ki-adoption-stats{padding:34px 20px;border-radius:18px}
    .transformation-projects-section{border-radius:18px}
    .resources-section{padding:30px 22px;border-radius:18px}
    .value-props-container{gap:14px}
    .section-heading{font-size:clamp(1.55rem,6.4vw,2.1rem)}
    .stat-value{font-size:2.4rem}
    .cta-section{padding-top:44px}
    .cta-button{display:block;width:100%;text-align:center;margin:0 auto 12px}
}
@media(max-width:420px){
    :root{--co-rhythm:44px}
    .section-eyebrow::before,.section-eyebrow::after{width:20px}
    .value-prop-box{padding-top:2.25rem}
}

/* ── 8 · Honour reduced motion ── */
@media(prefers-reduced-motion:reduce){
    .ino-reveal{opacity:1;transform:none;transition:none}
    .value-prop-box:hover,.stat-card:hover{transform:none}
}