dialog{
    width: min(720px, calc(100% - 28px));
    border: 1px solid var(--hair);
    border-radius: 22px;
    padding: 0;
    background:
            radial-gradient(900px 280px at 18% 0%, rgba(26,108,255,.14), transparent 60%),
            radial-gradient(900px 280px at 86% 10%, rgba(255,77,46,.10), transparent 60%),
            color-mix(in oklab, var(--paper) 82%, transparent);
    backdrop-filter: blur(12px);
    box-shadow: 0 40px 120px rgba(0,0,0,.22);
    color: var(--ink);
}
dialog::backdrop{ background: rgba(17,18,18,.48); }
.modalHead{
    padding: 18px 18px 14px;
    border-bottom: 1px solid rgba(17,18,18,.10);
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}
.modalHead h3{
    margin:0;
    font-family: Fraunces, serif;
    letter-spacing:-.02em;
    font-variation-settings: "SOFT" 30;
    font-size: 22px;
}
.modalHead p{ margin:6px 0 0; color: rgba(17,18,18,.68); font-size: 14px; }
.modalBody{
    padding: 16px 18px 18px;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{
    font-size: 12px;
    letter-spacing:.14em;
    text-transform: uppercase;
    color: rgba(17,18,18,.66);
}
.field input, .field textarea{
    width:100%;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(17,18,18,.14);
    background: rgba(255,255,255,.70);
    outline:none;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
    font-size: 14px;
}
.field textarea{ min-height: 92px; resize: vertical; grid-column: 1 / -1; }
.field input:focus, .field textarea:focus{
    border-color: rgba(26,108,255,.45);
    box-shadow: 0 0 0 4px rgba(26,108,255,.12);
}
.modalActions{
    padding: 0 18px 18px;
    display:flex;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
}
.btn.big{
    padding: 16px 32px;
    font-size: 18px;
}

/* Landing Page Sections */
.landingHero {
    min-height: 100vh;
    padding: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    background: 
        url('images/background.png') center/cover no-repeat;
    margin-bottom: 0;
}
.landingHero::after {
    content: "";
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 60px;
    background: linear-gradient(to bottom, var(--accent), transparent);
    animation: scrollHint 2s infinite;
    z-index: 2;
}
@keyframes scrollHint {
    0% { transform: translateX(-50%) translateY(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(-50%) translateY(20px); opacity: 0; }
}
.landingHero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, var(--bg) 100%);
    pointer-events: none;
}
.landingContent {
    position: relative;
    z-index: 1;
}
.landingHero h1 {
    font-size: clamp(80px, 18vw, 240px);
    margin: 10px 0;
    line-height: 0.8;
    letter-spacing: -0.04em;
    font-family: Fraunces, serif;
    font-variation-settings: "SOFT" 100;
}
.landingHero p {
    font-size: clamp(20px, 2.5vw, 28px);
    color: var(--ink);
    max-width: 700px;
    margin-inline: auto;
    font-weight: 400;
}

.featuresBrief {
    padding: 60px 0 100px;
}
.grid3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}
.card {
    background: var(--paper);
    padding: 40px;
    border-radius: var(--radius2);
    border: 1px solid var(--hair);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}
.card h3 {
    margin: 0 0 15px;
    font-family: Fraunces, serif;
    font-variation-settings: "SOFT" 30;
    font-size: 24px;
}
.card p {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
}

@media (max-width: 740px){
    .modalBody{ grid-template-columns: 1fr; }
}

/* 3D Scene */
 .scene{
     width: 100%;
     height: 420px;
     position: relative;
     border-radius: 22px;
     display:grid;
     place-items:center;
     perspective: 1200px;
 }

.shadow{
    position:absolute;
    width: 420px;
    height: 90px;
    background: radial-gradient(closest-side, rgba(17,18,18,.22), transparent 72%);
    filter: blur(2px);
    transform: translateY(152px);
    opacity: .85;
}

.lpad{
    position: relative;
    width: 260px;
    height: 240px;
    transform-style: preserve-3d;
    transform:
            rotateX(58deg)
            rotateZ(-32deg)
            rotateY(0deg);
    transition: transform .55s var(--ease);
}

/* Faces */
.face{
    position:absolute;
    inset:0;
    border-radius: 18px;
    overflow:hidden;
    border: 1px solid var(--hair2);
    background: color-mix(in oklab, var(--paper) 70%, transparent);
    box-shadow: 0 2px 0 rgba(255,255,255,.05) inset;
}

/* Base (desk) */
.base{
    width: 220px;
    height: 8px;
    left: 20px;
    top: 212px;
    transform: translateZ(0px);
    background:
            radial-gradient(120% 120% at 10% 10%, color-mix(in oklab, var(--paper) 88%, transparent), color-mix(in oklab, var(--paper) 66%, transparent) 45%, color-mix(in oklab, var(--bg) 55%, transparent) 100%),
            linear-gradient(135deg, rgba(26,108,255,.10), rgba(255,77,46,.08));
}

/* Wall (vertical tracking plane) */
.wall{
    width: 220px;
    height: var(--wallH, 180px);
    left: 20px;
    top: calc(212px - var(--wallH, 180px));
    transform-origin: bottom;
    transform: rotateX(-90deg) translateZ(0px);
    background:
            radial-gradient(120% 160% at 14% 18%, color-mix(in oklab, var(--paper) 88%, transparent), color-mix(in oklab, var(--paper) 62%, transparent) 45%, color-mix(in oklab, var(--bg) 48%, transparent) 100%),
            linear-gradient(135deg, rgba(255,77,46,.10), rgba(26,108,255,.08));
}

/* Edges to sell thickness */
.edge{
    background: linear-gradient(180deg, rgba(17,18,18,.08), rgba(17,18,18,.02));
    border-radius: 14px;
    border: 1px solid rgba(17,18,18,.10);
    box-shadow: 0 2px 0 rgba(255,255,255,.45) inset;
}
/* Front edge of base */
.edge1{
    width: 220px;
    height: 16px;
    left: 20px;
    top: calc(212px + 8px - 8px);
    transform: translateZ(-14px) rotateX(0deg);
}
/* Back edge of base */
.edge2{
    width: 220px;
    height: 16px;
    left: 20px;
    top: calc(212px - 8px);
    transform: translateZ(-14px);
    opacity:.75;
}
/* Bottom edge of wall */
.edge3{
    width: 220px;
    height: 16px;
    left: 20px;
    top: calc(212px - 8px);
    transform: rotateX(-90deg) translateZ(-14px);
    transform-origin: bottom;
    opacity:.9;
}
/* Side edge */
.edge4{
    width: 16px;
    height: calc(8px + var(--wallH, 180px));
    left: calc(20px + 220px - 8px);
    top: calc(212px - var(--wallH, 180px));
    transform: translateZ(-14px);
    opacity:.55;
}

/* Stylized mouse that "rides" the wall */
.mouse{
    position:absolute;
    width: 78px;
    height: 44px;
    left: 100px;
    top: 60px;
    transform-style: preserve-3d;
    transform:
            rotateX(-90deg)
            translateZ(18px)
            translateY(0px);
    transform-origin: bottom;
    transition: transform .25s var(--ease);
    pointer-events:none;
}
.mouseTop{
    position:absolute; inset:0;
    border-radius: 22px 22px 18px 18px;
    background:
            radial-gradient(100px 60px at 30% 22%, rgba(255,255,255,.4), transparent 55%),
            linear-gradient(135deg, var(--ink), color-mix(in oklab, var(--ink) 80%, var(--bg)));
    box-shadow:
            0 10px 18px rgba(0,0,0,.22),
            0 1px 0 rgba(255,255,255,.1) inset;
    border: 1px solid var(--hair);
}
.mouseLine{
    position:absolute;
    left: 50%;
    top: 10px;
    width: 2px; height: 22px;
    background: rgba(255,255,255,.20);
    transform: translateX(-50%);
    border-radius: 2px;
}

@media (max-width: 520px){
    .scene{ height: 380px; }
    .lpad{ transform: rotateX(58deg) rotateZ(-30deg); width: 330px; }
    .shadow{ width: 360px; }
}

:root{
     /* Swiss-editorial + product lab (Light base) */
     --bg: #fbfaf7;
     --paper:#ffffff;
     --ink:#111212;
     --muted: rgba(17,18,18,.66);
     --hair: rgba(17,18,18,.12);
     --hair2: rgba(17,18,18,.08);

     --accent: #1a6cff;     /* precise blue */
     --accent2:#ff4d2e;     /* safety orange */
     --lime:#12b981;        /* ergonomic green hint */

     --shadow: 0 22px 70px rgba(17,18,18,.12);
     --shadow2: 0 10px 26px rgba(17,18,18,.10);

     --radius: 18px;
     --radius2: 28px;

     --container: 1140px;
     --pad: clamp(18px, 3.2vw, 44px);

     --h1: clamp(44px, 6.2vw, 84px);
     --h2: clamp(26px, 3.2vw, 42px);
     --h3: clamp(18px, 2.0vw, 24px);
     --p: clamp(15px, 1.05vw, 17px);

     --ease: cubic-bezier(.2,.8,.2,1);
 }

 body.dark-mode {
     --bg: #0a0a0a;
     --paper: #111111;
     --ink: #eeeeee;
     --muted: rgba(255,255,255,.60);
     --hair: rgba(255,255,255,.12);
     --hair2: rgba(255,255,255,.08);
     --accent: #4d8cff;
     --shadow: 0 22px 70px rgba(0,0,0,.4);
     --shadow2: 0 10px 26px rgba(0,0,0,.3);
 }

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
    margin:0;
    color:var(--ink);
    font-family: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    line-height:1.55;
    letter-spacing:-.01em;
    background:
            radial-gradient(1100px 560px at 12% 18%, rgba(26,108,255,.10), transparent 62%),
            radial-gradient(900px 520px at 86% 20%, rgba(255,77,46,.08), transparent 60%),
            radial-gradient(900px 520px at 50% 92%, rgba(18,185,129,.08), transparent 58%),
            linear-gradient(180deg, var(--bg), color-mix(in oklab, var(--bg) 95%, black) 70%, color-mix(in oklab, var(--bg) 90%, black));
    overflow-x:hidden;
    transition: background .4s var(--ease), color .4s var(--ease);
}

/* clean lab grid texture */
body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
            linear-gradient(to right, var(--ink) 1px, transparent 1px),
            linear-gradient(to bottom, var(--ink) 1px, transparent 1px);
    background-size: 44px 44px;
    opacity:.04;
    transform: translateZ(0);
}

a{ color:inherit; text-decoration:none; }
button{ font:inherit; }
::selection{ background: rgba(26,108,255,.18); }

.container{
    width:min(var(--container), calc(100% - var(--pad)*2));
    margin-inline:auto;
}

header{
    position:sticky;
    top:0;
    z-index:40;
    backdrop-filter: blur(10px);
    background: color-mix(in oklab, var(--bg) 80%, transparent);
    border-bottom: 1px solid var(--hair2);
    transition: background .4s var(--ease), border-color .4s var(--ease);
}
.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding: 12px 0;
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;
    min-width: 230px;
}
.logoImg{
    height: 42px;
    width: auto;
    display: block;
}
.mark{
    width:36px;height:36px;border-radius: 12px;
    background:
            radial-gradient(circle at 30% 25%, rgba(255,255,255,.85), transparent 52%),
            linear-gradient(135deg, rgba(26,108,255,1), rgba(255,77,46,.95));
    box-shadow: 0 14px 34px rgba(26,108,255,.20);
    position:relative;
    overflow:hidden;
}
.mark::after{
    content:"";
    position:absolute;
    inset:-40%;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.22), transparent 55%);
    transform: rotate(25deg);
}

.brand strong{
    font-family: Fraunces, serif;
    font-weight: 700;
    letter-spacing: -.02em;
    font-variation-settings: "SOFT" 35;
    font-size: 18px;
    line-height:1.05;
    display:block;
}
.brand span{
    display:block;
    font-size: 12px;
    letter-spacing:.12em;
    text-transform: uppercase;
    color: rgba(17,18,18,.62);
    margin-top: 2px;
}

nav{
    display:flex;
    gap:18px;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
}
nav a{
    font-size: 12px;
    letter-spacing:.14em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 8px 0;
    position:relative;
    transition: color .25s var(--ease);
}
nav a::after{
    content:"";
    position:absolute;
    left:0; bottom:4px;
    width:100%; height:1px;
    background: linear-gradient(90deg, transparent, var(--muted), transparent);
    transform: scaleX(.2);
    opacity:0;
    transition: transform .25s var(--ease), opacity .25s var(--ease);
}
nav a:hover{ color: var(--ink); }
nav a:hover::after{ transform: scaleX(1); opacity:1; }

.ctaRow{
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:flex-end;
    min-width: 250px;
}

.btn{
    border: 1px solid var(--hair);
    background: color-mix(in oklab, var(--paper) 60%, transparent);
    padding: 10px 14px;
    border-radius: 999px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    box-shadow: 0 1px 0 rgba(17,18,18,.06);
    transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .2s var(--ease);
    user-select:none;
    color: var(--ink);
}
.btn:hover{
    transform: translateY(-1px);
    box-shadow: var(--shadow2);
    border-color: var(--muted);
    background: color-mix(in oklab, var(--paper) 80%, transparent);
}
.btn:active{ transform: translateY(0) scale(.99); }

.btn.primary{
    border-color: rgba(26,108,255,.30);
    background:
            radial-gradient(120% 200% at 20% 0%, rgba(255,255,255,.55), transparent 40%),
            linear-gradient(135deg, rgba(26,108,255,1), rgba(255,77,46,.95));
    color:#fff;
    box-shadow: 0 18px 46px rgba(26,108,255,.22);
}
.btn.primary:hover{
    transform: translateY(-2px);
    box-shadow: 0 22px 60px rgba(26,108,255,.26);
    border-color: rgba(255,255,255,.22);
}

.icon{ width:16px;height:16px; display:inline-block; }

main{ padding-bottom: 70px; }

/* HERO */
.hero{ padding: clamp(22px, 5.2vw, 74px) 0 0; }
.heroGrid{
    display:grid;
    grid-template-columns: 1.06fr .94fr;
    gap: clamp(18px, 3.2vw, 44px);
    align-items:start;
    padding-bottom: clamp(18px, 3vw, 34px);
}

.kicker{
    display:flex; align-items:center; gap:10px;
    color: rgba(17,18,18,.70);
    font-size: 12px;
    letter-spacing:.14em;
    text-transform: uppercase;
    margin: 10px 0 18px;
}
.kicker .dot{
    width:9px;height:9px;border-radius:50%;
    background: conic-gradient(from 220deg, var(--accent), var(--lime), var(--accent2), var(--accent));
    box-shadow: 0 10px 20px rgba(0,0,0,.14);
}

h1{
    margin:0 0 14px;
    font-family: Fraunces, serif;
    font-size: var(--h1);
    line-height: .96;
    letter-spacing: -.04em;
    font-variation-settings: "SOFT" 35;
}
.lede{
    margin:0 0 24px;
    font-size: clamp(16px, 1.35vw, 19px);
    color: var(--muted);
    max-width: 60ch;
}

.heroActions{ display:flex; gap:10px; flex-wrap:wrap; }

.heroMeta{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--hair2);
}
.metaItem{ display:flex; flex-direction:column; gap:6px; }
.metaItem b{
    font-size: 12px;
    letter-spacing:.14em;
    text-transform: uppercase;
    color: rgba(17,18,18,.66);
}
.metaItem span{
    font-size: 14px;
    color: rgba(17,18,18,.90);
}

/* STAGE */
.stage{
    border-radius: var(--radius2);
    border: 1px solid var(--hair2);
    background:
            radial-gradient(900px 440px at 50% 20%, color-mix(in oklab, var(--paper) 90%, transparent), color-mix(in oklab, var(--paper) 50%, transparent) 45%, transparent 72%),
            linear-gradient(180deg, color-mix(in oklab, var(--paper) 78%, transparent), color-mix(in oklab, var(--bg) 74%, transparent));
    box-shadow: var(--shadow);
    overflow:hidden;
    min-height: 560px;
    padding: 18px;
    position:relative;
    isolation:isolate;
}
.stage::before{
    content:"";
    position:absolute;
    inset:-1px;
    background:
            radial-gradient(650px 260px at 18% 20%, rgba(26,108,255,.12), transparent 60%),
            radial-gradient(650px 260px at 84% 34%, rgba(255,77,46,.10), transparent 62%),
            radial-gradient(680px 320px at 56% 92%, rgba(18,185,129,.10), transparent 60%);
    opacity:.95;
    z-index:0;
}

.stageGrid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-rows: auto 1fr auto;
    gap: 12px;
    height:100%;
}

.stageTop{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap: 12px;
    flex-wrap:wrap;
}

.badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding: 10px 12px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--paper) 62%, transparent);
    border: 1px solid var(--hair2);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
    color: var(--muted);
}
.badge i{
    width:10px;height:10px;border-radius:50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), transparent 60%), var(--accent);
    box-shadow: 0 10px 20px rgba(26,108,255,.18);
    display:inline-block;
}
.badge span{ font-size: 12px; letter-spacing:.12em; text-transform: uppercase; }

.pill{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.62);
    border: 1px solid rgba(17,18,18,.10);
    backdrop-filter: blur(10px);
}
.pill label{
    font-size: 12px;
    letter-spacing:.12em;
    text-transform: uppercase;
    color: rgba(17,18,18,.66);
    white-space:nowrap;
}
.pill input[type="range"]{ width: 160px; accent-color: var(--accent); }

.objectWrap{
    position:relative;
    display:grid;
    place-items:center;
    min-height: 390px;
    padding: 6px 0;
}

.hint{
    position:absolute;
    left: 14px;
    bottom: 14px;
    max-width: 40ch;
    color: var(--muted);
    font-size: 12px;
    line-height:1.35;
    background: color-mix(in oklab, var(--paper) 62%, transparent);
    border: 1px solid var(--hair2);
    border-radius: 14px;
    padding: 12px;
    backdrop-filter: blur(10px);
}

.stageBottom{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap: 14px;
    flex-wrap:wrap;
    padding-top: 8px;
    border-top: 1px solid rgba(17,18,18,.08);
}
.priceBlock{ display:flex; align-items:baseline; gap: 10px; }
.price{
    font-family: Fraunces, serif;
    font-weight: 700;
    letter-spacing:-.02em;
    font-size: clamp(26px, 2.4vw, 34px);
}
.subprice{ color: var(--muted); font-size: 13px; }

/* Sections */
section{ padding: clamp(30px, 5.2vw, 76px) 0; }

.sectionTitle{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--hair2);
}
.sectionTitle h2{
    margin:0;
    font-family: Fraunces, serif;
    font-size: var(--h2);
    letter-spacing:-.02em;
    font-variation-settings: "SOFT" 35;
}
.sectionTitle p{ margin:0; color: var(--muted); font-size: 14px; max-width: 62ch; }

/* Features: editorial list + sticky spec */
.features{
    display:grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(18px, 3.2vw, 44px);
    align-items:start;
}
.featureList{
    display:flex;
    flex-direction:column;
    gap: 18px;
    padding-right: clamp(0px, 2vw, 16px);
}
.feature{
    display:grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--hair2);
}
.feature:last-child{ border-bottom:0; }
.num{
    font-family: Fraunces, serif;
    font-weight: 700;
    color: rgba(17,18,18,.70);
    font-size: 18px;
    letter-spacing:.02em;
    margin-top: 2px;
}
.feature h3{ margin:0 0 6px; font-size: var(--h3); letter-spacing:-.02em; }
.feature p{ margin:0; font-size: var(--p); color: var(--muted); }

.specAside{
    position:relative;
    border-radius: var(--radius2);
    background: color-mix(in oklab, var(--paper) 62%, transparent);
    border: 1px solid var(--hair2);
    box-shadow: var(--shadow2);
    overflow:hidden;
    backdrop-filter: blur(12px);
}
.specAside .cap{
    padding: 18px 18px 12px;
    background:
            radial-gradient(700px 240px at 18% 0%, rgba(26,108,255,.14), transparent 60%),
            radial-gradient(700px 240px at 86% 10%, rgba(255,77,46,.10), transparent 60%);
    border-bottom: 1px solid rgba(17,18,18,.08);
}
.specAside .cap b{
    display:block;
    letter-spacing:.14em;
    text-transform: uppercase;
    font-size: 12px;
    color: rgba(17,18,18,.66);
    margin-bottom: 6px;
}
.specAside .cap h3{
    margin:0;
    font-family: Fraunces, serif;
    letter-spacing:-.02em;
    font-size: 22px;
    font-variation-settings: "SOFT" 30;
}

dl{ margin:0; padding: 16px 18px 18px; display:grid; gap: 12px; }
.row{ display:flex; justify-content:space-between; gap:14px; padding: 10px 0; border-bottom: 1px dashed var(--hair); }
.row:last-child{ border-bottom:0; }
dt{
    color: var(--muted);
    font-size: 12px;
    letter-spacing:.14em;
    text-transform: uppercase;
}
dd{ margin:0; color: var(--ink); font-size: 14px; text-align:right; }

/* How it works strip */
.how{
    border-top: 1px solid var(--hair2);
    border-bottom: 1px solid var(--hair2);
    background: var(--paper);
}
.howGrid{
    display:grid;
    grid-template-columns: .95fr 1.05fr;
    gap: clamp(18px, 3.2vw, 52px);
    align-items:center;
}
.how p{
    margin:0;
    color: var(--muted);
    font-size: clamp(15px, 1.15vw, 17px);
    max-width: 66ch;
}

.callout{
    border-left: 2px solid rgba(26,108,255,.55);
    padding-left: 16px;
    font-family: Fraunces, serif;
    font-variation-settings: "SOFT" 30;
    letter-spacing:-.01em;
    color: rgba(17,18,18,.90);
    font-size: clamp(18px, 1.7vw, 22px);
    line-height:1.2;
}
.callout small{
    display:block;
    margin-top: 10px;
    font-family: "IBM Plex Sans", sans-serif;
    letter-spacing:.14em;
    text-transform: uppercase;
    font-size: 12px;
    color: rgba(17,18,18,.62);
}

footer{
    padding: 34px 0 40px;
    border-top: 1px solid var(--hair2);
    color: var(--muted);
}
.foot{
    display:flex;
    justify-content:center;
    flex-direction:column;
    text-align:center;
    gap: 16px;
    flex-wrap:wrap;
    align-items:center;
}
.foot a{
    text-decoration: underline;
    text-decoration-color: rgba(17,18,18,.25);
    text-underline-offset: 3px;
}

#modal3d {
    width: min(1000px, calc(100% - 28px));
}

.modalBody3D {
    display: block;
    padding: 0;
    overflow: hidden;
    min-height: 500px;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.4), transparent);
}

.modalBody3D .objectWrap {
    min-height: 500px;
    cursor: crosshair;
}

/* Reveal */
.reveal{
    opacity:0;
    transform: translateY(14px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    will-change: opacity, transform;
}
.reveal.in{ opacity:1; transform: translateY(0); }

@media (max-width: 980px){
    nav{ display:none; }
    .brand{ min-width: unset; }
    .ctaRow{ min-width: unset; }
    .heroGrid{ grid-template-columns: 1fr; }
    .features{ grid-template-columns: 1fr; }
    .specAside{ position:relative; top:auto; }
    .stage{ min-height: 560px; }
}
@media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
    .btn{ transition:none; }
}

/* Smooth scroll for in-page anchors */
html { scroll-behavior: smooth; }

@media (max-width: 640px){
    .heroMeta{ grid-template-columns: 1fr; }
}