/* ═══════════════════════════════════════════════════════════════════════
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: #8c899e; /* 5.91:1 on the page background - WCAG AA.
#6d6a81 measured 3.85:1 and failed for body text. */
--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 ![]()
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 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
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:.62; }
.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));
}
/* The colour grade is baked into the WebP at build time rather than applied
here: a CSS filter on 61 images is 61 filter passes on every paint, and
animating one repaints the image on every frame of the hover. Transform is
composited on the GPU and is the only thing that moves. */
.tile-hero img{
width:100%; height:100%; object-fit:cover; display:block;
transform:scale(1.02);
/* deliberately no will-change: it would promote all 61 images to permanent
compositing layers, which is the problem this change exists to remove.
A transform transition is composited on the GPU without it. */
transition:transform .55s var(--ease);
}
.app-tile--hero:hover .tile-hero img,
.app-tile--hero:focus-within .tile-hero img{ transform:scale(1.07); }
/* 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; }
/* A catalogue page is 72 cards tall. Skip painting the ones nowhere near the
viewport; the intrinsic size keeps the scrollbar length honest so nothing
jumps as they come into view. */
.app-tile{ content-visibility:auto; contain-intrinsic-size:auto 340px; }
/* No backdrop-filter here on purpose. This rule matches once per card, so a
catalogue page carried 61 of them: 61 separate compositing layers, each
re-blurring its backdrop whenever anything above it repaints - which, with a
cursor effect on the page, is constantly. The logo sits on an opaque scrim,
so a solid fill is visually identical and costs nothing. */
.app-tile--hero .app-logo{
background:#12111b;
border-color:rgba(255,255,255,.2);
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;
}
.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);
}
/* ═══════════════════════════════════════════════════════════════════════
HSX:GPU-BADGE — minimum graphics requirement.
Buyers of GPU-bound software ask one question before anything else: will
this run on my machine. Answer it in the hero, compactly, and only where
there is a real published figure to state.
═══════════════════════════════════════════════════════════════════ */
.gpu-badge{
display:inline-flex; align-items:center; gap:.55rem;
margin:1.15rem auto 0; padding:.5rem .95rem .5rem .75rem;
background:linear-gradient(140deg,rgba(199,165,247,.11),rgba(159,232,214,.05));
border:1px solid var(--card-border);
border-radius:var(--r-pill);
backdrop-filter:blur(10px) saturate(1.3);
-webkit-backdrop-filter:blur(10px) saturate(1.3);
font-family:var(--f-mono); font-size:.7rem; letter-spacing:.06em;
line-height:1; white-space:nowrap;
}
.gpu-badge-ico{
display:grid; place-items:center; width:26px; height:26px; flex:none;
border-radius:50%; color:var(--accent);
background:rgba(199,165,247,.13);
border:1px solid rgba(199,165,247,.26);
}
.gpu-badge-k{ text-transform:uppercase; color:var(--ink-faint); font-size:.62rem; letter-spacing:.14em; }
.gpu-badge-v{ color:var(--ink); font-weight:500; }
.gpu-badge-v::before{
content:""; display:inline-block; width:1px; height:.85em;
background:var(--card-border); margin:0 .6rem -.08em 0; vertical-align:baseline;
}
@media (max-width:520px){
.gpu-badge{ white-space:normal; text-align:left; }
.gpu-badge-v::before{ display:none; }
}
/* ═══════════════════════════════════════════════════════════════════════
HSX:COMPARISON — the local-first case, as a table rather than a claim.
A real with proper row and column headers, so it reads correctly
to a screen reader and can be understood by a crawler as structured
comparison rather than decorative markup.
═══════════════════════════════════════════════════════════════════ */
.cmp-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.cmp{
width:100%; border-collapse:separate; border-spacing:0;
min-width:640px; font-size:.9rem; text-align:left;
}
.cmp th, .cmp td{
padding:1rem 1.1rem; vertical-align:top;
border-bottom:1px solid var(--card-border);
}
.cmp thead th{
font-family:var(--f-mono); font-size:.66rem; letter-spacing:.15em;
text-transform:uppercase; color:var(--ink-faint); font-weight:400;
border-bottom:1px solid var(--accent-line);
}
.cmp tbody th{
font-family:var(--f-display); font-weight:600; color:var(--ink);
font-size:.88rem; width:26%;
}
.cmp td{ color:var(--ink-soft); line-height:1.6; }
.cmp .cmp-us{
background:linear-gradient(180deg,rgba(199,165,247,.09),rgba(199,165,247,.03));
color:var(--ink);
}
.cmp thead .cmp-us{ color:var(--accent); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td{ border-bottom:0; }
.cmp-yes{
display:inline-block; width:7px; height:7px; border-radius:50%;
background:var(--mint); margin:0 .55rem .12em 0; flex:none;
}
.cmp-foot{
margin-top:1.1rem; font-family:var(--f-mono); font-size:.75rem;
color:var(--ink-faint); text-align:center;
}
.cmp-foot a{ color:var(--ink-soft); }
.visually-hidden{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* the native Store link is a third, quieter option beside the two main CTAs */
.store-native[hidden]{ display:none !important; }
.btn.store-native{
font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em;
}
/* ═══════════════════════════════════════════════════════════════════════
HSX:PILLAR-NAV — section navigation for the long AI Studio page.
Sticks below the main header once scrolled past, and marks the section
currently in view. Purely additive: with JavaScript off it is still a
working list of in-page links.
═══════════════════════════════════════════════════════════════════ */
.pillar-nav{
position:sticky; top:84px; z-index:40;
display:flex; gap:.25rem; flex-wrap:nowrap; overflow-x:auto;
scrollbar-width:none;
margin:0 0 2rem; padding:.4rem;
background:rgba(13,12,20,.82);
border:1px solid var(--card-border);
border-radius:var(--r-pill);
backdrop-filter:blur(16px) saturate(1.4);
-webkit-backdrop-filter:blur(16px) saturate(1.4);
box-shadow:0 18px 40px -28px rgba(0,0,0,.9);
}
.pillar-nav::-webkit-scrollbar{ display:none; }
.pillar-nav a{
flex:0 0 auto; text-decoration:none; white-space:nowrap;
padding:.55rem 1rem; border-radius:var(--r-pill);
font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em;
color:var(--ink-soft);
transition:color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.pillar-nav a:hover,.pillar-nav a:focus-visible{ color:var(--ink); background:var(--surface-2); }
.pillar-nav a[aria-current="true"]{
color:var(--ink); background:var(--accent-soft);
box-shadow:inset 0 0 0 1px var(--accent-line);
}
.pillar-nav .pillar-nav-cta{ margin-left:auto; color:var(--gold); }
.pillar-nav .pillar-nav-cta:hover{ color:var(--ink); }
@media (max-width:760px){ .pillar-nav{ top:74px; } .pillar-nav .pillar-nav-cta{ margin-left:0; } }
/* in-page jumps must not land under the sticky bars */
:target{ scroll-margin-top:150px; }