/* ═══════════════════════════════════════════════════════════════════════
   HASNAIN STUDIO X — "OBSIDIAN HOLOGRAPHIC" DESIGN SYSTEM
   Porcelain ink on violet-black obsidian. Iridescent pearl-foil accents.
   Engineered grid, film grain, liquid-light. No neon clichés.
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;800&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Tokens ────────────────────────────────────────────────────────────── */
:root{
    color-scheme: dark;   /* native selects, scrollbars and pickers follow the site */
    /* surfaces */
    --bg:            #08070c;
    --bg-soft:       #0d0c14;
    --surface:       rgba(255,255,255,.035);
    --surface-2:     rgba(255,255,255,.06);
    --shadow-1:      0 24px 60px -24px rgba(0,0,0,.8);
    --card-bg:       rgba(255,255,255,.035);
    --card-border:   rgba(255,255,255,.09);
    --line:          rgba(255,255,255,.08);
    --blur:          blur(18px) saturate(1.4);

    /* ink */
    --ink:           #f4f2ee;
    --ink-soft:      #aaa7ba;
    --ink-faint:     #6d6a81;
    --text-main:     #f4f2ee;
    --text-muted:    #aaa7ba;

    /* iridescent pearl accents */
    --gold:          #f2dfb8;
    --rose:          #f3b3cf;
    --violet:        #c7a5f7;
    --mint:          #9fe8d6;
    --ice:           #bcd9f4;
    --accent:        #c7a5f7;
    --accent-soft:   rgba(199,165,247,.14);
    --accent-line:   rgba(199,165,247,.38);
    --cyan:          #9fe8d6;
    --btn-fg:        #0b0a10;

    --holo: linear-gradient(115deg,
        #f2dfb8 0%, #f3b3cf 20%, #c7a5f7 42%,
        #9fe8d6 64%, #bcd9f4 82%, #f2dfb8 100%);

    /* type */
    --f-display:     'Unbounded', 'Space Grotesk', sans-serif;
    --f-body:        'Space Grotesk', 'Segoe UI', sans-serif;
    --f-mono:        'JetBrains Mono', ui-monospace, monospace;

    /* motion + radii */
    --ease:          cubic-bezier(.22,1,.36,1);
    --t-fast:        .25s;
    --t-mid:         .55s;
    --r-md:          14px;
    --r-lg:          22px;
    --r-pill:        999px;
}

/* ── Reset / base ──────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
/* Background lives on html, NOT body: an opaque body background would
   paint over every fixed negative z-index layer (stars, moon, ribbons). */
html{
    background:
        radial-gradient(1100px 600px at 85% -10%, rgba(199,165,247,.10), transparent 60%),
        radial-gradient(900px 600px at -10% 25%, rgba(159,232,214,.06), transparent 55%),
        radial-gradient(1000px 700px at 50% 115%, rgba(243,179,207,.07), transparent 60%),
        var(--bg);
}
body{
    font-family:var(--f-body);
    font-weight:400;
    color:var(--text-main);
    background:transparent;
    min-height:100vh;
    line-height:1.65;
    letter-spacing:.01em;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}
/* height:auto matters as much as max-width here: without it, an <img> that
   carries width/height attributes gets its width constrained while the height
   attribute still applies, and the picture is stretched vertically. Any rule
   that genuinely wants a fixed height sets it with a higher specificity. */
img,svg{max-width:100%;}
img{height:auto;}
a{color:var(--ink);text-decoration:none;transition:color var(--t-fast) var(--ease);}
a:hover{color:var(--accent);}
::selection{background:rgba(199,165,247,.35);color:#fff;}
:focus-visible{outline:2px solid var(--accent-line);outline-offset:3px;border-radius:4px;}

/* scrollbar */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:#262433;border-radius:99px;border:2px solid var(--bg);}
::-webkit-scrollbar-thumb:hover{background:#3a3750;}

/* ── Atmosphere layers (fixed, behind content) ─────────────────────────── */
#fluid-canvas{
    position:fixed;inset:0;z-index:-3;pointer-events:none;
}
/* grid squares retired: pure night sky now */
.bg-grid{display:none;}
/* repurposed as cinematic film grain */
.scanlines{
    position:fixed;inset:-50%;z-index:-1;pointer-events:none;opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation:grain 9s steps(10) infinite;
}
@keyframes grain{
    0%,100%{transform:translate(0,0)} 10%{transform:translate(-3%,-6%)}
    20%{transform:translate(-8%,3%)} 30%{transform:translate(5%,-12%)}
    40%{transform:translate(-3%,14%)} 50%{transform:translate(-8%,5%)}
    60%{transform:translate(8%,0)} 70%{transform:translate(0,8%)}
    80%{transform:translate(2%,16%)} 90%{transform:translate(-6%,6%)}
}
/* iridescent light-fields */
.orb{
    position:fixed;z-index:-2;pointer-events:none;border-radius:50%;
    filter:blur(90px);opacity:.5;will-change:transform;
    transform:translate3d(var(--px,0), var(--py,0), 0);
}
.orb-1{
    width:54vw;height:54vw;top:-22vw;right:-14vw;
    background:conic-gradient(from 200deg, rgba(199,165,247,.20), rgba(243,179,207,.13), rgba(242,223,184,.07), transparent 70%);
    animation:drift1 26s ease-in-out infinite alternate;
}
.orb-2{
    width:44vw;height:44vw;bottom:-18vw;left:-12vw;
    background:conic-gradient(from 20deg, rgba(159,232,214,.14), rgba(188,217,244,.10), transparent 65%);
    animation:drift2 32s ease-in-out infinite alternate;
}
.orb-3{
    width:26vw;height:26vw;top:38%;left:58%;
    background:radial-gradient(circle, rgba(243,179,207,.10), transparent 70%);
    animation:drift3 22s ease-in-out infinite alternate;
}
@keyframes drift1{to{transform:translate3d(-6vw,7vh,0) rotate(40deg);}}
@keyframes drift2{to{transform:translate3d(7vw,-6vh,0) rotate(-30deg);}}
@keyframes drift3{to{transform:translate3d(-5vw,-8vh,0) scale(1.25);}}

/* ── Scroll progress / page transition ─────────────────────────────────── */
#scroll-progress{
    position:fixed;top:0;left:0;height:2px;width:0;z-index:1200;
    background:var(--holo);background-size:300% 100%;
    animation:holoShift 6s linear infinite;
    box-shadow:0 0 14px rgba(199,165,247,.55);
}
@keyframes holoShift{to{background-position:300% 0;}}
.page-transition{
    position:fixed;inset:0;z-index:1100;background:var(--bg);
    pointer-events:none;opacity:0;transition:opacity .18s ease;
}
.page-transition.active{opacity:1;pointer-events:all;}

/* ── Top bar ───────────────────────────────────────────────────────────── */
/* floating pill bar, Apple style */
.top-bar{
    position:sticky;top:12px;z-index:900;
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    width:min(1280px, calc(100% - 24px));
    margin:12px auto 0;
    padding:.5rem 1rem .5rem .6rem;
    border-radius:999px;
    background:rgba(14,13,21,.6);
    -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
    border:1px solid rgba(255,255,255,.1);
    box-shadow:0 22px 55px -24px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.08);
    transition:background var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.top-bar.scrolled{
    background:rgba(10,9,16,.88);
    box-shadow:0 26px 64px -22px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.1);
}
.brand{display:flex;align-items:center;gap:.8rem;}
.logo{
    width:44px;height:44px;display:grid;place-items:center;color:var(--ink);
    border-radius:14px;position:relative;isolation:isolate;
    background:linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
    border:1px solid var(--card-border);
    transition:transform var(--t-fast) var(--ease);
}
.brand:hover .logo{transform:rotate(-6deg) scale(1.05);}
.logo::before{
    content:'';position:absolute;inset:-1px;border-radius:15px;z-index:-1;
    background:var(--holo);opacity:0;transition:opacity var(--t-fast) ease;
    filter:blur(8px);
}
.brand:hover .logo::before{opacity:.55;}
.title .name{
    font-family:var(--f-display);font-weight:600;font-size:1rem;
    letter-spacing:.04em;line-height:1.15;
}
.title .sub{
    font-family:var(--f-mono);font-size:.62rem;letter-spacing:.42em;
    text-transform:uppercase;color:var(--ink-faint);
}
.top-bar nav{display:flex;gap:.2rem;overflow-x:auto;scrollbar-width:none;}
.top-bar nav::-webkit-scrollbar{display:none;}
.top-bar nav a{
    position:relative;white-space:nowrap;
    font-family:var(--f-mono);font-size:.74rem;font-weight:500;
    letter-spacing:.16em;text-transform:uppercase;
    color:var(--ink-soft);padding:.55rem .85rem;border-radius:10px;
    transition:color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.top-bar nav a:hover{color:var(--ink);background:rgba(255,255,255,.05);}
.top-bar nav a::after{
    content:'';position:absolute;left:.85rem;right:.85rem;bottom:.28rem;height:1px;
    background:var(--holo);background-size:300% 100%;
    transform:scaleX(0);transform-origin:left;
    transition:transform var(--t-mid) var(--ease);
}
.top-bar nav a:hover::after{transform:scaleX(1);}
.top-bar nav a.active{
    color:var(--ink);
}
.top-bar nav a.active::after{transform:scaleX(1);animation:holoShift 6s linear infinite;}

.icon-btn{
    background:var(--surface);border:1px solid var(--card-border);color:var(--ink);
    width:40px;height:40px;border-radius:12px;cursor:pointer;font-size:1rem;
    transition:all var(--t-fast) var(--ease);
}
.icon-btn:hover{border-color:var(--accent-line);transform:translateY(-2px);}

/* ── Layout ────────────────────────────────────────────────────────────── */
.container{
    max-width:1180px;margin:0 auto;
    padding:0 clamp(1.2rem,4vw,2.4rem) 5rem;
    position:relative;z-index:1;
}
.section{margin-top:clamp(4rem,9vh,7rem);position:relative;}
.section-header{text-align:center;max-width:680px;margin:0 auto 2.6rem;}
.section-header h2{
    font-family:var(--f-display);font-weight:600;
    font-size:clamp(1.5rem,3.4vw,2.3rem);line-height:1.2;
    margin:0 0 .7rem;letter-spacing:.01em;
}
.section-header h2::after{
    content:'';display:block;width:64px;height:2px;margin:1rem auto 0;
    background:var(--holo);background-size:300% 100%;border-radius:99px;
}
.section-header p{color:var(--text-muted);margin:0;font-size:1.02rem;}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero{padding-top:clamp(3rem,8vh,6rem);}
.hero--single{padding-top:clamp(2.4rem,6vh,4.5rem);}
.hero-card{
    position:relative;text-align:center;
    padding:clamp(2.6rem,6vw,4.6rem) clamp(1.4rem,5vw,4rem);
    border-radius:28px;overflow:hidden;isolation:isolate;
    background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015) 55%);
    border:1px solid var(--card-border);
    -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
    box-shadow:0 40px 90px -40px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.08);
}
/* prismatic top edge */
.hero-card::before{
    content:'';position:absolute;top:0;left:8%;right:8%;height:1px;
    background:var(--holo);background-size:300% 100%;
    animation:holoShift 6s linear infinite;opacity:.9;
}
/* corner light bloom */
.hero-card::after{
    content:'';position:absolute;width:480px;height:480px;top:-280px;left:50%;
    transform:translateX(-50%);border-radius:50%;z-index:-1;
    background:radial-gradient(circle, rgba(199,165,247,.16), rgba(159,232,214,.05) 50%, transparent 70%);
}
.hero-decoration{
    position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:
        radial-gradient(circle at 12% 85%, rgba(159,232,214,.07), transparent 35%),
        radial-gradient(circle at 88% 20%, rgba(243,179,207,.07), transparent 35%);
}
.live-badge{
    display:inline-flex;align-items:center;gap:.55rem;
    font-family:var(--f-mono);font-size:.68rem;font-weight:500;
    letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
    padding:.5rem 1.05rem;border-radius:var(--r-pill);
    background:rgba(255,255,255,.04);border:1px solid var(--card-border);
    margin-bottom:1.6rem;
}
.live-dot{
    width:7px;height:7px;border-radius:50%;background:var(--mint);
    box-shadow:0 0 0 0 rgba(159,232,214,.6);
    animation:pulse 2.2s var(--ease) infinite;
}
@keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(159,232,214,.55);}
    70%{box-shadow:0 0 0 9px rgba(159,232,214,0);}
    100%{box-shadow:0 0 0 0 rgba(159,232,214,0);}
}
.welcome{
    display:flex;justify-content:center;gap:clamp(.5rem,2vw,1.1rem);
    font-family:var(--f-mono);font-size:.72rem;letter-spacing:.5em;
    color:var(--ink-faint);text-transform:uppercase;margin-bottom:1.1rem;
}
.welcome span{
    display:inline-block;opacity:0;transform:translateY(12px);
    animation:riseIn .7s var(--ease) forwards;
}
.welcome span:nth-child(1){animation-delay:.05s}
.welcome span:nth-child(2){animation-delay:.12s}
.welcome span:nth-child(3){animation-delay:.19s}
.welcome span:nth-child(4){animation-delay:.26s}
.welcome span:nth-child(5){animation-delay:.33s}
.welcome span:nth-child(6){animation-delay:.40s}
.welcome span:nth-child(7){animation-delay:.47s}
.welcome span:nth-child(8){animation-delay:.54s}
.welcome span:nth-child(9){animation-delay:.61s}
@keyframes riseIn{to{opacity:1;transform:translateY(0);}}

.hero-card h1, .hero h1{
    font-family:var(--f-display);font-weight:800;
    font-size:clamp(2.1rem,5.6vw,4.2rem);line-height:1.12;
    letter-spacing:.005em;margin:.2rem 0 1.1rem;
    background:linear-gradient(180deg, #fdfcfa 30%, #c9c5da 85%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.lead{
    color:var(--text-muted);font-size:clamp(1rem,2vw,1.16rem);
    font-weight:300;max-width:640px;margin:0 auto 1.8rem;line-height:1.75;
}
.hero-actions{
    display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:1.6rem;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn{
    position:relative;display:inline-flex;align-items:center;justify-content:center;
    gap:.5rem;cursor:pointer;border:none;
    font-family:var(--f-mono);font-size:.78rem;font-weight:600;
    letter-spacing:.12em;text-transform:uppercase;
    padding:.95rem 1.9rem;border-radius:var(--r-pill);
    transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
    will-change:transform;
}
.btn--primary{
    color:var(--btn-fg);
    background:var(--holo);background-size:260% 100%;background-position:0% 0;
    box-shadow:0 8px 30px -10px rgba(199,165,247,.55), inset 0 1px 0 rgba(255,255,255,.65);
}
.btn--primary:hover{
    color:var(--btn-fg);
    background-position:100% 0;transform:translateY(-3px);
    box-shadow:0 16px 44px -12px rgba(199,165,247,.75), inset 0 1px 0 rgba(255,255,255,.65);
}
.btn--secondary{
    color:var(--ink);background:rgba(255,255,255,.04);
    border:1px solid var(--card-border);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.btn--secondary:hover{
    transform:translateY(-3px);border-color:var(--accent-line);
    box-shadow:0 12px 36px -14px rgba(199,165,247,.4);color:var(--ink);
}
.btn.full{width:100%;}
.btn:active{transform:translateY(-1px) scale(.99);}

/* ── Stats strip ───────────────────────────────────────────────────────── */
.stats-section{
    display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
    margin-top:clamp(2.6rem,6vh,4rem);
    background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);
    overflow:hidden;
}
.stat-item{
    background:var(--bg-soft);padding:1.8rem 1.2rem;text-align:center;
    transition:background var(--t-mid) var(--ease);
}
.stat-item:hover{background:#13111d;}
.stat-number{
    font-family:var(--f-display);font-weight:600;
    font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.2;
    background:linear-gradient(180deg,#fdfcfa 30%,#b9b4cf 90%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.stat-label{
    font-family:var(--f-mono);font-size:.66rem;letter-spacing:.22em;
    text-transform:uppercase;color:var(--ink-faint);margin-top:.5rem;
}

/* ── Grids & cards ─────────────────────────────────────────────────────── */
.grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:1.3rem;
}
.philosophy-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:1.3rem;
}
.card, .contact-info-card{
    position:relative;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
    padding:1.9rem 1.7rem;
    background:var(--card-bg);border:1px solid var(--card-border);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    transition:transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
    --mx:50%;--my:50%;
}
/* pointer-tracked iridescent spotlight (set via effects.js) */
.card::before, .contact-info-card::before{
    content:'';position:absolute;inset:0;z-index:-1;opacity:0;
    background:radial-gradient(420px circle at var(--mx) var(--my),
        rgba(199,165,247,.13), rgba(159,232,214,.06) 45%, transparent 65%);
    transition:opacity var(--t-mid) ease;
}
.card:hover::before, .contact-info-card:hover::before{opacity:1;}
.card:hover, .contact-info-card:hover{
    transform:translateY(-6px);
    border-color:rgba(199,165,247,.35);
    box-shadow:0 28px 60px -28px rgba(0,0,0,.85), 0 0 0 1px rgba(199,165,247,.12);
}
.card h3, .contact-info-card h3{
    font-family:var(--f-display);font-weight:500;font-size:1.08rem;
    margin:1rem 0 .55rem;letter-spacing:.01em;
}
.card p, .contact-info-card p{color:var(--text-muted);font-size:.95rem;margin:.4rem 0;}
.card-accent{
    position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,var(--accent-line),transparent);
    opacity:.8;
}
.card-icon{
    width:52px;height:52px;display:grid;place-items:center;
    border-radius:16px;color:var(--ink);position:relative;
    background:linear-gradient(150deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
    border:1px solid var(--card-border);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
    transition:transform var(--t-mid) var(--ease);
}
.card:hover .card-icon{transform:rotate(-8deg) scale(1.08);}
.card:hover .card-icon{border-color:var(--accent-line);}

/* badges (app tiles + modals) */
.badge-available, .badge-pending{
    display:inline-block;font-family:var(--f-mono);font-size:.62rem;
    font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    padding:.32rem .75rem;border-radius:var(--r-pill);
}
.badge-available{
    color:var(--mint);background:rgba(159,232,214,.09);
    border:1px solid rgba(159,232,214,.3);
}
.badge-pending{
    color:var(--gold);background:rgba(242,223,184,.08);
    border:1px solid rgba(242,223,184,.28);
}

/* fallback app tile styling (pages may refine inline) */
.apps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.1rem;}
.app-tile{
    position:relative;border-radius:var(--r-lg);padding:1.5rem 1.3rem;
    background:var(--card-bg);border:1px solid var(--card-border);
    transition:transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.app-tile:hover{
    transform:translateY(-5px);border-color:rgba(199,165,247,.35);
    box-shadow:0 24px 50px -26px rgba(0,0,0,.85);
}
.filter-bar{
    display:flex;justify-content:center;gap:.45rem;flex-wrap:wrap;
    margin:0 0 1.6rem;
}
.filter-btn{
    font-family:var(--f-mono);font-size:.7rem;font-weight:500;
    letter-spacing:.13em;text-transform:uppercase;cursor:pointer;
    color:var(--ink-soft);background:rgba(255,255,255,.035);
    border:1px solid var(--card-border);border-radius:var(--r-pill);
    padding:.55rem 1.15rem;
    transition:all var(--t-fast) var(--ease);
}
.filter-btn:hover{color:var(--ink);border-color:var(--accent-line);transform:translateY(-2px);}
.filter-btn.active{
    color:var(--btn-fg);background:var(--holo);background-size:260% 100%;
    border-color:transparent;
    box-shadow:0 6px 22px -8px rgba(199,165,247,.5);
}

/* ── About strip / social ──────────────────────────────────────────────── */
.about-strip{
    position:relative;text-align:center;border-radius:28px;overflow:hidden;
    padding:clamp(2.4rem,5vw,3.6rem) clamp(1.4rem,5vw,3.4rem);
    background:linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
    border:1px solid var(--card-border);
    -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
}
.about-strip::before{
    content:'';position:absolute;top:0;left:10%;right:10%;height:1px;
    background:var(--holo);background-size:300% 100%;
    animation:holoShift 6s linear infinite;opacity:.8;
}
.about-strip h2{font-family:var(--f-display);font-weight:600;letter-spacing:.01em;}
.social-row{display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap;}
.social-btn{
    display:inline-flex;align-items:center;gap:.55rem;
    font-family:var(--f-mono);font-size:.74rem;letter-spacing:.08em;
    color:var(--ink-soft);padding:.65rem 1.2rem;border-radius:var(--r-pill);
    background:rgba(255,255,255,.04);border:1px solid var(--card-border);
    transition:all var(--t-fast) var(--ease);
}
.social-btn:hover{
    color:var(--ink);border-color:var(--accent-line);transform:translateY(-3px);
    box-shadow:0 10px 30px -12px rgba(199,165,247,.45);
}

/* generic actions row */
.actions{display:flex;gap:.8rem;flex-wrap:wrap;}

/* ── Contact ───────────────────────────────────────────────────────────── */
.contact-grid{
    display:grid;grid-template-columns:1.25fr .75fr;gap:2.4rem;align-items:start;
}
.contact-grid .section-header{text-align:left;margin:0 0 1.6rem;}
.contact-grid .section-header h2::after{margin-left:0;}
.contact-form{
    display:flex;flex-direction:column;gap:1.1rem;
    padding:1.9rem;border-radius:var(--r-lg);
    background:var(--card-bg);border:1px solid var(--card-border);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;}
.contact-form label{
    display:flex;flex-direction:column;gap:.45rem;
    font-family:var(--f-mono);font-size:.66rem;font-weight:500;
    letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);
}
.contact-form input,
.contact-form select,
.contact-form textarea{
    font-family:var(--f-body);font-size:.96rem;color:var(--ink);
    background:rgba(255,255,255,.04);
    border:1px solid var(--card-border);border-radius:var(--r-md);
    padding:.85rem 1rem;outline:none;resize:vertical;
    transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{color:var(--ink-faint);}
.contact-form select{cursor:pointer;}
.contact-form select{color-scheme:dark;}
.contact-form select option{background:var(--bg-soft);color:var(--ink);}
.contact-form select optgroup{
    background:#100d16;color:var(--accent);
    font-family:var(--f-mono);font-size:.78em;letter-spacing:.12em;
    text-transform:uppercase;font-style:normal;font-weight:600;
}
.contact-form select optgroup option{
    background:var(--bg-soft);color:var(--ink);
    font-family:var(--f-body);font-size:1rem;
    letter-spacing:normal;text-transform:none;font-weight:400;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
    border-color:var(--accent-line);background:rgba(255,255,255,.06);
    box-shadow:0 0 0 4px rgba(199,165,247,.12);
}
.form-status{
    font-family:var(--f-mono);font-size:.74rem;letter-spacing:.06em;
    color:var(--mint);margin:0;min-height:1.2em;
}
.contact-info-cards{display:flex;flex-direction:column;gap:1.1rem;}
.contact-info-card a{color:var(--cyan);word-break:break-all;}
.contact-info-card a:hover{color:var(--ink);}

/* ── Modal fallback (Windows/Android pages refine inline) ──────────────── */
.modal-overlay{
    position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
    background:rgba(5,4,9,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    opacity:0;pointer-events:none;transition:opacity var(--t-fast) ease;padding:1.2rem;
}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal-card{
    position:relative;width:min(560px,100%);max-height:86vh;overflow-y:auto;
    background:#100e18;border:1px solid var(--card-border);border-radius:var(--r-lg);
    padding:2rem 1.8rem;
    box-shadow:0 50px 120px -30px rgba(0,0,0,.9);
    transform:translateY(16px) scale(.98);transition:transform var(--t-fast) var(--ease);
}
.modal-overlay.open .modal-card{transform:none;}

/* ── Portfolio / lightbox (AI Studio gallery) ──────────────────────────── */
.port-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;}
.port-item{
    position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:1/1;cursor:pointer;
    background:var(--card-bg);border:1px solid var(--card-border);
    transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.port-item:hover{transform:scale(1.03);border-color:var(--accent-line);box-shadow:0 18px 48px -18px rgba(0,0,0,.8);}
.port-item img{width:100%;height:100%;object-fit:cover;display:block;}
.port-empty{
    grid-column:1/-1;text-align:center;padding:3.2rem 1rem;
    color:var(--ink-faint);font-family:var(--f-mono);font-size:.85rem;letter-spacing:.12em;
    border:1px dashed var(--line);border-radius:var(--r-lg);
}
#lightbox, .port-lightbox{
    display:none;position:fixed;inset:0;z-index:1300;
    background:rgba(4,3,8,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    align-items:center;justify-content:center;
}
#lightbox.open, .port-lightbox.open{display:flex;}
#lightbox img, .port-lightbox img{
    max-width:92vw;max-height:84vh;border-radius:var(--r-md);object-fit:contain;
    box-shadow:0 30px 100px rgba(0,0,0,.8);
}
.lb-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:94vw;}
.lb-close, .port-lightbox-close{
    position:absolute;top:-2.6rem;right:0;z-index:2;
    background:none;border:none;color:var(--ink);font-size:1.6rem;line-height:1;
    cursor:pointer;opacity:.75;transition:opacity var(--t-fast) ease;
}
.port-lightbox-close{position:fixed;top:20px;right:26px;font-size:2rem;}
.lb-close:hover, .port-lightbox-close:hover{opacity:1;}
.lb-nav{
    position:absolute;top:50%;transform:translateY(-50%);z-index:2;
    width:46px;height:46px;border-radius:50%;cursor:pointer;
    background:rgba(255,255,255,.06);border:1px solid var(--card-border);
    color:var(--ink);font-size:1.5rem;line-height:1;
    transition:all var(--t-fast) var(--ease);
}
.lb-nav:hover{border-color:var(--accent-line);background:rgba(255,255,255,.12);}
.lb-prev{left:-60px;}
.lb-next{right:-60px;}
.lb-info{text-align:center;}
.lb-tag{
    font-family:var(--f-mono);font-size:.64rem;letter-spacing:.24em;
    text-transform:uppercase;
    background:var(--holo);background-size:300% 100%;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.lb-title{font-family:var(--f-display);font-weight:500;font-size:1.05rem;margin-top:.3rem;}
.lb-desc{color:var(--text-muted);font-size:.88rem;max-width:560px;}
@media (max-width:760px){
    .lb-prev{left:6px;} .lb-next{right:6px;}
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-footer{
    position:relative;margin-top:clamp(4rem,10vh,7rem);
    border-top:1px solid var(--line);
    background:linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.site-footer::before{
    content:'';position:absolute;top:-1px;left:15%;right:15%;height:1px;
    background:linear-gradient(90deg, transparent, var(--accent-line), rgba(159,232,214,.35), transparent);
}
.footer-wrap{max-width:1180px;margin:0 auto;padding:3.4rem clamp(1.2rem,4vw,2.4rem) 2rem;}
.footer-grid{
    display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2.6rem;
}
.footer-title{
    font-family:var(--f-display);font-weight:600;font-size:1.02rem;margin-bottom:.7rem;
}
.footer-sub{color:var(--ink-faint);font-size:.88rem;line-height:1.7;margin:0;}
.footer-heading{
    font-family:var(--f-mono);font-size:.64rem;font-weight:600;
    letter-spacing:.26em;text-transform:uppercase;color:var(--ink-faint);
    margin:0 0 1rem;
}
.footer-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem;}
.footer-links li{color:var(--ink-soft);font-size:.9rem;}
.footer-links a{color:var(--ink-soft);position:relative;}
.footer-links a:hover{color:var(--ink);padding-left:.4rem;}
.footer-links a::before{
    content:'›';position:absolute;left:-.1rem;opacity:0;transition:opacity var(--t-fast) ease;
    color:var(--accent);
}
.footer-links a:hover::before{opacity:1;left:-.4rem;}
.footer-bottom{
    display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
    padding-top:1.6rem;border-top:1px solid var(--line);
    color:var(--ink-faint);font-size:.8rem;font-family:var(--f-mono);letter-spacing:.04em;
}

/* ── Reveal-on-scroll ──────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(26px);
    transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.visible{opacity:1;transform:none;}
.stagger>*{
    opacity:0;transform:translateY(22px);
    transition:opacity .8s var(--ease), transform .8s var(--ease);
    transition-delay:calc(var(--i,0) * 90ms);
}
.stagger.visible>*{opacity:1;transform:none;}

/* ── Cursor aura (injected by effects.js) ──────────────────────────────── */
#cursor-aura{
    position:fixed;top:0;left:0;width:380px;height:380px;border-radius:50%;
    pointer-events:none;z-index:0;mix-blend-mode:screen;
    background:radial-gradient(circle,
        rgba(199,165,247,.10), rgba(159,232,214,.05) 40%, transparent 70%);
    transform:translate(-50%,-50%);will-change:transform;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width:980px){
    .footer-grid{grid-template-columns:1fr 1fr;}
    .contact-grid{grid-template-columns:1fr;}
}
@media (max-width:760px){
    .top-bar{flex-direction:column;align-items:stretch;gap:.5rem;padding:.7rem 1rem;border-radius:28px;top:8px;width:calc(100% - 16px);margin-top:8px;}
    .brand{justify-content:center;}
    .top-bar nav{justify-content:flex-start;}
    .stats-section{grid-template-columns:1fr 1fr;}
    .form-row{grid-template-columns:1fr;}
    .footer-bottom{justify-content:center;text-align:center;}
}
@media (max-width:460px){
    .footer-grid{grid-template-columns:1fr;}
    .hero-actions .btn{width:100%;}
}

/* ═══════════════════════════════════════════════════════════════════════
   V2 — IMMERSIVE LAYER
   Split heroes · bento · marquee · live app previews · device frames ·
   float & depth system · proof chips
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Float & depth ─────────────────────────────────────────────────────── */
[data-float]{animation:floaty 7s ease-in-out infinite;will-change:transform;}
@keyframes floaty{
    0%,100%{transform:translateY(0) rotate(var(--rot,0deg));}
    50%{transform:translateY(-13px) rotate(var(--rot,0deg));}
}
.depth-stage{perspective:1200px;transform-style:preserve-3d;}
.depth-stage>*{transform-style:preserve-3d;}

/* ── Split (asymmetric) hero ───────────────────────────────────────────── */
.hero-split{
    display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,3.4rem);
    align-items:center;padding:clamp(2.4rem,7vh,5rem) 0 1rem;
}
.hero-copy{text-align:left;}
.hero-eyebrow{
    display:inline-flex;align-items:center;gap:.55rem;
    font-family:var(--f-mono);font-size:.66rem;letter-spacing:.26em;
    text-transform:uppercase;color:var(--ink-faint);margin-bottom:1.3rem;
}
.hero-eyebrow::before{
    content:'';width:26px;height:1px;background:var(--holo);background-size:300% 100%;
}
.hero-copy h1{
    font-family:var(--f-display);font-weight:800;
    font-size:clamp(2.1rem,4.8vw,3.8rem);line-height:1.08;letter-spacing:.002em;
    margin:0 0 1.2rem;
    background:linear-gradient(180deg,#fdfcfa 30%,#c9c5da 85%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero-copy h1 .holo-word{
    background:var(--holo);background-size:300% 100%;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    animation:holoShift 7s linear infinite;
}
.hero-copy .lead{margin:0 0 1.6rem;max-width:520px;}
.hero-copy .hero-actions{justify-content:flex-start;margin-top:0;}
.proof-chips{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:1.7rem;}
.proof-chip{
    display:inline-flex;align-items:center;gap:.45rem;
    font-family:var(--f-mono);font-size:.64rem;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-soft);
    padding:.45rem .85rem;border-radius:var(--r-pill);
    background:rgba(255,255,255,.035);border:1px solid var(--line);
}
.proof-chip svg{flex-shrink:0;opacity:.85;}
.proof-chip b{color:var(--mint);font-weight:600;}

/* hero visual stage */
.hero-stage{position:relative;min-height:420px;}
.float-card{
    position:absolute;width:215px;padding:1rem 1rem .85rem;
    border-radius:18px;background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
    border:1px solid var(--card-border);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    box-shadow:0 34px 70px -28px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.09);
}
.float-card .fc-name{
    font-family:var(--f-display);font-weight:500;font-size:.78rem;margin-top:.6rem;
}
.float-card .fc-sub{
    font-family:var(--f-mono);font-size:.58rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--ink-faint);margin-top:.15rem;
}
.fc-1{top:2%;left:4%;--rot:-2.5deg;z-index:3;}
.fc-2{top:30%;right:0;--rot:2deg;z-index:2;animation-delay:-2.4s;}
.fc-3{bottom:0;left:14%;--rot:-1deg;z-index:1;animation-delay:-4.6s;}
.hero-stage::before{
    content:'';position:absolute;inset:8% 4%;border-radius:50%;z-index:0;
    background:radial-gradient(ellipse, rgba(199,165,247,.12), rgba(159,232,214,.05) 50%, transparent 72%);
    filter:blur(8px);
}

/* ── Marquee ticker ────────────────────────────────────────────────────── */
.marquee{
    position:relative;overflow:hidden;margin-top:clamp(2.6rem,6vh,4rem);
    padding:.95rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee-track{
    display:inline-flex;gap:2.6rem;white-space:nowrap;will-change:transform;
    animation:marquee 36s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-track span{
    font-family:var(--f-mono);font-size:.72rem;letter-spacing:.3em;
    text-transform:uppercase;color:var(--ink-faint);
    display:inline-flex;align-items:center;gap:2.6rem;
}
.marquee-track span::after{content:'◆';font-size:.5rem;color:var(--accent);opacity:.6;}
@keyframes marquee{to{transform:translateX(-50%);}}

/* ── Bento grid ────────────────────────────────────────────────────────── */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:1.1rem;grid-auto-rows:minmax(150px,auto);}
.bento-cell{
    position:relative;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
    padding:1.7rem 1.6rem;display:flex;flex-direction:column;gap:.5rem;
    background:var(--card-bg);border:1px solid var(--card-border);
    transition:transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
    --mx:50%;--my:50%;
}
.bento-cell::before{
    content:'';position:absolute;inset:0;z-index:-1;opacity:0;
    background:radial-gradient(460px circle at var(--mx) var(--my),
        rgba(199,165,247,.12), rgba(159,232,214,.05) 45%, transparent 65%);
    transition:opacity var(--t-mid) ease;
}
.bento-cell:hover::before{opacity:1;}
.bento-cell:hover{
    transform:translateY(-5px);border-color:rgba(199,165,247,.32);
    box-shadow:0 26px 56px -26px rgba(0,0,0,.85);
}
.bento-cell h3{
    font-family:var(--f-display);font-weight:500;font-size:1.06rem;margin:.2rem 0 0;
}
.bento-cell p{color:var(--text-muted);font-size:.92rem;margin:0;line-height:1.6;}
.bento-cell .bento-kicker{
    font-family:var(--f-mono);font-size:.6rem;letter-spacing:.24em;
    text-transform:uppercase;color:var(--ink-faint);
}
.bento-cell .bento-cta{margin-top:auto;padding-top:1rem;}
.bento-art{
    display:flex;align-items:center;justify-content:center;
    min-height:96px;margin:.4rem 0;
}
.b-span4{grid-column:span 4;}
.b-span3{grid-column:span 3;}
.b-span2{grid-column:span 2;}
.b-row2{grid-row:span 2;}
@media (max-width:980px){
    .bento{grid-template-columns:repeat(2,1fr);}
    .b-span4,.b-span3,.b-span2{grid-column:span 2;}
    .b-row2{grid-row:span 1;}
}

/* ── Page-signature heroes ─────────────────────────────────────────────── */
/* Windows: command console */
.console{
    width:min(460px,100%);border-radius:16px;overflow:hidden;
    background:#0c0b13;border:1px solid var(--card-border);
    box-shadow:0 40px 80px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.07);
    font-family:var(--f-mono);font-size:.74rem;
}
.console-bar{
    display:flex;align-items:center;gap:.45rem;padding:.65rem .9rem;
    background:rgba(255,255,255,.04);border-bottom:1px solid var(--line);
}
.console-bar i{width:9px;height:9px;border-radius:50%;display:block;}
.console-bar i:nth-child(1){background:#f3b3cf;}
.console-bar i:nth-child(2){background:#f2dfb8;}
.console-bar i:nth-child(3){background:#9fe8d6;}
.console-bar em{
    font-style:normal;margin-left:.5rem;color:var(--ink-faint);
    font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
}
.console-body{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.6rem;}
.c-line{color:var(--ink-soft);opacity:0;animation:riseIn .5s var(--ease) forwards;}
.c-line b{color:var(--mint);font-weight:500;}
.c-line .c-dim{color:var(--ink-faint);}
.c-line:nth-child(1){animation-delay:.3s}
.c-line:nth-child(2){animation-delay:.9s}
.c-line:nth-child(3){animation-delay:1.5s}
.c-line:nth-child(4){animation-delay:2.1s}
.c-line:nth-child(5){animation-delay:2.7s}
.c-progress{
    height:5px;border-radius:99px;background:rgba(255,255,255,.07);
    overflow:hidden;position:relative;
}
.c-progress::after{
    content:'';position:absolute;inset:0;border-radius:99px;transform-origin:left;
    background:linear-gradient(90deg,var(--mint),var(--ice));
    animation:vgfill 3.4s var(--ease) infinite;
}
.c-cursor{
    display:inline-block;width:7px;height:13px;background:var(--mint);
    vertical-align:-2px;animation:blink 1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0;}}

/* Contact: beacon */
.beacon{position:relative;width:230px;height:230px;margin:0 auto;}
.beacon i{
    position:absolute;inset:0;border-radius:50%;
    border:1px solid var(--accent-line);opacity:0;
    animation:beacon 3.2s var(--ease) infinite;
}
.beacon i:nth-child(2){animation-delay:1.05s;}
.beacon i:nth-child(3){animation-delay:2.1s;}
.beacon .beacon-core{
    position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
    border-radius:50%;background:var(--holo);background-size:260% 100%;
    box-shadow:0 0 26px rgba(199,165,247,.8);
}
@keyframes beacon{0%{transform:scale(.1);opacity:.9;}100%{transform:scale(1);opacity:0;}}

/* ── Device frames ─────────────────────────────────────────────────────── */
.dev-phone{
    position:relative;width:172px;height:330px;flex-shrink:0;
    border-radius:28px;padding:14px 11px;
    background:linear-gradient(170deg,#17151f,#0c0b12);
    border:1px solid rgba(255,255,255,.15);
    box-shadow:0 36px 80px -24px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.12);
}
.dev-phone::before{
    content:'';position:absolute;top:9px;left:50%;transform:translateX(-50%);
    width:44px;height:5px;border-radius:99px;background:rgba(255,255,255,.13);
}
.dev-screen{
    width:100%;height:100%;border-radius:18px;overflow:hidden;
    background:#0a0910;border:1px solid rgba(255,255,255,.06);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
    padding:1rem .7rem;
}
.dev-screen .ds-label{
    font-family:var(--f-mono);font-size:.56rem;letter-spacing:.26em;
    text-transform:uppercase;color:var(--ink-faint);text-align:center;
}
.dev-screen .viz{border:none;background:transparent;margin:0;}

/* ── Live app previews ("apps look alive") ─────────────────────────────── */
.viz{
    position:relative;min-height:96px;border-radius:12px;overflow:hidden;
    display:flex;align-items:center;justify-content:center;gap:12px;
    background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
    border:1px solid var(--line);margin-bottom:.55rem;
}
.viz i,.viz b,.viz em{font-style:normal;display:block;}
.viz::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(140px 70px at 75% -10%, rgba(199,165,247,.09), transparent 70%);
}

/* gauge — TuneX optimisers */
.vg-ring{
    position:relative;width:52px;height:52px;border-radius:50%;
    border:3px solid rgba(255,255,255,.09);border-top-color:var(--mint);
    animation:vgspin 2.4s linear infinite;
}
.vg-core{position:absolute;inset:9px;border-radius:50%;background:rgba(159,232,214,.13);}
.vg-bars{display:flex;flex-direction:column;gap:7px;}
.vg-bars i{
    width:58px;height:5px;border-radius:99px;background:rgba(255,255,255,.07);
    position:relative;overflow:hidden;
}
.vg-bars i::after{
    content:'';position:absolute;inset:0;border-radius:99px;transform-origin:left;
    background:linear-gradient(90deg,var(--mint),var(--ice));
    animation:vgfill 3s var(--ease) infinite;
}
.vg-bars i:nth-child(2)::after{animation-delay:.45s;background:linear-gradient(90deg,var(--violet),var(--rose));}
.vg-bars i:nth-child(3)::after{animation-delay:.9s;background:linear-gradient(90deg,var(--gold),var(--rose));}
@keyframes vgspin{to{transform:rotate(360deg);}}
@keyframes vgfill{0%{transform:scaleX(.12);}55%{transform:scaleX(.92);}100%{transform:scaleX(.12);}}

/* qr — Drop2QR */
.vq{display:grid;grid-template-columns:repeat(5,11px);gap:3px;}
.vq i{width:11px;height:11px;border-radius:2.5px;background:rgba(255,255,255,.12);animation:vqblink 2.6s infinite;}
.vq i:nth-child(3n){background:rgba(199,165,247,.4);animation-delay:.35s;}
.vq i:nth-child(4n){background:rgba(159,232,214,.34);animation-delay:.75s;}
.vq i:nth-child(7n){animation-delay:1.15s;}
@keyframes vqblink{0%,100%{opacity:.3;}50%{opacity:1;}}

/* dock — NimbusDock */
.vd{
    display:flex;gap:9px;align-items:flex-end;padding:9px 15px;
    border-radius:15px;background:rgba(255,255,255,.06);border:1px solid var(--line);
}
.vd i{width:17px;height:17px;border-radius:5px;animation:vdbounce 2s var(--ease) infinite;}
.vd i:nth-child(1){background:linear-gradient(145deg,var(--rose),#a06a85);}
.vd i:nth-child(2){background:linear-gradient(145deg,var(--gold),#a3915f);animation-delay:.18s;}
.vd i:nth-child(3){background:linear-gradient(145deg,var(--violet),#7a5fa8);animation-delay:.36s;}
.vd i:nth-child(4){background:linear-gradient(145deg,var(--mint),#5d9c8a);animation-delay:.54s;}
.vd i:nth-child(5){background:linear-gradient(145deg,var(--ice),#6e88a3);animation-delay:.72s;}
@keyframes vdbounce{0%,100%{transform:none;}30%{transform:translateY(-8px) scale(1.1);}}

/* transfer — QuantumDrop */
.viz-transfer{gap:8px;}
.vt-node{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.08);border:1px solid var(--card-border);}
.vt-line{position:relative;width:72px;height:2px;background:rgba(255,255,255,.09);overflow:visible;}
.vt-line i{position:absolute;top:-2px;left:0;width:6px;height:6px;border-radius:50%;background:var(--mint);animation:vtgo 1.7s linear infinite;}
.vt-line i:nth-child(2){animation-delay:.55s;background:var(--violet);}
.vt-line i:nth-child(3){animation-delay:1.1s;background:var(--rose);}
@keyframes vtgo{0%{left:0;opacity:0;}15%{opacity:1;}85%{opacity:1;}100%{left:calc(100% - 6px);opacity:0;}}

/* seasons — XSeasons */
.vs{
    position:relative;width:78%;height:62px;border-radius:10px;overflow:hidden;
    background:linear-gradient(180deg,#2b3654,#101627);
    animation:vshue 9s linear infinite;
}
.vs .sun{
    position:absolute;top:12px;left:14%;width:17px;height:17px;border-radius:50%;
    background:var(--gold);box-shadow:0 0 16px rgba(242,223,184,.75);
    animation:vsarc 9s ease-in-out infinite;
}
.vs .hill{position:absolute;bottom:-14px;left:18%;width:64%;height:32px;border-radius:50%;background:#131a2d;}
@keyframes vshue{0%,100%{filter:hue-rotate(0deg);}50%{filter:hue-rotate(150deg);}}
@keyframes vsarc{0%,100%{transform:translate(0,7px);}50%{transform:translate(52px,-5px);}}

/* eq — SpatiaX / VAudio */
.ve{display:flex;gap:5px;align-items:center;height:58px;}
.ve i{width:6px;height:30%;border-radius:99px;background:linear-gradient(180deg,var(--violet),var(--mint));animation:veq 1s ease-in-out infinite alternate;}
.ve i:nth-child(1){animation-delay:0s;}
.ve i:nth-child(2){animation-delay:.12s;}
.ve i:nth-child(3){animation-delay:.24s;}
.ve i:nth-child(4){animation-delay:.06s;}
.ve i:nth-child(5){animation-delay:.3s;}
.ve i:nth-child(6){animation-delay:.18s;}
.ve i:nth-child(7){animation-delay:.42s;}
@keyframes veq{from{height:14%;}to{height:96%;}}

/* convert — FlipX */
.vc-chip{
    font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;
    padding:.5rem .65rem;border-radius:8px;color:var(--ink-soft);
    background:rgba(255,255,255,.06);border:1px solid var(--line);
}
.viz-convert .vc-chip:last-child{color:var(--mint);border-color:rgba(159,232,214,.32);}
.vc-arrows{
    width:28px;height:28px;border-radius:50%;border:1px dashed var(--accent-line);
    display:grid;place-items:center;color:var(--accent);font-size:.85rem;
    animation:vgspin 3.5s linear infinite;
}

/* kanban — WorkX / StudioFlow */
.vk{display:flex;gap:9px;}
.vk b{
    display:flex;flex-direction:column;gap:5px;width:36px;padding:6px;
    border-radius:8px;background:rgba(255,255,255,.05);border:1px solid var(--line);
}
.vk b i{height:8px;border-radius:3px;background:rgba(255,255,255,.13);}
.vk b:nth-child(1) i:first-child{background:rgba(243,179,207,.55);animation:vkpulse 2.6s infinite;}
.vk b:nth-child(2) i:first-child{background:rgba(199,165,247,.55);animation:vkpulse 2.6s .85s infinite;}
.vk b:nth-child(3) i:first-child{background:rgba(159,232,214,.55);animation:vkpulse 2.6s 1.7s infinite;}
@keyframes vkpulse{0%,100%{opacity:.4;}50%{opacity:1;}}

/* ai — ForgeX / HorizonOS */
.va{position:relative;width:66px;height:66px;}
.va-core{
    position:absolute;inset:21px;border-radius:9px;
    background:rgba(199,165,247,.28);border:1px solid var(--accent-line);
    animation:vapulse 2.2s ease-in-out infinite;
}
.va-orbit{
    position:absolute;inset:0;border-radius:50%;
    border:1px dashed rgba(255,255,255,.13);
    animation:vgspin 7s linear infinite;
}
.va-orbit2{inset:8px;animation-direction:reverse;animation-duration:5s;}
.va-orbit i{position:absolute;top:-3.5px;left:50%;width:7px;height:7px;border-radius:50%;background:var(--mint);}
.va-orbit2 i{background:var(--rose);}
@keyframes vapulse{0%,100%{box-shadow:0 0 0 0 rgba(199,165,247,.35);}50%{box-shadow:0 0 24px 5px rgba(199,165,247,.28);}}

/* docs — DocsMining */
.vdoc{
    position:relative;width:50px;height:62px;border-radius:7px;overflow:hidden;
    background:rgba(255,255,255,.06);border:1px solid var(--line);
    padding:10px 8px;display:flex;flex-direction:column;gap:6px;
}
.vdoc i{height:4px;border-radius:2px;background:rgba(255,255,255,.16);}
.vdoc i:nth-child(2){width:68%;}
.vdoc i:nth-child(4){width:82%;}
.vdoc .scan{
    position:absolute;left:0;right:0;top:-16px;height:16px;
    background:linear-gradient(180deg,transparent,rgba(159,232,214,.3),transparent);
    animation:vscan 2.3s ease-in-out infinite;
}
@keyframes vscan{0%,100%{top:-16px;}50%{top:100%;}}

/* lock — XCipher */
.vl{display:flex;align-items:center;gap:13px;}
.vl-pad{
    position:relative;width:32px;height:25px;border-radius:6px;margin-top:11px;
    background:rgba(255,255,255,.08);border:1px solid var(--card-border);
}
.vl-pad::before{
    content:'';position:absolute;top:-11px;left:6px;right:6px;height:15px;
    border:2px solid var(--ink-faint);border-bottom:none;border-radius:9px 9px 0 0;
}
.vl-pad::after{
    content:'';position:absolute;top:8px;left:50%;width:5px;height:9px;margin-left:-2.5px;
    border-radius:2px;background:var(--gold);animation:vkpulse 1.9s infinite;
}
.vl-code{
    font-family:var(--f-mono);font-size:.62rem;letter-spacing:.2em;
    color:var(--ink-faint);animation:vlc 2.2s steps(2) infinite;
}
@keyframes vlc{50%{opacity:.35;}}

/* spatial — SpatiaX: listener at centre, sound source orbiting in 3D field */
.vsp{position:relative;width:74px;height:74px;}
.vsp-ring{
    position:absolute;inset:0;border-radius:50%;
    border:1px solid rgba(159,232,214,.4);opacity:0;
    animation:beacon 2.8s var(--ease) infinite;
}
.vsp-ring2{animation-delay:1.4s;border-color:rgba(199,165,247,.4);}
.vsp-head{
    position:absolute;top:50%;left:50%;width:12px;height:12px;margin:-6px 0 0 -6px;
    border-radius:50%;background:var(--ink);
    box-shadow:0 0 12px rgba(244,242,238,.5);
}
.vsp-orbit{
    position:absolute;inset:6px;border-radius:50%;
    animation:vgspin 3.2s linear infinite;
}
.vsp-orb{
    position:absolute;top:-4px;left:50%;width:8px;height:8px;border-radius:50%;
    background:var(--mint);box-shadow:0 0 10px rgba(159,232,214,.8);
}

/* suite — WorkX: PDF / Word / spreadsheet documents, all local */
.vsu{display:flex;gap:9px;}
.vsu b{
    font-family:var(--f-mono);font-size:.58rem;font-weight:600;letter-spacing:.1em;
    width:42px;height:52px;border-radius:7px;
    display:flex;align-items:flex-end;justify-content:center;padding-bottom:7px;
    background:rgba(255,255,255,.06);border:1px solid var(--line);
    border-top:3px solid var(--rose);color:var(--ink-soft);
    animation:vsulift 2.7s var(--ease) infinite;
}
.vsu b:nth-child(2){border-top-color:var(--ice);animation-delay:.45s;}
.vsu b:nth-child(3){border-top-color:var(--mint);animation-delay:.9s;}
@keyframes vsulift{0%,100%{transform:none;}18%{transform:translateY(-6px);}36%{transform:none;}}

/* imagegen — HSX StudioFlow: image rendering on your own GPU */
.vimg{
    position:relative;width:84px;height:58px;border-radius:8px;overflow:hidden;
    background:rgba(255,255,255,.05);border:1px solid var(--line);
}
.vimg-fill{
    position:absolute;inset:0;
    background:linear-gradient(135deg, rgba(242,223,184,.5), rgba(243,179,207,.45), rgba(199,165,247,.5));
    transform-origin:left;animation:vimgrender 3.4s var(--ease) infinite;
}
.vimg-peak{
    position:absolute;left:14%;bottom:10px;width:0;height:0;
    border-left:16px solid transparent;border-right:22px solid transparent;
    border-bottom:22px solid rgba(8,7,12,.5);
}
.vimg-bar{
    position:absolute;left:8%;right:8%;bottom:5px;height:3px;border-radius:99px;
    background:rgba(8,7,12,.45);overflow:hidden;
}
.vimg-bar::after{
    content:'';position:absolute;inset:0;border-radius:99px;transform-origin:left;
    background:var(--mint);animation:vgfill 3.4s var(--ease) infinite;
}
@keyframes vimgrender{0%{transform:scaleX(0);}70%{transform:scaleX(1);}100%{transform:scaleX(1);}}

/* prompt — ForgeX Pro: structured prompt lines assembling */
.vpr{display:flex;flex-direction:column;gap:8px;width:96px;position:relative;}
.vpr i{
    height:6px;border-radius:3px;transform-origin:left;
    background:linear-gradient(90deg, rgba(199,165,247,.6), rgba(255,255,255,.15));
    animation:vprtype 3.6s var(--ease) infinite;
}
.vpr i:nth-child(2){width:78%;animation-delay:.5s;background:linear-gradient(90deg, rgba(159,232,214,.55), rgba(255,255,255,.12));}
.vpr i:nth-child(3){width:56%;animation-delay:1s;background:linear-gradient(90deg, rgba(242,223,184,.55), rgba(255,255,255,.12));}
.vpr-cursor{
    position:absolute;right:-12px;bottom:-2px;width:7px;height:12px;
    background:var(--mint);animation:blink 1s steps(1) infinite;
}
@keyframes vprtype{0%{transform:scaleX(0);}40%{transform:scaleX(1);}100%{transform:scaleX(1);}}

/* shell — HorizonOS: desktop widgets + launcher dock */
.vsh{
    position:relative;display:grid;grid-template-columns:repeat(2,32px);gap:6px;
    padding:9px 9px 18px;border-radius:10px;
    background:rgba(255,255,255,.05);border:1px solid var(--line);
}
.vsh i{
    height:18px;border-radius:5px;background:rgba(255,255,255,.1);
    animation:vkpulse 3s infinite;
}
.vsh i:nth-child(1){background:rgba(199,165,247,.3);}
.vsh i:nth-child(2){animation-delay:.7s;}
.vsh i:nth-child(3){animation-delay:1.4s;background:rgba(159,232,214,.22);}
.vsh i:nth-child(4){animation-delay:2.1s;}
.vsh-dock{
    position:absolute;left:14px;right:14px;bottom:6px;height:6px;border-radius:99px;
    background:linear-gradient(90deg, rgba(243,179,207,.5), rgba(199,165,247,.5), rgba(159,232,214,.5));
}

/* guard — PC GuardX: privacy toggles flipping on */
.vgd{display:flex;align-items:center;gap:14px;}
.vgd-shield{
    width:34px;height:38px;
    clip-path:polygon(50% 0, 100% 18%, 100% 55%, 50% 100%, 0 55%, 0 18%);
    background:linear-gradient(170deg, rgba(159,232,214,.5), rgba(159,232,214,.12));
    animation:vkpulse 2.4s ease-in-out infinite;
}
.vgd-toggles{display:flex;flex-direction:column;gap:7px;}
.vgd-toggles b{
    position:relative;width:34px;height:14px;border-radius:99px;
    background:rgba(255,255,255,.08);border:1px solid var(--line);
}
.vgd-toggles b::after{
    content:'';position:absolute;top:1.5px;left:2px;width:9px;height:9px;border-radius:50%;
    background:var(--ink-faint);
    animation:vgdflip 3.2s var(--ease) infinite;
}
.vgd-toggles b:nth-child(2)::after{animation-delay:.5s;}
.vgd-toggles b:nth-child(3)::after{animation-delay:1s;}
@keyframes vgdflip{
    0%,15%{left:2px;background:var(--ink-faint);}
    35%,80%{left:20px;background:var(--mint);box-shadow:0 0 8px rgba(159,232,214,.7);}
    100%{left:2px;background:var(--ink-faint);}
}

/* chat — HSX Pocktium: local conversation with typing dots */
.vch{display:flex;flex-direction:column;gap:9px;width:104px;}
.vch-b1,.vch-b2{position:relative;height:18px;border-radius:10px;}
.vch-b1{
    width:62%;align-self:flex-start;border-bottom-left-radius:3px;
    background:rgba(255,255,255,.10);
    animation:vchin 4s var(--ease) infinite;
}
.vch-b2{
    width:74%;align-self:flex-end;border-bottom-right-radius:3px;
    background:linear-gradient(120deg, rgba(199,165,247,.4), rgba(159,232,214,.3));
    display:flex;align-items:center;justify-content:center;gap:4px;
    animation:vchin 4s var(--ease) 1.2s infinite;
}
.vch-b2 b{
    width:4px;height:4px;border-radius:50%;background:rgba(244,242,238,.85);
    animation:vchdot 1.1s ease-in-out infinite;
}
.vch-b2 b:nth-child(2){animation-delay:.18s;}
.vch-b2 b:nth-child(3){animation-delay:.36s;}
@keyframes vchin{0%{opacity:0;transform:translateY(7px);}12%,88%{opacity:1;transform:none;}100%{opacity:0;transform:translateY(-4px);}}
@keyframes vchdot{0%,100%{transform:translateY(0);opacity:.5;}50%{transform:translateY(-3px);opacity:1;}}

/* gallery — HSX PhotoVidix: photo library with light sweep */
.vga{position:relative;display:flex;gap:8px;overflow:hidden;padding:4px;border-radius:10px;}
.vga i{
    width:34px;height:46px;border-radius:7px;border:1px solid var(--line);
    animation:vgalift 3.6s var(--ease) infinite;
}
.vga i:nth-child(1){background:linear-gradient(160deg,#2c3550,#1a2030 60%,#3a3050);}
.vga i:nth-child(2){background:linear-gradient(160deg,#412e44,#241a2c 60%,#503a45);animation-delay:.6s;}
.vga i:nth-child(3){background:linear-gradient(160deg,#2e4140,#1a2825 60%,#3a5048);animation-delay:1.2s;}
.vga-glint{
    position:absolute;top:-20%;bottom:-20%;width:22px;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
    animation:vgaglint 3.6s ease-in-out infinite;
}
@keyframes vgalift{0%,100%{transform:none;}16%{transform:translateY(-5px) scale(1.05);}32%{transform:none;}}
@keyframes vgaglint{0%{left:-22px;}60%,100%{left:110%;}}

/* cast — HSX CastVisuality: screen with expanding cast waves */
.vca{position:relative;width:84px;height:58px;}
.vca-scr{
    position:absolute;inset:0;border-radius:9px;
    background:rgba(255,255,255,.05);border:1px solid var(--line);
}
.vca-w{
    position:absolute;left:8px;bottom:8px;border-radius:0 100% 0 0;
    border:2px solid transparent;
    border-top-color:var(--mint);border-right-color:var(--mint);
    opacity:0;animation:vcawave 2.4s ease-out infinite;
}
.vca-w1{width:12px;height:12px;}
.vca-w2{width:22px;height:22px;animation-delay:.3s;}
.vca-w3{width:32px;height:32px;animation-delay:.6s;}
@keyframes vcawave{0%{opacity:0;}25%{opacity:.9;}70%{opacity:.25;}100%{opacity:0;}}

/* keep kanban primitives for future use */
@keyframes vkpulse{0%,100%{opacity:.4;}50%{opacity:1;}}

/* viz inside modals gets more height */
.modal-card .viz{min-height:120px;}

/* ═══════════════════════════════════════════════════════════════════════
   V3 — SIGNATURE EFFECTS (ported from previous InHasnain build,
   restyled for the obsidian palette)
   ═══════════════════════════════════════════════════════════════════════ */

/* premium typography polish */
h1,h2,h3{text-wrap:balance;}
.lead,p{text-wrap:pretty;}
body{text-rendering:optimizeLegibility;}
.stat-number,.clock .time{font-variant-numeric:tabular-nums;}

/* header tools: weather, sound, live clock */
.top-bar .actions{display:flex;align-items:center;gap:.5rem;}
.tool-btn{
    display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;
    font-family:var(--f-mono);font-size:.6rem;font-weight:600;letter-spacing:.18em;
    color:var(--ink-soft);padding:.5rem .75rem;border-radius:var(--r-pill);
    background:rgba(255,255,255,.04);border:1px solid var(--card-border);
    transition:all var(--t-fast) var(--ease);
}
.tool-btn:hover{color:var(--ink);border-color:var(--accent-line);transform:translateY(-2px);}
.tool-btn .ico{font-size:.85rem;line-height:1;}
.snd-btn .bars{display:inline-flex;gap:2px;align-items:flex-end;height:11px;}
.snd-btn .bars i{width:2.5px;height:4px;border-radius:2px;background:var(--ink-faint);transition:background .3s;}
.snd-btn.on .bars i{background:var(--mint);animation:veq .9s ease-in-out infinite alternate;}
.snd-btn.on .bars i:nth-child(2){animation-delay:.15s;}
.snd-btn.on .bars i:nth-child(3){animation-delay:.3s;}
.snd-btn.on .bars i:nth-child(4){animation-delay:.1s;}
.clock{
    display:inline-flex;align-items:center;gap:.45rem;
    font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;color:var(--ink-soft);
    padding:.5rem .8rem;border-radius:var(--r-pill);
    background:rgba(255,255,255,.03);border:1px solid var(--line);
}
.clock .dot{width:6px;height:6px;border-radius:50%;background:var(--mint);animation:vkpulse 2s infinite;}
.clock .meridian{color:var(--ink-faint);font-size:.58rem;}
@media (max-width:980px){.clock{display:none;}}
@media (max-width:760px){.top-bar .actions{justify-content:center;}}

/* signature intro overlay (handwritten, once per session) */
.sig-overlay{
    position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:1.4rem;
    background:var(--bg);transition:opacity .9s ease;
}
.sig-overlay.done{opacity:0;pointer-events:none;}
.sig-overlay svg{width:min(480px,78vw);height:auto;overflow:visible;}
.sig-path{
    fill:none;stroke:var(--ink);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;
    filter:drop-shadow(0 0 14px rgba(199,165,247,.35));
}
.sig-tag{
    font-family:var(--f-mono);font-size:.64rem;letter-spacing:.5em;text-transform:uppercase;
    color:var(--ink-faint);
}

/* gold-particle wordmark */
.kinetic-word{
    display:flex;justify-content:center;margin-top:clamp(2.2rem,5vh,3.6rem);
    pointer-events:none;
}
.kinetic-word canvas{max-width:100%;}

/* custom cursor + snake trail */
#hsx-cursor{
    position:fixed;width:10px;height:10px;border-radius:50%;z-index:2100;
    background:var(--ink);pointer-events:none;transform:translate(-50%,-50%);
    box-shadow:0 0 10px rgba(244,242,238,.5);transition:width .15s,height .15s;
}
#hsx-cursor.clicking{width:16px;height:16px;background:var(--mint);}
.hsx-snake-dot{
    position:fixed;border-radius:50%;z-index:2099;pointer-events:none;
    background:var(--holo);background-size:300% 100%;transform:translate(-50%,-50%);
}

/* shooting stars */
.shoot-star{
    position:fixed;z-index:-1;pointer-events:none;height:1.5px;width:var(--len,90px);
    border-radius:99px;opacity:.9;
    background:linear-gradient(90deg, rgba(244,242,238,.95), rgba(199,165,247,.4), transparent);
    transform:rotate(var(--ang,25deg));
    animation:shoot var(--dur,.6s) ease-out forwards;
}
@keyframes shoot{
    to{transform:translate(var(--tx,200px),var(--ty,120px)) rotate(var(--ang,25deg));opacity:0;}
}

/* starfield canvas: above the orb glows so the moon reads crisply */
#star-canvas{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:1;transition:opacity .6s ease;}
#star-canvas.off{opacity:0;}
.sky-btn.on .ico{color:var(--gold);}

/* cinematic rain */
#rain-canvas{
    position:fixed;inset:0;z-index:6;pointer-events:none;opacity:0;transition:opacity .8s ease;
}
#rain-canvas.on{opacity:1;}

/* glass condensation (rain mode only) */
.glass-condensation{
    position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
    opacity:0;transition:opacity 1.2s ease;
}
body.weather-rain .glass-condensation{opacity:.55;}

/* waveform divider */
.waveform-divider{margin-top:clamp(2.4rem,6vh,4rem);line-height:0;}
.waveform-divider svg{width:100%;height:42px;display:block;}
.wf-back{fill:rgba(199,165,247,.06);}
.wf-front{fill:rgba(159,232,214,.05);}

/* ink splat canvas */
.ink-splat-canvas{
    position:fixed;inset:0;z-index:2050;pointer-events:none;opacity:0;transition:opacity .2s;
}
.ink-splat-canvas.active{opacity:1;}

/* hidden terminal (press `) */
.hsx-terminal-overlay{position:fixed;inset:0;z-index:1500;pointer-events:none;}
.hsx-terminal{
    position:fixed;left:50%;bottom:-60vh;transform:translateX(-50%);
    width:min(680px,94vw);height:50vh;display:flex;flex-direction:column;
    background:rgba(10,9,16,.92);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
    border:1px solid var(--card-border);border-bottom:none;border-radius:18px 18px 0 0;
    box-shadow:0 -30px 90px rgba(0,0,0,.7);
    transition:bottom .45s var(--ease);pointer-events:all;
    font-family:var(--f-mono);font-size:.78rem;
}
.hsx-terminal.open{bottom:0;}
.hsx-terminal-bar{
    display:flex;align-items:center;gap:.5rem;padding:.7rem 1rem;
    border-bottom:1px solid var(--line);color:var(--ink-faint);
    font-size:.6rem;letter-spacing:.2em;
}
.hsx-terminal-bar span:last-child{margin-left:auto;letter-spacing:.06em;text-transform:none;}
.t-dot{width:9px;height:9px;border-radius:50%;display:inline-block;}
.t-dot.red{background:var(--rose);} .t-dot.yellow{background:var(--gold);} .t-dot.green{background:var(--mint);}
.hsx-terminal-body{flex:1;overflow-y:auto;padding:.9rem 1.1rem;}
.t-line{margin:.25rem 0;color:var(--ink-soft);white-space:pre-wrap;}
.t-line.cmd{color:var(--ink);}
.t-line.ok{color:var(--mint);}
.t-line.warn{color:var(--gold);}
.t-line.err{color:var(--rose);}
.hsx-terminal-input-row{
    display:flex;align-items:center;padding:.7rem 1.1rem;border-top:1px solid var(--line);
}
.t-prompt{color:var(--mint);}
.t-input{
    flex:1;background:none;border:none;outline:none;color:var(--ink);
    font-family:var(--f-mono);font-size:.78rem;
}

/* voice navigation indicator */
.voice-indicator{
    position:fixed;bottom:26px;left:50%;transform:translate(-50%,16px);
    display:flex;flex-direction:column;align-items:center;gap:.25rem;z-index:1600;
    padding:.7rem 1.3rem;border-radius:var(--r-pill);
    background:rgba(10,9,16,.9);border:1px solid var(--accent-line);
    font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;color:var(--ink);
    opacity:0;pointer-events:none;transition:opacity .3s ease, transform .3s var(--ease);
}
.voice-indicator.active{opacity:1;transform:translate(-50%,0);}
.voice-indicator #vi-res{color:var(--mint);letter-spacing:.04em;}

/* ── Split hero responsive ─────────────────────────────────────────────── */
@media (max-width:980px){
    .hero-split{grid-template-columns:1fr;gap:2.4rem;}
    .hero-copy{text-align:center;}
    .hero-copy .lead{margin-left:auto;margin-right:auto;}
    .hero-copy .hero-actions{justify-content:center;}
    .proof-chips{justify-content:center;}
    .hero-stage{min-height:380px;max-width:480px;margin:0 auto;width:100%;}
}
@media (max-width:560px){
    .hero-stage{min-height:470px;}
    .fc-1{left:0;}
    .fc-2{right:0;top:34%;}
    .fc-3{left:6%;}
    .float-card{width:min(200px,58vw);}
    .console{font-size:.66rem;}
    .dev-phone{width:158px;height:300px;}
}

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

/* ── Ad slots (Google AdSense) ────────────────────────────────────────────
   One shared shell so units read as part of the design system, not as
   bolted-on boxes. Swap the placeholder markup inside each .ad-slot for
   the real <ins class="adsbygoogle"> unit once the account is approved —
   the wrapper, label and spacing stay the same. ───────────────────────── */
.ad-slot{
    position:relative;
    grid-column:1/-1;
    margin:2.2rem 0;
    padding:1.3rem 1.2rem 1.5rem;
    border-radius:16px;
    background:var(--card-bg);
    border:1px solid var(--card-border);
    -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:.6rem;min-height:110px;overflow:hidden;text-align:center;
}
.ad-slot::before{
    content:'';position:absolute;top:0;left:8%;right:8%;height:1px;
    background:var(--holo);background-size:300% 100%;
    animation:holoShift 6s linear infinite;opacity:.55;
}
.ad-slot-label{
    font-family:var(--f-mono,inherit);font-size:.65rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--ink-faint);
}
.ad-slot-placeholder{
    font-size:.82rem;color:var(--ink-faint);
}
.ad-slot .adsbygoogle{width:100%;}

/* In-grid variant: same footprint as an app tile / bento cell so it slots
   cleanly into the card grids instead of breaking the rhythm. */
.ad-slot--tile{
    grid-column:auto;margin:0;min-height:210px;border-radius:20px;
}
.ad-slot--infeed{grid-column:1/-1;margin:.4rem 0 1rem;}

/* Section banner: full-width strip above a listing grid. */
.ad-slot--banner{margin:1.8rem 0 2.2rem;}

@media (max-width:640px){
    .ad-slot{padding:1.1rem 1rem 1.3rem;min-height:96px;}
}

/* ══════════════════════════════════════════════════════════════════════
   Static app directory — permanent, crawlable copy of the catalogue.
   Rendered server-side (see update-site.js / hsx-prerender) so Bing,
   DuckDuckGo and AI crawlers, which do not execute JavaScript, still
   see every app name, description and privacy-policy link.
   ══════════════════════════════════════════════════════════════════ */
.app-directory { margin-top: 2.6rem; padding: 1.8rem 1.6rem 2rem; }
.app-directory > h2 { font-size: 1.35rem; margin: 0 0 .5rem; letter-spacing: -.01em; }
.app-directory .dir-intro { margin: 0 0 1.6rem; max-width: 62ch; opacity: .7; font-size: .93rem; line-height: 1.6; }
.dir-group { margin: 0 0 2rem; }
.dir-cat { font-size: 1.02rem; margin: 0 0 .2rem; letter-spacing: .01em; }
.dir-cat-desc { margin: 0 0 1rem; font-size: .86rem; opacity: .55; }
.dir-group { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .9rem 1.4rem; }
.dir-cat, .dir-cat-desc { grid-column: 1 / -1; }
@media (max-width: 780px) { .dir-group { grid-template-columns: 1fr; } }
.dir-app { padding: .9rem 1rem; border: 1px solid rgba(255,255,255,.07); border-radius: 12px;
           background: rgba(255,255,255,.018); }
.dir-app-name { font-size: .97rem; margin: 0 0 .25rem; font-weight: 600; }
.dir-soon { font-size: .68rem; font-weight: 500; opacity: .6; border: 1px solid currentColor;
            border-radius: 999px; padding: .05rem .45rem; margin-left: .35rem; vertical-align: middle; }
.dir-tagline { margin: 0 0 .45rem; font-size: .855rem; opacity: .82; }
.dir-desc { margin: 0 0 .55rem; font-size: .83rem; opacity: .62; line-height: 1.55; }
.dir-features { margin: 0 0 .6rem; padding-left: 1.05rem; font-size: .8rem; opacity: .58; line-height: 1.55; }
.dir-features li { margin: .1rem 0; }
.dir-links { margin: 0; font-size: .82rem; }
.dir-links a { text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.18); padding-bottom: 1px; }
.dir-links a:hover { border-bottom-color: currentColor; }
.dir-sep { opacity: .35; margin: 0 .15rem; }

/* Skip link — WCAG 2.4.1 bypass block */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 9999;
             background: #0b0a12; color: #E6F1F3; padding: .7rem 1.1rem;
             border: 1px solid rgba(255,255,255,.25); border-radius: 0 0 8px 0;
             font-size: .9rem; text-decoration: none; }
.skip-link:focus { left: 0; outline: 2px solid #3ADCE6; outline-offset: 2px; }

/* Privacy policy index */
.policy-index { columns: 3; column-gap: 2rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
@media (max-width: 900px) { .policy-index { columns: 2; } }
@media (max-width: 560px) { .policy-index { columns: 1; } }
.policy-index li { break-inside: avoid; margin: 0 0 .5rem; font-size: .88rem; }
.policy-index a { text-decoration: none; opacity: .8; }
.policy-index a:hover { opacity: 1; text-decoration: underline; }

/* Gallery images: reserve space so lazy loading cannot shift layout */
.gallery-item img, .gal-img { max-width: 100%; height: auto; }

/* Static (no-JS) variant of the tile action: rendered as an anchor so the card
   still links somewhere useful before JavaScript upgrades it to a modal button. */
a.tile-btn, a.tile-btn:link, a.tile-btn:visited { text-decoration: none; }
a.tile-btn-details { display: inline-flex; align-items: center; }

/* ══════════════════════════════════════════════════════════════════════
   About page — founder profile. Built on the site tokens so it reads as
   part of the same system: holo accents, mono labels, clipped corners.
   ══════════════════════════════════════════════════════════════════ */
.ab-lead { font-size: 1.05rem; line-height: 1.7; color: var(--ink); margin: 0 0 1rem; }
.ab-lead strong { color: var(--ink); }
.ab-note { margin: 1.2rem 0 0; font-size: .88rem; color: var(--ink-soft); }
.ab-note a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent-line); }
.ab-note a:hover { border-bottom-color: currentColor; }

/* what I build */
.ab-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: .9rem; }
.ab-card {
    position: relative; padding: 1.25rem 1.3rem 1.35rem;
    background: var(--card-bg); border: 1px solid var(--card-border);
    border-radius: var(--r-md); backdrop-filter: var(--blur);
    transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.ab-card:hover { transform: translateY(-3px); border-color: var(--accent-line); }
.ab-idx {
    font-family: var(--f-mono); font-size: .6rem; letter-spacing: .2em;
    color: var(--ink-faint); display: block; margin-bottom: .5rem;
}
.ab-card h3 { font-family: var(--f-display); font-size: 1rem; margin: 0 0 .45rem; color: var(--ink); }
.ab-card p { margin: 0 0 .5rem; font-size: .88rem; line-height: 1.6; color: var(--ink-soft); }
.ab-apps {
    font-family: var(--f-mono); font-size: .68rem; letter-spacing: .04em;
    color: var(--gold); opacity: .78; margin: .65rem 0 0 !important; line-height: 1.7;
}

/* how I build it */
.ab-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .9rem; }
.ab-rule {
    padding: 1.1rem 1.2rem; border-radius: var(--r-md);
    background: rgba(255,255,255,.022); border: 1px solid var(--line);
    border-left: 2px solid transparent; border-image: var(--holo) 1;
    border-image-slice: 1; border-image-width: 0 0 0 2px;
}
.ab-rule h3 {
    font-family: var(--f-mono); font-size: .7rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--accent); margin: 0 0 .5rem;
}
.ab-rule p { margin: 0; font-size: .87rem; line-height: 1.6; color: var(--ink-soft); }

/* name clarification */
.ab-names {
    margin: 0; display: grid; grid-template-columns: minmax(150px, auto) 1fr;
    gap: .05rem 1.6rem; border-top: 1px solid var(--line);
}
.ab-names dt {
    font-family: var(--f-display); font-size: .93rem; color: var(--ink);
    padding: .85rem 0 .2rem; border-bottom: 1px solid var(--line);
}
.ab-names dd {
    margin: 0; font-size: .88rem; color: var(--ink-soft); line-height: 1.6;
    padding: .85rem 0 .85rem; border-bottom: 1px solid var(--line);
}
@media (max-width: 620px) {
    .ab-names { grid-template-columns: 1fr; }
    .ab-names dt { border-bottom: 0; padding-bottom: 0; }
    .ab-names dd { padding-top: .3rem; }
}

/* where to find my work */
.ab-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .75rem; }
.ab-link {
    display: flex; flex-direction: column; gap: .3rem; text-decoration: none;
    padding: 1rem 1.15rem; border-radius: var(--r-md);
    background: var(--card-bg); border: 1px solid var(--card-border);
    transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
                box-shadow var(--t-fast) var(--ease);
}
.ab-link:hover {
    transform: translateY(-3px); border-color: var(--accent-line);
    box-shadow: 0 14px 32px -18px rgba(199,165,247,.85);
}
.ab-link-k {
    font-family: var(--f-mono); font-size: .61rem; letter-spacing: .2em;
    text-transform: uppercase; color: var(--ink-faint);
}
.ab-link-v { font-size: .95rem; color: var(--ink); }

/* common questions */
.ab-faq { display: grid; gap: .85rem; }
.ab-q {
    padding: 1.05rem 1.2rem; border-radius: var(--r-md);
    background: rgba(255,255,255,.022); border: 1px solid var(--line);
}
.ab-q h3 { font-family: var(--f-display); font-size: .95rem; margin: 0 0 .4rem; color: var(--ink); }
.ab-q p  { margin: 0; font-size: .88rem; line-height: 1.65; color: var(--ink-soft); }

@media (max-width: 700px) {
    .stats-section { grid-template-columns: repeat(2, 1fr); }
}

/* Anchored sections must clear the sticky top bar when jumped to. */
.section, [id^="app-"], .hero, h1[id], h2[id], h3[id] { scroll-margin-top: 6.5rem; }

/* About page: studio-profile additions */
/* The hero h1 paints its text with a clipped gradient; a nested <sup>
   inherits the transparent fill and disappears. Force a solid colour. */
.ab-r {
    font-size: .42em; vertical-align: super; letter-spacing: 0;
    margin-left: .1em; color: var(--gold); opacity: .9;
    -webkit-text-fill-color: var(--gold);
}
.ab-tagline {
    font-family: var(--f-mono); font-size: .78rem; letter-spacing: .2em;
    text-transform: uppercase; color: var(--gold); opacity: .85;
    margin: .1rem 0 1.1rem;
}

/* ══════════════════════════════════════════════════════════════════════
   MADE WITH HSX — monthly community challenge
   Built on the site tokens: holo edges, mono labels, clipped corners.
   ══════════════════════════════════════════════════════════════════ */
.mw { margin-top: .4rem; }
.mw-top { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.1rem; align-items: stretch; }
@media (max-width: 940px) { .mw-top { grid-template-columns: 1fr; } }

/* prize panel */
.mw-prize {
    position: relative; padding: 1px; border-radius: 4px;
    background: linear-gradient(140deg, rgba(242,223,184,.55), rgba(199,165,247,.35) 50%, rgba(159,232,214,.25));
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}
.mw-prize-in {
    background: #0b0912; padding: 1.5rem 1.6rem; height: 100%;
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
    display: flex; flex-direction: column; gap: .7rem;
}
.mw-kick {
    font-family: var(--f-mono); font-size: .6rem; letter-spacing: .22em;
    text-transform: uppercase; color: var(--gold);
    display: flex; align-items: center; gap: .5rem;
}
.mw-kick::before { content: ""; width: 20px; height: 1px; background: var(--holo); }
.mw-prize h3 { font-family: var(--f-display); font-size: 1.45rem; margin: 0; color: var(--ink); line-height: 1.2; }
.mw-prize p { margin: 0; font-size: .9rem; line-height: 1.65; color: var(--ink-soft); }
.mw-theme {
    margin-top: .3rem; padding: .75rem .95rem; border-radius: var(--r-md);
    background: rgba(255,255,255,.03); border: 1px solid var(--line);
}
.mw-theme-k {
    font-family: var(--f-mono); font-size: .58rem; letter-spacing: .2em;
    text-transform: uppercase; color: var(--ink-faint); display: block; margin-bottom: .25rem;
}
.mw-theme-v { font-family: var(--f-display); font-size: 1.02rem; color: var(--accent); }

/* countdown */
.mw-count { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: auto; padding-top: .9rem; }
.mw-unit {
    text-align: center; padding: .7rem .3rem; border-radius: var(--r-md);
    background: rgba(255,255,255,.035); border: 1px solid var(--card-border);
}
.mw-num { font-family: var(--f-display); font-size: 1.35rem; font-weight: 600; color: var(--ink); line-height: 1; }
.mw-lab {
    font-family: var(--f-mono); font-size: .53rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--ink-faint); margin-top: .35rem;
}
.mw-closed { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; color: var(--rose); }

/* steps */
.mw-steps { display: grid; gap: .6rem; }
.mw-step {
    display: grid; grid-template-columns: 34px 1fr; gap: .85rem; align-items: start;
    padding: .95rem 1.1rem; border-radius: var(--r-md);
    background: var(--card-bg); border: 1px solid var(--card-border);
}
.mw-step-n {
    font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em;
    color: var(--btn-fg); background: var(--holo); border-radius: 50%;
    width: 30px; height: 30px; display: grid; place-items: center; font-weight: 700;
}
.mw-step h4 { font-family: var(--f-display); font-size: .95rem; margin: .25rem 0 .3rem; color: var(--ink); }
.mw-step p { margin: 0; font-size: .85rem; line-height: 1.6; color: var(--ink-soft); }
.mw-step code {
    font-family: var(--f-mono); font-size: .82em; padding: .08rem .35rem;
    border-radius: 5px; background: var(--surface-2); color: var(--gold);
}

/* entry form */
.mw-form-wrap {
    margin-top: 1.1rem; padding: 1.5rem 1.6rem; border-radius: var(--r-lg);
    background: var(--card-bg); border: 1px solid var(--card-border); backdrop-filter: var(--blur);
}
.mw-form { display: grid; gap: 1rem; }
.mw-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 680px) { .mw-row { grid-template-columns: 1fr; } }
.mw-form label {
    display: flex; flex-direction: column; gap: .45rem;
    font-family: var(--f-mono); font-size: .62rem; font-weight: 500;
    letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint);
}
.mw-form input, .mw-form select {
    font-family: var(--f-body); font-size: .95rem; color: var(--ink);
    background: rgba(255,255,255,.04); color-scheme: dark;
    border: 1px solid var(--card-border); border-radius: var(--r-md);
    padding: .8rem 1rem; outline: none; width: 100%; box-sizing: border-box;
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.mw-form input::placeholder { color: var(--ink-faint); }
.mw-form input:focus, .mw-form select:focus {
    border-color: var(--accent-line); box-shadow: 0 0 0 4px rgba(199,165,247,.12);
}
.mw-form select option { background: var(--bg-soft); color: var(--ink); }
.mw-form select optgroup {
    background: #100d16; color: var(--accent); font-family: var(--f-mono);
    font-size: .78em; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; font-style: normal;
}
.mw-form select optgroup option {
    background: var(--bg-soft); color: var(--ink); font-family: var(--f-body);
    font-size: 1rem; letter-spacing: normal; text-transform: none; font-weight: 400;
}
.mw-check {
    display: grid !important; grid-template-columns: 20px 1fr; gap: .7rem; align-items: start;
    font-family: var(--f-body) !important; font-size: .84rem !important;
    letter-spacing: normal !important; text-transform: none !important;
    color: var(--ink-soft) !important; font-weight: 400 !important; cursor: pointer;
}
.mw-check input { width: 18px; height: 18px; margin-top: .15rem; accent-color: var(--accent); padding: 0; }
.mw-check a { color: var(--ink); border-bottom: 1px solid var(--accent-line); text-decoration: none; }
.mw-status {
    font-family: var(--f-mono); font-size: .74rem; letter-spacing: .06em;
    color: var(--mint); min-height: 1.2em; margin: 0;
}

/* winners strip */
.mw-winners { margin-top: 1.4rem; }
.mw-winners h3 { font-family: var(--f-display); font-size: 1.05rem; margin: 0 0 .2rem; color: var(--ink); }
.mw-winners > p { margin: 0 0 1rem; font-size: .87rem; color: var(--ink-soft); }
.mw-wgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8rem; }
.mw-wcard {
    padding: 1.1rem 1.2rem; border-radius: var(--r-md);
    background: rgba(255,255,255,.022); border: 1px dashed var(--line); text-align: center;
}
.mw-wcard-k {
    font-family: var(--f-mono); font-size: .58rem; letter-spacing: .2em;
    text-transform: uppercase; color: var(--ink-faint); display: block; margin-bottom: .4rem;
}
.mw-wcard-v { font-size: .9rem; color: var(--ink-soft); }

/* ══════════════════════════════════════════════════════════════════════════
   HSX:APP-PAGES — dedicated application landing pages (/apps/*.html)
   ══════════════════════════════════════════════════════════════════════ */
.app-crumb{
    font-family:var(--f-mono); font-size:.74rem; letter-spacing:.08em;
    text-transform:uppercase; color:var(--ink-faint);
    display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
    padding:1.6rem 0 .2rem;
}
.app-crumb a{ color:var(--ink-soft); text-decoration:none; transition:color var(--t-fast) var(--ease); }
.app-crumb a:hover{ color:var(--accent); }
.app-crumb span[aria-hidden]{ color:var(--ink-faint); opacity:.5; }
.app-crumb [aria-current]{ color:var(--gold); }

.app-hero{ text-align:center; }
.app-tagline{
    font-family:var(--f-mono); font-size:clamp(.86rem,1.6vw,1rem);
    letter-spacing:.02em; margin:.35rem auto .9rem; max-width:56ch;
    background:var(--holo); -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
}
.app-cta{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin:1.4rem 0 1.6rem; }

.app-features{
    list-style:none; margin:0; padding:0;
    display:grid; gap:.7rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.app-features li{
    position:relative; padding:.95rem 1.1rem .95rem 2.5rem;
    background:var(--card-bg); border:1px solid var(--card-border);
    border-radius:var(--r-md); color:var(--ink);
    clip-path:polygon(0 10px,10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
    transition:border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.app-features li:hover{ border-color:var(--accent-line); transform:translateY(-2px); }
.app-features li::before{
    content:""; position:absolute; left:1.05rem; top:1.35rem;
    width:9px; height:9px; border-radius:2px; background:var(--holo);
}

.app-lead{ font-size:1.06rem; color:var(--ink); max-width:70ch; }
.section .app-lead + p{ color:var(--ink-soft); max-width:70ch; }


.app-faq{ display:grid; gap:.8rem; }
.app-q{
    background:var(--card-bg); border:1px solid var(--card-border);
    border-radius:var(--r-md); padding:1.1rem 1.25rem;
}
.app-q h3{
    font-family:var(--f-display); font-size:1rem; font-weight:600;
    margin:0 0 .45rem; color:var(--gold); letter-spacing:.01em;
}
.app-q p{ margin:0; color:var(--ink-soft); max-width:78ch; }

.app-related{ display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.app-rel{
    display:block; text-decoration:none; padding:1.05rem 1.15rem;
    background:var(--card-bg); border:1px solid var(--card-border);
    border-radius:var(--r-md);
    clip-path:polygon(0 12px,12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
    transition:border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.app-rel:hover{ border-color:var(--accent-line); background:var(--surface-2); transform:translateY(-3px); }
.app-rel-n{ display:block; font-family:var(--f-display); font-weight:600; color:var(--ink); margin-bottom:.3rem; }
.app-rel-t{ display:block; font-size:.86rem; color:var(--ink-soft); line-height:1.5; }

.app-note{
    font-family:var(--f-mono); font-size:.8rem; color:var(--ink-faint);
    margin-top:1.2rem;
}
.app-note a{ color:var(--ink-soft); text-decoration:none; }
.app-note a:hover{ color:var(--accent); }

@media (max-width:640px){
    .app-cta .btn{ width:100%; }
}
/* /HSX:APP-PAGES */

/* HSX:BTN-GHOST — quiet third action, used in the app detail modal */
.btn--ghost{
    background:transparent;
    border:1px solid var(--card-border);
    color:var(--ink-soft);
}
.btn--ghost:hover{
    border-color:var(--accent-line);
    color:var(--ink);
    background:var(--surface);
}
/* /HSX:BTN-GHOST */

/* HSX:MODAL-ACTIONS — three actions need to sit on one row at modal width */
.modal-actions{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
.modal-actions .btn{ padding:.85rem 1.25rem; font-size:.72rem; letter-spacing:.09em; }
@media (max-width:520px){ .modal-actions .btn{ flex:1 1 100%; } }
/* /HSX:MODAL-ACTIONS */

/* ══════════════════════════════════════════════════════════════════════════
   HSX:APP-SPEC — technical detail cells on an application page
   ══════════════════════════════════════════════════════════════════════ */
.app-spec{
    display:grid; gap:.7rem; margin:0;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.app-spec .spec-cell{
    position:relative; overflow:hidden;
    padding:1rem 1.15rem 1.05rem;
    background:var(--card-bg); border:1px solid var(--card-border);
    border-radius:var(--r-md);
    clip-path:polygon(0 11px,11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%);
    transition:border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.app-spec .spec-cell::before{
    content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
    background:var(--holo); opacity:.28;
}
.app-spec .spec-cell:hover{ border-color:var(--accent-line); transform:translateY(-2px); }
.app-spec .spec-cell:hover::before{ opacity:.75; }
.app-spec dt{
    font-family:var(--f-mono); font-size:.66rem; font-weight:600;
    letter-spacing:.16em; text-transform:uppercase;
    color:var(--ink-faint); margin:0 0 .45rem;
}
.app-spec dd{
    margin:0; font-family:var(--f-display); font-weight:500;
    font-size:.98rem; line-height:1.35; color:var(--ink);
    display:flex; align-items:center; gap:.5rem;
}
.app-spec dd a{ color:var(--accent); text-decoration:none; border-bottom:1px solid transparent; }
.app-spec dd a:hover{ border-bottom-color:var(--accent-line); }

/* state dot: green = the reassuring answer, amber = a caveat worth reading */
.app-spec .spec-dot{
    flex:0 0 auto; width:7px; height:7px; border-radius:50%;
    background:var(--ink-faint); box-shadow:0 0 0 3px rgba(255,255,255,.04);
}
.spec-cell--good .spec-dot{ background:var(--mint); box-shadow:0 0 10px 0 rgba(159,232,214,.55); }
.spec-cell--note .spec-dot{ background:var(--gold); box-shadow:0 0 10px 0 rgba(242,223,184,.5); }
.spec-cell--wait .spec-dot{ background:var(--rose); box-shadow:0 0 10px 0 rgba(243,179,207,.5); }
.spec-cell--good{ border-color:rgba(159,232,214,.22); }
.spec-cell--good::before{ background:linear-gradient(180deg,var(--mint),var(--ice)); opacity:.5; }

@media (max-width:520px){
    .app-spec{ grid-template-columns:1fr; }
}
/* /HSX:APP-SPEC */

/* ══════════════════════════════════════════════════════════════════════════
   HSX:GALLERY-STATIC — the crawlable / no-JavaScript version of the showcase.
   Same artwork, same words. Hidden by script once the showcase takes over.
   ══════════════════════════════════════════════════════════════════════ */
.gal-static[hidden]{ display:none; }
.gal-static{ margin-top:1.5rem; }
.gs-head{
    font-family:var(--f-display); font-size:1.15rem; font-weight:600;
    color:var(--ink); margin:0 0 .35rem;
}
.gs-sub{ color:var(--ink-soft); font-size:.9rem; margin:0 0 1.3rem; max-width:70ch; }
.gs-list{
    list-style:none; margin:0; padding:0;
    display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.gs-item figure{
    margin:0; height:100%; overflow:hidden;
    background:var(--card-bg); border:1px solid var(--card-border);
    border-radius:var(--r-md);
    clip-path:polygon(0 12px,12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
    transition:border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.gs-item figure:hover{ border-color:var(--accent-line); transform:translateY(-3px); }
.gs-item picture{ display:block; }
.gs-item img{
    display:block; width:100%; height:auto; aspect-ratio:3/2;
    object-fit:cover; background:var(--bg-soft);
}
.gs-item figcaption{ padding:.95rem 1.1rem 1.1rem; }
.gs-item figcaption h3{
    font-family:var(--f-display); font-size:1rem; font-weight:600;
    color:var(--ink); margin:0 0 .3rem;
}
.gs-desc{ margin:0 0 .55rem; font-size:.85rem; color:var(--ink-soft); line-height:1.5; }
.gs-app{
    margin:0; font-family:var(--f-mono); font-size:.72rem;
    letter-spacing:.04em; color:var(--ink-faint); line-height:1.55;
}
.gs-app a{ color:var(--accent); text-decoration:none; }
.gs-app a:hover{ text-decoration:underline; }
/* /HSX:GALLERY-STATIC */

/* ══════════════════════════════════════════════════════════════════════════
   HSX:GUIDES — long-form prose, used by the prompt guide on the AI Studio page
   ══════════════════════════════════════════════════════════════════════ */


.art-body{ font-size:1.02rem; line-height:1.75; color:var(--ink-soft); }
.art-body h2,
.art-body h3{
    font-family:var(--f-display); font-size:clamp(1.25rem,2.4vw,1.55rem); font-weight:600;
    color:var(--ink); margin:2.6rem 0 .9rem; scroll-margin-top:6rem;
}
.art-body h2::after,
.art-body h3::after{
    content:""; display:block; width:52px; height:2px; margin-top:.6rem;
    background:var(--holo); border-radius:2px;
}
.art-body p{ margin:0 0 1.15rem; }
.art-body em{ color:var(--ink); font-style:italic; }
.art-body strong{ color:var(--ink); font-weight:600; }
.art-body a{ color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent-line); }
.art-body a:hover{ color:var(--ink); border-bottom-color:var(--ink); }
.art-lead{
    font-size:1.12rem; line-height:1.7; color:var(--ink);
    padding-left:1.1rem; border-left:2px solid transparent;
    border-image:var(--holo) 1; margin-bottom:1.8rem !important;
}
.art-steps{ margin:0 0 1.3rem; padding-left:1.3rem; display:grid; gap:.75rem; }
.art-steps li{ padding-left:.2rem; }
.art-note{
    margin-top:2.4rem; padding:1.1rem 1.25rem; font-size:.94rem;
    background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--r-md);
}

.art-table-wrap{ overflow-x:auto; margin:0 0 1.4rem; }
.art-table{
    width:100%; border-collapse:collapse; font-size:.93rem;
    border:1px solid var(--card-border); border-radius:var(--r-md); overflow:hidden;
}
.art-table th{
    text-align:left; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.13em;
    text-transform:uppercase; color:var(--ink-faint); font-weight:600;
    padding:.8rem 1rem; background:var(--surface-2); border-bottom:1px solid var(--line);
}
.art-table td{ padding:.85rem 1rem; border-bottom:1px solid var(--line); vertical-align:top; }
.art-table tr:last-child td{ border-bottom:0; }
.art-table td:first-child{ font-family:var(--f-mono); font-size:.82rem; color:var(--ink); white-space:nowrap; }

/* /HSX:GUIDES */

/* ══════════════════════════════════════════════════════════════════════════
   HSX:PROMPT-GUIDE — tabbed guidance panel on the AI Studio page.
   Without JavaScript every panel is visible, so nothing is hidden from a
   crawler or a reader; script turns it into tabs.
   ══════════════════════════════════════════════════════════════════════ */
.pg-wrap{
    display:grid; grid-template-columns:minmax(210px,250px) 1fr; gap:1.4rem;
    align-items:start; max-width:1000px; margin:0 auto;
}
.pg-tabs{ display:grid; gap:.3rem; position:sticky; top:5.5rem; }
.pg-tab{
    display:flex; align-items:center; gap:.7rem; width:100%; text-align:left;
    padding:.7rem .85rem; cursor:pointer;
    background:transparent; border:1px solid transparent; border-radius:var(--r-md);
    color:var(--ink-soft); font-family:var(--f-body); font-size:.9rem; line-height:1.3;
    transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pg-tab:hover{ background:var(--surface); color:var(--ink); }
.pg-tab[aria-selected="true"]{
    background:var(--card-bg); border-color:var(--accent-line); color:var(--ink);
    clip-path:polygon(0 10px,10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
}
.pg-tab:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.pg-tab-n{
    flex:0 0 auto; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.06em;
    color:var(--ink-faint); font-variant-numeric:tabular-nums;
}
.pg-tab[aria-selected="true"] .pg-tab-n{
    background:var(--holo); -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
}
.pg-tab-l{ flex:1 1 auto; }

.pg-body{
    background:var(--card-bg); border:1px solid var(--card-border);
    border-radius:var(--r-lg); padding:1.5rem 1.8rem 1.7rem; min-height:340px;
    clip-path:polygon(0 16px,16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);
}
/* only once script has claimed the block do panels collapse; a reader or
   crawler without JavaScript sees all eight, which is the whole guide */
.pg-wrap.pg-js .pg-panel[data-inactive]{ display:none; }
.pg-wrap.pg-js .pg-panel:not(:first-child){ display:none; }
.pg-wrap.pg-js .pg-panel:not([data-inactive]){ display:block; }
.pg-panel h3{
    font-family:var(--f-display); font-size:clamp(1.15rem,2.2vw,1.4rem); font-weight:600;
    color:var(--ink); margin:0 0 .3rem; letter-spacing:-.01em;
}
.pg-panel h3::after{
    content:""; display:block; width:48px; height:2px; margin:.55rem 0 1.1rem;
    background:var(--holo); border-radius:2px;
}
.pg-panel > :last-child{ margin-bottom:0; }
.pg-eg{
    font-family:var(--f-mono); font-size:.88rem; color:var(--gold);
    padding:.75rem .95rem; margin:0 0 1.15rem;
    background:var(--surface); border-left:2px solid var(--accent-line); border-radius:6px;
}
.pg-body .art-note{ margin-top:1.6rem; background:var(--surface); }

/* no script: show every panel, drop the tab rail */
.pg-wrap.pg-plain{ grid-template-columns:1fr; }
.pg-wrap.pg-plain .pg-tabs{ display:none; }

@media (max-width:820px){
    .pg-wrap{ grid-template-columns:1fr; }
    .pg-tabs{
        position:static; grid-auto-flow:column; grid-auto-columns:max-content;
        overflow-x:auto; padding-bottom:.35rem; scrollbar-width:none;
    }
    .pg-tabs::-webkit-scrollbar{ display:none; }
    .pg-tab{ white-space:nowrap; }
    .pg-body{ padding:1.2rem 1.15rem 1.4rem; }
}
/* /HSX:PROMPT-GUIDE */

/* ══════════════════════════════════════════════════════════════════════════
   HSX:TRADEMARKS — attribution line on app pages, register on About
   ══════════════════════════════════════════════════════════════════════ */
.app-tm{
    margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--line);
    font-size:.78rem; line-height:1.65; color:var(--ink-faint); max-width:78ch;
}
.tm-sub{
    font-family:var(--f-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--accent); margin:1.6rem 0 .4rem;
}
.tm-sub:first-of-type{ margin-top:.4rem; }
.tm-lead{ margin:0 0 1rem; font-size:.92rem; color:var(--ink-soft); max-width:70ch; }
.tm-list{
    list-style:none; margin:0 0 .6rem; padding:0;
    display:grid; gap:.45rem; grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
}
.tm-list--wide{ grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.tm-list li{
    font-family:var(--f-mono); font-size:.82rem; color:var(--ink);
    padding:.5rem .7rem; background:var(--card-bg);
    border:1px solid var(--card-border); border-radius:8px;
}
.tm-note{
    margin-top:1.4rem; padding:1rem 1.15rem; font-size:.86rem; line-height:1.7;
    color:var(--ink-soft); background:var(--surface);
    border:1px solid var(--card-border); border-radius:var(--r-md); max-width:80ch;
}
.tm-note strong{ color:var(--ink); }
/* /HSX:TRADEMARKS */

/* HSX:IMAGE-LICENCE — terms behind the license field on the gallery images */
.gal-licence{
    margin:1.6rem auto 0; max-width:70ch; padding:1.1rem 1.3rem;
    background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--r-md);
}
.gal-licence h3{
    font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--ink-faint); margin:0 0 .6rem;
}
.gal-licence p{ margin:0 0 .6rem; font-size:.86rem; line-height:1.65; color:var(--ink-soft); }
.gal-licence p:last-child{ margin-bottom:0; }
.gal-licence strong{ color:var(--ink); }
.gal-licence a{ color:var(--accent); text-decoration:none; }
.gal-licence a:hover{ text-decoration:underline; }
/* /HSX:IMAGE-LICENCE */

/* ═══════════════════════════════════════════════════════════════════════
   HSX:CATEGORY-HUB — the per-category landing pages under apps/
   Built from the same tokens as the app pages so a hub reads as part of
   the same catalogue rather than a bolted-on section.
   ═══════════════════════════════════════════════════════════════════ */
.cat-grid{
    display:grid; gap:.85rem;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.cat-app{
    display:flex; flex-direction:column; gap:.4rem;
    text-decoration:none; padding:1.15rem 1.25rem;
    background:var(--card-bg); border:1px solid var(--card-border);
    border-radius:var(--r-md);
    clip-path:polygon(0 12px,12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
    transition:border-color var(--t-fast) var(--ease),
               transform var(--t-fast) var(--ease),
               background var(--t-fast) var(--ease);
}
.cat-app:hover,.cat-app:focus-visible{
    border-color:var(--accent-line); background:var(--surface-2); transform:translateY(-3px);
}
.cat-app-h{ display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; flex-wrap:wrap; }
.cat-app-n{ font-family:var(--f-display); font-weight:600; color:var(--ink); }
.cat-app-p{
    font-family:var(--f-mono); font-size:.7rem; letter-spacing:.04em;
    text-transform:uppercase; color:var(--ink-faint); white-space:nowrap;
}
.cat-app-t{ font-size:.9rem; color:var(--ink-soft); line-height:1.55; margin-bottom:.25rem; }
.cat-app-f{
    display:block; position:relative; padding-left:1rem;
    font-size:.82rem; color:var(--ink-faint); line-height:1.5;
}
.cat-app-f::before{
    content:""; position:absolute; left:0; top:.6em;
    width:5px; height:5px; border-radius:50%; background:var(--mint); opacity:.7;
}
.cat-app-go{
    margin-top:.55rem; font-family:var(--f-mono); font-size:.75rem;
    letter-spacing:.05em; color:var(--accent);
}
.cat-app--soon{ opacity:.82; }
.cat-app--soon .cat-app-p{ color:var(--gold); }
.cat-app--soon .cat-app-f::before{ background:var(--gold); }

.cat-check{ display:grid; gap:.75rem; }
.cat-check-row{
    padding:1rem 1.15rem;
    background:var(--card-bg); border:1px solid var(--card-border);
    border-left:2px solid var(--accent-line); border-radius:var(--r-md);
}
.cat-check-row dt{
    font-family:var(--f-display); font-weight:600; color:var(--ink);
    margin-bottom:.3rem; font-size:.98rem;
}
.cat-check-row dd{ margin:0; color:var(--ink-soft); font-size:.9rem; line-height:1.6; max-width:78ch; }

.cat-siblings{
    display:grid; gap:.7rem;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.cat-sib{
    display:block; text-decoration:none; padding:.9rem 1rem;
    background:var(--surface-2); border:1px solid var(--card-border);
    border-radius:var(--r-md);
    transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.cat-sib:hover,.cat-sib:focus-visible{ border-color:var(--accent-line); background:var(--card-bg); }
.cat-sib-n{ display:block; font-family:var(--f-display); font-weight:600; color:var(--ink); font-size:.95rem; }
.cat-sib-t{ display:block; font-size:.8rem; color:var(--ink-faint); line-height:1.45; margin-top:.2rem; }

/* the strip that sends the catalogue pages and the homepage into the hubs */
.cat-strip{
    display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center;
    margin:0 0 1.6rem;
}
.cat-strip a{
    display:inline-block; text-decoration:none;
    padding:.5rem .95rem; font-family:var(--f-mono); font-size:.78rem;
    letter-spacing:.03em; color:var(--ink-soft);
    background:var(--surface-2); border:1px solid var(--card-border);
    border-radius:999px;
    transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cat-strip a:hover,.cat-strip a:focus-visible{ border-color:var(--accent-line); color:var(--accent); }

/* ═══════════════════════════════════════════════════════════════════════
   HSX:HERO-TILES — Microsoft Store artwork on the catalogue cards.
   .app-tile is the gradient border layer and .tile-in is the card surface,
   so the artwork lives inside .tile-in and cancels its horizontal padding.
   The notched clip-path, the hover lift and the animated per-app logo all
   stay exactly as they were; the logo simply lifts onto the artwork.
   An app with no artwork keeps the original card, so a partial rollout
   reads as deliberate rather than broken.
   ═══════════════════════════════════════════════════════════════════ */
.app-tile--hero .tile-in{ padding-top:0; display:flex; flex-direction:column; }
.tile-hero{
    position:relative; z-index:0;
    margin:0 -.95rem .55rem;
    aspect-ratio:16/9; overflow:hidden;
    background:linear-gradient(135deg,rgba(199,165,247,.14),rgba(159,232,214,.07));
}
.tile-hero img{
    width:100%; height:100%; object-fit:cover; display:block;
    transform:scale(1.02);
    transition:transform .55s var(--ease), filter .55s var(--ease);
    filter:saturate(.92) contrast(1.02) brightness(.94);
}
.app-tile--hero:hover .tile-hero img,
.app-tile--hero:focus-within .tile-hero img{
    transform:scale(1.07); filter:saturate(1.04) contrast(1.04) brightness(1);
}
/* the artwork fades into the card so the name never fights it */
.tile-hero-scrim{
    position:absolute; inset:auto 0 -1px 0; height:66%; pointer-events:none;
    background:linear-gradient(to top,#0c0b13 4%,rgba(12,11,19,.72) 42%,rgba(12,11,19,0));
}
.app-tile--hero .tile-top{ margin-top:-2.55rem; z-index:2; }
.app-tile--hero .app-logo{
    background:rgba(11,10,16,.82);
    border-color:rgba(255,255,255,.2);
    backdrop-filter:blur(10px) saturate(1.3);
    -webkit-backdrop-filter:blur(10px) saturate(1.3);
    box-shadow:0 8px 20px -10px rgba(0,0,0,.95);
}
.app-tile--hero .tile-name{ text-shadow:0 2px 12px rgba(8,7,12,.9); }
.app-tile--hero .tile-tagline{ margin-top:.45rem; }
@media (prefers-reduced-motion:reduce){
  .tile-hero img{ transition:none; }
  .app-tile--hero:hover .tile-hero img{ transform:scale(1.02); }
}

/* the same artwork, smaller, on the category hub cards */
.cat-app-hero{
    display:block; position:relative; margin:-1.15rem -1.25rem .8rem;
    aspect-ratio:16/9; overflow:hidden;
    border-radius:var(--r-md) var(--r-md) 0 0;
    background:linear-gradient(135deg,rgba(199,165,247,.14),rgba(159,232,214,.07));
}
.cat-app-hero img{
    width:100%; height:100%; object-fit:cover; display:block;
    filter:saturate(.92) brightness(.92);
    transition:filter var(--t-fast) var(--ease);
}
.cat-app:hover .cat-app-hero img{ filter:saturate(1.03) brightness(1); }
.cat-app-hero::after{
    content:""; position:absolute; inset:auto 0 -1px 0; height:52%; pointer-events:none;
    background:linear-gradient(to top,var(--card-bg),rgba(12,11,19,.35),transparent);
}

/* the hero at the top of an individual application page */
.app-hero-art{
    /* width-capped rather than height-capped: an aspect-ratio box with a
       max-height shrinks its own width and stops filling the column */
    position:relative; width:100%; max-width:760px; margin:0 auto 1.8rem;
    aspect-ratio:16/9;
    overflow:hidden; border-radius:var(--r-lg);
    border:1px solid var(--card-border);
    clip-path:polygon(0 16px,16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);
    background:linear-gradient(135deg,rgba(199,165,247,.14),rgba(159,232,214,.07));
}
.app-hero-art img{ width:100%; height:100%; object-fit:cover; display:block; }
.app-hero-art::after{
    content:""; position:absolute; inset:auto 0 -1px 0; height:40%; pointer-events:none;
    background:linear-gradient(to top,rgba(8,7,12,.85),transparent);
}