@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
    --ink: #0a1726;
    --ink-soft: #13253a;
    --slate: #587086;
    --muted: #8496a8;
    --line: #dce5ec;
    --paper: #f5f8fb;
    --white: #ffffff;
    --blue: #5471ff;
    --blue-dark: #3e58e7;
    --mint: #53d7bb;
    --gold: #ffbf69;
    --coral: #ff8e86;
    --radius-lg: 28px;
    --radius-md: 18px;
    --shadow-sm: 0 12px 30px rgba(10, 23, 38, 0.07);
    --shadow-lg: 0 24px 70px rgba(10, 23, 38, 0.16);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.site-body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }

.site-body h1,
.site-body h2,
.site-body h3,
.site-body h4,
.site-body p { margin-top: 0; }

.site-body h1,
.site-body h2,
.site-body h3,
.site-body h4,
.brand-name,
.eyebrow,
.section-kicker,
.hero-stat strong,
.service-number,
.process-number {
    font-family: 'Space Grotesk', 'DM Sans', sans-serif;
}

.site-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(220, 229, 236, .7);
    background: rgba(245, 248, 251, .86);
    backdrop-filter: blur(18px);
}

.site-nav-inner,
.site-container {
    width: min(1160px, calc(100% - 48px));
    margin: 0 auto;
}

.site-nav-inner {
    min-height: 78px;
    display: flex;
    align-items: center;
    gap: 32px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    flex-shrink: 0;
}

.brand-mark {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 13px;
    background: var(--ink);
    color: var(--white);
    box-shadow: 4px 4px 0 var(--mint), 0 8px 18px rgba(10,23,38,.12);
}

.brand-mark svg {
    width: 31px;
    height: 31px;
}

.brand-lockup {
    display: grid;
    gap: 1px;
}

.brand-name {
    color: var(--ink);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .095em;
    line-height: 1;
}

.brand-tagline {
    color: var(--blue-dark);
    font: 700 9px/1.2 'DM Sans', sans-serif;
    letter-spacing: .24em;
}

.site-links {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-left: auto;
}

.site-links a {
    position: relative;
    color: var(--slate);
    font-size: 15px;
    font-weight: 600;
    transition: color .2s ease;
}

.site-links a::after {
    position: absolute;
    right: 0;
    bottom: -10px;
    left: 0;
    height: 2px;
    border-radius: 99px;
    background: var(--blue);
    content: '';
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
}

.site-links a:hover,
.site-links a.active { color: var(--ink); }
.site-links a:hover::after,
.site-links a.active::after { transform: scaleX(1); }

.nav-cta,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    font: 600 15px/1 'DM Sans', sans-serif;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.nav-cta {
    padding: 13px 18px;
    background: var(--ink);
    color: var(--white);
}

.nav-cta:hover,
.button:hover {
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(10, 23, 38, .15);
}

.nav-cta::after,
.button::after { content: '↗'; font-size: 16px; }

.mobile-nav { display: none; }

.site-main { overflow: hidden; }

.hero {
    position: relative;
    padding: 72px 0 68px;
    background: var(--paper);
}

.hero::before {
    position: absolute;
    top: 0;
    right: -180px;
    width: 560px;
    height: 560px;
    border: 1px solid rgba(84, 113, 255, .13);
    border-radius: 50%;
    content: '';
    box-shadow: 0 0 0 42px rgba(84, 113, 255, .035), 0 0 0 84px rgba(84, 113, 255, .025);
}

.hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    align-items: center;
    gap: 56px;
}

.eyebrow,
.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    color: var(--blue-dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.eyebrow::before,
.section-kicker::before {
    width: 26px;
    height: 2px;
    border-radius: 99px;
    background: currentColor;
    content: '';
}

.hero h1 {
    max-width: 700px;
    margin-bottom: 24px;
    color: var(--ink);
    font-size: clamp(3.5rem, 5.4vw, 5.5rem);
    font-weight: 600;
    letter-spacing: -.075em;
    line-height: .98;
}

.hero h1 em {
    position: relative;
    color: var(--blue);
    font-style: normal;
}

.hero h1 em::after {
    position: absolute;
    right: 4px;
    bottom: -4px;
    left: 2px;
    height: 8px;
    border-radius: 50%;
    background: var(--mint);
    content: '';
    opacity: .5;
    transform: rotate(-2deg);
    z-index: -1;
}

.hero-copy {
    max-width: 540px;
    margin-bottom: 32px;
    color: var(--slate);
    font-size: 18px;
    line-height: 1.65;
}

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

.button { padding: 16px 22px; }

.button-primary { background: var(--blue); color: var(--white); }
.button-primary:hover { background: var(--blue-dark); }

.button-secondary {
    border-color: var(--line);
    background: var(--white);
    color: var(--ink);
}

.button-secondary:hover { background: var(--ink); }

.hero-note {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
    color: var(--muted);
    font-size: 14px;
}

.hero-note-mark { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: var(--ink); color: var(--mint); font: 700 10px/1 'Space Grotesk', sans-serif; letter-spacing: .04em; }

.avatar-stack { display: flex; }
.avatar {
    display: grid;
    width: 28px;
    height: 28px;
    margin-left: -8px;
    place-items: center;
    border: 2px solid var(--paper);
    border-radius: 50%;
    color: var(--ink);
    font-size: 10px;
    font-weight: 700;
}
.avatar:first-child { margin-left: 0; background: var(--gold); }
.avatar:nth-child(2) { background: var(--mint); }
.avatar:nth-child(3) { background: var(--coral); }

.hero-visual {
    position: relative;
    min-height: 430px;
}

.signal-card {
    position: absolute;
    inset: 22px 0 0 30px;
    padding: 26px;
    overflow: hidden;
    border-radius: 30px;
    background: var(--ink);
    box-shadow: var(--shadow-lg);
}

.signal-card::before {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 35px 35px;
    content: '';
    mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}

.signal-top,
.signal-bottom { position: relative; display: flex; align-items: center; justify-content: space-between; }
.signal-label { color: rgba(255,255,255,.62); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.signal-status { display: inline-flex; align-items: center; gap: 7px; color: var(--mint); font-size: 13px; font-weight: 600; }
.signal-status::before { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 14px currentColor; content: ''; }

.signal-art {
    position: absolute;
    top: 93px;
    right: 38px;
    bottom: 88px;
    left: 38px;
}

.signal-art::before,
.signal-art::after {
    position: absolute;
    inset: 10% 9%;
    border: 1px solid rgba(83, 215, 187, .45);
    border-radius: 50%;
    content: '';
    transform: rotate(-28deg) skewX(16deg);
}

.signal-art::after {
    inset: 24% 17%;
    border-color: rgba(84, 113, 255, .8);
    transform: rotate(28deg) skewX(-16deg);
}

.signal-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 116px;
    height: 116px;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #8ef0d7, #5471ff 42%, #263d96 72%);
    box-shadow: 0 0 0 14px rgba(83,215,187,.09), 0 0 70px rgba(84,113,255,.55);
    transform: translate(-50%, -50%);
}

.signal-core::before,
.signal-core::after {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 0 18px var(--white);
    content: '';
}
.signal-core::before { top: 20px; left: 26px; }
.signal-core::after { right: 21px; bottom: 23px; }

.signal-node { position: absolute; width: 10px; height: 10px; border: 2px solid var(--ink); border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px rgba(83,215,187,.16); }
.signal-node.one { top: 17%; left: 18%; }
.signal-node.two { top: 21%; right: 11%; background: var(--gold); box-shadow: 0 0 0 5px rgba(255,191,105,.14); }
.signal-node.three { right: 17%; bottom: 13%; background: var(--coral); box-shadow: 0 0 0 5px rgba(255,142,134,.14); }
.signal-node.four { bottom: 15%; left: 13%; }

.signal-bottom { position: absolute; right: 26px; bottom: 24px; left: 26px; }
.signal-bottom strong { color: var(--white); font: 600 18px/1.2 'Space Grotesk', sans-serif; letter-spacing: -.04em; }
.signal-bottom span { color: rgba(255,255,255,.55); font-size: 12px; }

.floating-stat {
    position: absolute;
    right: -22px;
    bottom: 40px;
    width: 188px;
    padding: 20px;
    border: 1px solid rgba(220, 229, 236, .85);
    border-radius: 18px;
    background: rgba(255,255,255,.95);
    box-shadow: var(--shadow-sm);
}
.floating-stat span { display: block; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.floating-stat strong { display: block; margin: 6px 0 5px; color: var(--ink); font: 700 32px/1 'Space Grotesk', sans-serif; letter-spacing: -.08em; }
.floating-stat small { color: #29a88d; font-size: 12px; font-weight: 600; }

.trust-strip { padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
.trust-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.trust-label { color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.trust-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.trust-chip { padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--slate); font-size: 13px; font-weight: 600; }

.enterprise-section { padding: 72px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #edf2f6; }
.enterprise-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(420px, 1.18fr); align-items: center; gap: 70px; }
.enterprise-copy h2 { max-width: 560px; margin-bottom: 18px; font-size: clamp(2.35rem, 4vw, 3.8rem); letter-spacing: -.07em; line-height: 1.04; }
.enterprise-copy p { max-width: 500px; margin-bottom: 24px; color: var(--slate); font-size: 17px; }
.systems-card { padding: 24px 26px; border-radius: 22px; background: var(--ink); color: var(--white); box-shadow: var(--shadow-lg); }
.systems-card-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 18px; color: rgba(255,255,255,.54); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.systems-live { display: inline-flex; align-items: center; gap: 7px; color: var(--mint); white-space: nowrap; }
.systems-live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 14px currentColor; }
.system-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 9px; align-items: center; gap: 13px; padding: 17px 0; border-top: 1px solid rgba(255,255,255,.12); }
.system-index { color: var(--mint); font: 700 11px/1 'Space Grotesk', sans-serif; }
.system-row div { display: grid; gap: 4px; }
.system-row strong { color: var(--white); font: 600 17px/1.1 'Space Grotesk', sans-serif; letter-spacing: -.03em; }
.system-row small { color: rgba(255,255,255,.52); font-size: 13px; }
.system-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px rgba(84,113,255,.14); }

.section { padding: 76px 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 34px; }
.section-head h2 { max-width: 620px; margin-bottom: 0; font-size: clamp(2.4rem, 4vw, 4rem); font-weight: 600; letter-spacing: -.07em; line-height: 1.03; }
.section-intro { max-width: 430px; margin-bottom: 3px; color: var(--slate); font-size: 17px; }
.section-kicker { margin-bottom: 16px; }

.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.service-card { position: relative; min-height: 290px; padding: 28px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.service-card:hover { border-color: rgba(84,113,255,.4); box-shadow: var(--shadow-sm); transform: translateY(-7px); }
.service-card::after { position: absolute; right: -45px; bottom: -55px; width: 150px; height: 150px; border: 1px solid rgba(84,113,255,.1); border-radius: 50%; content: ''; }
.service-card:nth-child(2)::after { border-color: rgba(83,215,187,.18); }
.service-card:nth-child(3)::after { border-color: rgba(255,191,105,.2); }
.service-icon { display: grid; width: 46px; height: 46px; margin-bottom: 32px; place-items: center; border-radius: 14px; background: #edf0ff; color: var(--blue); font-size: 21px; }
.service-card:nth-child(2) .service-icon { background: #e8faf5; color: #21ad91; }
.service-card:nth-child(3) .service-icon { background: #fff5e6; color: #dc8f26; }
.service-number { position: absolute; top: 29px; right: 30px; color: var(--muted); font-size: 12px; font-weight: 700; }
.service-card h3 { margin-bottom: 12px; font-size: 24px; letter-spacing: -.05em; }
.service-card p { margin-bottom: 22px; color: var(--slate); font-size: 15px; }
.text-link { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-size: 14px; font-weight: 700; }
.text-link::after { content: '→'; color: var(--blue); font-size: 18px; transition: transform .2s ease; }
.text-link:hover::after { transform: translateX(4px); }

.process-section { background: var(--ink); color: var(--white); }
.process-section .section-kicker { color: var(--mint); }
.process-section .section-head h2 { color: var(--white); }
.process-section .section-intro { color: rgba(255,255,255,.62); }
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.process-step { position: relative; padding: 28px 38px 22px 0; border-top: 1px solid rgba(255,255,255,.16); }
.process-step:not(:first-child) { padding-left: 36px; border-left: 1px solid rgba(255,255,255,.16); }
.process-number { display: block; margin-bottom: 32px; color: var(--mint); font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.process-step h3 { margin-bottom: 12px; color: var(--white); font-size: 22px; letter-spacing: -.04em; }
.process-step p { max-width: 280px; margin-bottom: 0; color: rgba(255,255,255,.56); font-size: 15px; }

.cta-section { padding: 18px 0 76px; }
.cta-panel { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 35px; padding: 55px 60px; overflow: hidden; border-radius: var(--radius-lg); background: linear-gradient(118deg, #dfe5ff 0%, #f0f4ff 48%, #e3fbf5 100%); }
.cta-panel::after { position: absolute; right: 10%; bottom: -100px; width: 300px; height: 300px; border: 1px solid rgba(84,113,255,.2); border-radius: 50%; content: ''; }
.cta-panel h2 { position: relative; z-index: 1; max-width: 590px; margin-bottom: 0; font-size: clamp(2rem, 4vw, 3.7rem); letter-spacing: -.07em; line-height: 1.03; }
.cta-panel .button { position: relative; z-index: 1; flex-shrink: 0; }

.site-footer { padding: 30px 0; border-top: 1px solid var(--line); background: var(--white); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.footer-copy { margin: 0; color: var(--muted); font-size: 13px; }
.footer-links { display: flex; gap: 20px; color: var(--slate); font-size: 13px; font-weight: 600; }

.page-hero { padding: 68px 0 58px; background: var(--ink); color: var(--white); }
.page-hero h1 { max-width: 760px; margin-bottom: 18px; font-size: clamp(3rem, 6vw, 5.2rem); letter-spacing: -.08em; line-height: 1; }
.page-hero p { max-width: 550px; margin-bottom: 0; color: rgba(255,255,255,.62); font-size: 18px; }
.page-hero .eyebrow { color: var(--mint); }

.services-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.service-detail-card { padding: 34px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); transition: transform .2s ease, box-shadow .2s ease; }
.service-detail-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-5px); }
.service-detail-card .service-icon { margin-bottom: 30px; }
.service-detail-card h3 { margin-bottom: 10px; font-size: 26px; letter-spacing: -.05em; }
.service-detail-card p { margin-bottom: 22px; color: var(--slate); font-size: 16px; }
.service-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px 20px; margin: 0; padding: 0; list-style: none; color: var(--slate); font-size: 14px; }
.service-points li::before { margin-right: 7px; color: var(--mint); content: '✓'; font-weight: 700; }

.content-card { padding: clamp(26px, 5vw, 58px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); }
.content-card h2 { margin-bottom: 18px; font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -.07em; line-height: 1.05; }
.content-card p { color: var(--slate); }
.content-card .button { margin-top: 15px; }
.article-meta { margin-bottom: 30px; color: var(--muted); font-size: 13px; }
.article-copy p { margin-bottom: 22px; font-size: 17px; line-height: 1.75; }
.article-copy hr { margin: 35px 0; border: 0; border-top: 1px solid var(--line); }

.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 22px; align-items: start; }
.blog-post-card { padding: 34px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); transition: transform .2s ease, box-shadow .2s ease; }
.blog-post-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-4px); }
.blog-post-card h2 { margin-bottom: 10px; font-size: 30px; letter-spacing: -.06em; }
.blog-post-card p { max-width: 640px; margin-bottom: 24px; color: var(--slate); }
.sidebar-card { padding: 25px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); }
.sidebar-card h3 { margin-bottom: 16px; font-size: 17px; letter-spacing: -.03em; }
.category-list { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.category-list a { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--slate); font-size: 14px; font-weight: 600; }
.category-list a::after { color: var(--blue); content: '→'; }

.contact-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(260px, .62fr); gap: 22px; align-items: start; }
.contact-form h2 { margin-bottom: 28px; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.field { display: grid; gap: 8px; margin-bottom: 18px; }
.field label { color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.field input,
.field select,
.field textarea { width: 100%; padding: 14px 15px; border: 1px solid var(--line); border-radius: 12px; outline: 0; background: var(--paper); color: var(--ink); font: inherit; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--slate) 50%), linear-gradient(135deg, var(--slate) 50%, transparent 50%); background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px; background-repeat: no-repeat; background-size: 5px 5px, 5px 5px; }
.field textarea { min-height: 145px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--blue); background: var(--white); box-shadow: 0 0 0 4px rgba(84,113,255,.11); }
.contact-aside { display: grid; gap: 14px; }
.contact-info { padding: 23px; border-radius: var(--radius-md); background: var(--ink); color: var(--white); }
.contact-info h3 { margin-bottom: 18px; font-size: 18px; letter-spacing: -.04em; }
.contact-info p { margin-bottom: 0; color: rgba(255,255,255,.62); font-size: 14px; }
.contact-info a { color: var(--mint); }
.contact-info .whatsapp-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-weight: 700; }
.contact-info .whatsapp-link::before { color: #53d7bb; content: '◌'; font-size: 16px; line-height: 1; }
.alert-message { margin-bottom: 24px; padding: 14px 16px; border: 1px solid #b9eddf; border-radius: 12px; background: #e7faf5; color: #147764; font-size: 15px; }
.alert-message.error { border-color: #ffd0cd; background: #fff1f0; color: #ae4942; }

@media (max-width: 900px) {
    .site-nav-inner, .site-container { width: min(100% - 36px, 760px); }
    .site-links, .site-nav .nav-cta { display: none; }
    .mobile-nav { display: block; margin-left: auto; }
    .mobile-nav summary { display: flex; width: 42px; height: 42px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--ink); cursor: pointer; list-style: none; }
    .mobile-nav summary::-webkit-details-marker { display: none; }
    .mobile-nav summary::before { content: '☰'; font-size: 18px; }
    .mobile-nav[open] summary::before { content: '×'; font-size: 25px; }
    .mobile-links { position: absolute; right: 18px; left: 18px; display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); box-shadow: var(--shadow-lg); }
    .mobile-links a { padding: 12px; border-radius: 10px; color: var(--slate); font-size: 14px; font-weight: 600; }
    .mobile-links a:hover { background: var(--paper); color: var(--ink); }
    .hero { padding: 58px 0 60px; }
    .hero-grid { grid-template-columns: 1fr; gap: 45px; }
    .hero-visual { min-height: 390px; max-width: 610px; width: 100%; margin: 0 auto; }
    .section { padding: 62px 0; }
    .service-grid, .process-grid { grid-template-columns: 1fr; }
    .enterprise-section { padding: 58px 0; }
    .enterprise-grid { grid-template-columns: 1fr; gap: 32px; }
    .process-step, .process-step:not(:first-child) { padding: 26px 0; border-left: 0; }
    .process-step:not(:first-child) { border-top: 1px solid rgba(255,255,255,.16); }
    .process-number { margin-bottom: 22px; }
    .cta-section { padding-bottom: 62px; }
    .cta-panel { align-items: flex-start; flex-direction: column; padding: 38px 30px; }
    .services-list { grid-template-columns: 1fr; }
    .blog-layout, .contact-layout { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .site-nav-inner, .site-container { width: calc(100% - 32px); }
    .brand-name { font-size: 15px; }
    .brand-tagline { font-size: 8px; }
    .brand-mark { width: 40px; height: 40px; }
    .brand-mark svg { width: 28px; height: 28px; }
    .hero { padding: 46px 0 52px; }
    .hero h1 { font-size: clamp(2.9rem, 10vw, 4.4rem); }
    .hero-copy { font-size: 16px; }
    .hero-visual { min-height: 330px; }
    .signal-card { inset: 12px 0 0; padding: 20px; }
    .signal-art { top: 76px; right: 24px; bottom: 75px; left: 24px; }
    .floating-stat { right: -8px; bottom: 20px; width: 160px; padding: 16px; }
    .floating-stat strong { font-size: 27px; }
    .trust-inner, .section-head, .footer-inner { align-items: flex-start; flex-direction: column; }
    .trust-list { justify-content: flex-start; }
    .section-head { margin-bottom: 24px; }
    .section-head h2 { font-size: 2.55rem; }
    .service-card, .service-detail-card, .blog-post-card { padding: 24px; }
    .systems-card { padding: 20px; }
    .system-row strong { font-size: 16px; }
    .service-points, .form-grid { grid-template-columns: 1fr; }
    .page-hero { padding: 48px 0 42px; }
    .page-hero h1 { font-size: 3.25rem; }
    .content-card { padding: 25px; }
}