:root {
    --ink: #102b36;
    --ink-2: #264551;
    --navy: #092b38;
    --navy-deep: #061e28;
    --sea: #0d7d7a;
    --sea-dark: #096a68;
    --aqua: #9eddd5;
    --aqua-pale: #e6f5f2;
    --sand: #f4efe6;
    --sand-2: #ebe2d3;
    --sun: #f0ad43;
    --white: #fff;
    --mist: #f7f9f8;
    --line: #dbe3e2;
    --muted: #60757d;
    --danger: #9f2f2f;
    --success: #0b6b56;
    --radius-sm: 12px;
    --radius: 20px;
    --radius-lg: 32px;
    --shadow-sm: 0 8px 28px rgba(8, 39, 50, .08);
    --shadow: 0 24px 70px rgba(8, 39, 50, .14);
    --container: 1180px;
    --font: Inter, Avenir Next, Avenir, Segoe UI, Helvetica Neue, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    background: var(--white);
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
body.nav-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.08; letter-spacing: -.035em; }
h1 { font-size: clamp(3.2rem, 6.4vw, 6.25rem); }
h2 { font-size: clamp(2.25rem, 4.2vw, 4.25rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); }
p:last-child { margin-bottom: 0; }
::selection { color: var(--navy); background: var(--aqua); }

.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.container--narrow { width: min(calc(100% - 40px), 820px); margin-inline: auto; }
.section { padding: clamp(76px, 9vw, 132px) 0; position: relative; }
.section--tight { padding: clamp(56px, 7vw, 92px) 0; }
.section--mist { background: var(--mist); }
.section--sand { background: var(--sand); }
.section--navy { color: rgba(255,255,255,.78); background: var(--navy); overflow: hidden; }
.section--navy h2, .section--navy h3 { color: var(--white); }
.section--navy::before {
    content: ""; position: absolute; width: 640px; height: 640px; border-radius: 50%;
    right: -280px; top: -320px; border: 1px solid rgba(158,221,213,.18);
    box-shadow: 0 0 0 80px rgba(158,221,213,.035), 0 0 0 160px rgba(158,221,213,.025);
}
.section-head { max-width: 760px; margin-bottom: clamp(42px, 6vw, 72px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-bottom: 22px; }
.section-head p { color: var(--muted); font-size: clamp(1.05rem, 1.6vw, 1.22rem); }
.section--navy .section-head p { color: rgba(255,255,255,.68); }
.eyebrow {
    display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px;
    color: var(--sea-dark); font-size: .77rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 30px; height: 2px; background: currentColor; }
.section--navy .eyebrow, .hero .eyebrow { color: var(--aqua); }
.lead { color: var(--ink-2); font-size: clamp(1.1rem, 1.8vw, 1.35rem); }
.kicker { color: var(--sea-dark); font-weight: 750; }
.icon { width: 24px; height: 24px; flex: 0 0 auto; }

.skip-link { position: fixed; z-index: 1000; top: -100px; left: 16px; padding: 12px 18px; color: #fff; background: var(--navy); border-radius: 8px; }
.skip-link:focus { top: 16px; }
.site-header { position: fixed; z-index: 100; inset: 0 0 auto; transition: background .25s, box-shadow .25s; }
.site-header.is-scrolled { background: rgba(255,255,255,.94); box-shadow: 0 4px 30px rgba(8,39,50,.08); backdrop-filter: blur(14px); }
.site-header:not(.is-scrolled) .wordmark,
.site-header:not(.is-scrolled) .site-nav a:not(.btn) { color: var(--white); }
.site-header:not(.is-scrolled) .wordmark > span:last-child > span { color: var(--aqua); }
.site-header__inner { height: 92px; display: flex; align-items: center; justify-content: space-between; transition: height .25s; }
.site-header.is-scrolled .site-header__inner { height: 74px; }
.wordmark { display: inline-flex; align-items: center; gap: 11px; color: var(--navy); font-size: 1.32rem; font-weight: 850; letter-spacing: -.045em; }
.wordmark > span:last-child > span { color: var(--sea); }
.wordmark__symbol { position: relative; display: grid; place-items: center; width: 31px; height: 31px; border: 2px solid currentColor; border-radius: 50%; }
.wordmark__symbol span { position: absolute; width: 17px; height: 2px; background: currentColor; border-radius: 2px; }
.wordmark__symbol span:nth-child(1) { transform: translateY(-5px); }
.wordmark__symbol span:nth-child(2) { width: 12px; transform: translate(3px, 0); }
.wordmark__symbol span:nth-child(3) { width: 7px; transform: translate(5px, 5px); }
.site-nav__list { display: flex; align-items: center; gap: 34px; padding: 0; margin: 0; list-style: none; }
.site-nav a { font-size: .94rem; font-weight: 680; }
.site-nav a:not(.btn) { position: relative; padding: 9px 0; }
.site-nav a:not(.btn)::after { content: ""; position: absolute; right: 0; bottom: 3px; left: 0; height: 2px; background: var(--sea); transform: scaleX(0); transform-origin: right; transition: transform .2s; }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav-toggle { display: none; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.nav-toggle .icon { width: 28px; height: 28px; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px;
    padding: 14px 24px; border: 1px solid transparent; border-radius: 999px; color: #fff; background: var(--sea);
    font-weight: 780; line-height: 1.2; box-shadow: 0 10px 26px rgba(13,125,122,.19); transition: transform .2s, background .2s, box-shadow .2s;
}
.btn:hover { color: #fff; background: var(--sea-dark); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(13,125,122,.26); }
.btn--light { color: var(--navy); background: var(--white); box-shadow: none; }
.btn--light:hover { color: var(--navy); background: var(--aqua-pale); }
.btn--ghost { color: var(--ink); background: transparent; border-color: rgba(16,43,54,.25); box-shadow: none; }
.btn--ghost:hover { color: var(--ink); background: var(--white); border-color: var(--ink); box-shadow: none; }
.btn--ghost-light { color: #fff; background: transparent; border-color: rgba(255,255,255,.42); box-shadow: none; }
.btn--ghost-light:hover { background: rgba(255,255,255,.08); }
.btn--small { min-height: 44px; padding: 11px 19px; font-size: .9rem; }
.btn .icon { width: 20px; height: 20px; transition: transform .2s; }
.btn:hover .icon { transform: translateX(3px); }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.hero { min-height: 790px; padding: 164px 0 84px; background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 58%, #0c4550 100%); color: rgba(255,255,255,.76); overflow: hidden; position: relative; }
.hero::before { content: ""; position: absolute; width: 740px; height: 740px; right: -240px; top: -220px; border: 1px solid rgba(158,221,213,.14); border-radius: 50%; box-shadow: 0 0 0 110px rgba(158,221,213,.025), 0 0 0 220px rgba(158,221,213,.018); }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 120px; background: linear-gradient(to top, rgba(6,30,40,.32), transparent); }
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(380px, .88fr); align-items: center; gap: clamp(50px, 7vw, 100px); }
.hero h1 { max-width: 790px; margin-bottom: 26px; color: var(--white); font-size: clamp(3rem, 5vw, 5rem); line-height: .98; }
.hero h1 span { display: block; color: var(--aqua); }
.hero__copy { max-width: 650px; font-size: clamp(1.08rem, 1.5vw, 1.25rem); }
.hero .btn--ghost { color: #fff; border-color: rgba(255,255,255,.32); }
.hero .btn--ghost:hover { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.6); }
.hero__note { display: flex; align-items: center; gap: 9px; margin-top: 24px; color: rgba(255,255,255,.58); font-size: .87rem; }
.hero__note .icon { color: var(--aqua); width: 18px; }
.browser-card { position: relative; padding: 10px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); border-radius: 24px; box-shadow: 0 38px 90px rgba(0,0,0,.3); transform: rotate(1.8deg); }
.browser-card::before { content: ""; position: absolute; width: 120px; height: 120px; right: -28px; bottom: -30px; background: var(--sun); border-radius: 50%; filter: blur(1px); opacity: .85; }
.browser-card__window { position: relative; z-index: 1; overflow: hidden; background: var(--mist); border-radius: 17px; }
.browser-card__bar { height: 42px; padding: 0 15px; display: flex; align-items: center; gap: 6px; background: #fff; border-bottom: 1px solid var(--line); }
.browser-card__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--sand-2); }
.browser-card__bar span { width: 50%; height: 11px; margin-left: 10px; border-radius: 99px; background: var(--mist); }
.browser-card__body { min-height: 390px; padding: 48px 36px 34px; background: linear-gradient(145deg, #e6f5f2, #fff 68%); }
.browser-card__body small { display: block; color: var(--sea); font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.browser-card__body strong { display: block; max-width: 340px; margin: 14px 0 22px; color: var(--navy); font-size: clamp(2rem, 4vw, 3.2rem); line-height: .98; letter-spacing: -.055em; }
.browser-card__line { width: 72%; height: 9px; margin: 9px 0; border-radius: 99px; background: #cfddda; }
.browser-card__line--short { width: 52%; }
.browser-card__button { width: 122px; height: 38px; margin-top: 24px; border-radius: 99px; background: var(--sea); }
.browser-card__tiles { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 34px; }
.browser-card__tiles span { height: 72px; background: #fff; border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow-sm); }
.hero__pricebar { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); max-width: 850px; margin-top: 64px; border-top: 1px solid rgba(255,255,255,.16); }
.hero__price { padding: 23px 26px 0 0; }
.hero__price + .hero__price { padding-left: 26px; border-left: 1px solid rgba(255,255,255,.16); }
.hero__price span { display: block; color: rgba(255,255,255,.5); font-size: .73rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.hero__price strong { color: #fff; font-size: 1.25rem; }

.audience-strip { padding: 28px 0; background: var(--sand); border-bottom: 1px solid var(--sand-2); }
.audience-strip__inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 30px; }
.audience-strip__inner > span { color: var(--muted); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.audience-strip__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.audience-strip__list span { padding: 7px 13px; color: var(--ink-2); background: rgba(255,255,255,.58); border: 1px solid rgba(16,43,54,.08); border-radius: 999px; font-size: .83rem; font-weight: 650; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.service-card { position: relative; padding: 34px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); transition: transform .25s, box-shadow .25s, border-color .25s; }
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.service-card--featured { color: rgba(255,255,255,.72); background: var(--navy); border-color: var(--navy); }
.service-card--featured h3, .service-card--featured .service-card__price { color: #fff; }
.service-card__tag { display: inline-flex; padding: 6px 10px; margin-bottom: 28px; color: var(--sea-dark); background: var(--aqua-pale); border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.service-card--featured .service-card__tag { color: var(--navy); background: var(--aqua); }
.service-card__icon { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 27px; color: var(--sea); background: var(--aqua-pale); border-radius: 14px; }
.service-card--featured .service-card__icon { color: var(--aqua); background: rgba(158,221,213,.1); }
.service-card h3 { margin-bottom: 14px; }
.service-card p { color: var(--muted); }
.service-card--featured p { color: rgba(255,255,255,.65); }
.service-card__price { margin-top: 28px; color: var(--ink); font-size: 1.35rem; font-weight: 850; }
.service-card__price small { display: block; margin-top: 3px; color: var(--muted); font-size: .72rem; font-weight: 600; }
.service-card--featured .service-card__price small { color: rgba(255,255,255,.48); }
.service-card__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; color: var(--sea-dark); font-weight: 750; }
.service-card--featured .service-card__link { color: var(--aqua); }
.service-card__link .icon { width: 19px; }

.split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(48px, 8vw, 105px); }
.split--top { align-items: start; }
.split__copy h2 { margin-bottom: 24px; }
.split__copy > p { color: var(--muted); font-size: 1.08rem; }
.check-list { display: grid; gap: 13px; padding: 0; margin: 28px 0 0; list-style: none; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; }
.check-list .icon { width: 20px; margin-top: 3px; color: var(--sea); }
.before-after { position: relative; padding: 26px; background: var(--sand); border-radius: var(--radius-lg); }
.before-after__label { position: absolute; z-index: 2; top: 14px; padding: 7px 12px; border-radius: 999px; font-size: .68rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.before-after__label--before { left: 14px; color: var(--muted); background: #fff; }
.before-after__label--after { right: 14px; color: #fff; background: var(--sea); }
.before-after__grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 410px; overflow: hidden; background: #fff; border-radius: 19px; box-shadow: var(--shadow); }
.before-after__old { padding: 76px 22px 24px; color: #8d8d8d; background: #eee; font-family: Georgia, serif; filter: grayscale(1); }
.before-after__old h3 { color: #555; font-size: 1.15rem; letter-spacing: 0; }
.old-nav { height: 14px; margin-bottom: 35px; background: #999; box-shadow: 0 21px 0 #aaa; }
.old-image { height: 95px; margin: 22px 0; background: #aaa; border: 5px ridge #888; }
.old-lines { height: 8px; margin: 8px 0; background: #bbb; }
.before-after__new { padding: 65px 24px 24px; color: var(--ink); background: linear-gradient(145deg, var(--aqua-pale), #fff); }
.new-mark { width: 72px; height: 12px; margin-bottom: 44px; background: var(--navy); border-radius: 99px; }
.before-after__new h3 { margin-bottom: 14px; font-size: 1.85rem; }
.new-lines { width: 90%; height: 7px; margin: 8px 0; background: #c6dcd8; border-radius: 99px; }
.new-lines--short { width: 63%; }
.new-button { width: 98px; height: 31px; margin-top: 24px; background: var(--sea); border-radius: 99px; }

.benefit-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); overflow: hidden; }
.benefit { min-height: 260px; padding: 32px; background: var(--navy); }
.benefit__number { display: block; margin-bottom: 55px; color: var(--aqua); font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.benefit h3 { margin-bottom: 12px; font-size: 1.25rem; }
.benefit p { color: rgba(255,255,255,.58); font-size: .93rem; }

.projects { display: grid; gap: 34px; }
.project { display: grid; grid-template-columns: 1.3fr .7fr; align-items: center; gap: 0; background: var(--mist); border-radius: var(--radius-lg); overflow: hidden; }
.project:nth-child(even) { grid-template-columns: .7fr 1.3fr; }
.project:nth-child(even) .project__visual { order: 2; }
.project__visual { padding: clamp(20px, 4vw, 48px) 0 clamp(20px, 4vw, 48px) clamp(20px, 4vw, 48px); }
.project:nth-child(even) .project__visual { padding: clamp(20px, 4vw, 48px) clamp(20px, 4vw, 48px) clamp(20px, 4vw, 48px) 0; }
.project__browser { overflow: hidden; background: #fff; border: 7px solid #fff; border-radius: 16px; box-shadow: var(--shadow); }
.project__browser-bar { display: flex; align-items: center; gap: 5px; height: 31px; padding: 0 11px; background: #fff; }
.project__browser-bar i { width: 6px; height: 6px; border-radius: 50%; background: #d6dedd; }
.project__browser img { width: 100%; aspect-ratio: 1.43 / 1; object-fit: cover; object-position: top; }
.project__copy { padding: clamp(34px, 5vw, 66px); }
.project__type { color: var(--sea-dark); font-size: .73rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.project__copy h3 { margin: 14px 0 18px; font-size: clamp(1.8rem, 3vw, 2.7rem); }
.project__copy p { color: var(--muted); }
.project__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; color: var(--sea-dark); font-weight: 780; }
.project__link .icon { width: 18px; }

.process { counter-reset: process; display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.process__step { counter-increment: process; padding-top: 26px; border-top: 1px solid var(--line); }
.process__step::before { content: "0" counter(process); display: block; margin-bottom: 42px; color: var(--sea); font-size: .8rem; font-weight: 850; letter-spacing: .1em; }
.process__step h3 { margin-bottom: 14px; font-size: 1.25rem; }
.process__step p { color: var(--muted); font-size: .94rem; }

.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); align-items: stretch; gap: 18px; }
.price-card { padding: 36px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.price-card--featured { position: relative; color: rgba(255,255,255,.68); background: var(--navy); border-color: var(--navy); transform: translateY(-14px); box-shadow: var(--shadow); }
.price-card__badge { display: inline-block; padding: 6px 10px; margin-bottom: 25px; color: var(--navy); background: var(--aqua); border-radius: 999px; font-size: .67rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.price-card h3 { margin-bottom: 10px; }
.price-card--featured h3, .price-card--featured .price-card__price { color: #fff; }
.price-card__price { margin: 28px 0; color: var(--ink); font-size: 2.55rem; font-weight: 880; letter-spacing: -.05em; }
.price-card__price span { margin-right: 5px; color: var(--muted); font-size: .83rem; font-weight: 650; letter-spacing: 0; }
.price-card--featured .price-card__price span { color: rgba(255,255,255,.5); }
.price-card ul { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; }
.price-card li { display: flex; gap: 9px; font-size: .92rem; }
.price-card li::before { content: "✓"; color: var(--sea); font-weight: 900; }
.price-card--featured li::before { color: var(--aqua); }
.price-note { margin: 34px auto 0; color: var(--muted); text-align: center; font-size: .9rem; }

.about-card { display: grid; grid-template-columns: .78fr 1.22fr; min-height: 520px; overflow: hidden; background: var(--sand); border-radius: var(--radius-lg); }
.about-card__portrait { position: relative; display: grid; place-items: center; min-height: 470px; background: linear-gradient(145deg, var(--navy), #0d4e58); overflow: hidden; }
.about-card__portrait::before, .about-card__portrait::after { content: ""; position: absolute; border: 1px solid rgba(158,221,213,.19); border-radius: 50%; }
.about-card__portrait::before { width: 420px; height: 420px; right: -170px; top: -130px; }
.about-card__portrait::after { width: 300px; height: 300px; left: -140px; bottom: -130px; }
.about-card__portrait--photo { display: block; }
.about-card__portrait--photo::before,
.about-card__portrait--photo::after { z-index: 1; pointer-events: none; }
.about-card__portrait--photo img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; object-position: 62% center; }
.about-card__portrait--photo .portrait-caption { z-index: 2; display: inline-block; right: auto; left: 25px; padding: 8px 12px; color: #fff; background: rgba(6,30,40,.68); border-radius: 999px; backdrop-filter: blur(8px); }
.portrait-monogram { position: relative; display: grid; place-items: center; width: 210px; height: 210px; color: var(--navy); background: var(--aqua); border-radius: 50%; font-size: 4.6rem; font-weight: 850; letter-spacing: -.09em; box-shadow: 0 22px 60px rgba(0,0,0,.22); }
.portrait-caption { position: absolute; right: 25px; bottom: 23px; left: 25px; color: rgba(255,255,255,.56); text-align: center; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.about-card__copy { align-self: center; padding: clamp(42px, 7vw, 90px); }
.about-card__copy h2 { margin-bottom: 24px; }
.about-card__copy p { color: var(--ink-2); }
.about-points { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
.about-point { padding-top: 13px; border-top: 1px solid rgba(16,43,54,.18); font-size: .9rem; font-weight: 750; }

.cta { position: relative; overflow: hidden; padding: clamp(62px, 9vw, 108px); color: rgba(255,255,255,.7); background: var(--sea); border-radius: var(--radius-lg); }
.cta::after { content: ""; position: absolute; width: 440px; height: 440px; right: -180px; top: -230px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.04), 0 0 0 140px rgba(255,255,255,.03); }
.cta__inner { position: relative; z-index: 1; max-width: 810px; }
.cta h2 { margin-bottom: 22px; color: #fff; }
.cta p { max-width: 660px; font-size: 1.1rem; }

.page-hero { padding: 182px 0 94px; color: rgba(255,255,255,.68); background: var(--navy); overflow: hidden; position: relative; }
.page-hero::after { content: ""; position: absolute; width: 600px; height: 600px; right: -220px; top: -300px; border: 1px solid rgba(158,221,213,.16); border-radius: 50%; box-shadow: 0 0 0 90px rgba(158,221,213,.03), 0 0 0 180px rgba(158,221,213,.02); }
.page-hero__inner { position: relative; z-index: 1; max-width: 900px; }
.page-hero h1 { margin-bottom: 24px; color: #fff; font-size: clamp(3rem, 6vw, 5.75rem); }
.page-hero h1 span { color: var(--aqua); }
.page-hero p { max-width: 720px; font-size: clamp(1.1rem, 1.8vw, 1.3rem); }
.page-intro { padding: 58px 0; background: var(--sand); }
.page-intro__grid { display: grid; grid-template-columns: .55fr 1.45fr; gap: 50px; }
.page-intro__grid strong { color: var(--sea-dark); font-size: .77rem; letter-spacing: .13em; text-transform: uppercase; }
.page-intro__grid p { margin: 0; color: var(--ink-2); font-size: clamp(1.15rem,2vw,1.45rem); line-height: 1.5; }

.feature-rows { display: grid; gap: 28px; }
.feature-row { display: grid; grid-template-columns: .72fr 1.28fr; gap: 60px; padding: 46px; background: var(--mist); border-radius: var(--radius); }
.feature-row__head .icon { width: 38px; height: 38px; margin-bottom: 28px; color: var(--sea); }
.feature-row__head h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); }
.feature-row__content > p { color: var(--muted); font-size: 1.06rem; }
.feature-row__meta { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.feature-row__price { font-size: 1.55rem; font-weight: 850; }

.detail-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.detail-card { padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); }
.detail-card .icon { margin-bottom: 42px; color: var(--sea); }
.detail-card h3 { margin-bottom: 12px; font-size: 1.22rem; }
.detail-card p { color: var(--muted); font-size: .92rem; }

.reference-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.reference-detail { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.reference-detail__image { padding: 24px; background: var(--sand); }
.reference-detail__image img { width: 100%; aspect-ratio: 1.45; object-fit: cover; object-position: top; border: 7px solid #fff; border-radius: 16px; box-shadow: var(--shadow); }
.reference-detail__copy { padding: 36px; }
.reference-detail__copy h2 { margin-bottom: 16px; font-size: 2rem; }
.reference-detail__copy p { color: var(--muted); }
.reference-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0; }
.reference-tags span { padding: 7px 10px; color: var(--sea-dark); background: var(--aqua-pale); border-radius: 999px; font-size: .75rem; font-weight: 700; }

.values-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.value-card { padding: 34px; background: var(--mist); border-radius: var(--radius); }
.value-card__number { display: block; margin-bottom: 64px; color: var(--sea); font-size: .74rem; font-weight: 850; letter-spacing: .12em; }
.value-card h3 { margin-bottom: 13px; }
.value-card p { color: var(--muted); font-size: .94rem; }

.contact-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(50px, 8vw, 100px); align-items: start; }
.contact-sidebar { position: sticky; top: 110px; }
.contact-sidebar h2 { margin-bottom: 20px; font-size: clamp(2rem,3vw,3rem); }
.contact-sidebar p { color: var(--muted); }
.contact-facts { display: grid; gap: 0; margin-top: 38px; border-top: 1px solid var(--line); }
.contact-fact { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-fact .icon { color: var(--sea); }
.contact-fact strong { display: block; font-size: .95rem; }
.contact-fact span { color: var(--muted); font-size: .86rem; }
.contact-form-wrap { padding: clamp(28px, 5vw, 52px); background: var(--mist); border-radius: var(--radius-lg); }
.contact-form { display: grid; gap: 20px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label { font-size: .87rem; font-weight: 760; }
.field label span { color: var(--muted); font-weight: 500; }
.field input, .field textarea, .field select { width: 100%; padding: 14px 15px; color: var(--ink); background: #fff; border: 1px solid #cbd8d6; border-radius: 10px; outline: none; transition: border .2s, box-shadow .2s; }
.field textarea { min-height: 170px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--sea); box-shadow: 0 0 0 3px rgba(13,125,122,.12); }
.field--honeypot { position: absolute; left: -9999px; }
.consent { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: .83rem; }
.consent input { margin-top: 5px; accent-color: var(--sea); }
.consent a { color: var(--sea-dark); text-decoration: underline; }
.form-status { padding: 14px 16px; border-radius: 10px; font-size: .9rem; }
.form-status--success { color: var(--success); background: #e2f4ec; }
.form-status--error { color: var(--danger); background: #faeaea; }

.legal-content { color: var(--ink-2); }
.legal-content h2 { margin: 48px 0 16px; font-size: 1.65rem; }
.legal-content h3 { margin: 32px 0 10px; font-size: 1.15rem; letter-spacing: -.015em; }
.legal-content a { color: var(--sea-dark); text-decoration: underline; }
.legal-placeholder { padding: 22px; margin-bottom: 34px; color: #684f12; background: #fff4d6; border: 1px solid #ebd18d; border-radius: var(--radius-sm); }
.legal-placeholder strong { display: block; margin-bottom: 5px; }

.site-footer { padding: 82px 0 24px; color: rgba(255,255,255,.58); background: var(--navy-deep); }
.site-footer__top { display: grid; grid-template-columns: 1.25fr .75fr; gap: 70px; padding-bottom: 64px; }
.wordmark--light { color: #fff; }
.wordmark--light > span:last-child > span { color: var(--aqua); }
.site-footer__brand p { margin-top: 22px; }
.site-footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.site-footer__nav h2 { margin-bottom: 20px; color: rgba(255,255,255,.42); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; }
.site-footer__nav a { display: block; margin: 9px 0; color: rgba(255,255,255,.82); font-size: .92rem; }
.site-footer__nav a:hover { color: var(--aqua); }
.site-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); font-size: .78rem; }
.site-footer__bottom p { margin: 0; }
.site-footer__north { color: var(--aqua); }

[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
    [data-reveal] { opacity: 1; transform: none; }
}

@media (max-width: 1020px) {
    .hero__grid { grid-template-columns: 1fr; }
    .hero__visual { max-width: 570px; margin: 0 auto; }
    .hero { padding-top: 145px; }
    .cards, .pricing-grid { grid-template-columns: 1fr 1fr; }
    .cards > :last-child, .pricing-grid > :last-child { grid-column: 1 / -1; }
    .benefit-grid, .process { grid-template-columns: 1fr 1fr; }
    .project, .project:nth-child(even) { grid-template-columns: 1.1fr .9fr; }
    .about-card { grid-template-columns: .9fr 1.1fr; }
    .detail-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
    .site-header__inner { height: 76px; }
    .site-header { background: rgba(255,255,255,.96); box-shadow: 0 4px 30px rgba(8,39,50,.06); }
    .site-header:not(.is-scrolled) .wordmark { color: var(--navy); }
    .site-header:not(.is-scrolled) .wordmark > span:last-child > span { color: var(--sea); }
    .site-header:not(.is-scrolled) .site-nav a:not(.btn) { color: var(--ink); }
    .nav-toggle { display: grid; place-items: center; }
    .site-nav { position: fixed; inset: 76px 0 0; padding: 28px 20px 50px; background: #fff; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .2s, transform .2s, visibility .2s; }
    .site-nav.is-open { opacity: 1; visibility: visible; transform: none; }
    .site-nav__list { display: grid; align-content: start; gap: 3px; }
    .site-nav a:not(.btn) { display: block; padding: 16px 5px; font-size: 1.2rem; border-bottom: 1px solid var(--line); }
    .site-nav .btn { margin-top: 20px; }
    .split, .page-intro__grid, .contact-layout { grid-template-columns: 1fr; }
    .project, .project:nth-child(even) { grid-template-columns: 1fr; }
    .project:nth-child(even) .project__visual { order: 0; }
    .project__visual, .project:nth-child(even) .project__visual { padding: 24px 24px 0; }
    .about-card { grid-template-columns: 1fr; }
    .about-card__portrait { min-height: 390px; }
    .reference-hero-grid { grid-template-columns: 1fr; }
    .values-grid { grid-template-columns: 1fr; }
    .value-card__number { margin-bottom: 35px; }
    .contact-sidebar { position: static; }
    .feature-row { grid-template-columns: 1fr; gap: 20px; }
    .site-footer__top { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    body { font-size: 16px; }
    .container, .container--narrow { width: min(calc(100% - 28px), var(--container)); }
    .section { padding: 72px 0; }
    .hero { min-height: auto; padding: 126px 0 65px; }
    .hero h1 { font-size: clamp(2.7rem, 11.6vw, 3.25rem); line-height: 1; }
    .browser-card { transform: none; }
    .browser-card__body { min-height: 330px; padding: 38px 24px 26px; }
    .hero__pricebar { grid-template-columns: 1fr; margin-top: 44px; }
    .hero__price { padding: 17px 0; }
    .hero__price + .hero__price { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.12); }
    .audience-strip__inner > span { width: 100%; text-align: center; }
    .cards, .pricing-grid, .benefit-grid, .process, .detail-grid { grid-template-columns: 1fr; }
    .cards > :last-child, .pricing-grid > :last-child { grid-column: auto; }
    .price-card--featured { transform: none; }
    .before-after { padding: 12px; }
    .before-after__grid { min-height: 360px; }
    .before-after__old, .before-after__new { padding-inline: 15px; }
    .benefit { min-height: auto; }
    .benefit__number { margin-bottom: 32px; }
    .process__step::before { margin-bottom: 28px; }
    .project__copy { padding: 30px 24px 36px; }
    .about-points { grid-template-columns: 1fr; }
    .portrait-monogram { width: 170px; height: 170px; font-size: 3.8rem; }
    .cta { padding: 48px 26px; }
    .page-hero { padding: 137px 0 70px; }
    .page-hero h1 { font-size: clamp(2.8rem, 13vw, 4.2rem); }
    .feature-row { padding: 28px 24px; }
    .feature-row__meta { align-items: flex-start; flex-direction: column; }
    .form-grid { grid-template-columns: 1fr; }
    .contact-form-wrap { padding: 25px 19px; }
    .site-footer__nav { grid-template-columns: 1fr 1fr; gap: 24px; }
    .site-footer__bottom { align-items: flex-start; flex-direction: column; }
}