:root {
    --navy: #10263f;
    --blue: #277fbd;
    --gold: #f1b647;
    --cream: #fff9ee;
    --paper: #ffffff;
    --muted: #627083;
    --line: #dfe7ef;
    --shadow: 0 20px 50px rgba(16, 38, 63, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--navy);
    background: linear-gradient(180deg, var(--cream) 0%, #ffffff 42%, #f5f8fb 100%);
    line-height: 1.6;
}

a { color: inherit; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px clamp(18px, 4vw, 56px);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    font-weight: 900;
    font-size: 1.25rem;
    letter-spacing: -.02em;
}
.brand img { width: 58px; height: 58px; object-fit: contain; }

.site-nav { display: flex; align-items: center; gap: 8px; }
.site-nav a {
    text-decoration: none;
    font-weight: 800;
    padding: 10px 14px;
    border-radius: 999px;
    color: #233a55;
}
.site-nav a:hover, .site-nav a.active { background: #eaf3fb; color: var(--blue); }
.menu-toggle { display: none; }

.hero, .page-hero, .section {
    width: min(1120px, calc(100% - 36px));
    margin: 0 auto;
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .75fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
    padding: clamp(48px, 8vw, 90px) 0 42px;
}

.eyebrow {
    display: inline-block;
    color: var(--blue);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .78rem;
    margin: 0 0 12px;
}

h1, h2 { line-height: 1.08; margin: 0 0 16px; letter-spacing: -.04em; }
h1 { font-size: clamp(2.45rem, 6vw, 5rem); max-width: 900px; }
h2 { font-size: clamp(1.45rem, 3vw, 2.1rem); }
p { margin: 0 0 16px; }
.lead { font-size: clamp(1.1rem, 2vw, 1.35rem); color: #30465f; max-width: 780px; }

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 20px;
    border-radius: 999px;
    font-weight: 900;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    font-size: 1rem;
}
.button.primary { background: var(--gold); color: var(--navy); box-shadow: 0 12px 24px rgba(241, 182, 71, .24); }
.button.secondary { background: var(--navy); color: white; }

.hero-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 32px;
    padding: 26px;
    box-shadow: var(--shadow);
    text-align: center;
}
.hero-card img { width: min(280px, 78%); height: auto; margin: 0 auto 20px; display: block; }
.mini-screen {
    display: grid;
    gap: 10px;
    text-align: left;
}
.mini-screen div {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 14px;
    background: #fbfdff;
}
.mini-screen span { display: block; color: var(--blue); font-weight: 900; font-size: .82rem; }
.mini-screen strong { display: block; margin-top: 2px; }

.section { padding: 44px 0; }
.intro-grid, .cards, .demo-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.intro-grid article, .card, .demo-steps article, .representative-box, .contact-note, .contact-form, .language-band, .highlight {
    background: white;
    border: 1px solid var(--line);
    border-radius: 28px;
    padding: 26px;
    box-shadow: 0 12px 34px rgba(16, 38, 63, .07);
}

.highlight {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: linear-gradient(135deg, var(--navy), #164c7a);
    color: white;
}
.highlight p { color: rgba(255,255,255,.84); max-width: 720px; }

.page-hero { padding: 58px 0 20px; }
.page-hero.compact h1 { font-size: clamp(2.3rem, 5vw, 4.4rem); }
.cards { grid-template-columns: repeat(3, 1fr); }
.card p, .intro-grid p, .demo-steps p { color: #43556b; }
.language-band { text-align: center; background: #edf6fc; }
.language-band p { margin: 0 auto; max-width: 760px; font-size: 1.2rem; }

.demo-steps article span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: var(--gold);
    font-weight: 900;
    margin-bottom: 16px;
}

.split, .contact-layout {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 24px;
    align-items: start;
}
.representative-box { background: #edf6fc; }
.narrow { max-width: 850px; font-size: 1.08rem; }

.contact-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.contact-form label {
    display: grid;
    gap: 6px;
    font-weight: 900;
}
.contact-form .full, .contact-form .notice, .contact-form button { grid-column: 1 / -1; }
input, textarea {
    width: 100%;
    border: 1px solid #cdd9e5;
    border-radius: 14px;
    padding: 13px 14px;
    font: inherit;
    color: var(--navy);
    background: #fbfdff;
}
textarea { resize: vertical; }
input:focus, textarea:focus { outline: 3px solid rgba(39, 127, 189, .18); border-color: var(--blue); }
.hidden-field { position: absolute; left: -9999px; height: 1px; overflow: hidden; }
.notice { border-radius: 18px; padding: 14px 16px; }
.notice.success { background: #e9f9ef; border: 1px solid #a7dfb8; }
.notice.error { background: #fff0f0; border: 1px solid #efaaaa; }

.site-footer {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 34px clamp(18px, 4vw, 56px);
    color: #56687b;
    border-top: 1px solid var(--line);
    background: white;
}
.site-footer div:last-child { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.site-footer a { color: var(--blue); font-weight: 900; }

@media (max-width: 860px) {
    .site-header { align-items: center; }
    .brand span { font-size: 1.08rem; }
    .brand img { width: 50px; height: 50px; }
    .menu-toggle {
        display: inline-flex;
        border: 1px solid var(--line);
        background: white;
        border-radius: 999px;
        padding: 10px 14px;
        color: var(--navy);
        font-weight: 900;
    }
    .site-nav {
        position: absolute;
        top: 78px;
        left: 18px;
        right: 18px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 22px;
        background: white;
        box-shadow: var(--shadow);
    }
    .site-nav.open { display: flex; }
    .hero, .intro-grid, .cards, .demo-steps, .split, .contact-layout { grid-template-columns: 1fr; }
    .hero { padding-top: 36px; }
    .highlight, .site-footer { flex-direction: column; align-items: flex-start; }
    .site-footer div:last-child { align-items: flex-start; }
    .contact-form { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .hero, .page-hero, .section { width: min(100% - 28px, 1120px); }
    .intro-grid article, .card, .demo-steps article, .representative-box, .contact-note, .contact-form, .language-band, .highlight, .hero-card { border-radius: 22px; padding: 20px; }
    .hero-actions { flex-direction: column; }
    .button { width: 100%; }
}