:root {
    --navy-900: #0a1628;
    --navy-800: #0f2140;
    --navy-700: #16305c;
    --navy-600: #1e4176;
    --accent: #06b6d4;
    --accent-600: #0891b2;
    /* Accent glow softened: the reference sites spend brand color on <1% of
       area (Stripe ~0.2%). Lower-alpha glow keeps the CTA an event, not a wash. */
    --accent-glow: rgba(6, 182, 212, 0.22);
    --gold: #f5b700;
    /* Ink is a near-black desaturated navy, never #000 (Stripe #061B31 /
       Vercel #171717 / Ramp warm-black). */
    --ink: #0b1b2e;
    --muted: #51617a;
    /* Hairline borders carry separation (Vercel/Linear); softer than before. */
    --line: #e7ecf3;
    --hairline: rgba(13, 30, 54, 0.08);
    /* Off-white canvas; pure white is reserved for raised cards
       (Vercel #FAFAFA, Stripe #F8FAFD, Ramp warm paper). */
    --canvas: #f9fbfd;
    --bg-soft: #f3f6fb;
    --white: #ffffff;
    /* Mono for eyebrows/labels/figures — the "technical metadata" uniform
       shared by Linear (Berkeley Mono), Vercel (Geist Mono), Ramp (Mono). */
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    /* Gövde ve başlık fontları — admin "Ayarlar → Tipografi"den değiştirilebilir.
       _Layout gerekli Google Fonts bağlantısını otomatik ekler ve bu değişkenleri override eder. */
    --ff-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ff-heading: 'Sora', 'Inter', system-ui, sans-serif;
    /* Tighter, more consistent radius scale (refs sit at 4-12px, never 16+). */
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 18px;
    /* Layered, low-opacity shadows in the Stripe idiom: a tight contact
       shadow plus a soft lift, both low alpha. Depth, not a drop. */
    --shadow-sm: 0 1px 2px rgba(15, 33, 64, 0.06), 0 1px 1px rgba(15, 33, 64, 0.04);
    --shadow-md: 0 16px 32px -14px rgba(50, 50, 93, 0.18), 0 6px 14px -8px rgba(10, 22, 40, 0.10);
    --shadow-lg: 0 30px 60px -22px rgba(10, 22, 40, 0.32), 0 10px 24px -14px rgba(10, 22, 40, 0.18);
    /* Motion vocabulary */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --dur-press: 140ms;
    --dur-ui: 200ms;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--ff-body);
    color: var(--ink);
    background: var(--canvas);
    margin: 0;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Display type: tighter tracking + line-height and weight 700, not 800 —
   none of the five reference sites set display type at 800 (Stripe 300,
   Vercel 400, Mercury 480, Ramp 400, Linear 510). Tight negative tracking
   does the work that extra weight was doing. */
h1, h2, h3, h4, .brand-text { font-family: var(--ff-heading); letter-spacing: -0.021em; line-height: 1.12; }

.container { max-width: 1160px; }

a { text-decoration: none; }

section { padding: 84px 0; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--accent-600);
    margin-bottom: 14px;
}
/* Mono eyebrows get a small leading tick — a system/technical marker,
   the way Linear/Vercel/Ramp flag metadata rows. */
.eyebrow::before {
    content: "";
    width: 14px; height: 1px;
    background: currentColor;
    opacity: .6;
}

.section-title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 700; margin: 0 0 14px; color: var(--navy-800); }
.section-sub { font-size: 1.08rem; color: var(--muted); max-width: 620px; margin: 0 auto; }
.text-center .section-sub { margin-left: auto; margin-right: auto; }

/* ---------- Header / Nav ---------- */
.site-header {
    position: sticky; top: 0; z-index: 1000;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
}
.navbar { padding: 14px 0; }
.navbar-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.brand-mark {
    display: inline-grid; place-items: center;
    width: 38px; height: 38px; border-radius: 11px;
    background: linear-gradient(135deg, var(--accent), var(--navy-700));
    color: #fff; font-family: var(--ff-heading); font-weight: 700; font-size: .95rem;
    box-shadow: 0 6px 16px var(--accent-glow);
}
.brand-text { font-size: 1.22rem; color: var(--navy-800); }
.brand-accent { color: var(--accent-600); }
.navbar-nav .nav-link { font-weight: 600; color: var(--navy-800); padding: .5rem .9rem; border-radius: 9px; transition: color var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out); }
.navbar-nav .nav-link:hover { color: var(--accent-600); background: var(--bg-soft); }
.lang-switch .nav-link { border: 1px solid var(--line); font-weight: 700; min-width: 44px; text-align: center; }

/* Mobil menü butonu (hamburger) — Bootstrap değişkenine bağımlı olmadan garanti görünür */
.navbar-toggler { border: 1.5px solid var(--line); border-radius: 10px; padding: 7px 10px; line-height: 1; }
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(6, 182, 212, .18); outline: none; }
.navbar-toggler-icon {
    width: 24px; height: 24px; vertical-align: middle;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%230f2140' stroke-linecap='round' stroke-width='2.6' d='M4 8h22M4 15h22M4 22h22'/%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: center; background-size: 100%;
}

.btn-accent {
    background: linear-gradient(135deg, var(--accent), var(--accent-600));
    color: #fff; font-weight: 600; border: none; border-radius: var(--radius-sm);
    padding: .62rem 1.3rem;
    /* Lighter, layered lift instead of a heavy single glow. */
    box-shadow: 0 1px 2px rgba(8, 47, 56, 0.24), 0 6px 16px -6px var(--accent-glow);
    transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out);
}
.btn-accent:hover { color: #fff; box-shadow: 0 2px 4px rgba(8, 47, 56, 0.24), 0 10px 22px -6px var(--accent-glow); }
.btn-outline-light-navy {
    border: 1px solid rgba(255,255,255,.35); color: #fff; font-weight: 600;
    border-radius: var(--radius-sm); padding: .62rem 1.3rem;
    transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out);
}
.btn-outline-light-navy:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.55); color: #fff; }
.btn-navy {
    background: var(--navy-800); color: #fff; font-weight: 600; border: none;
    border-radius: var(--radius-sm); padding: .72rem 1.5rem;
    transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out);
}
.btn-navy:hover { background: var(--navy-700); color: #fff; }

/* ---------- Hero ---------- */
.hero {
    position: relative; overflow: hidden;
    background: radial-gradient(1200px 500px at 80% -10%, rgba(6,182,212,.22), transparent 60%),
                linear-gradient(160deg, var(--navy-900), var(--navy-800) 55%, var(--navy-700));
    color: #eaf2ff; padding: 96px 0 104px;
}
.hero::after {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 26px 26px; opacity: .6; pointer-events: none;
}
.hero .container { position: relative; z-index: 2; }
.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(6,182,212,.14); border: 1px solid rgba(6,182,212,.35);
    color: #8be8f7; font-weight: 600; font-size: .85rem;
    padding: 7px 15px; border-radius: 999px; margin-bottom: 22px;
}
.hero-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(6,182,212,.25); }
.hero h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); font-weight: 700; line-height: 1.07; letter-spacing: -0.028em; margin: 0 0 18px; color: #fff; }
.hero p.lead { font-size: 1.16rem; color: #b9c9e4; max-width: 620px; margin: 0 0 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-stats { display: flex; gap: 38px; margin-top: 54px; flex-wrap: wrap; }
.hero-stat .num { font-family: var(--ff-heading); font-size: 2.1rem; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.hero-stat .num span { color: var(--accent); }
.hero-stat .label { font-family: var(--mono); color: #9fb2d4; font-size: .76rem; letter-spacing: .03em; text-transform: uppercase; }

.hero-visual {
    background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.12); border-radius: 20px; padding: 22px;
    box-shadow: var(--shadow-lg);
}
.mock-row { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: 12px; background: rgba(255,255,255,.06); margin-bottom: 12px; }
.mock-row:last-child { margin-bottom: 0; }
.mock-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(6,182,212,.18); color: #7fe3f5; font-size: 1.1rem; flex: none; }
.mock-row .t { color: #eaf2ff; font-weight: 600; font-size: .95rem; }
.mock-row .s { color: #9fb2d4; font-size: .82rem; }
.mock-badge { margin-left: auto; font-size: .72rem; font-weight: 700; color: #063; background: #9af5c9; padding: 3px 9px; border-radius: 999px; }

/* ---------- Cards / grid ---------- */
.bg-soft { background: var(--bg-soft); }
.card-feature {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 30px 26px; height: 100%; box-shadow: var(--shadow-sm);
    transition: transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out);
}
.card-feature:hover { box-shadow: var(--shadow-md); border-color: rgba(6,182,212,.4); }
.feature-ic {
    width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
    background: linear-gradient(135deg, rgba(6,182,212,.16), rgba(22,48,92,.1));
    color: var(--accent-600); font-size: 1.5rem; margin-bottom: 18px;
}
.card-feature h3 { font-size: 1.2rem; font-weight: 700; color: var(--navy-800); margin: 0 0 10px; }
.card-feature p { color: var(--muted); margin: 0; font-size: .98rem; }

/* step */
.step { text-align: center; padding: 20px; }
.step-num {
    width: 60px; height: 60px; margin: 0 auto 18px; border-radius: 50%;
    display: grid; place-items: center; font-family: var(--ff-heading); font-weight: 700; font-size: 1.4rem;
    color: #fff; background: linear-gradient(135deg, var(--accent), var(--navy-700));
    box-shadow: 0 10px 24px var(--accent-glow);
}
.step h3 { font-size: 1.12rem; color: var(--navy-800); margin: 0 0 8px; }
.step p { color: var(--muted); margin: 0; }

/* who */
.who-pill {
    display: flex; align-items: center; gap: 14px;
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    padding: 18px 20px; box-shadow: var(--shadow-sm); height: 100%;
}
.who-pill .ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--navy-800); color: var(--accent); font-size: 1.3rem; flex: none; }
.who-pill span { font-weight: 700; color: var(--navy-800); }

/* why list */
.why-item { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.why-item:last-child { border-bottom: none; }
.why-item .ic { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; background: rgba(6,182,212,.14); color: var(--accent-600); font-size: 1.2rem; flex: none; }
.why-item h4 { margin: 0 0 4px; font-size: 1.05rem; color: var(--navy-800); }
.why-item p { margin: 0; color: var(--muted); }

/* CTA band */
.cta-band {
    background: radial-gradient(900px 400px at 85% 0%, rgba(6,182,212,.26), transparent 55%),
                linear-gradient(135deg, var(--navy-800), var(--navy-700));
    color: #fff; border-radius: 22px; padding: 56px 48px; text-align: center; box-shadow: var(--shadow-lg);
}
.cta-band h2 { color: #fff; font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 700; margin: 0 0 12px; }
.cta-band p { color: #c6d6f0; max-width: 560px; margin: 0 auto 26px; }

/* ---------- Page header ---------- */
.page-head {
    background: linear-gradient(160deg, var(--navy-900), var(--navy-700));
    color: #fff; padding: 72px 0 60px; text-align: center;
}
.page-head h1 { color: #fff; font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 700; letter-spacing: -0.025em; margin: 0 0 12px; }
.page-head p { color: #b9c9e4; max-width: 640px; margin: 0 auto; font-size: 1.08rem; }

/* solution detail */
.sol-detail { display: flex; gap: 26px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow-sm); height: 100%; }
.sol-detail .ic { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(6,182,212,.16), rgba(22,48,92,.1)); color: var(--accent-600); font-size: 1.8rem; flex: none; }
.sol-detail h3 { color: var(--navy-800); margin: 0 0 10px; font-size: 1.3rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sol-detail p { color: var(--muted); margin: 0; }
.chip { font-family: var(--mono); font-size: .66rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--accent-600); background: rgba(6,182,212,.1); padding: 3px 9px; border-radius: 7px; }

/* FAQ */
.accordion-button { font-weight: 700; color: var(--navy-800); }
.accordion-button:not(.collapsed) { color: var(--accent-600); background: rgba(6,182,212,.06); box-shadow: none; }
.accordion-button:focus { box-shadow: none; }

/* about */
.value-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px; text-align: center; box-shadow: var(--shadow-sm); height: 100%; }
.value-card .ic { font-size: 1.8rem; color: var(--accent-600); margin-bottom: 10px; }
.value-card h4 { margin: 0; font-size: 1.05rem; color: var(--navy-800); }

/* ---------- Forms ---------- */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow-md); }
.form-label { font-weight: 600; color: var(--navy-800); margin-bottom: 6px; }
.form-control, .form-select { border: 1.5px solid var(--line); border-radius: 11px; padding: .7rem .9rem; transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out); }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(6,182,212,.14); }
.info-card { background: var(--navy-800); color: #fff; border-radius: var(--radius); padding: 34px; height: 100%; }
.info-card h3 { color: #fff; }
.info-row { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.info-row:last-child { border-bottom: none; }
.info-row .ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: rgba(6,182,212,.18); color: var(--accent); flex: none; }
.info-row .k { color: #9fb2d4; font-size: .82rem; }
.info-row .v { color: #fff; font-weight: 600; }
.alert-success-soft { background: #e7f9f0; border: 1px solid #9af5c9; color: #065f46; border-radius: 12px; padding: 16px 18px; font-weight: 600; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); color: #b9c9e4; padding: 60px 0 28px; }
.footer-brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-brand .brand-text { color: #fff; }
.footer-tagline { color: #8fa3c4; max-width: 320px; }
.site-footer h6 { color: #fff; font-weight: 700; margin-bottom: 16px; font-size: .95rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a, .footer-links li { color: #a9bcdb; }
.footer-links a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: 40px; padding-top: 22px; font-size: .88rem; color: #7f93b5; text-align: center; }
.footer-social { display: flex; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.footer-social a { color: #a9bcdb; font-size: .85rem; font-weight: 600; }
.footer-social a:hover { color: var(--accent); }

/* ---------- Admin ---------- */
.admin-wrap { min-height: 100vh; background: var(--bg-soft); padding: 40px 0; }
.login-card { max-width: 420px; margin: 8vh auto; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 40px; }
.login-card .brand-mark { margin: 0 auto 18px; width: 52px; height: 52px; font-size: 1.1rem; }
.table-leads { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.table-leads thead th { background: var(--navy-800); color: #fff; font-weight: 600; font-size: .85rem; border: none; white-space: nowrap; }
.table-leads td { vertical-align: middle; font-size: .9rem; }
.stat-pill { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; box-shadow: var(--shadow-sm); }
.stat-pill .n { font-family: var(--ff-heading); font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em; color: var(--navy-800); }
.stat-pill .l { font-family: var(--mono); color: var(--muted); font-size: .72rem; letter-spacing: .02em; text-transform: uppercase; }
.badge-new { background: #fde68a; color: #92400e; }
.badge-done { background: #bbf7d0; color: #065f46; }

.text-danger-note { color: #dc2626; font-size: .85rem; }

@media (max-width: 991px) {
    section { padding: 60px 0; }
    .navbar-collapse { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
    .navbar-nav { padding-top: 4px; gap: 2px; align-items: stretch !important; }
    .navbar-nav .nav-link { padding: 11px 6px; border-radius: 9px; }
    .navbar-nav .lang-switch { margin: 6px 0; }
    .lang-switch .nav-link { display: inline-block; width: fit-content; }
    .navbar-nav .btn-accent { display: block; text-align: center; margin-top: 6px; }
    .hero { padding: 70px 0 76px; }
    .cta-band { padding: 42px 24px; }
    .sol-detail { flex-direction: column; gap: 18px; }
}

/* ===================================================================
   Motion layer (added by animation pass)
   =================================================================== */

/* Validation messages — fade/slide in instead of teleporting.
   jQuery-unobtrusive toggles .field-validation-error on the span and
   .input-validation-error on the field. */
span[data-valmsg-for] {
    opacity: 0; transform: translateY(-2px);
    transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
}
span.field-validation-error { opacity: 1; transform: none; }
.input-validation-error { border-color: #dc2626; }

/* Success banner — one-time entrance on the post-redirect page. */
.alert-success-soft {
    transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
}
@starting-style {
    .alert-success-soft { opacity: 0; transform: translateY(-8px); }
}

/* Hero mock panel — one-time staggered entrance (first impression only). */
@keyframes rowIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
.hero-visual .mock-row { animation: rowIn 500ms var(--ease-out) both; }
.hero-visual .mock-row:nth-child(2) { animation-delay: 40ms; }
.hero-visual .mock-row:nth-child(3) { animation-delay: 80ms; }
.hero-visual .mock-row:nth-child(4) { animation-delay: 120ms; }

/* Submit button loading state (toggled by site.js). */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
    content: ""; position: absolute; inset: 0; margin: auto;
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
    animation: btnspin 600ms linear infinite;
}
@keyframes btnspin { to { transform: rotate(360deg); } }

/* Hover movement only for real pointers — prevents sticky hover on touch. */
@media (hover: hover) and (pointer: fine) {
    .btn-accent:hover, .btn-navy:hover { transform: translateY(-2px); }
    .card-feature:hover { transform: translateY(-5px); }
}

/* Press feedback — declared after :hover so a desktop press (hover + active)
   wins the transform; works on touch too. */
.btn-accent:active, .btn-navy:active, .btn-outline-light-navy:active { transform: translateY(0) scale(0.97); }

/* Respect reduced motion: keep gentle opacity fades, remove movement. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero-visual .mock-row { animation: none; }
    .btn-accent:hover, .btn-navy:hover, .card-feature:hover,
    .btn-accent:active, .btn-navy:active, .btn-outline-light-navy:active { transform: none; }
    .alert-success-soft { transition: opacity 400ms var(--ease-out); }
    @starting-style {
        .alert-success-soft { transform: none; }
    }
}

/* ===================================================================
   Hero 3D globe (contained) + heading entrance
   =================================================================== */
.hero-3d { position: relative; width: 100%; height: 420px; }
.hero-3d__canvas { width: 100% !important; height: 100% !important; display: block; cursor: grab; touch-action: pan-y; }
.hero-3d__canvas:active { cursor: grabbing; }
.hero-globe-cap {
    position: absolute; right: 4px; bottom: 0; pointer-events: none;
    font-size: .64rem; letter-spacing: .14em; font-weight: 600; color: #7f93b5;
}

/* CSS orb shown only when WebGL/Three is unavailable */
.hero-3d__orb { display: none; }
.hero-3d.no-3d .hero-3d__canvas { display: none; }
.hero-3d.no-3d .hero-3d__orb {
    display: block; position: absolute; inset: 0; margin: auto; width: 74%; aspect-ratio: 1 / 1; border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, rgba(6, 182, 212, .32), rgba(6, 182, 212, .07) 46%, transparent 70%);
    border: 1px solid rgba(6, 182, 212, .22);
}

/* Heading entrance — one authored moment, gentle fade-up */
@keyframes heroUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero-badge, .hero h1, .hero p.lead, .hero-actions, .hero-stats { animation: heroUp .7s var(--ease-out) both; }
.hero h1 { animation-delay: .07s; }
.hero p.lead { animation-delay: .15s; }
.hero-actions { animation-delay: .23s; }
.hero-stats { animation-delay: .31s; }

@media (max-width: 991px) {
    .hero-3d { height: 300px; margin-top: 8px; }
    .hero-globe-cap { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-badge, .hero h1, .hero p.lead, .hero-actions, .hero-stats { animation: none; }
    .hero-3d__canvas { cursor: default; }
}

/* ===================================================================
   Line icons (shared SVG set via Icons.Svg)
   =================================================================== */
.c-ic { display: inline-block; vertical-align: middle; width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.feature-ic .c-ic { width: 28px; height: 28px; }
.who-pill .ic .c-ic { width: 24px; height: 24px; }
.why-item .ic .c-ic { width: 22px; height: 22px; }
.value-card .ic .c-ic { width: 32px; height: 32px; }
.info-row .ic .c-ic { width: 22px; height: 22px; }
.sol-detail .ic .c-ic { width: 30px; height: 30px; }
.c-ic--sm { width: 15px; height: 15px; vertical-align: -2px; stroke-width: 1.8; }

/* ===================================================================
   Dynamic page content
   =================================================================== */
.page-content { color: var(--ink); line-height: 1.75; font-size: 1.05rem; }
.page-content h2 { font-size: 1.6rem; color: var(--navy-800); margin: 1.6em 0 .5em; }
.page-content h3 { font-size: 1.25rem; color: var(--navy-800); margin: 1.3em 0 .4em; }
.page-content p { margin: 0 0 1em; }
.page-content ul, .page-content ol { margin: 0 0 1em 1.2em; }
.page-content li { margin-bottom: .4em; }
.page-content a { color: var(--accent-600); text-decoration: underline; }
.page-content img { max-width: 100%; border-radius: 12px; }
.page-content blockquote { border-left: 3px solid var(--accent); margin: 1em 0; padding: .4em 0 .4em 1.1em; color: var(--muted); }

/* ===================================================================
   Cost calculator
   =================================================================== */
.calc-result { position: sticky; top: 90px; background: var(--navy-800); color: #fff; border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-md); }
.calc-result h3 { color: #fff; font-size: 1.15rem; margin: 0 0 18px; }
.calc-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); color: #c6d6f0; font-size: .95rem; }
.calc-line em { color: #8fa3c4; font-style: normal; font-size: .82rem; }
.calc-line--sub { color: #fff; font-weight: 600; }
.calc-val { font-variant-numeric: tabular-nums; font-weight: 600; color: #fff; white-space: nowrap; }
.calc-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; padding: 15px 18px; background: linear-gradient(135deg, var(--accent), var(--accent-600)); border-radius: 12px; }
.calc-total span:first-child { font-weight: 600; }
.calc-total span:last-child { font-family: var(--ff-heading); font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-eff { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; color: #9fb2d4; font-size: .9rem; }
.calc-eff__badge { background: rgba(6, 182, 212, .18); color: #7fe3f5; font-weight: 700; padding: 4px 12px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.calc-disclaimer { margin-top: 28px; color: var(--muted); font-size: .85rem; max-width: 760px; line-height: 1.6; }
@media (max-width: 991px) { .calc-result { position: static; } }