/* Brand and layout tokens live in theme.css for quick theme changes. */

*,
*::before,
*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    background: var(--ink);
}

section[id] { scroll-margin-top: 72px; }

body {
    margin: 0;
    min-width: 320px;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

body.menu-open { overflow: hidden; }

::selection {
    color: var(--ink);
    background: var(--accent);
}

a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img { display: block; max-width: 100%; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

.shell {
    width: min(100% - (var(--gutter) * 2), var(--shell));
    margin-inline: auto;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    z-index: 200;
    top: 12px;
    left: 12px;
    padding: 12px 18px;
    color: var(--ink);
    background: var(--accent);
    border-radius: 999px;
    transform: translateY(-150%);
}

.skip-link:focus { transform: translateY(0); }

.eyebrow {
    margin: 0 0 26px;
    color: currentColor;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.site-header {
    position: fixed;
    z-index: 100;
    isolation: isolate;
    top: 0;
    left: 0;
    width: 100%;
    padding: 18px 0;
    background: rgba(2, 8, 23, .78);
    border-bottom: 1px solid rgba(124, 200, 255, .14);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .16);
    backdrop-filter: blur(18px) saturate(125%);
    transition: background .35s ease, padding .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.site-header.is-scrolled {
    padding: 10px 0;
    background: rgba(2, 8, 23, .92);
    border-bottom: 1px solid var(--line-dark);
    backdrop-filter: blur(18px);
    box-shadow: 0 16px 46px rgba(0, 0, 0, .28);
}

.header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
}

.brand {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 12px;
    width: fit-content;
    font-family: var(--display);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.05em;
}

.brand-symbol {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px;
    background: rgba(6, 19, 38, .72);
    border: 1px solid rgba(124, 200, 255, .2);
    border-radius: 999px;
    box-shadow: inset 0 1px rgba(255, 255, 255, .03);
}

.desktop-nav a {
    padding: 9px 17px;
    color: var(--blue-100);
    border-radius: 999px;
    font-size: 13px;
    transition: color .2s ease, background .2s ease;
}

.desktop-nav a:hover,
.desktop-nav a:focus-visible {
    color: var(--ink);
    background: var(--paper);
    outline: none;
}

.desktop-nav a.is-active,
.desktop-nav a[aria-current] {
    color: var(--blue-950);
    background: var(--accent);
    box-shadow: 0 0 24px rgba(87, 196, 255, .2);
}

.header-cta { justify-self: end; }

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    min-height: 54px;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    transition: transform .3s var(--ease), color .3s ease, background .3s ease;
}

.button:hover,
.button:focus-visible { transform: translateY(-3px); }

.button-small {
    min-height: 45px;
    color: var(--ink);
    background: var(--paper);
}

.button-primary {
    color: var(--ink);
    background: var(--accent);
}

.button-light {
    color: var(--ink);
    background: var(--paper-bright);
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid currentColor;
    font-size: 14px;
    font-weight: 600;
}

.text-link span { transition: transform .25s var(--ease); }
.text-link:hover span { transform: translate(3px, -3px); }
.text-link-dark { color: var(--ink); }

.menu-toggle,
.mobile-menu { display: none; }

.hero {
    position: relative;
    min-height: 100svh;
    padding: clamp(140px, 16vh, 190px) 0 40px;
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .28;
    pointer-events: none;
    background-image: linear-gradient(var(--line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
    background-size: 82px 82px;
    mask-image: linear-gradient(to bottom, black, transparent 78%);
}

.hero-glow {
    position: absolute;
    top: -35%;
    right: -20%;
    width: 70vw;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(86, 167, 255, .2), transparent 62%);
    pointer-events: none;
}

.hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr);
    align-items: center;
    gap: clamp(56px, 7vw, 120px);
    min-height: calc(100svh - 250px);
}

.hero-copy h1 {
    max-width: 850px;
    margin: 0;
    font-family: var(--display);
    font-size: clamp(58px, 7.25vw, 126px);
    font-weight: 600;
    letter-spacing: -.075em;
    line-height: .89;
}

.hero-accent {
    display: block;
    color: var(--accent);
    font-weight: 400;
}

.hero-intro {
    max-width: 600px;
    margin: 38px 0 0;
    color: var(--muted-on-dark);
    font-size: clamp(17px, 1.4vw, 21px);
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 42px;
}

.hero-art {
    position: relative;
    width: min(100%, 590px);
    aspect-ratio: .9;
    justify-self: end;
}

.hero-card {
    position: absolute;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-lg);
}

.hero-card-main {
    inset: 5% 2% 2% 11%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(24px, 4vw, 48px);
    color: var(--ink);
    overflow: hidden;
    background:
        linear-gradient(145deg, transparent 54%, rgba(12, 12, 11, .14) 54.2%, transparent 54.5%),
        linear-gradient(35deg, var(--accent-3) 0 38%, var(--accent) 38% 61%, var(--blue-700) 61%);
    box-shadow: 0 40px 100px rgba(0, 0, 0, .32);
    transform: rotate(2deg);
}

.hero-card-main::after {
    content: "";
    position: absolute;
    width: 56%;
    aspect-ratio: 1;
    right: -12%;
    bottom: 10%;
    border: 2px solid var(--ink);
    border-radius: 50%;
    box-shadow: 0 0 0 22px rgba(12,12,11,.12), 0 0 0 44px rgba(12,12,11,.08);
}

.placeholder-label {
    position: relative;
    z-index: 2;
    width: fit-content;
    padding: 7px 10px;
    color: currentColor;
    background: rgba(255, 255, 255, .72);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}

.hero-card-main strong {
    position: relative;
    z-index: 2;
    font-family: var(--display);
    font-size: clamp(74px, 8vw, 140px);
    letter-spacing: -.12em;
    line-height: .66;
}

.hero-card-main small {
    position: relative;
    z-index: 2;
    max-width: 220px;
    font-size: 11px;
    line-height: 1.4;
}

.hero-card-float {
    z-index: 3;
    right: -3%;
    bottom: 8%;
    display: grid;
    gap: 6px;
    padding: 18px 22px;
    color: var(--paper);
    background: rgba(21, 21, 18, .9);
    border-radius: 20px;
    font-size: 12px;
    backdrop-filter: blur(14px);
    transform: rotate(-5deg);
}

.hero-orbit {
    position: absolute;
    border: 1px solid rgba(86,167,255,.38);
    border-radius: 50%;
}

.orbit-one { inset: 17% -15% 17% 4%; }
.orbit-two { inset: 1% 7% -4% 17%; transform: rotate(42deg); }

.hero-side-note {
    position: absolute;
    top: 50%;
    right: -58px;
    color: var(--muted);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    transform: rotate(90deg);
}

.hero-footer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 48px;
    padding-top: 24px;
    color: var(--muted);
    border-top: 1px solid var(--line-dark);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.availability { display: flex; align-items: center; gap: 9px; }
.availability span {
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(86,167,255,.12);
}

.section { padding: var(--section-space) 0; }
.section-light {
    color: var(--ink);
    background: var(--paper);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.section-heading {
    display: grid;
    grid-template-columns: 1.4fr .6fr;
    align-items: end;
    gap: 70px;
    margin-bottom: clamp(56px, 7vw, 100px);
}

.section-heading h2,
.studio-statement h2,
.process-intro h2,
.faq-heading h2,
.contact-copy h2 {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(50px, 6vw, 100px);
    font-weight: 500;
    letter-spacing: -.07em;
    line-height: .95;
}

.section-heading > p {
    max-width: 430px;
    margin: 0 0 8px;
    color: var(--muted-on-light);
    font-size: 16px;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(40px, 5vw, 80px) 24px;
}

.project-card-wide { grid-column: 1 / -1; }

.project-visual {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    color: var(--ink);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform .5s var(--ease), border-radius .5s var(--ease);
}

.project-card-wide .project-visual { aspect-ratio: 16 / 8.6; }
.project-visual:hover { border-radius: 8px; transform: scale(.992); }

.project-arrow {
    position: absolute;
    z-index: 4;
    top: 22px;
    right: 22px;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: var(--paper);
    background: var(--ink);
    border-radius: 50%;
    transition: transform .3s var(--ease);
}

.project-visual:hover .project-arrow { transform: rotate(45deg); }
.project-visual .placeholder-label { position: absolute; top: 22px; left: 22px; }

.project-visual > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--ease), filter .7s ease;
}

.project-visual:hover > img {
    filter: saturate(1.08);
    transform: scale(1.045);
}

.project-visual-travel > img { object-position: center 47%; }
.project-visual-lodge > img { object-position: 58% center; }

.project-wash {
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(2, 8, 23, .08), transparent 44%, rgba(2, 8, 23, .68)),
        linear-gradient(90deg, rgba(2, 8, 23, .35), transparent 48%);
    pointer-events: none;
}

.project-badge,
.project-view {
    position: absolute;
    z-index: 3;
    color: var(--paper-bright);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.project-badge {
    top: 24px;
    left: 24px;
    padding: 9px 13px;
    background: rgba(2, 8, 23, .5);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    backdrop-filter: blur(12px);
}

.project-view {
    left: 26px;
    bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.project-view::before {
    width: 28px;
    height: 1px;
    background: currentColor;
    content: "";
    transition: width .35s var(--ease);
}

.project-visual:hover .project-view::before { width: 46px; }

.project-note {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 4 / 5;
    padding: clamp(28px, 4vw, 56px);
    color: var(--paper-bright);
    background:
        radial-gradient(circle at 85% 18%, rgba(39, 226, 255, .3), transparent 28%),
        linear-gradient(145deg, var(--blue-900), var(--blue-950));
    border-radius: var(--radius-md);
    overflow: hidden;
}

.project-note::after {
    align-self: flex-end;
    width: min(72%, 290px);
    aspect-ratio: 1;
    margin-top: -15%;
    border: 1px solid rgba(87, 196, 255, .36);
    border-radius: 50%;
    box-shadow:
        0 0 0 32px rgba(49, 121, 255, .07),
        0 0 0 64px rgba(49, 121, 255, .04);
    content: "";
}

.project-note-index {
    position: relative;
    z-index: 1;
    color: var(--accent);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.project-note p {
    position: relative;
    z-index: 1;
    max-width: 500px;
    margin: auto 0 28px;
    font-family: var(--display);
    font-size: clamp(28px, 3.2vw, 48px);
    letter-spacing: -.055em;
    line-height: 1.04;
}

.project-note .text-link {
    position: relative;
    z-index: 2;
    align-self: flex-start;
    color: var(--paper-bright);
}

.placeholder-electric {
    background:
        linear-gradient(90deg, transparent 49.8%, rgba(12,12,11,.22) 50%, transparent 50.2%),
        linear-gradient(rgba(12,12,11,.18) 1px, transparent 1px),
        var(--accent-2);
    background-size: 100% 100%, 100% 14%, auto;
}

.placeholder-monogram {
    position: absolute;
    left: 7%;
    bottom: 2%;
    font-family: var(--display);
    font-size: clamp(140px, 28vw, 430px);
    font-weight: 800;
    letter-spacing: -.15em;
    line-height: .75;
}

.placeholder-ring {
    position: absolute;
    width: 40%;
    aspect-ratio: 1;
    right: 9%;
    top: 22%;
    border: clamp(15px, 3vw, 48px) solid var(--ink);
    border-radius: 50%;
    opacity: .92;
}

.placeholder-cyan {
    background:
        radial-gradient(circle at 50% 50%, transparent 0 19%, var(--ink) 19.5% 20%, transparent 20.5% 30%, var(--ink) 30.5% 31%, transparent 31.5%),
        var(--accent);
}

.placeholder-stamp {
    position: absolute;
    left: 50%;
    top: 50%;
    font-family: var(--display);
    font-size: clamp(54px, 8vw, 110px);
    font-weight: 800;
    letter-spacing: -.08em;
    line-height: .72;
    text-align: center;
    transform: translate(-50%, -50%) rotate(-8deg);
}

.placeholder-cobalt {
    color: var(--paper-bright);
    background:
        linear-gradient(135deg, transparent 0 46%, rgba(255,255,255,.18) 46.2% 46.5%, transparent 46.7%),
        linear-gradient(45deg, transparent 0 60%, rgba(255,255,255,.12) 60.2% 60.5%, transparent 60.7%),
        var(--accent-3);
}

.placeholder-cobalt .placeholder-label { color: var(--ink); }
.placeholder-isla {
    position: absolute;
    left: 50%;
    top: 51%;
    font-family: var(--display);
    font-size: clamp(82px, 14vw, 185px);
    font-weight: 500;
    letter-spacing: -.1em;
    transform: translate(-50%, -50%);
}

.placeholder-isla sup { font-size: 14px; vertical-align: top; }

.project-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-top: 20px;
}

.project-meta h3 {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 600;
    letter-spacing: -.04em;
}

.project-meta p,
.project-meta > span {
    margin: 5px 0 0;
    color: var(--muted-on-light);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.project-browser-card {
    padding: 14px;
    background: #111317;
    border: 1px solid rgba(12, 12, 11, .08);
    border-radius: 24px;
    box-shadow: 0 24px 70px rgba(6, 15, 35, .12);
    transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}

.project-browser-card:hover {
    box-shadow: 0 32px 90px rgba(6, 15, 35, .2);
    transform: translateY(-8px);
}

.project-browser-card > a {
    display: block;
    color: var(--paper-bright);
}

.project-browser {
    background: #25282e;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    overflow: hidden;
}

.project-browser-bar {
    display: grid;
    grid-template-columns: 8px 8px 8px 1fr;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 13px;
    color: #8e96a5;
    background: #1b1e23;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.project-browser-bar > span {
    width: 7px;
    height: 7px;
    background: #4f5560;
    border-radius: 50%;
}

.project-browser-bar > span:first-child { background: #4b8dff; }
.project-browser-bar small {
    justify-self: center;
    margin-right: 42px;
    font-size: 8px;
    letter-spacing: .06em;
}

.project-site-preview {
    position: relative;
    aspect-ratio: 1.46;
    background: #080b12;
    overflow: hidden;
}

.project-site-preview::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 72%, rgba(3, 8, 19, .12));
    pointer-events: none;
    content: "";
}

.project-site-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 1.1s var(--ease), filter .55s ease;
}

.project-browser-card:hover .project-site-preview img {
    filter: saturate(1.06);
    transform: scale(1.025);
}

.project-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 104px;
    padding: 18px 8px 4px;
}

.project-card-footer > div {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.project-card-footer i {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(87, 196, 255, .55);
}

.project-card-footer > div > span { display: grid; gap: 4px; }
.project-card-footer strong {
    font-family: var(--display);
    font-size: clamp(20px, 1.8vw, 28px);
    font-weight: 500;
    letter-spacing: -.04em;
    line-height: 1;
}

.project-card-footer small {
    color: #8992a1;
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.project-view-button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 13px 18px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px;
    font-size: 13px;
    transition: color .3s ease, background .3s ease, border-color .3s ease;
}

.project-view-button b {
    font-size: 18px;
    font-weight: 400;
    transition: transform .35s var(--ease);
}

.project-browser-card:hover .project-view-button {
    color: var(--blue-950);
    background: var(--accent);
    border-color: var(--accent);
}

.project-browser-card:hover .project-view-button b { transform: rotate(45deg); }

.section-end {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: clamp(70px, 8vw, 120px);
    padding-top: 24px;
    border-top: 1px solid var(--line-light);
}

.section-end p { margin: 0; color: var(--muted-on-light); }

.app-section {
    position: relative;
    color: var(--paper-bright);
    background:
        radial-gradient(circle at 18% 26%, rgba(37, 99, 235, .15), transparent 28%),
        var(--blue-950);
    overflow: hidden;
}

.app-section::before {
    position: absolute;
    inset: 0;
    opacity: .08;
    background-image:
        linear-gradient(rgba(125, 211, 252, .45) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 252, .45) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: linear-gradient(to bottom, black, transparent 86%);
    pointer-events: none;
    content: "";
}

.app-heading {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: .48fr 1.52fr;
    gap: clamp(34px, 8vw, 120px);
    margin-bottom: clamp(56px, 8vw, 110px);
}

.app-heading > div {
    display: grid;
    grid-template-columns: 1.1fr .7fr;
    align-items: end;
    gap: 40px;
}

.app-heading h2 {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(50px, 6vw, 100px);
    font-weight: 500;
    letter-spacing: -.07em;
    line-height: .93;
}

.app-heading h2 em {
    color: var(--accent);
    font-family: Georgia, serif;
    font-weight: 400;
}

.app-heading > div > p {
    max-width: 410px;
    margin: 0 0 8px;
    color: var(--muted);
}

.app-showcase {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: .58fr 1.42fr;
    align-items: center;
    gap: clamp(42px, 6vw, 90px);
}

.app-copy h3 {
    margin: 24px 0 18px;
    font-family: var(--display);
    font-size: clamp(38px, 4.8vw, 70px);
    font-weight: 500;
    letter-spacing: -.065em;
}

.app-copy > p {
    max-width: 500px;
    color: var(--muted);
    font-size: 16px;
}

.app-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    color: var(--accent);
    border: 1px solid rgba(87, 196, 255, .26);
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.app-status i {
    width: 7px;
    height: 7px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 14px var(--accent);
}

.app-features {
    margin: 38px 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line-dark);
}

.app-features li {
    display: grid;
    grid-template-columns: 38px 1fr;
    padding: 15px 0;
    color: var(--paper);
    border-bottom: 1px solid var(--line-dark);
    font-size: 13px;
}

.app-features span { color: var(--accent); font-size: 10px; }

.pos-device {
    position: relative;
    padding: 12px;
    background: linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 28px;
    box-shadow: 0 45px 100px rgba(0, 0, 0, .48);
    transform-style: preserve-3d;
}

.pos-topbar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    color: #bdc9df;
    background: rgba(3, 10, 28, .96);
    border-radius: 18px 18px 0 0;
    font-size: 10px;
}

.pos-brand,
.pos-shift { display: flex; align-items: center; gap: 8px; }
.pos-brand span {
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, var(--accent), var(--blue-500));
    border-radius: 6px 6px 6px 1px;
}

.pos-shift i {
    width: 6px;
    height: 6px;
    background: #38f6aa;
    border-radius: 50%;
}

.pos-screen {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    min-height: 520px;
    color: #0a1020;
    background: #f3f7fd;
    border-radius: 0 0 18px 18px;
    overflow: hidden;
}

.pos-catalog { padding: clamp(20px, 3vw, 34px); }
.pos-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 18px;
}

.pos-toolbar div { display: grid; gap: 3px; }
.pos-toolbar small,
.pos-order small { color: #8290a8; font-size: 9px; }
.pos-toolbar strong { font-size: 24px; letter-spacing: -.04em; }
.pos-search {
    min-width: 150px;
    padding: 11px 14px;
    color: #8795aa;
    background: white;
    border: 1px solid #dfe7f1;
    border-radius: 10px;
    font-size: 9px;
}

.pos-filters { display: flex; gap: 7px; margin: 24px 0 18px; }
.pos-filters span {
    padding: 7px 10px;
    color: #718098;
    background: #e7edf5;
    border-radius: 999px;
    font-size: 8px;
}

.pos-filters .active { color: white; background: #155eef; }
.pos-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pos-products article {
    display: grid;
    min-height: 124px;
    padding: 11px;
    background: white;
    border: 1px solid #e4eaf3;
    border-radius: 13px;
}

.pos-products strong { align-self: end; font-size: 10px; }
.pos-products small { margin-top: 3px; color: #60708a; font-size: 8px; }
.product-orb {
    width: 100%;
    height: 58px;
    border-radius: 9px;
    box-shadow: inset 0 0 20px rgba(255,255,255,.35);
}

.product-blue { background: radial-gradient(circle at 35% 30%, #73ddff, #155eef 60%, #071a52); }
.product-violet { background: radial-gradient(circle at 35% 30%, #e09cff, #7138dd 60%, #1f0a57); }
.product-cyan { background: radial-gradient(circle at 35% 30%, #c1fff1, #28b8a3 60%, #0b4c51); }
.product-ink { background: radial-gradient(circle at 35% 30%, #a8b1c8, #29334b 60%, #080d18); }
.product-sky { background: radial-gradient(circle at 35% 30%, #e5f6ff, #5caee8 60%, #17447a); }
.product-glow { background: radial-gradient(circle at 35% 30%, #fff4b3, #ff7a45 60%, #701c31); }

.pos-order {
    display: flex;
    flex-direction: column;
    padding: clamp(20px, 2.5vw, 30px);
    background: white;
    border-left: 1px solid #e2e8f2;
}

.pos-order-title {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5ebf3;
}

.pos-order-title div { display: grid; }
.pos-line {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 18px 0;
    border-bottom: 1px solid #edf1f6;
    font-size: 9px;
}

.pos-line span { display: flex; align-items: center; gap: 6px; }
.pos-line i { width: 7px; height: 7px; background: #2b6aff; border-radius: 50%; }
.pos-line small { color: #8792a3; }
.pos-total {
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    padding: 22px 0;
    font-size: 10px;
}

.pos-total strong { font-size: 16px; }
.pos-order button {
    display: flex;
    justify-content: space-between;
    padding: 14px;
    color: white;
    background: #155eef;
    border: none;
    border-radius: 10px;
    font: inherit;
    font-size: 9px;
}

.pos-glow {
    position: absolute;
    z-index: 0;
    inset: 8% -8% -12% 30%;
    background: rgba(35, 111, 255, .3);
    filter: blur(70px);
}

.pos-screenshot-frame {
    width: 100%;
    padding: 10px;
    background: linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.035));
}

.pos-preview-topbar {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 48px;
    padding: 0 14px;
    color: #8793a9;
    background: #080d1a;
    border-radius: 18px 18px 0 0;
    border-bottom: 1px solid rgba(255,255,255,.09);
}

.pos-preview-topbar > span { display: flex; gap: 6px; }
.pos-preview-topbar > span i {
    width: 7px;
    height: 7px;
    background: #31405d;
    border-radius: 50%;
}

.pos-preview-topbar > span i:first-child { background: var(--accent); }
.pos-preview-topbar > small {
    justify-self: end;
    font-size: 8px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.pos-mode-switch {
    display: flex;
    gap: 3px;
    padding: 3px;
    background: #111a2d;
    border: 1px solid #1f2b43;
    border-radius: 999px;
}

.pos-mode-switch button {
    padding: 6px 11px;
    color: #7e8ba3;
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 9px;
    transition: color .25s ease, background .25s ease;
}

.pos-mode-switch button.is-active {
    color: white;
    background: #255ff4;
}

.pos-mode-switch button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.pos-preview-stage {
    position: relative;
    z-index: 2;
    aspect-ratio: 2.16;
    background: #101827;
    border-radius: 0 0 18px 18px;
    overflow: hidden;
}

.pos-preview-stage > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
    opacity: 0;
    transform: scale(1.012);
    transition: opacity .45s ease, transform .7s var(--ease);
}

.pos-preview-stage > img.is-active {
    opacity: 1;
    transform: scale(1);
}

.pos-mode-label {
    position: absolute;
    z-index: 3;
    right: 16px;
    bottom: 14px;
    display: grid;
    gap: 2px;
    min-width: 150px;
    padding: 10px 13px;
    color: white;
    background: rgba(3, 8, 20, .76);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 10px;
    backdrop-filter: blur(12px);
}

.pos-mode-label span { font-size: 10px; font-weight: 600; }
.pos-mode-label small {
    color: #9aa8be;
    font-size: 7px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mobile-app-showcase {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    align-items: center;
    gap: clamp(60px, 10vw, 150px);
    margin-top: clamp(120px, 14vw, 210px);
    padding-top: clamp(90px, 11vw, 150px);
    border-top: 1px solid rgba(130, 185, 255, .16);
}

.mobile-app-copy { max-width: 590px; }
.mobile-app-copy h3 {
    margin: 24px 0 28px;
    font-family: var(--display);
    font-size: clamp(50px, 6vw, 90px);
    font-weight: 500;
    letter-spacing: -.07em;
    line-height: .92;
}

.mobile-app-copy h3 em {
    color: var(--accent);
    font-family: Georgia, serif;
    font-weight: 400;
}

.mobile-app-copy > p {
    max-width: 540px;
    color: var(--muted);
    font-size: 17px;
}

.mobile-app-points {
    margin-top: 42px;
    border-top: 1px solid var(--line-dark);
}

.mobile-app-points article {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: start;
    gap: 12px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line-dark);
}

.mobile-app-points article > span {
    padding-top: 3px;
    color: var(--accent);
    font-size: 10px;
}

.mobile-app-points article div { display: grid; gap: 4px; }
.mobile-app-points strong {
    color: var(--paper-bright);
    font-family: var(--display);
    font-size: 18px;
    font-weight: 600;
}

.mobile-app-points small { color: var(--muted); font-size: 12px; }

.mobile-app-gallery {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: start;
    min-width: 0;
    outline: none;
}

.mobile-app-gallery:focus-visible .mobile-app-stage {
    box-shadow: 0 0 0 3px var(--accent), 0 40px 90px rgba(0,0,0,.34);
}

.mobile-app-stage {
    position: relative;
    display: grid;
    place-items: center;
    width: min(100%, 560px);
    aspect-ratio: 4 / 5;
    padding: 44px 34px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 50% 42%, rgba(50, 125, 255, .14), transparent 44%),
        linear-gradient(180deg, rgba(1, 10, 27, .04), rgba(1, 9, 23, .3)),
        url("../images/projects/mobile-app-stage.webp") center / cover no-repeat,
        #041229;
    border: 1px solid rgba(111, 187, 255, .18);
    border-radius: 36px;
    box-shadow:
        0 40px 90px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(190, 226, 255, .08);
    transition: box-shadow .25s ease;
}

.mobile-app-stage::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(124, 200, 255, .07) 1px, transparent 1px),
        linear-gradient(rgba(124, 200, 255, .06) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 80%, transparent);
    content: "";
}

.mobile-app-stage::after {
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 3%;
    z-index: 0;
    height: 18%;
    background: radial-gradient(ellipse, rgba(55, 140, 255, .34), rgba(31, 91, 220, .1) 45%, transparent 72%);
    filter: blur(15px);
    content: "";
    pointer-events: none;
}

.mobile-app-stage-meta {
    position: absolute;
    top: 24px;
    left: 28px;
    right: 28px;
    z-index: 4;
    display: flex;
    justify-content: space-between;
    color: rgba(220, 238, 255, .72);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.mobile-app-phone {
    position: relative;
    z-index: 2;
    width: min(72%, 320px);
    aspect-ratio: 648 / 1315;
    background: transparent;
    overflow: hidden;
    filter: drop-shadow(0 28px 32px rgba(0,0,0,.45));
    touch-action: pan-y;
}

.mobile-app-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform .7s var(--ease);
    will-change: transform;
}

.mobile-app-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    margin: 0;
}

.mobile-app-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: transparent;
    user-select: none;
    -webkit-user-drag: none;
}

.mobile-app-slide figcaption {
    position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    overflow: hidden;
}

.mobile-app-controls {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 44px auto 44px;
    align-items: center;
    gap: 18px;
    margin-top: 28px;
}

.mobile-app-controls > button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--paper-bright);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    cursor: pointer;
    font: inherit;
    transition: color .25s ease, background .25s ease, transform .25s var(--ease);
}

.mobile-app-controls > button:hover,
.mobile-app-controls > button:focus-visible {
    color: var(--blue-950);
    background: var(--accent);
    outline: none;
    transform: translateY(-2px);
}

.mobile-app-dots { display: flex; align-items: center; gap: 8px; }
.mobile-app-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    background: #34415a;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: width .3s var(--ease), background .3s ease;
}

.mobile-app-dots button.is-active {
    width: 28px;
    background: var(--accent);
}

.mobile-app-caption {
    position: relative;
    z-index: 2;
    margin: 14px 0 0;
    color: #8493ad;
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.studio-section { background: var(--ink); }
.studio-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(60px, 10vw, 160px);
}

.studio-statement h2 em,
.contact-copy h2 em {
    color: var(--accent);
    font-family: Georgia, serif;
    font-weight: 400;
}

.studio-copy { padding-top: 50px; }
.studio-copy p { max-width: 640px; color: var(--muted); }
.studio-copy .lead {
    margin-top: 0;
    color: var(--paper);
    font-size: clamp(22px, 2.2vw, 34px);
    letter-spacing: -.035em;
    line-height: 1.25;
}

.studio-copy .text-link { margin-top: 30px; }

.metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: clamp(80px, 10vw, 150px);
    border-top: 1px solid var(--line-dark);
    border-bottom: 1px solid var(--line-dark);
}

.metrics div {
    display: grid;
    gap: 28px;
    padding: 35px;
    border-left: 1px solid var(--line-dark);
}

.metrics div:last-child { border-right: 1px solid var(--line-dark); }
.metrics strong {
    font-family: var(--display);
    font-size: clamp(42px, 4vw, 68px);
    font-weight: 500;
    letter-spacing: -.06em;
}
.metrics span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }

.services-section {
    color: var(--paper);
    background: var(--ink-soft);
}

.section-heading-dark > p { color: var(--muted); }

.services-list { border-top: 1px solid var(--line-dark); }

.service-row {
    display: grid;
    grid-template-columns: 70px minmax(220px, .9fr) 1.1fr 50px;
    align-items: center;
    gap: 30px;
    min-height: 150px;
    border-bottom: 1px solid var(--line-dark);
    transition: padding .35s var(--ease), color .35s ease;
}

.service-row:hover { color: var(--accent); padding-inline: 18px; }
.service-number { color: var(--muted); font-size: 12px; }
.service-row h3 {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(31px, 4vw, 58px);
    font-weight: 500;
    letter-spacing: -.06em;
}
.service-row p { max-width: 500px; margin: 0; color: var(--muted); }
.service-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--line-dark);
    border-radius: 50%;
}

.process-section { color: var(--ink); background: var(--accent); }
.process-intro { margin-bottom: clamp(55px, 7vw, 90px); }
.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(12,12,11,.24);
}

.process-card {
    min-height: 340px;
    padding: 28px 28px 35px;
    border-right: 1px solid rgba(12,12,11,.24);
}

.process-card:first-child { border-left: 1px solid rgba(12,12,11,.24); }
.process-card span { font-size: 12px; }
.process-card h3 {
    margin: 100px 0 18px;
    font-family: var(--display);
    font-size: 32px;
    letter-spacing: -.05em;
}
.process-card p { margin: 0; font-size: 14px; }

.faq-section { background: var(--paper-bright); color: var(--ink); }
.faq-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: clamp(60px, 10vw, 160px);
}

.faq-list { border-top: 1px solid var(--line-light); }
.faq-list details { border-bottom: 1px solid var(--line-light); }
.faq-list summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 27px 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--display);
    font-size: clamp(19px, 2vw, 27px);
    font-weight: 600;
    letter-spacing: -.03em;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span {
    position: relative;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
}
.faq-list summary span::before,
.faq-list summary span::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 15px;
    height: 1px;
    background: currentColor;
    transform: translate(-50%, -50%);
}
.faq-list summary span::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .25s ease; }
.faq-list details[open] summary span::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-list details p { max-width: 670px; margin: -5px 50px 28px 0; color: var(--muted-on-light); }

.contact-section {
    position: relative;
    padding: clamp(100px, 12vw, 180px) 0;
    color: var(--paper);
    background: var(--accent-2);
    overflow: hidden;
}

.contact-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(12,12,11,.12) 1px, transparent 1px),
        linear-gradient(rgba(12,12,11,.12) 1px, transparent 1px);
    background-size: 76px 76px;
}

.contact-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: .84fr 1.16fr;
    align-items: start;
    gap: clamp(60px, 8vw, 130px);
}

.contact-copy { padding-top: 22px; }
.contact-copy h2 {
    margin: 28px 0 32px;
    font-size: clamp(58px, 7vw, 108px);
}

.contact-copy h2 em { color: var(--ink); }
.contact-intro {
    max-width: 560px;
    margin: 0;
    color: rgba(239, 247, 255, .78);
    font-size: clamp(17px, 1.5vw, 21px);
    line-height: 1.55;
}

.contact-direct {
    display: grid;
    gap: 6px;
    margin-top: 56px;
}

.contact-direct > span {
    color: rgba(239, 247, 255, .62);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.contact-direct a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    font-family: var(--display);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 600;
    letter-spacing: -.035em;
}

.contact-direct b {
    font-weight: 400;
    transition: transform .3s var(--ease);
}

.contact-direct a:hover b { transform: rotate(45deg); }

.contact-form-panel {
    padding: clamp(26px, 3.5vw, 52px);
    color: var(--paper-bright);
    background:
        linear-gradient(145deg, rgba(11, 27, 62, .97), rgba(2, 8, 23, .97));
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 30px;
    box-shadow: 0 40px 100px rgba(3, 14, 44, .32);
}

.contact-form { display: grid; gap: 24px; }
.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.form-field { display: grid; gap: 9px; }
.form-field label {
    color: #c8d6ec;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.form-field label span { color: var(--accent); }
.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 15px 16px;
    color: var(--paper-bright);
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(174, 202, 242, .19);
    border-radius: 12px;
    outline: none;
    font: inherit;
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.form-field select {
    cursor: pointer;
}

.form-field select option {
    color: #071126;
    background: #ffffff;
}

.form-field select option:checked {
    color: #071126;
    background: #b9d8ff;
}

.form-field textarea {
    min-height: 145px;
    resize: vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder { color: #687995; }

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover { border-color: rgba(174, 202, 242, .38); }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    background: rgba(255,255,255,.08);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(87, 196, 255, .12);
}

.form-field .is-invalid { border-color: #ff8d9a; }
.form-field small { color: #ffb0ba; font-size: 11px; }
.form-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 4px;
}

.form-submit p {
    max-width: 270px;
    margin: 0;
    color: #7f91ad;
    font-size: 10px;
}

.form-submit .button {
    flex: 0 0 auto;
    min-width: 170px;
    cursor: pointer;
}

.form-success,
.form-errors {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 24px;
    padding: 14px 16px;
    border-radius: 12px;
}

.form-success {
    color: #dffdf2;
    background: rgba(21, 171, 112, .15);
    border: 1px solid rgba(87, 237, 178, .28);
}

.form-success > span {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    color: var(--blue-950);
    background: #5dedb2;
    border-radius: 50%;
    font-size: 12px;
}

.form-success strong { display: block; font-size: 13px; }
.form-success p { margin: 3px 0 0; color: #9fd7c2; font-size: 11px; }
.form-errors {
    color: #ffd8dd;
    background: rgba(255, 76, 103, .12);
    border: 1px solid rgba(255, 130, 148, .25);
    font-size: 12px;
}

.contact-orbit {
    position: absolute;
    border: 1px solid rgba(12,12,11,.35);
    border-radius: 50%;
}
.contact-orbit-one { inset: -35% 34% -35% -18%; }
.contact-orbit-two { inset: -5% 56% -5% 6%; transform: rotate(48deg); }

.site-footer { padding: 90px 0 28px; background: var(--ink); }
.footer-top {
    display: flex;
    justify-content: space-between;
    gap: 80px;
    padding-bottom: 90px;
}
.brand-footer { align-self: flex-start; font-size: clamp(38px, 5vw, 72px); }
.brand-footer .brand-symbol { width: 58px; height: 58px; margin-right: 6px; }
.footer-links { display: grid; grid-template-columns: repeat(2, 150px); gap: 60px; }
.footer-links div { display: grid; align-content: start; gap: 9px; }
.footer-links span { margin-bottom: 12px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.footer-links a { width: fit-content; color: var(--blue-100); }
.footer-links a:hover { color: var(--accent); }
.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding-top: 24px;
    color: var(--muted);
    border-top: 1px solid var(--line-dark);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

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

@media (max-width: 1024px) {
    body.menu-open .site-header {
        height: 100dvh;
        overflow-y: auto;
        background: #020817;
        border-bottom-color: transparent;
        backdrop-filter: none;
    }
    .header-inner {
        position: relative;
        z-index: 2;
        grid-template-columns: 1fr auto auto;
    }
    .desktop-nav { display: none; }
    .header-cta { display: none; }
    .menu-toggle {
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        padding: 0;
        background: transparent;
        border: 1px solid var(--line-dark);
        border-radius: 50%;
        cursor: pointer;
    }
    .menu-toggle i { display: block; width: 17px; height: 1px; background: currentColor; transition: transform .25s ease; }
    .menu-toggle i + i { margin-top: -10px; }
    .menu-toggle[aria-expanded="true"] i:first-of-type { transform: translateY(3px) rotate(45deg); }
    .menu-toggle[aria-expanded="true"] i:last-of-type { transform: translateY(-3px) rotate(-45deg); }
    .mobile-menu {
        position: absolute;
        inset: 0;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        min-height: 100dvh;
        padding: clamp(108px, 18vh, 150px) var(--gutter) 40px;
        overflow-y: auto;
        overscroll-behavior: contain;
        background:
            radial-gradient(circle at 88% 8%, rgba(81, 167, 255, .16), transparent 36%),
            linear-gradient(180deg, #020817 0%, #061127 100%);
    }
    .mobile-menu[hidden] { display: none; }
    .mobile-menu a {
        padding: 12px 0;
        font-family: var(--display);
        font-size: clamp(38px, 9vw, 64px);
        font-weight: 600;
        letter-spacing: -.05em;
        border-bottom: 1px solid var(--line-dark);
    }
    .mobile-menu a.is-active,
    .mobile-menu a[aria-current] {
        padding-left: 18px;
        color: var(--accent);
    }
    .hero-grid { grid-template-columns: 1fr; }
    .hero-copy { position: relative; z-index: 4; }
    .hero-art { justify-self: center; width: min(100%, 620px); margin-top: 20px; }
    .studio-grid,
    .faq-grid,
    .contact-layout { grid-template-columns: 1fr; }
    .app-heading,
    .app-heading > div,
    .app-showcase,
    .mobile-app-showcase { grid-template-columns: 1fr; }
    .app-heading > div { gap: 24px; }
    .app-copy { max-width: 680px; }
    .pos-device { width: 100%; }
    .mobile-app-copy { max-width: 760px; }
    .mobile-app-gallery { margin-top: 20px; }
    .studio-copy { padding-top: 0; }
    .metrics { grid-template-columns: repeat(2, 1fr); }
    .process-grid { grid-template-columns: repeat(2, 1fr); }
    .process-card:nth-child(2) { border-right: none; }
    .contact-copy { max-width: 780px; }
}

@media (max-width: 720px) {
    :root { --gutter: 20px; --radius-lg: 28px; }
    .site-header { padding-top: 12px; }
    .hero { padding-top: 125px; }
    .hero-copy h1 { font-size: clamp(50px, 15vw, 82px); }
    .hero-actions { align-items: flex-start; flex-direction: column; }
    .hero-art { aspect-ratio: .82; margin-top: 36px; }
    .hero-card-main { inset: 3% 4% 3% 4%; }
    .hero-card-float { right: 0; }
    .hero-side-note { display: none; }
    .hero-footer { align-items: flex-start; flex-direction: column; gap: 14px; }
    .section-heading { grid-template-columns: 1fr; gap: 26px; }
    .project-grid { grid-template-columns: 1fr; }
    .project-card-wide { grid-column: auto; }
    .project-card-wide .project-visual { aspect-ratio: 4 / 5; }
    .project-visual-travel > img { object-position: 58% center; }
    .project-note { min-height: 480px; }
    .project-browser-card { padding: 8px; border-radius: 18px; }
    .project-browser { border-radius: 12px; }
    .project-browser-bar { display: none; }
    .project-site-preview { aspect-ratio: 1.25; }
    .project-card-footer { min-height: 92px; padding: 16px 8px 6px; }
    .project-card-footer strong { font-size: 19px; }
    .project-card-footer small { display: none; }
    .project-view-button { gap: 8px; padding: 10px 13px; }
    .app-heading { margin-bottom: 48px; }
    .app-heading > div > p { margin-top: 8px; }
    .pos-device { margin-inline: -10px; width: calc(100% + 20px); padding: 7px; border-radius: 20px; }
    .pos-preview-topbar {
        grid-template-columns: 1fr auto;
        min-height: 44px;
        border-radius: 14px 14px 0 0;
    }
    .pos-preview-topbar > small { display: none; }
    .pos-preview-stage { aspect-ratio: 1.5; border-radius: 0 0 14px 14px; }
    .pos-preview-stage > img { object-fit: cover; object-position: top left; }
    .pos-mode-label { display: none; }
    .pos-topbar { border-radius: 14px 14px 0 0; }
    .pos-screen { grid-template-columns: 1fr; min-height: 0; }
    .pos-order { border-top: 1px solid #e2e8f2; border-left: 0; }
    .pos-products { grid-template-columns: repeat(2, 1fr); }
    .pos-products article:nth-child(n+5) { display: none; }
    .pos-search { display: none; }
    .mobile-app-showcase {
        gap: 45px;
        margin-top: 110px;
        padding-top: 85px;
    }
    .mobile-app-stage {
        width: min(100%, 500px);
        aspect-ratio: 4 / 5.5;
        padding: 42px 24px;
        border-radius: 28px;
    }
    .mobile-app-stage-meta { display: none; }
    .mobile-app-phone { width: min(74%, 300px); }
    .mobile-app-controls { margin-top: 20px; }
    .section-end { align-items: flex-start; flex-direction: column; gap: 20px; }
    .metrics { grid-template-columns: 1fr 1fr; }
    .metrics div { padding: 25px 18px; }
    .service-row {
        grid-template-columns: 42px 1fr auto;
        gap: 12px;
        padding: 28px 0;
    }
    .service-row h3 { font-size: 34px; }
    .service-row p { grid-column: 2 / -1; }
    .process-grid { grid-template-columns: 1fr; }
    .process-card,
    .process-card:first-child { min-height: auto; border-left: none; border-right: none; border-bottom: 1px solid rgba(12,12,11,.24); }
    .process-card h3 { margin-top: 55px; }
    .contact-layout { gap: 52px; }
    .contact-copy h2 { margin-block: 20px 24px; }
    .contact-direct { margin-top: 34px; }
    .form-row { grid-template-columns: 1fr; }
    .form-submit { align-items: stretch; flex-direction: column; }
    .form-submit .button { width: 100%; }
    .footer-top { flex-direction: column; padding-bottom: 60px; }
    .footer-links { grid-template-columns: repeat(2, 1fr); width: 100%; }
    .footer-bottom { flex-direction: column; }
}

/*
|--------------------------------------------------------------------------
| HERO — INTERFACE CONSTELLATION
|--------------------------------------------------------------------------
| The interface artwork is art-directed for copy on the left and a connected
| product system on the right. These rules intentionally own the first viewport.
*/
.hero-signal {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100svh;
    padding: 0;
    background: var(--blue-950);
}

.hero-signal::before { display: none; }

.hero-media {
    position: absolute;
    z-index: -4;
    inset: 0;
    display: block;
    overflow: hidden;
}

.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: saturate(.92) contrast(1.04);
    transform: scale(1.045);
    will-change: transform;
}

.hero-shade {
    position: absolute;
    z-index: -3;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(2, 8, 23, .98) 0%, rgba(2, 8, 23, .9) 23%, rgba(2, 8, 23, .32) 52%, rgba(2, 8, 23, .14) 75%, rgba(2, 8, 23, .42) 100%),
        linear-gradient(0deg, rgba(2, 8, 23, .9) 0%, transparent 37%, rgba(2, 8, 23, .24) 100%);
}

.hero-grid-overlay {
    position: absolute;
    z-index: -2;
    inset: 0;
    opacity: .12;
    background-image:
        linear-gradient(rgba(120, 216, 255, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 216, 255, .12) 1px, transparent 1px);
    background-size: 90px 90px;
    mask-image: linear-gradient(90deg, black, transparent 40%, transparent 82%, black);
}

.hero-stage {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
    align-items: center;
    gap: clamp(40px, 7vw, 120px);
    flex: 1;
    min-height: calc(100svh - 112px);
    padding-top: 130px;
    padding-bottom: 76px;
}

.hero-signal .hero-copy {
    max-width: 760px;
}

.hero-signal .hero-copy h1 {
    max-width: 760px;
    font-size: clamp(64px, 7vw, 118px);
    line-height: .88;
    text-wrap: balance;
}

.hero-signal .hero-accent {
    color: var(--blue-300);
    font-family: Georgia, serif;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.08em;
}

.hero-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
}

.signal-icon {
    position: relative;
    display: inline-block;
    width: 23px;
    height: 23px;
    border: 1px solid var(--blue-300);
    border-radius: 50%;
}

.signal-icon::before,
.signal-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid var(--blue-300);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.signal-icon::before { width: 13px; height: 13px; }
.signal-icon::after { width: 3px; height: 3px; background: var(--blue-300); }

.hero-signal .hero-intro {
    max-width: 540px;
    color: var(--blue-200);
    text-shadow: 0 2px 22px rgba(2, 8, 23, .8);
}

.hero-capabilities {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    max-width: 540px;
    padding: 0;
    margin: 30px 0 0;
    list-style: none;
    border-top: 1px solid rgba(124, 200, 255, .22);
}

.hero-capabilities li {
    display: grid;
    gap: 2px;
    padding: 13px 16px 0 0;
}

.hero-capabilities span {
    color: var(--blue-400);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .13em;
}

.hero-capabilities strong {
    color: var(--blue-100);
    font-family: var(--display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.hero-signal .hero-footer {
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-top: 0;
    padding-top: 18px;
    padding-bottom: 26px;
}

.hero-proof {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hero-proof-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--ink);
    background: var(--blue-300);
    border-radius: 50%;
    font-size: 14px;
}

.hero-proof div { display: grid; gap: 1px; }
.hero-proof strong { color: var(--blue-100); font-size: 11px; letter-spacing: .04em; }
.hero-proof small { color: var(--muted); font-size: 9px; }

.hero-scroll {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hero-scroll span {
    width: 34px;
    height: 1px;
    background: var(--blue-400);
    box-shadow: 0 0 12px var(--blue-400);
}

.hero-signal .hero-index { justify-self: end; }

@media (max-width: 1100px) {
    .hero-stage {
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 30px;
    }
    .hero-signal .hero-copy h1 { font-size: clamp(60px, 8vw, 92px); }
}

@media (max-width: 820px) {
    .hero-media img {
        object-position: 72% center;
        opacity: .74;
    }
    .hero-shade {
        background:
            linear-gradient(90deg, rgba(2, 8, 23, .97) 0%, rgba(2, 8, 23, .76) 58%, rgba(2, 8, 23, .38) 100%),
            linear-gradient(0deg, rgba(2, 8, 23, .94) 0%, transparent 54%, rgba(2, 8, 23, .36) 100%);
    }
    .hero-stage {
        grid-template-columns: 1fr;
        align-items: end;
        min-height: calc(100svh - 96px);
        padding-top: 150px;
        padding-bottom: 55px;
    }
    .hero-signal .hero-copy { max-width: 680px; }
    .hero-signal .hero-footer { grid-template-columns: 1fr auto; }
    .hero-scroll { display: none; }
}

@media (max-width: 560px) {
    .hero-media img {
        object-position: 72% center;
        opacity: .62;
        transform: scale(1.08);
    }
    .hero-shade {
        background:
            linear-gradient(90deg, rgba(2, 8, 23, .94), rgba(2, 8, 23, .48)),
            linear-gradient(0deg, rgba(2, 8, 23, .98) 0%, rgba(2, 8, 23, .65) 54%, rgba(2, 8, 23, .42) 100%);
    }
    .hero-stage { padding-top: 130px; padding-bottom: 40px; }
    .hero-signal .hero-copy h1 { font-size: clamp(52px, 15vw, 72px); }
    .hero-signal .hero-intro { font-size: 16px; }
    .hero-capabilities { margin-top: 24px; }
    .hero-capabilities li { padding-right: 8px; }
    .hero-signal .hero-actions { margin-top: 32px; }
    .hero-signal .hero-footer { grid-template-columns: 1fr; }
    .hero-signal .hero-index { display: none; }
}

/* Search-focused detail pages */
.contact-phone { margin-top: 24px; }
.contact-direct a { max-width: 100%; overflow-wrap: anywhere; }
.form-submit p a { color: var(--paper-bright); text-decoration: underline; text-underline-offset: 3px; }

.inner-page {
    background:
        radial-gradient(circle at 82% 7%, rgba(46, 124, 246, .15), transparent 30%),
        var(--ink);
}
.inner-page .site-header {
    background: rgba(2, 8, 23, .86);
    border-bottom: 1px solid var(--line-dark);
    backdrop-filter: blur(18px);
}

.detail-page { min-height: 100vh; }

.detail-hero {
    position: relative;
    display: grid;
    align-items: end;
    min-height: 690px;
    padding: 180px 0 110px;
    overflow: hidden;
}

.detail-hero::before,
.detail-hero::after {
    position: absolute;
    content: "";
    pointer-events: none;
    border: 1px solid rgba(86, 167, 255, .18);
    border-radius: 50%;
}

.detail-hero::before {
    top: -56%;
    right: -12%;
    width: min(70vw, 920px);
    aspect-ratio: 1;
}

.detail-hero::after {
    right: 12%;
    bottom: -68%;
    width: min(46vw, 620px);
    aspect-ratio: 1;
}

.detail-grid {
    position: absolute;
    inset: 0;
    opacity: .22;
    background-image:
        linear-gradient(rgba(86, 167, 255, .16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(86, 167, 255, .16) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: linear-gradient(to bottom, #000, transparent);
}

.detail-hero-inner {
    position: relative;
    z-index: 1;
}

.breadcrumbs { margin-bottom: 72px; }
.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0;
    padding: 0;
    color: var(--muted);
    list-style: none;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.breadcrumbs li + li::before { margin-right: 9px; content: "/"; }
.breadcrumbs a:hover { color: var(--accent); }

.detail-hero h1 {
    max-width: 1080px;
    margin: 0;
    color: var(--paper-bright);
    font-family: var(--display);
    font-size: clamp(56px, 8vw, 118px);
    font-weight: 500;
    letter-spacing: -.075em;
    line-height: .94;
}

.detail-lede {
    max-width: 780px;
    margin: 42px 0 38px;
    color: var(--blue-200);
    font-size: clamp(18px, 2vw, 25px);
    line-height: 1.55;
}

.detail-feature-image {
    position: relative;
    z-index: 2;
    margin-top: -42px;
    padding: 18px;
    background: rgba(13, 29, 56, .86);
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-md);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .35);
}

.detail-feature-image img {
    width: 100%;
    max-height: 760px;
    object-fit: cover;
    object-position: top;
    border-radius: 15px;
}

.detail-content {
    display: grid;
    grid-template-columns: minmax(220px, .34fr) minmax(0, 1fr);
    gap: clamp(70px, 10vw, 160px);
    padding-top: clamp(90px, 11vw, 160px);
    padding-bottom: clamp(100px, 12vw, 180px);
}

.detail-summary {
    position: sticky;
    top: 110px;
    align-self: start;
    display: grid;
    padding: 28px;
    background: rgba(10, 35, 68, .46);
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-sm);
}

.detail-summary > span {
    margin-bottom: 16px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .13em;
}

.detail-summary div {
    display: grid;
    gap: 3px;
    padding: 15px 0;
    border-top: 1px solid var(--line-dark);
}
.detail-summary small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.detail-summary strong { color: var(--blue-100); font-weight: 500; }

.detail-body { max-width: 820px; }
.detail-body section + section {
    margin-top: clamp(80px, 9vw, 130px);
    padding-top: clamp(70px, 8vw, 110px);
    border-top: 1px solid var(--line-dark);
}
.detail-body .eyebrow { color: var(--accent); margin-bottom: 18px; }
.detail-body h2,
.policy-content h2 {
    margin: 0 0 30px;
    color: var(--paper-bright);
    font-family: var(--display);
    font-size: clamp(38px, 5vw, 66px);
    font-weight: 500;
    letter-spacing: -.06em;
    line-height: 1;
}
.detail-body p,
.policy-content p {
    margin: 0 0 24px;
    color: var(--muted-on-dark);
    font-size: 18px;
    line-height: 1.8;
}

.detail-list {
    display: grid;
    margin: 34px 0 0;
    padding: 0;
    border-top: 1px solid var(--line-dark);
    list-style: none;
}
.detail-list li {
    position: relative;
    padding: 18px 16px 18px 36px;
    color: var(--blue-100);
    border-bottom: 1px solid var(--line-dark);
}
.detail-list li::before {
    position: absolute;
    top: 25px;
    left: 8px;
    width: 8px;
    height: 8px;
    content: "";
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 18px rgba(86, 167, 255, .65);
}

.detail-cta {
    padding: clamp(90px, 10vw, 150px) 0;
    color: var(--ink);
    background-color: var(--accent-2);
    background-image:
        linear-gradient(rgba(2, 8, 23, .13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(2, 8, 23, .13) 1px, transparent 1px);
    background-size: 82px 82px;
}
.detail-cta h2 {
    max-width: 1100px;
    margin: 20px 0 48px;
    color: var(--paper-bright);
    font-family: var(--display);
    font-size: clamp(48px, 8vw, 105px);
    font-weight: 500;
    letter-spacing: -.075em;
    line-height: .93;
}
.detail-cta h2 em { color: var(--ink); font-family: Georgia, serif; font-weight: 400; }
.detail-cta > .shell > div { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; }
.detail-whatsapp-link { color: var(--paper-bright); font-weight: 600; }
.detail-whatsapp-link:hover { color: var(--ink); }

.detail-hero-compact { min-height: 570px; }
.policy-content {
    max-width: 900px;
    padding-top: clamp(80px, 10vw, 140px);
    padding-bottom: clamp(100px, 12vw, 180px);
}
.policy-content section + section { margin-top: 70px; padding-top: 60px; border-top: 1px solid var(--line-dark); }
.policy-content h2 { font-size: clamp(32px, 4vw, 52px); }
.policy-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.policy-updated { color: var(--accent) !important; font-size: 13px !important; text-transform: uppercase; letter-spacing: .1em; }

/* WhatsApp contact experience */
.whatsapp-widget {
    position: fixed;
    z-index: 160;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    display: grid;
    justify-items: end;
    gap: 14px;
}

.whatsapp-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 0 20px 0 15px;
    color: #fff;
    background: #168a4d;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    box-shadow: 0 14px 42px rgba(0, 0, 0, .32), 0 0 0 5px rgba(37, 211, 102, .1);
    cursor: pointer;
    font-weight: 600;
    transition: transform .25s var(--ease), background .25s ease;
}
.whatsapp-toggle:hover { background: #0f9f53; transform: translateY(-3px); }
.whatsapp-toggle img { width: 27px; height: 27px; }

.whatsapp-panel {
    width: min(380px, calc(100vw - 32px));
    color: var(--blue-100);
    background: rgba(5, 17, 37, .97);
    border: 1px solid rgba(120, 216, 255, .22);
    border-radius: 22px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .48);
    overflow: hidden;
    backdrop-filter: blur(20px);
    transform-origin: bottom right;
    animation: whatsapp-in .32s var(--ease) both;
}
.whatsapp-panel[hidden] { display: none; }
@keyframes whatsapp-in {
    from { opacity: 0; transform: translateY(14px) scale(.96); }
    to { opacity: 1; transform: none; }
}
.whatsapp-panel-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 17px 18px;
    background: linear-gradient(135deg, #0d6f42, #168a4d);
}
.whatsapp-avatar {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    background: rgba(255, 255, 255, .14);
    border-radius: 50%;
}
.whatsapp-panel-head strong,
.whatsapp-panel-head small { display: block; color: white; }
.whatsapp-panel-head small { margin-top: 2px; font-size: 10px; opacity: .82; }
.whatsapp-panel-head small i {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 4px;
    background: #8bffb6;
    border-radius: 50%;
}
.whatsapp-panel-head button {
    width: 34px;
    height: 34px;
    padding: 0;
    color: white;
    background: rgba(255, 255, 255, .1);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 25px;
    line-height: 1;
}
.whatsapp-panel-body { padding: 20px; }
.whatsapp-message {
    position: relative;
    padding: 14px 14px 26px;
    color: var(--blue-950);
    background: #e9fff2;
    border-radius: 4px 14px 14px 14px;
    font-size: 14px;
    line-height: 1.5;
}
.whatsapp-message time {
    position: absolute;
    right: 10px;
    bottom: 7px;
    color: #5d7d69;
    font-size: 9px;
}
.whatsapp-panel-body > p {
    margin: 18px 0 9px;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.whatsapp-options { display: grid; gap: 7px; }
.whatsapp-options a {
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    background: rgba(86, 167, 255, .07);
    border: 1px solid var(--line-dark);
    border-radius: 10px;
    font-size: 13px;
}
.whatsapp-options a:hover { color: var(--accent); border-color: rgba(86, 167, 255, .38); }
.whatsapp-start {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    padding: 13px;
    color: white;
    background: #168a4d;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}
.whatsapp-start:hover { background: #0f9f53; }

@media (max-width: 900px) {
    .detail-content { grid-template-columns: 1fr; }
    .detail-summary { position: static; grid-template-columns: repeat(3, 1fr); }
    .detail-summary > span { grid-column: 1 / -1; }
    .detail-summary div { padding-right: 18px; }
}

@media (max-width: 620px) {
    .detail-hero { min-height: 620px; padding: 130px 0 80px; }
    .detail-hero h1 { font-size: clamp(48px, 15vw, 70px); }
    .breadcrumbs { margin-bottom: 48px; }
    .detail-summary { grid-template-columns: 1fr; }
    .detail-summary > span { grid-column: auto; }
    .detail-body p,
    .policy-content p { font-size: 16px; }
    .whatsapp-toggle span { display: none; }
    .whatsapp-toggle { width: 58px; padding: 0; justify-content: center; }
}

/* Homepage package preview */
.packages-preview-section {
    color: var(--blue-950);
    background:
        linear-gradient(rgba(2, 8, 23, .09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(2, 8, 23, .09) 1px, transparent 1px),
        var(--blue-400);
    background-size: 92px 92px;
}

.packages-preview-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
    align-items: end;
    gap: clamp(50px, 9vw, 140px);
    margin-bottom: clamp(62px, 8vw, 110px);
}

.packages-preview-heading h2 {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(58px, 8vw, 112px);
    font-weight: 500;
    letter-spacing: -.075em;
    line-height: .91;
}
.packages-preview-heading h2 em { font-family: Georgia, serif; font-weight: 400; }
.packages-preview-heading > p { max-width: 470px; margin: 0 0 10px; font-size: 18px; line-height: 1.65; }

.package-teaser-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(2, 8, 23, .26);
    border-left: 1px solid rgba(2, 8, 23, .26);
}

.package-teaser-card {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    min-height: 430px;
    padding: clamp(26px, 3.2vw, 46px);
    border-right: 1px solid rgba(2, 8, 23, .26);
    border-bottom: 1px solid rgba(2, 8, 23, .26);
}
.package-teaser-featured { background: rgba(239, 247, 255, .22); }
.package-teaser-index { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .11em; }
.package-teaser-card h3 {
    margin: clamp(70px, 8vw, 120px) 0 20px;
    font-family: var(--display);
    font-size: clamp(31px, 3vw, 45px);
    letter-spacing: -.055em;
    line-height: 1;
}
.package-teaser-card p { max-width: 350px; margin: 0; font-size: 16px; line-height: 1.6; }
.package-teaser-card > div { display: grid; gap: 2px; align-self: end; margin-top: 36px; }
.package-teaser-card small { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; opacity: .62; }
.package-teaser-card strong { font-family: var(--display); font-size: 30px; letter-spacing: -.05em; }

.packages-preview-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    padding-top: 48px;
}
.packages-preview-action p { max-width: 540px; margin: 0; }
.button-dark { color: var(--paper-bright); background: var(--blue-950); }

/* Pricing page */
.pricing-page { min-height: 100vh; }
.pricing-hero {
    position: relative;
    min-height: 760px;
    padding: 180px 0 105px;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 18%, rgba(46, 124, 246, .25), transparent 30%),
        var(--blue-950);
}
.pricing-hero::after {
    position: absolute;
    right: -10%;
    bottom: -58%;
    width: min(70vw, 960px);
    aspect-ratio: 1;
    content: "";
    border: 1px solid rgba(120, 216, 255, .18);
    border-radius: 50%;
}
.pricing-hero-inner { position: relative; z-index: 1; }
.pricing-hero h1 {
    max-width: 1180px;
    margin: 0;
    font-family: var(--display);
    font-size: clamp(66px, 9vw, 126px);
    font-weight: 500;
    letter-spacing: -.08em;
    line-height: .89;
}
.pricing-hero h1 em { color: var(--accent); font-family: Georgia, serif; font-weight: 400; }
.pricing-hero-bottom {
    display: grid;
    grid-template-columns: minmax(0, 740px) auto;
    justify-content: space-between;
    align-items: end;
    gap: 60px;
    margin-top: 58px;
}
.pricing-hero-bottom > p { margin: 0; color: var(--blue-200); font-size: 20px; line-height: 1.65; }
.pricing-hero-bottom > div { display: grid; gap: 3px; text-align: right; }
.pricing-hero-bottom span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.pricing-hero-bottom strong { color: var(--paper-bright); font-size: 15px; }

.pricing-section {
    padding: var(--section-space) 0;
    color: var(--blue-950);
    background: var(--paper);
}
.pricing-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .5fr);
    align-items: end;
    gap: clamp(60px, 10vw, 150px);
}
.pricing-heading h2 {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(54px, 7vw, 96px);
    font-weight: 500;
    letter-spacing: -.075em;
    line-height: .94;
}
.pricing-heading > p { max-width: 500px; margin: 0 0 8px; color: var(--muted-on-light); font-size: 17px; line-height: 1.65; }

.pricing-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: 650px;
    margin: clamp(62px, 8vw, 100px) 0 42px;
    padding: 6px;
    background: rgba(2, 8, 23, .08);
    border: 1px solid rgba(2, 8, 23, .15);
    border-radius: 999px;
}
.pricing-tabs button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 58px;
    padding: 0 22px;
    color: var(--blue-950);
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
}
.pricing-tabs button span { font-size: 10px; opacity: .56; }
.pricing-tabs button.is-active { color: var(--paper-bright); background: var(--blue-950); box-shadow: 0 12px 36px rgba(2, 8, 23, .18); }

.pricing-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.pricing-panel[hidden] { display: none; }

.price-card {
    display: grid;
    grid-template-rows: auto auto auto auto 1fr auto;
    min-height: 720px;
    padding: clamp(25px, 3vw, 42px);
    background: var(--paper-bright);
    border: 1px solid rgba(2, 8, 23, .13);
    border-radius: 24px;
    box-shadow: 0 18px 50px rgba(2, 8, 23, .06);
}
.price-card-featured {
    color: var(--paper-bright);
    background:
        radial-gradient(circle at 90% 10%, rgba(86, 167, 255, .26), transparent 34%),
        var(--blue-950);
    border-color: var(--blue-950);
}
.price-card-top { display: flex; justify-content: space-between; gap: 16px; }
.price-category,
.price-index { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .11em; }
.price-category { color: var(--blue-700); }
.price-card-featured .price-category { color: var(--accent); }
.price-index { opacity: .5; }
.price-card h3 {
    margin: 72px 0 18px;
    font-family: var(--display);
    font-size: clamp(34px, 3.4vw, 50px);
    font-weight: 600;
    letter-spacing: -.065em;
    line-height: .96;
}
.price-fit { min-height: 76px; margin: 0; color: var(--muted-on-light); line-height: 1.55; }
.price-card-featured .price-fit { color: var(--muted-on-dark); }
.price { display: grid; gap: 4px; margin: 36px 0 32px; padding-bottom: 30px; border-bottom: 1px solid rgba(2, 8, 23, .13); }
.price-card-featured .price { border-color: var(--line-dark); }
.price small { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; opacity: .62; }
.price strong { display: flex; align-items: flex-start; font-family: var(--display); font-size: clamp(54px, 5vw, 76px); letter-spacing: -.075em; line-height: 1; }
.price sup { margin: 8px 7px 0 0; font-size: 16px; letter-spacing: 0; }
.price-card ul { display: grid; align-content: start; gap: 0; margin: 0 0 34px; padding: 0; list-style: none; }
.price-card li { position: relative; padding: 13px 0 13px 25px; border-bottom: 1px solid rgba(2, 8, 23, .1); font-size: 14px; }
.price-card-featured li { border-color: var(--line-dark); }
.price-card li::before { position: absolute; left: 2px; content: "✓"; color: var(--blue-600); font-weight: 700; }
.price-card-featured li::before { color: var(--accent); }
.price-card > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-self: end;
    min-height: 56px;
    padding: 0 20px;
    color: var(--paper-bright);
    background: var(--blue-950);
    border-radius: 999px;
    font-weight: 600;
}
.price-card-featured > a { color: var(--blue-950); background: var(--accent); }
.price-card > a:hover { transform: translateY(-3px); }

.pricing-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-top: 32px;
    padding: 28px 32px;
    background: rgba(46, 124, 246, .08);
    border: 1px solid rgba(46, 124, 246, .17);
    border-radius: 16px;
}
.pricing-note p { max-width: 860px; margin: 0; color: var(--muted-on-light); font-size: 14px; }
.pricing-note p strong { color: var(--blue-950); }
.pricing-note > a { white-space: nowrap; font-weight: 600; }

.package-proof {
    padding: var(--section-space) 0;
    color: var(--blue-950);
    background: var(--paper);
    border-top: 1px solid var(--line-light);
}

.package-case-grid { margin-bottom: clamp(90px, 11vw, 160px); }

.package-product-feature {
    position: relative;
    display: grid;
    grid-template-columns: minmax(280px, .48fr) minmax(0, 1.52fr);
    align-items: center;
    gap: clamp(48px, 7vw, 100px);
    padding: clamp(34px, 5vw, 74px);
    color: var(--paper-bright);
    background:
        radial-gradient(circle at 86% 18%, rgba(46, 124, 246, .25), transparent 32%),
        linear-gradient(rgba(120, 216, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 216, 255, .055) 1px, transparent 1px),
        var(--blue-950);
    background-size: auto, 72px 72px, 72px 72px, auto;
    border: 1px solid rgba(120, 216, 255, .18);
    border-radius: 32px;
    box-shadow: 0 35px 90px rgba(2, 8, 23, .18);
    overflow: hidden;
}

.package-product-copy { position: relative; z-index: 2; }
.package-product-copy > .eyebrow { margin: 34px 0 12px; color: var(--muted); }
.package-product-copy h3 {
    margin: 0 0 22px;
    font-family: var(--display);
    font-size: clamp(46px, 5vw, 76px);
    font-weight: 500;
    letter-spacing: -.07em;
    line-height: .95;
}
.package-product-copy > p {
    max-width: 480px;
    margin: 0;
    color: var(--muted-on-dark);
    font-size: 16px;
    line-height: 1.65;
}
.package-product-copy ul {
    margin: 38px 0;
    padding: 0;
    border-top: 1px solid var(--line-dark);
    list-style: none;
}
.package-product-copy li {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 10px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line-dark);
    font-size: 14px;
}
.package-product-copy li span { color: var(--accent); font-size: 10px; }

.package-product-stage {
    position: relative;
    z-index: 2;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 24px;
    box-shadow: 0 28px 70px rgba(0, 0, 0, .32);
}

.package-final-cta {
    padding: clamp(100px, 12vw, 180px) 0;
    color: var(--blue-950);
    background:
        linear-gradient(rgba(2, 8, 23, .09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(2, 8, 23, .09) 1px, transparent 1px),
        var(--blue-400);
    background-size: 92px 92px;
}
.package-final-cta h2 {
    max-width: 1100px;
    margin: 18px 0 48px;
    font-family: var(--display);
    font-size: clamp(55px, 8vw, 108px);
    font-weight: 500;
    letter-spacing: -.075em;
    line-height: .92;
}
.package-final-cta h2 em { font-family: Georgia, serif; font-weight: 400; }
.package-final-cta > .shell > div { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; }
.package-final-cta > .shell > div > a:last-child { font-weight: 600; }

@media (max-width: 1050px) {
    .package-teaser-grid,
    .pricing-panel { grid-template-columns: 1fr; }
    .package-teaser-card { min-height: 340px; }
    .package-teaser-card h3 { margin-top: 62px; }
    .price-card { min-height: auto; }
    .price-fit { min-height: 0; }
    .package-product-feature { grid-template-columns: 1fr; }
    .package-product-copy { max-width: 620px; }
}

@media (max-width: 760px) {
    .packages-preview-heading,
    .pricing-heading,
    .pricing-hero-bottom { grid-template-columns: 1fr; }
    .packages-preview-heading { align-items: start; }
    .packages-preview-action,
    .pricing-note { align-items: flex-start; flex-direction: column; }
    .pricing-hero { min-height: 690px; padding: 140px 0 80px; }
    .pricing-hero h1 { font-size: clamp(56px, 15vw, 78px); }
    .pricing-hero-bottom > div { text-align: left; }
}

@media (max-width: 560px) {
    .packages-preview-heading h2,
    .pricing-heading h2 { font-size: clamp(48px, 14vw, 66px); }
    .pricing-tabs { grid-template-columns: 1fr; border-radius: 22px; }
    .pricing-tabs button { border-radius: 16px; }
    .price-card { padding: 28px 22px; }
    .price-card h3 { margin-top: 54px; }
    .pricing-note { padding: 24px; }
    .package-product-feature { padding: 28px 20px; border-radius: 22px; }
    .package-product-copy h3 { font-size: 48px; }
}