:root{
    --bg: #14212B;            /* deep steel‑blue */
    --fg: #FFFFFF;            /* white text */
    --muted: #9BA9B6;         /* cool steel sub‑text */
    --line: rgba(255,255,255,.12);
    --line-strong: rgba(255,255,255,.28);
    --accent: #D6C19E;        /* sand/beige accent */
    --accent-grad-start: #E4D4B8;
    --accent-grad-end: #C4A775;
    --tint: rgba(214,193,158,.04);   /* subtle beige tint */
    --container: 1200px;
    --header-start: rgba(20,33,43,.94);  /* deep steel */
    --header-end:   rgba(20,33,43,.74);
    --band-radial: radial-gradient(80% 100% at 50% 0%, rgba(255,255,255,.03), rgba(255,255,255,0));
}
[data-theme="light"]{
    --bg: #EEF3F8;            /* light steel‑blue */
    --fg: #14212B;            /* dark text */
    --muted: #65788B;         /* muted steel */
    --line: rgba(20,33,43,.12);
    --line-strong: rgba(20,33,43,.32);
    --accent: #C4A775;        /* warm beige */
    --accent-grad-start: #F2E6D1;
    --accent-grad-end: #C4A775;
    --tint: rgba(196,167,117,.04);
    --header-start: rgba(238,243,248,.95);  /* very light steel */
    --header-end:   rgba(238,243,248,.80);
    --band-radial: radial-gradient(80% 100% at 50% 0%, rgba(20,33,43,.08), rgba(20,33,43,0));
}
html,body{background:var(--bg);color:var(--fg);margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";}
*{box-sizing:border-box}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
/* Inside the hero slider only, increase side padding so content stays within the corner frame */
.hero .container{
    padding-left: calc(var(--frame-x) + var(--frame-safe-x));
    padding-right: calc(var(--frame-x) + var(--frame-safe-x));
}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ----- Header ----- */
header{position:sticky;top:0;z-index:10;background:linear-gradient(180deg, var(--header-start), var(--header-end));backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid var(--accent);}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-weight:600;letter-spacing:.18em;font-size:.85rem;opacity:.85}
.nav-actions{display:flex;gap:10px;align-items:center}
.btn{border:1px solid var(--line-strong);padding:10px 14px;border-radius:999px;font-size:.85rem;letter-spacing:.06em;background:transparent;transition:filter .15s ease, border-color .15s ease}
.btn:hover{filter:brightness(115%);border-color:var(--accent)}
.toggle{
    width:42px;
    height:42px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:20px;
    line-height:1;
    border:1px solid var(--line-strong);
    background:var(--bg);
    cursor:pointer;
    transition:background .25s ease, border-color .25s ease, transform .15s ease;
}
.toggle:hover{transform:scale(1.08);border-color:var(--accent);}

/* ----- Hero ----- */
/* ----- Hero Slider (dot nav and slides) ----- */
.slider-dots{
    position:absolute;
    bottom:32px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:18px;
    z-index:8;
    padding:8px 18px;
    border-radius:999px;
    border:1px solid var(--line-strong);
    background:linear-gradient(180deg, var(--header-start), var(--header-end));
    backdrop-filter:saturate(180%) blur(10px);
    pointer-events:auto;
}
.slider-dots .dot{
    appearance:none; -webkit-appearance:none;
    display:inline-block;
    position:static;
    width:16px; height:16px; padding:0;
    border-radius:50%;
    border:2px solid var(--line-strong);
    background:var(--line);
    cursor:pointer; pointer-events:auto;
    box-shadow:0 0 0 2px rgba(0,0,0,0);
    transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.slider-dots .dot:hover{transform:scale(1.2)}
.slider-dots .dot.active{
    background:var(--accent);
    border-color:var(--accent);
    box-shadow:0 0 0 4px rgba(0,0,0,.14);
    transform:scale(1.25);
}
/* ----- Hero slider ----- */
.hero-slider{position:relative;width:100%;min-height:86vh}
.slide{position:absolute;inset:0;opacity:0;transform:translateX(4%);transition:opacity .35s ease, transform .35s ease;pointer-events:none;display:flex;align-items:center}
.slide.active{opacity:1;transform:none;pointer-events:auto;z-index:1}

/* ----- Simple geo artwork (for slide 2) ----- */
.geo-cluster{position:absolute;right:0;top:12%;width:34vw;max-width:560px;height:56vh;opacity:.16;background:
    repeating-linear-gradient(to right, rgba(255,255,255,.14) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.14) 0 1px, transparent 1px 44px);
    -webkit-mask-image: radial-gradient(80% 70% at 92% 50%, #000 60%, transparent 100%);
            mask-image: radial-gradient(80% 70% at 92% 50%, #000 60%, transparent 100%);
    border-left:1px solid var(--line-strong);
}
.grid3{position:absolute;width:96px;height:96px;border:1px solid var(--line-strong);opacity:.75;background:
    repeating-linear-gradient(to right, var(--line-strong) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(to bottom, var(--line-strong) 0 1px, transparent 1px 32px);
}
.accent-dot{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);opacity:.85}

/* ----- Apps grid ----- */
.apps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px;margin-top:36px}
.app-card p{line-height:1.55}
.app-card .app-logo{width:96px;height:auto;margin-bottom:18px;border-radius:12px;box-shadow:0 0 4px rgba(0,0,0,.2)}
.hero{position:relative;min-height:86vh;display:grid;place-items:center;border-bottom:1px solid var(--line);background-image:linear-gradient(180deg, var(--tint), transparent)}
.hero-inner{width:100%}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:10vw;align-items:center}
.hero h1{font-size:clamp(40px,8vw,92px);line-height:1.02;letter-spacing:.01em;margin:0 0 16px 0;font-weight:600}
.hero p{color:var(--muted);font-size:clamp(16px,2.4vw,20px);letter-spacing:.02em;margin:0 0 28px}
.signature{
    position:absolute;
    bottom:0;
    right:0;
    font-size:.8rem;
    letter-spacing:.28em;
    color:var(--muted);
    text-transform:uppercase;
    opacity:.9;
}
.hero-cta{display:flex;gap:12px;align-items:center}
.cta{border:1px solid var(--accent);background:transparent;color:var(--fg);padding:12px 18px;border-radius:999px;font-weight:600;letter-spacing:.08em;font-size:.85rem;text-transform:uppercase;transition:background .25s ease, color .25s ease, filter .15s ease}
.cta:hover{
    background:linear-gradient(90deg,var(--accent-grad-start),var(--accent-grad-end));
    color:var(--bg);
    filter:none;
}

h1 .studio{font-size:.18em;letter-spacing:.22em;margin-left:.4em;vertical-align:super;font-weight:400;color:var(--muted);text-transform:uppercase}

.corner, .corner-r{
    position:absolute;
    opacity:1;
    pointer-events:none;
    z-index:1; /* behind hero content */
}
.corner{
    top:var(--frame-top);
    left:var(--frame-x);
    width:30vw;
    height:40vh;
}
.corner-r{
    bottom:var(--frame-bottom);
    right:var(--frame-x);
    width:30vw;
    height:46vh;
}

.corner::before{
    content:"";
    position:absolute;
    left:0;
    top:calc(-1 * var(--frame-extend-y));
    width:var(--frame-line);
    height:calc(100% + var(--frame-extend-y));
    background:var(--line-strong);
    z-index:0;
}
.corner::after{
    content:"";
    position:absolute;
    left:calc(-1 * var(--frame-extend-x));
    top:0;
    width:calc(100% + var(--frame-extend-x));
    height:var(--frame-line);
    background:var(--line-strong);
    z-index:0;
}

.corner-r::before{
    content:"";
    position:absolute;
    right:0;
    top:calc(-1 * var(--frame-extend-y));
    width:var(--frame-line);
    height:calc(100% + (2 * var(--frame-extend-y)));
    background:var(--line-strong);
    z-index:0;
}
.corner-r::after{
    content:"";
    position:absolute;
    right:calc(-1 * var(--frame-extend-x));
    bottom:0;
    width:calc(100% + var(--frame-extend-x));
    height:var(--frame-line);
    background:var(--line-strong);
    z-index:0;
}

.corner-r.animate-down::before{height:0;animation:drawDown 1100ms ease-in-out forwards}
@keyframes drawDown{to{height:calc(100% + (2 * var(--frame-extend-y)))}}

.geo-shapes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.geo-shapes .shape{position:absolute;border:1px solid var(--line-strong);animation:float 8s ease-in-out infinite alternate}
.geo-shapes .shape.cir{border-radius:50%}
.geo-shapes .shape.tri{width:0;height:0;border-style:solid;border-width:0 38px 64px 38px;border-color:transparent transparent var(--line-strong) transparent;transform-origin:center}
@keyframes float{from{transform:translateY(0) rotate(0deg)}to{transform:translateY(-8px) rotate(2deg)}}

.geo-panel{position:absolute;right:0;top:10%;width:36vw;max-width:600px;height:60vh;opacity:.18;background:
    repeating-linear-gradient(to right, rgba(255,255,255,.14) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.14) 0 1px, transparent 1px 40px);
    -webkit-mask-image: radial-gradient(80% 70% at 90% 50%, #000 60%, transparent 100%);
            mask-image: radial-gradient(80% 70% at 90% 50%, #000 60%, transparent 100%);
    border-left:1px solid var(--line-strong);
}

.ring{position:absolute;border:1px solid var(--line-strong);border-radius:50%;opacity:.9}
.ring.ticks::after{content:"";position:absolute;inset:6px;border-radius:50%;opacity:.45;background:
    repeating-conic-gradient(from 0deg, var(--line-strong) 0 2deg, transparent 2deg 20deg);
}

.arc{position:absolute;border-radius:50%;opacity:.6;background:
    conic-gradient(from 220deg, var(--line-strong) 0 90deg, transparent 90deg 360deg);
}

.crosshair{position:absolute;width:64px;height:64px;opacity:.55}
.crosshair::before,.crosshair::after{content:"";position:absolute;background:var(--line-strong)}
.crosshair::before{left:50%;top:0;width:1px;height:100%}
.crosshair::after{top:50%;left:0;height:1px;width:100%}

.cube{position:absolute;width:86px;height:86px;border:1px solid var(--line-strong);transform:rotate(8deg);opacity:.85}
.cube::after{content:"";position:absolute;inset:0;border:1px solid var(--line-strong);transform:translate(12px,-12px)}
.cube::before{content:"";position:absolute;left:0;top:0;height:100%;width:1px;background:var(--line-strong)}

.draw{transform-origin:left center;transform:scaleX(0);animation:draw 1.1s ease-in-out forwards}
.draw.delay{animation-delay:.25s}
.draw-right{transform-origin:right center;transform:scaleX(0);animation:draw 1.1s ease-in-out forwards}
@keyframes draw{to{transform:scaleX(1)}}

.hero .container.hero-inner{position:relative;z-index:2}
.slide .hero-inner{
    padding-top: calc(var(--frame-top) + var(--frame-safe-x));
    padding-bottom: calc(var(--frame-bottom) + var(--frame-safe-y));
}
.hero-slider{
    padding-top:6vh;

    /* Shared responsive frame metrics (used by both corners and content) */
    --frame-x: clamp(18px, 6vw, 96px);
    --frame-top: clamp(72px, 12vh, 160px);
    --frame-bottom: clamp(56px, 10vh, 150px);
    --frame-extend-x: clamp(96px, 14vw, 240px);
    --frame-extend-y: clamp(48px, 12vh, 120px);
    --frame-line: 3px;

    /* Safe padding between content and frame lines */
    --frame-safe-x: clamp(14px, 2.2vw, 28px);
    --frame-safe-y: clamp(44px, 8vh, 84px);
}

#apps-list{padding-top:180px;border-top:1px solid var(--line);margin-top:96px}
#why{margin-bottom:140px}
section{border-bottom:none}
.section{padding:88px 0}
.section .eyebrow{font-size:.8rem;letter-spacing:.28em;color:var(--muted);text-transform:uppercase;margin-bottom:14px}
.section h2{font-size:clamp(28px,4.6vw,52px);margin:0 0 22px;line-height:1.06}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px}
.card{border:none;border-radius:16px;padding:28px 26px;min-height:180px;transition:filter .15s ease, transform .15s ease;position:relative}
.card h3{margin:0 0 8px;font-size:1rem;letter-spacing:.12em;text-transform:uppercase}
.card p{margin:0;color:var(--muted);line-height:1.6}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;background-repeat:no-repeat;background-image:
    linear-gradient(var(--line), var(--line)), /* TL H */
    linear-gradient(var(--line), var(--line)), /* TR H */
    linear-gradient(var(--line), var(--line)), /* BR H */
    linear-gradient(var(--line), var(--line)); /* BL H */
background-size:48px 1px, 48px 1px, 48px 1px, 48px 1px;
background-position:left calc(32px - 24px) top 32px,
                        right calc(32px - 24px) top 32px,
                        right calc(32px - 24px) bottom 32px,
                        left calc(32px - 24px) bottom 32px;
opacity:.95
}

.card::after{content:"";position:absolute;inset:0;pointer-events:none;background-repeat:no-repeat;background-image:
    linear-gradient(var(--line), var(--line)), /* TL V */
    linear-gradient(var(--line), var(--line)), /* TR V */
    linear-gradient(var(--line), var(--line)), /* BR V */
    linear-gradient(var(--line), var(--line)); /* BL V */
background-size:1px 36px, 1px 36px, 1px 36px, 1px 36px;
background-position:left 14px top 14px, right 14px top 14px, right 14px bottom 14px, left 14px bottom 14px;
opacity:.95
}
.card:hover{filter:brightness(110%);transform:translateY(-2px)}

/* ----- How it Works ----- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:28px;counter-reset:step}
.step{position:relative;border-top:1px solid var(--line-strong);padding-top:22px}
.step::before{counter-increment:step;content:counter(step, decimal-leading-zero);position:absolute;top:-14px;left:0;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:.9rem;color:var(--muted);padding:0 8px;background:var(--bg)}
.step h4{margin:0 0 8px;font-size:1.1rem;letter-spacing:.08em;text-transform:uppercase}
.step p{margin:0;color:var(--muted)}

/* ----- Preview video ----- */
.preview-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain; /* scale to fit without cropping */
    border-radius:14px;
    background:var(--bg); /* letterbox bars match background */
    box-shadow:0 0 6px rgba(0,0,0,.25);
}

/* ----- Subtle ticker band ----- */
.band{position:relative;overflow:hidden;background: var(--band-radial);}
.band .container{display:flex;align-items:center;gap:28px;height:72px}
.ticker{font-family:ui-monospace,Menlo,Consolas,monospace;color:#c7c7c7;white-space:nowrap;opacity:.75;animation:ticker 22s linear infinite}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ----- Footer ----- */
footer{padding:60px 0}
.footer-grid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.links{display:flex;gap:18px;align-items:center}
.link{color:var(--muted)}
.link:hover{color:var(--fg)}

/* ----- Scroll reveal ----- */
.reveal{opacity:0;transform:translateY(8px);transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1;transform:none}

/* ----- New additions ----- */
.legal{margin-top:28px;text-align:center;font-size:.85rem;color:var(--muted)}

/* ----- Responsive ----- */

.hero-grid.hero-grid-game{
    grid-template-columns:1.1fr 1.1fr;
    gap:8vw;
    align-items:stretch;
}
.hero-game-pane-full{
    width:100%;
    min-height:60vh;
}
.slide.game-slide .hero-inner{
    display:block;
}
.hero-game-pane{
    position:relative;
    min-height:320px;
    border-radius:0;
    border:none;
    overflow:hidden;
    background:
    radial-gradient(circle at 0 100%, rgba(214,193,158,.10), transparent 55%),
    radial-gradient(circle at 100% 0, rgba(255,255,255,.05), transparent 65%);
    box-shadow:none;
}
.hero-game-canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    background:transparent;
    z-index:1;
}
.hero-game-controls{
    position:absolute;
    right:16px;
    bottom:40px;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:8px 10px;
    border-radius:999px;
    border:1px solid var(--line);
    background:linear-gradient(180deg, var(--header-start), var(--header-end));
    backdrop-filter:saturate(140%) blur(8px);
    font-size:.75rem;
    color:var(--muted);
    white-space:nowrap;
}
.hero-game-controls .game-key{
    border-radius:6px;
    border:1px solid var(--line-strong);
    background:transparent;
    width:26px;
    height:26px;
    display:grid;
    place-items:center;
    font-size:.85rem;
    cursor:pointer;
    padding:0;
    transition:transform .12s ease, border-color .12s ease, background .12s ease;
}
.hero-game-controls .game-key:hover{
    transform:translateY(-1px);
    border-color:var(--accent);
}
.hero-game-controls .game-key:active{
    transform:translateY(1px) scale(.96);
    background:var(--tint);
}

.game-frame{
    position:absolute;
    pointer-events:none;
}
/* Use only the outer hero corners as the enclosing frame on the game slide */
.slide.game-slide .game-frame{display:none;}

.game-frame::before,
.game-frame::after{
    content:"";
    position:absolute;
    background:var(--line-strong);
}

/* Bottom‑left CROSS frame (longer legs) */
.game-frame-bl{
    left:0;
    bottom:0;
    width:65%;   /* extend farther into the pane */
    height:80%;  /* extend farther up */
}
.game-frame-bl::before{ /* vertical leg */
    left:-2px;      /* 2 px outside */
    bottom:-2px;    /* start 2 px outside to show overhang */
    width:2px;
    height:160%;    /* 60% past the top of its box */
}
.game-frame-bl::after{  /* horizontal leg */
    left:-2px;      /* 2 px outside */
    bottom:-2px;
    height:2px;
    width:160%;     /* 60% past the right of its box */
}

/* Top‑right CROSS frame (longer legs) */
.game-frame-tr{
    right:0;
    top:0;
    width:65%;
    height:80%;
}
.game-frame-tr::before{ /* vertical leg */
    right:-2px;
    top:-2px;
    width:2px;
    height:160%;
}
.game-frame-tr::after{  /* horizontal leg */
    right:-2px;
    top:-2px;
    height:2px;
    width:160%;
}

/* Slider dot "paused" icon for game slide */
.slider-dots .dot.paused{
    position:relative;
}
.slider-dots .dot.paused::before,
.slider-dots .dot.paused::after{
    content:"";
    position:absolute;
    top:4px;
    bottom:4px;
    width:2px;
    border-radius:1px;
    background:var(--bg);
}
.slider-dots .dot.paused::before{left:4px}
.slider-dots .dot.paused::after{right:4px}
.corner.flip{
    top:auto;
    bottom:10vh;
    left:auto;
    right:6vw;
}
.corner-r.flip{
    top:12vh;
    bottom:auto;
    right:auto;
    left:6vw;
}
.slide.game-slide .signature{
    right:0;
    left:auto;
}

/* Game slide uses the same outer hero corners as other slides */

@media (max-width: 960px){
    .hero-grid{grid-template-columns:1fr}
    .principles{grid-template-columns:1fr}
    .hero-slider{--frame-x:24px;}
    .corner{width:54vw;height:28vh}
    .corner-r{width:56vw;height:30vh}
    .steps{grid-template-columns:1fr}
    .slider-dots{bottom:18px}
}