/* ============================================================
AYASC — Design System v3
A direct line to the right person for your business problem.
============================================================ */
/* Fonts are loaded via tags in each page's :
Sora (display) + Inter (body). Two families on purpose — Sora
carries the big, round, premium headline feel; Inter does
everything else, including small labels. */
/* ---------- Tokens: dark (default) + light, toggled via [data-theme] on ---------- */
:root, [data-theme="dark"]{
color-scheme: dark;
--ink: #030303;
--ink-2: #000000;
--surface: #121212;
--surface-2: #1a1a1a;
--surface-3: #222222;
--line: rgba(255,255,255,0.08);
--line-strong:rgba(255,255,255,0.16);
--signal: #00e5ff;
--signal-dim: #2b7c8c;
--signal-soft:rgba(0,229,255,0.12);
--violet: #8b7bff;
--violet-soft:rgba(139,123,255,0.16);
--ember: #ff9159;
--ember-soft: rgba(255,145,89,0.14);
--ember-dim: #c96c3d;
--good: #6ee7a8;
--warn: #ffcf6e;
--danger: #ff7a7a;
--paper: #f5f5f5;
--paper-dim: #b8b8b8;
--mist: #8a8a8a;
--mist-2: #5c5c5c;
--glass-bg: rgba(18,18,18,0.55);
--glass-bg-soft: rgba(18,18,18,0.32);
--glass-border: rgba(255,255,255,0.10);
--glass-sheen: rgba(255,255,255,0.35);
--grid-line: rgba(255,255,255,0.06);
--btn-ink: #04151b;
--logo-stage-a: #1a1a1a;
--logo-stage-b: #000000;
}
[data-theme="light"]{
color-scheme: light;
--ink: #f3f6fb;
--ink-2: #e9eef6;
--surface: #ffffff;
--surface-2: #f5f8fc;
--surface-3: #eef2f8;
--line: rgba(30,50,90,0.12);
--line-strong:rgba(30,50,90,0.24);
--signal: #0679a8;
--signal-dim: #0a5b7d;
--signal-soft:rgba(6,121,168,0.10);
--violet: #6552d6;
--violet-soft:rgba(101,82,214,0.10);
--ember: #c85a20;
--ember-soft: rgba(200,90,32,0.12);
--ember-dim: #a3481a;
--good: #0f7a4e;
--warn: #93630a;
--danger: #b8342d;
--paper: #0b1926;
--paper-dim: #2c3e4d;
--mist: #526576;
--mist-2: #71879a;
--glass-bg: rgba(255,255,255,0.7);
--glass-bg-soft: rgba(255,255,255,0.5);
--glass-border: rgba(20,40,70,0.10);
--glass-sheen: rgba(255,255,255,0.95);
--grid-line: rgba(6,121,168,0.07);
--btn-ink: #ffffff;
--logo-stage-a: #10233b;
--logo-stage-b: #050b16;
}
/* Black/white variant — light background like the default light theme,
but every accent that's currently blue (buttons, links, badges, the
glow) goes near-black/charcoal instead. Same structure, genuinely
monochrome rather than a colour swap. Test with data-theme="bw". */
[data-theme="bw"]{
color-scheme: light;
--ink: #ffffff;
--ink-2: #f7f7f7;
--surface: #ffffff;
--surface-2: #f5f5f5;
--surface-3: #ececec;
--line: rgba(0,0,0,0.10);
--line-strong:rgba(0,0,0,0.20);
--signal: #141414;
--signal-dim: #3a3a3a;
--signal-soft:rgba(20,20,20,0.07);
--violet: #4a4a4a;
--violet-soft:rgba(74,74,74,0.08);
--ember: #b5451c;
--ember-soft: rgba(181,69,28,0.12);
--ember-dim: #8f3715;
--good: #0f7a4e;
--warn: #93630a;
--danger: #b8342d;
--paper: #0a0a0a;
--paper-dim: #2b2b2b;
--mist: #5c5c5c;
--mist-2: #7a7a7a;
--glass-bg: rgba(255,255,255,0.72);
--glass-bg-soft: rgba(255,255,255,0.5);
--glass-border: rgba(0,0,0,0.10);
--glass-sheen: rgba(255,255,255,0.95);
--grid-line: rgba(0,0,0,0.06);
--btn-ink: #ffffff;
--logo-stage-a: #1a1a1a;
--logo-stage-b: #050505;
}
:root{
--font-display:'Sora', 'Inter', sans-serif;
--font-body: 'Inter', -apple-system, sans-serif;
--font-mono: 'IBM Plex Mono', 'SFMono-Regular', monospace;
--radius-s: 12px;
--radius-m: 18px;
--radius-l: 28px;
--radius-xl: 40px;
--radius-full: 999px;
--container: 1180px;
--gutter: clamp(20px, 5vw, 48px);
--shadow-card: 0 30px 70px -34px rgba(0,0,0,0.5);
--ease: cubic-bezier(.16,.84,.24,1);
}
/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; max-width:100%; }
body{
margin:0;
background:var(--ink);
color:var(--paper);
font-family:var(--font-body);
font-size:16px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
transition:background .28s ease, color .28s ease; /* smooth in-place crossfade on theme switch, page stays visible throughout */
transition:background .35s ease, color .35s ease;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
input, select, textarea{ font-family:inherit; font-size:1rem; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; margin:0; letter-spacing:-0.015em; color:var(--paper); line-height:1.08; }
p{ margin:0; }
hr{ border:none; border-top:1px solid var(--line); }
:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; border-radius:4px; }
@media (prefers-reduced-motion: reduce){
*{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}
/* ---------- Layout ---------- */
.container{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
/* overflow:hidden keeps the decorative .glow-blob / .orbit-ring elements
(deliberately positioned partly outside their section) from widening
the page and creating a horizontal scrollbar on narrow screens. */
.section{ padding:130px 0; position:relative; overflow:hidden; }
.section--tight{ padding:80px 0; position:relative; overflow:hidden; }
@media (max-width:768px){
.section{ padding:80px 0; }
.section--tight{ padding:52px 0; }
}
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-title{ font-size:clamp(2rem, 1.4rem + 2.4vw, 3rem); line-height:1.08; }
.section-lede{ margin-top:18px; color:var(--mist); font-size:1.12rem; line-height:1.65; }
.eyebrow{
display:inline-flex; align-items:center; gap:8px;
font-family:var(--font-body); font-weight:600; font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase;
color:var(--signal); margin-bottom:18px;
}
.eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--signal); box-shadow:0 0 10px var(--signal); }
.eyebrow.ember{ color:var(--ember); }
.eyebrow.ember::before{ background:var(--ember); box-shadow:0 0 10px var(--ember); }
.eyebrow.violet{ color:var(--violet); }
.eyebrow.violet::before{ background:var(--violet); box-shadow:0 0 10px var(--violet); }
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:920px){ .grid-3{ grid-template-columns:repeat(2,1fr); } .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; } }
/* ---------- Buttons ---------- */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
padding:0.95rem 1.8rem;
border-radius:var(--radius-full);
font-family:var(--font-body); font-weight:600; font-size:0.95rem;
border:1px solid transparent;
transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
white-space:nowrap;
}
.btn:active{ transform:translateY(1px) scale(.98); }
.btn-primary{ position:relative; overflow:hidden; background:linear-gradient(135deg, var(--signal), var(--violet)); color:var(--btn-ink); box-shadow:0 16px 34px -14px rgba(0,229,255,0.5); }
.btn-primary::after{
content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
background:linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
transform:skewX(-20deg); pointer-events:none;
animation:ayascBtnShimmer 3.4s ease-in-out infinite;
}
@keyframes ayascBtnShimmer{ 0%, 25%{ left:-60%; } 75%, 100%{ left:130%; } }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 22px 40px -14px rgba(0,229,255,0.65); }
.btn-ember{ background:var(--ember); color:#2a1204; box-shadow:0 16px 34px -14px rgba(255,145,89,0.5); }
.btn-ember:hover{ transform:translateY(-2px); box-shadow:0 22px 40px -14px rgba(255,145,89,0.65); }
.btn-outline{ background:transparent; border-color:var(--line-strong); color:var(--paper); }
.btn-outline:hover{ border-color:var(--signal); color:var(--signal); }
.btn-ghost{ background:transparent; color:var(--paper-dim); padding:0.7rem 1rem; }
.btn-ghost:hover{ color:var(--signal); }
.btn-block{ width:100%; }
.btn-sm{ padding:0.62rem 1.2rem; font-size:0.85rem; }
.btn[disabled]{ opacity:0.45; pointer-events:none; }
.btn-icon{ display:inline-flex; align-items:center; justify-content:center; width:2.6rem; height:2.6rem; border-radius:var(--radius-full); background:var(--surface-2); border:1px solid var(--line); color:var(--paper-dim); }
.btn-icon:hover{ color:var(--signal); border-color:var(--signal); }
.btn-icon.call{ background:var(--good); color:#04180d; border-color:transparent; }
.btn-icon.call:hover{ color:#04180d; filter:brightness(1.08); }
/* ---------- Badges / pills ---------- */
.badge{
display:inline-flex; align-items:center; gap:6px;
font-family:var(--font-body); font-weight:600; font-size:0.74rem; letter-spacing:0.03em;
padding:0.34rem 0.8rem; border-radius:var(--radius-full);
background:var(--signal-soft); color:var(--signal); border:1px solid rgba(0,229,255,0.25);
}
.badge.ember{ background:var(--ember-soft); color:var(--ember); border-color:rgba(255,145,89,0.3); }
.badge.mist{ background:rgba(140,160,180,0.14); color:var(--mist); border-color:var(--line); }
.badge.good{ background:rgba(110,231,168,0.14); color:var(--good); border-color:rgba(110,231,168,0.3); }
/* ---------- Nav ---------- */
.nav{ position:fixed; top:14px; left:0; right:0; z-index:200; display:flex; justify-content:center; transition:top .4s var(--ease); }
.nav-inner{
display:flex; align-items:center; justify-content:space-between; gap:20px;
padding:10px 12px 10px 22px; width:min(1180px, calc(100% - 32px));
background:var(--glass-bg); border:1px solid var(--glass-border);
backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
border-radius:var(--radius-full);
box-shadow:0 20px 50px -30px rgba(0,0,0,0.5);
transition:background .3s, box-shadow .3s, padding .35s var(--ease), width .35s var(--ease), transform .35s var(--ease);
}
/* Instagram-style collapsing bar: shrinks scrolling down, grows back the
instant you scroll up even slightly (see the scroll listener in main.js) */
.nav.nav-compact .nav-inner{ padding:6px 10px 6px 18px; width:min(920px, calc(100% - 32px)); box-shadow:0 14px 34px -22px rgba(0,0,0,0.6); }
.nav.nav-compact .brand img{ width:24px; height:24px; }
.nav.nav-compact .brand-word{ font-size:1.02rem; }
.nav.nav-compact .nav-links a{ padding:0.45rem 0.8rem; font-size:0.8rem; }
.nav.nav-compact .btn{ padding:0.6rem 1.2rem; font-size:0.85rem; }
.nav.nav-compact .theme-toggle{ width:2.2rem; height:2.2rem; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ width:32px; height:32px; transition:width .35s var(--ease), height .35s var(--ease); }
.brand-word{ font-family:var(--font-display); font-weight:700; font-size:1.22rem; letter-spacing:-0.01em; transition:font-size .35s var(--ease); }
.brand-word span{ color:var(--signal); }
.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a{
font-family:var(--font-body); font-weight:600; font-size:0.86rem;
color:var(--mist); padding:0.6rem 1rem; border-radius:var(--radius-full);
transition:color .2s, background .2s, padding .35s var(--ease), font-size .35s var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color:var(--paper); background:var(--surface-2); }
.nav-actions{ display:flex; align-items:center; gap:8px; }
.nav-toggle{ display:none; background:transparent; border:1px solid var(--line); color:var(--paper); width:42px; height:42px; border-radius:var(--radius-full); align-items:center; justify-content:center; }
@media (max-width:900px){
.nav-links{ display:none; }
.nav-toggle{ display:flex; }
.nav-actions .btn-outline{ display:none; }
body.nav-open .nav-inner{ border-radius:28px; }
body.nav-open .nav-links{
display:flex; flex-direction:column; align-items:stretch; gap:2px;
position:absolute; top:calc(100% + 10px); left:0; right:0; padding:14px;
background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m);
box-shadow:0 24px 50px -20px rgba(0,0,0,0.6);
}
body.nav-open .nav-links a{ padding:0.85rem 0.9rem; }
}
/* ---------- Footer ---------- */
.footer{ background:var(--ink-2); border-top:1px solid var(--line); padding:90px 0 28px; overflow:hidden; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.footer-brand p{ color:var(--mist); margin-top:14px; max-width:320px; }
.footer h5{ font-family:var(--font-body); font-weight:700; font-size:0.8rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--paper-dim); margin-bottom:16px; }
.footer ul li{ margin-bottom:10px; color:var(--mist); display:flex; gap:8px; align-items:flex-start; font-size:0.92rem; }
.footer ul li i{ color:var(--signal); margin-top:3px; }
.footer ul a{ color:var(--mist); transition:color .2s; }
.footer ul a:hover{ color:var(--signal); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; margin-top:64px; padding-top:24px; border-top:1px solid var(--line); color:var(--mist-2); font-size:0.85rem; flex-wrap:wrap; gap:12px; }
.social-row{ display:flex; gap:10px; margin-top:18px; }
.social-row a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--paper-dim); transition:.2s; }
.social-row a:hover{ border-color:var(--signal); color:var(--signal); }
@media (max-width:920px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
/* ---------- Cards / glass ---------- */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l); padding:34px; box-shadow:var(--shadow-card); }
.card--flat{ box-shadow:none; }
.card--hover{ transition:transform .4s var(--ease), border-color .4s; }
.card--hover:hover{ transform:translateY(-6px); border-color:var(--line-strong); }
.glass-panel{
background:var(--glass-bg);
backdrop-filter:blur(22px) saturate(160%);
-webkit-backdrop-filter:blur(22px) saturate(160%);
border:1px solid var(--glass-border);
position:relative;
}
.glass-panel::before{
content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
background:linear-gradient(160deg, var(--glass-sheen), transparent 40%);
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor; mask-composite:exclude;
opacity:0.5; pointer-events:none;
}
.service-card{
background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-l);
padding:32px; display:flex; flex-direction:column; gap:14px;
backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
transition:transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.service-card:hover{ transform:translateY(-6px) scale(1.01); border-color:rgba(0,229,255,0.4); box-shadow:0 30px 60px -30px rgba(0,229,255,0.25); }
.service-card .icon{
width:52px; height:52px; border-radius:var(--radius-m); background:var(--signal-soft); color:var(--signal);
display:flex; align-items:center; justify-content:center; font-size:1.3rem;
animation:ayascIconPulse 5s ease-in-out infinite;
}
/* staggered so a grid of cards breathes asynchronously, not in lockstep */
.grid > *:nth-child(6n+1) .icon{ animation-delay:0s; }
.grid > *:nth-child(6n+2) .icon{ animation-delay:.5s; }
.grid > *:nth-child(6n+3) .icon{ animation-delay:1s; }
.grid > *:nth-child(6n+4) .icon{ animation-delay:1.5s; }
.grid > *:nth-child(6n+5) .icon{ animation-delay:2s; }
.grid > *:nth-child(6n+6) .icon{ animation-delay:2.5s; }
@keyframes ayascIconPulse{
0%, 100%{ box-shadow:0 0 0 0 var(--signal-soft); }
50%{ box-shadow:0 0 16px 6px var(--signal-soft); }
}
.service-card h3{ font-size:1.24rem; }
.service-card p{ color:var(--mist); font-size:0.95rem; line-height:1.6; }
.service-card ul{ margin-top:4px; display:flex; flex-direction:column; gap:8px; }
.service-card ul li{ font-size:0.87rem; color:var(--paper-dim); display:flex; gap:8px; align-items:flex-start; }
.service-card ul li i{ color:var(--signal); margin-top:3px; font-size:0.75rem; }
.service-card .card-actions{ margin-top:auto; display:flex; gap:10px; padding-top:8px; flex-wrap:wrap; }
.stat{ text-align:left; }
.stat b{ display:block; font-family:var(--font-display); font-size:2.5rem; color:var(--paper); }
.stat span{ color:var(--mist); font-size:0.88rem; }
/* ---------- 3D tilt (mouse-tracked, applied via main.js on [data-tilt]) ---------- */
[data-tilt]{ transform-style:preserve-3d; will-change:transform; transition:transform .12s ease-out; }
/* ---------- Signal graphic ---------- */
.signal-card{
background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--radius-l);
padding:28px; box-shadow:var(--shadow-card); position:relative; overflow:hidden;
backdrop-filter:blur(16px);
}
.signal-card::after{
content:''; position:absolute; inset:-40% -40% auto auto; width:320px; height:320px;
background:radial-gradient(circle, var(--signal-soft), transparent 70%);
pointer-events:none;
}
.signal-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; position:relative; z-index:1; }
.signal-node{ display:flex; flex-direction:column; align-items:center; gap:10px; width:110px; }
.signal-node > div{ text-align:center; }
.signal-node .dot{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:0.95rem; }
.signal-node.you .dot{ background:var(--surface-3); border:1px solid var(--line-strong); color:var(--paper); }
.signal-node.analyst .dot{ background:linear-gradient(145deg, var(--ember), #c96c3d); color:#2a1204; box-shadow:0 0 24px rgba(255,145,89,0.4); }
.signal-node small{ display:block; font-size:0.72rem; color:var(--mist); text-align:center; letter-spacing:.02em; margin-top:2px; }
.signal-node strong{ display:block; font-size:0.85rem; }
.signal-wire{ flex:1; position:relative; height:2px; background:linear-gradient(90deg, var(--surface-3), var(--signal), var(--ember)); border-radius:2px; overflow:visible; }
.signal-wire .pulse{ position:absolute; top:50%; left:0; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:var(--signal); box-shadow:0 0 12px var(--signal); animation:travel 2.6s linear infinite; }
@keyframes travel{ 0%{ left:0%; opacity:0;} 8%{opacity:1;} 92%{opacity:1;} 100%{ left:100%; opacity:0;} }
.signal-chat-preview{ margin-top:22px; display:flex; flex-direction:column; gap:8px; position:relative; z-index:1; }
.signal-chat-preview .msg{ max-width:78%; padding:10px 14px; border-radius:14px; font-size:0.85rem; line-height:1.4; }
.signal-chat-preview .msg.them{ background:var(--surface-3); align-self:flex-start; border-bottom-left-radius:4px; color:var(--paper-dim); }
.signal-chat-preview .msg.you{ background:var(--signal-soft); align-self:flex-end; border-bottom-right-radius:4px; color:var(--paper); border:1px solid rgba(0,229,255,0.25); }
/* connecting divider used between "how it works" steps */
.flow{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0; position:relative; }
.flow-step{ padding:0 28px; position:relative; }
.flow-step:first-child{ padding-left:0; }
.flow-step:last-child{ padding-right:0; }
.flow-step::before{ content:attr(data-n); font-family:var(--font-display); font-weight:700; font-size:0.85rem; color:var(--signal); border:1px solid var(--line-strong); width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.flow-step h4{ font-size:1.12rem; margin-bottom:10px; }
.flow-step p{ color:var(--mist); font-size:0.92rem; line-height:1.6; }
.flow-line{ position:absolute; top:17px; left:calc(100% - 14px); width:56px; height:1px; background:repeating-linear-gradient(90deg, var(--signal) 0 6px, transparent 6px 12px); overflow:hidden; }
.flow-line::after{
content:''; position:absolute; top:0; left:-20%; width:20%; height:100%;
background:linear-gradient(90deg, transparent, var(--paper), transparent);
animation:ayascFlowTravel 2.6s linear infinite;
}
@keyframes ayascFlowTravel{ 0%{ left:-20%; } 100%{ left:100%; } }
.flow-step:nth-child(2) .flow-line::after{ animation-delay:.5s; }
.flow-step:nth-child(3) .flow-line::after{ animation-delay:1s; }
.flow-step:last-child .flow-line{ display:none; }
@media (max-width:820px){
.flow{ grid-template-columns:1fr; gap:36px; }
.flow-step{ padding:0 !important; }
.flow-line{ display:none; }
}
/* ---------- Forms ---------- */
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:0.83rem; color:var(--paper-dim); margin-bottom:7px; font-weight:600; }
.field .hint{ display:block; font-size:0.78rem; color:var(--mist-2); margin-top:6px; }
.field .err{ display:none; font-size:0.78rem; color:var(--danger); margin-top:6px; }
.field.has-error .err{ display:block; }
.field.has-error input, .field.has-error select, .field.has-error textarea{ border-color:var(--danger) !important; }
.input, select.input, textarea.input{
width:100%; background:var(--surface-3); border:1px solid var(--line); color:var(--paper);
padding:0.9rem 1.1rem; border-radius:var(--radius-m); transition:border-color .2s, box-shadow .2s;
}
.input::placeholder{ color:var(--mist-2); }
.input:focus{ outline:none; border-color:var(--signal); box-shadow:0 0 0 3px var(--signal-soft); }
.input[readonly]{ opacity:0.65; cursor:not-allowed; }
textarea.input{ resize:vertical; min-height:110px; line-height:1.55; }
select.input{ appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.4rem; }
.input-row{ display:flex; align-items:stretch; gap:10px; }
.input-affix{ display:flex; align-items:center; padding:0 0.9rem; background:var(--surface-3); border:1px solid var(--line); border-radius:var(--radius-m); color:var(--mist); font-size:0.9rem; white-space:nowrap; }
.check-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.check-tile{ display:flex; align-items:center; gap:10px; padding:0.85rem 1rem; background:var(--surface-3); border:1px solid var(--line); border-radius:var(--radius-m); cursor:pointer; transition:border-color .2s, background .2s; font-size:0.9rem; }
.check-tile input{ accent-color:var(--signal); width:16px; height:16px; }
.check-tile:has(input:checked){ border-color:var(--signal); background:var(--signal-soft); }
@media (max-width:560px){ .check-grid{ grid-template-columns:1fr; } }
.pw-toggle{ position:relative; }
.pw-toggle button{ position:absolute; right:14px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--mist); font-size:0.76rem; font-weight:700; letter-spacing:.04em; }
.pw-strength{ display:flex; gap:5px; margin-top:8px; }
.pw-strength i{ height:4px; flex:1; border-radius:3px; background:var(--surface-3); }
.pw-strength.s1 i:nth-child(1){ background:var(--danger); }
.pw-strength.s2 i:nth-child(1), .pw-strength.s2 i:nth-child(2){ background:var(--warn); }
.pw-strength.s3 i{ background:var(--good); }
/* searchable dropdown (city / category) */
[data-search-select]{ position:relative; }
[data-search-select] [data-list]{
display:none; position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:20;
background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--radius-m);
max-height:230px; overflow-y:auto; box-shadow:0 20px 40px -18px rgba(0,0,0,0.5);
}
[data-search-select] [data-list].open{ display:block; }
[data-search-select] .ss-item{ padding:0.65rem 0.9rem; font-size:0.9rem; cursor:pointer; border-bottom:1px solid var(--line); }
[data-search-select] .ss-item:last-child{ border-bottom:none; }
[data-search-select] .ss-item:hover{ background:var(--signal-soft); color:var(--signal); }
[data-search-select] .ss-empty{ padding:0.7rem 0.9rem; font-size:0.85rem; color:var(--mist-2); }
/* code input for verification */
.code-row{ display:flex; gap:10px; justify-content:center; }
.code-row input{ width:52px; height:60px; text-align:center; font-family:var(--font-display); font-weight:700; font-size:1.4rem; background:var(--surface-3); border:1px solid var(--line); border-radius:var(--radius-m); color:var(--paper); }
.code-row input:focus{ outline:none; border-color:var(--signal); box-shadow:0 0 0 3px var(--signal-soft); }
@media (max-width:420px){ .code-row input{ width:44px; height:52px; font-size:1.15rem; } }
/* ---------- Auth / stepper shell ---------- */
.auth-shell{ min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
.auth-visual{ position:relative; background:radial-gradient(circle at 30% 20%, var(--surface-2), var(--ink-2) 65%); border-right:1px solid var(--line); padding:56px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
.auth-form-side{ padding:56px var(--gutter); display:flex; align-items:center; justify-content:center; }
.auth-form-wrap{ width:100%; max-width:480px; }
@media (max-width:980px){
.auth-shell{ grid-template-columns:1fr; }
.auth-visual{ display:none; }
.auth-form-side{ padding:48px 20px 60px; }
#mobile-brand{ display:flex !important; }
}
.stepper{ display:flex; gap:8px; margin-bottom:36px; }
.stepper i{ flex:1; height:4px; border-radius:3px; background:var(--surface-3); }
.stepper i.done{ background:var(--signal); }
.stepper i.active{ background:linear-gradient(90deg, var(--signal), var(--surface-3)); }
.step-label{ font-weight:700; font-size:0.76rem; letter-spacing:.05em; text-transform:uppercase; color:var(--mist); margin-bottom:8px; }
.step-panel{ display:none; }
.step-panel.active{ display:block; animation:fadeUp .45s var(--ease); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;} }
.step-actions{ display:flex; justify-content:space-between; align-items:center; margin-top:28px; gap:12px; }
/* ---------- Toast / demo banner ---------- */
.toast{
position:fixed; bottom:24px; right:24px; z-index:400; max-width:360px;
background:var(--glass-bg); border:1px solid var(--signal); border-radius:var(--radius-m);
backdrop-filter:blur(20px);
padding:16px 18px; box-shadow:0 24px 60px -20px rgba(0,0,0,0.5);
display:flex; gap:12px; align-items:flex-start;
transform:translateY(20px); opacity:0; pointer-events:none; transition:.35s var(--ease);
}
.toast.show{ transform:translateY(0); opacity:1; pointer-events:auto; }
.toast i{ color:var(--signal); margin-top:2px; }
.toast .t-title{ font-weight:700; font-size:0.9rem; margin-bottom:3px; }
.toast .t-body{ font-size:0.82rem; color:var(--mist); }
.toast .t-code{ font-family:var(--font-display); font-weight:700; color:var(--signal); font-size:1.1rem; letter-spacing:.1em; margin-top:6px; display:inline-block; }
.demo-banner{ background:var(--ember-soft); border:1px dashed rgba(255,145,89,0.5); color:var(--paper-dim); border-radius:var(--radius-m); padding:14px 18px; font-size:0.83rem; display:flex; gap:10px; align-items:flex-start; margin-bottom:24px; }
.demo-banner i{ color:var(--ember); margin-top:2px; }
.demo-banner b{ color:var(--ember); }
/* ---------- Modal ---------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(3,8,12,0.6); backdrop-filter:blur(6px); z-index:500; display:none; align-items:center; justify-content:center; padding:20px; }
.modal-overlay.show{ display:flex; }
.modal{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l); max-width:520px; width:100%; padding:32px; max-height:88vh; overflow-y:auto; }
.modal-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; }
.modal-close{ background:none; border:none; color:var(--mist); font-size:1.1rem; }
/* ---------- App shell (dashboard / messages) ---------- */
.app-shell{ display:grid; grid-template-columns:264px 1fr; min-height:100vh; }
.app-sidebar{ background:var(--ink-2); border-right:1px solid var(--line); padding:22px 16px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.app-sidebar .brand{ padding:8px 10px 26px; }
.side-nav{ display:flex; flex-direction:column; gap:3px; flex:1; }
.side-nav a{ display:flex; align-items:center; gap:12px; padding:0.75rem 0.9rem; border-radius:var(--radius-full); color:var(--mist); font-size:0.9rem; font-weight:600; }
.side-nav a i{ width:18px; text-align:center; color:var(--mist-2); }
.side-nav a:hover{ background:var(--surface-2); color:var(--paper); }
.side-nav a.active{ background:var(--signal-soft); color:var(--signal); }
.side-nav a.active i{ color:var(--signal); }
.side-foot{ border-top:1px solid var(--line); padding-top:14px; margin-top:14px; }
.side-account{ display:flex; align-items:center; gap:10px; padding:0.5rem; }
.avatar{ width:36px; height:36px; border-radius:50%; background:linear-gradient(145deg, var(--signal), var(--violet)); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; color:#04151b; font-size:0.85rem; flex-shrink:0; }
.avatar.lg{ width:56px; height:56px; font-size:1.2rem; }
.side-account small{ display:block; color:var(--mist-2); font-size:0.72rem; }
.app-main{ padding:36px var(--gutter) 60px; max-width:1100px; }
.app-topbar{ display:none; }
@media (max-width:920px){
.app-shell{ grid-template-columns:1fr; }
.app-sidebar{ position:fixed; left:0; top:0; bottom:0; width:264px; transform:translateX(-100%); transition:.3s var(--ease); z-index:300; }
body.side-open .app-sidebar{ transform:translateX(0); }
.app-topbar{ display:flex; align-items:center; justify-content:space-between; padding:16px var(--gutter); border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--ink); z-index:100; }
.app-main{ padding:28px 20px 60px; }
}
.page-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:30px; gap:16px; flex-wrap:wrap; }
.page-head h1{ font-size:1.95rem; }
.page-head p{ color:var(--mist); margin-top:6px; }
.analyst-card{ display:flex; gap:18px; align-items:center; }
.analyst-card .meta strong{ display:block; font-size:1.05rem; }
.analyst-card .meta span{ color:var(--mist); font-size:0.85rem; }
.analyst-card .meta .badge{ margin-top:8px; }
.timeline{ display:flex; flex-direction:column; gap:0; }
.timeline .t-item{ display:flex; gap:16px; padding-bottom:26px; position:relative; }
.timeline .t-item::before{ content:''; position:absolute; left:9px; top:24px; bottom:0; width:1px; background:var(--line); }
.timeline .t-item:last-child::before{ display:none; }
.timeline .t-dot{ width:20px; height:20px; border-radius:50%; border:2px solid var(--line-strong); flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--ink); z-index:1; }
.timeline .t-item.done .t-dot{ background:var(--signal); border-color:var(--signal); }
.timeline .t-item.done .t-dot::after{ content:'\f00c'; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:0.5rem; color:#04151b; }
.timeline .t-body strong{ display:block; font-size:0.92rem; }
.timeline .t-body span{ color:var(--mist); font-size:0.82rem; }
/* ---------- Editable profile fields ---------- */
.kv-edit{ display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; }
.kv-edit .field{ margin-bottom:0; }
@media (max-width:560px){ .kv-edit{ grid-template-columns:1fr; } }
/* ---------- Chat ---------- */
.chat-shell{ display:grid; grid-template-columns:300px 1fr; border:1px solid var(--line); border-radius:var(--radius-l); overflow:hidden; height:calc(100vh - 180px); min-height:520px; background:var(--surface); }
.chat-list{ border-right:1px solid var(--line); overflow-y:auto; background:var(--ink-2); min-height:0; }
.chat-list-head{ padding:18px 18px 10px; }
.chat-list-head input{ width:100%; }
.chat-item{ display:flex; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .2s; }
.chat-item:hover{ background:var(--surface-2); }
.chat-item.active{ background:var(--signal-soft); border-left:2px solid var(--signal); }
.chat-item .meta{ flex:1; min-width:0; }
.chat-item .meta .row1{ display:flex; justify-content:space-between; gap:6px; }
.chat-item .meta strong{ font-size:0.9rem; }
.chat-item .meta small{ color:var(--mist-2); font-size:0.72rem; }
.chat-item .meta p{ color:var(--mist); font-size:0.8rem; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-item .dot-online{ width:8px; height:8px; border-radius:50%; background:var(--good); box-shadow:0 0 6px var(--good); flex-shrink:0; margin-top:5px; }
.chat-thread{ display:flex; flex-direction:column; min-width:0; min-height:0; }
.chat-thread-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 22px; border-bottom:1px solid var(--line); gap:12px; }
.chat-thread-head .who{ display:flex; align-items:center; gap:12px; min-width:0; }
.chat-thread-head .who small{ display:block; color:var(--mist); font-size:0.78rem; }
.chat-thread-head .flags{ display:flex; gap:8px; align-items:center; flex-shrink:0; }
.chat-body{ flex:1; overflow-y:auto; padding:22px; display:flex; flex-direction:column; gap:14px; min-height:0; }
.chat-day{ text-align:center; font-size:0.72rem; color:var(--mist-2); text-transform:uppercase; letter-spacing:.06em; margin:6px 0; }
.bubble-row{ display:flex; gap:10px; max-width:74%; }
.bubble-row.mine{ align-self:flex-end; flex-direction:row-reverse; }
.bubble{ background:var(--surface-3); padding:12px 16px; border-radius:18px 18px 18px 4px; font-size:0.92rem; line-height:1.55; }
.bubble-row.mine .bubble{ background:var(--signal-soft); border:1px solid rgba(0,229,255,0.25); border-radius:18px 18px 4px 18px; }
.bubble-time{ display:block; font-size:0.68rem; color:var(--mist-2); margin-top:6px; }
.attach-card{ display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); padding:10px 12px; border-radius:14px; margin-top:6px; }
.attach-card i.file-ic{ width:34px; height:34px; border-radius:10px; background:var(--surface-3); display:flex; align-items:center; justify-content:center; color:var(--signal); flex-shrink:0; }
.attach-card .a-meta{ min-width:0; flex:1; }
.attach-card .a-meta strong{ display:block; font-size:0.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.attach-card .a-meta span{ font-size:0.7rem; color:var(--mist-2); }
.attach-card .locked{ color:var(--mist-2); font-size:0.8rem; flex-shrink:0; }
.chat-composer{ border-top:1px solid var(--line); padding:14px 18px; }
.composer-attachments{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.composer-chip{ display:flex; align-items:center; gap:8px; background:var(--surface-3); border:1px solid var(--line); border-radius:var(--radius-full); padding:6px 10px 6px 12px; font-size:0.78rem; }
.composer-chip button{ background:none; border:none; color:var(--mist); font-size:0.8rem; }
.composer-row{ display:flex; align-items:flex-end; gap:10px; }
.composer-row textarea{ flex:1; resize:none; max-height:120px; }
.upload-hint{ font-size:0.72rem; color:var(--mist-2); margin-top:8px; }
.chat-list-toggle{ display:none; }
@media (max-width:820px){
.chat-shell{ grid-template-columns:1fr; height:auto; }
.chat-list{ display:none; }
.chat-list.show{ display:block; height:340px; }
.chat-thread{ height:70vh; }
.chat-list-toggle{ display:inline-flex; }
.chat-thread-head{ padding:14px 16px; }
.chat-thread-head .who small{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; }
.bubble-row{ max-width:88%; }
}
/* ---- Chat: locked channel state (scrollable — fixes the cut-off bug) ---- */
.chat-item.locked{ opacity:0.62; }
.chat-item .lock-badge{ font-size:0.68rem; color:var(--mist-2); }
.unlock-panel{ padding:26px 22px 34px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; flex:1; overflow-y:auto; min-height:0; }
.unlock-panel .spacer{ flex:1; min-height:8px; }
.unlock-panel i.big{ font-size:2rem; color:var(--mist-2); margin-top:12px; }
.unlock-panel h4{ font-size:1.15rem; }
.unlock-panel p{ color:var(--mist); font-size:0.9rem; max-width:360px; }
.unlock-options{ display:flex; flex-direction:column; gap:8px; width:100%; max-width:380px; margin-top:6px; }
.unlock-options button{
text-align:left; padding:0.85rem 1.1rem; border-radius:var(--radius-m);
background:var(--surface-3); border:1px solid var(--line); color:var(--paper);
font-size:0.88rem; transition:border-color .2s, background .2s;
}
.unlock-options button:hover{ border-color:var(--signal); background:var(--signal-soft); }
/* ---- Floating chat widget (portal pages) ---- */
.ayasc-fab{
position:fixed; right:24px; bottom:24px; z-index:350;
width:58px; height:58px; border-radius:50%;
background:linear-gradient(135deg, var(--signal), var(--violet)); color:var(--btn-ink);
display:flex; align-items:center; justify-content:center;
font-size:1.4rem; border:none; cursor:pointer;
box-shadow:0 14px 34px -10px rgba(0,229,255,0.55);
transition:transform .25s var(--ease), background .25s, box-shadow .25s;
}
.ayasc-fab:hover{ transform:translateY(-3px); }
.ayasc-fab.has-alert{
background:var(--danger);
box-shadow:0 14px 34px -8px rgba(255,90,90,0.6);
animation:ayascFabPulse 1.6s ease-in-out infinite;
}
@keyframes ayascFabPulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.08);} }
.ayasc-fab .dot{
position:absolute; top:-2px; right:-2px; min-width:20px; height:20px; padding:0 5px;
border-radius:999px; background:var(--paper); color:var(--ink);
font-size:0.68rem; font-weight:800;
display:flex; align-items:center; justify-content:center; border:2px solid var(--ink);
}
.ayasc-widget{
position:fixed; right:24px; bottom:96px; z-index:349;
width:min(380px, calc(100vw - 32px)); height:min(560px, calc(100vh - 140px));
background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l);
box-shadow:0 30px 70px -20px rgba(0,0,0,0.5);
display:none; flex-direction:column; overflow:hidden;
}
.ayasc-widget.show{ display:flex; }
.ayasc-widget-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); }
.ayasc-widget-tabs{ display:flex; border-bottom:1px solid var(--line); }
.ayasc-widget-tabs button{
flex:1; padding:10px 6px; font-size:0.78rem; font-weight:600; color:var(--mist); background:none; border:none; border-bottom:2px solid transparent;
display:flex; flex-direction:column; align-items:center; gap:3px; position:relative;
}
.ayasc-widget-tabs button.active{ color:var(--signal); border-color:var(--signal); }
.ayasc-widget-tabs button .wdot{ width:6px; height:6px; border-radius:50%; background:var(--danger); position:absolute; top:4px; right:22%; }
.ayasc-widget-body{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; min-height:0; }
.ayasc-widget-foot{ border-top:1px solid var(--line); padding:10px 12px; display:flex; gap:8px; }
.ayasc-widget-foot textarea{ flex:1; resize:none; max-height:80px; }
.ayasc-widget-foot .btn{ flex-shrink:0; }
/* ---------- Misc ---------- */
.divider-v{ width:1px; align-self:stretch; background:var(--line); }
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.table-simple{ width:100%; border-collapse:collapse; }
.table-simple th, .table-simple td{ text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); font-size:0.9rem; }
.table-simple th{ font-weight:700; font-size:0.74rem; letter-spacing:.05em; text-transform:uppercase; color:var(--mist); }
.kv{ display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; }
.kv .k{ font-size:0.74rem; color:var(--mist-2); text-transform:uppercase; letter-spacing:.04em; margin-bottom:3px; font-weight:600; }
.kv .v{ font-size:0.93rem; }
@media (max-width:560px){ .kv{ grid-template-columns:1fr; } }
.pageintro{ padding:160px 0 30px; position:relative; }
.pageintro .eyebrow{ margin-bottom:18px; }
.pageintro h1{ font-size:clamp(2.4rem, 1.7rem + 2.8vw, 3.6rem); max-width:760px; }
.pageintro p.lede{ margin-top:20px; color:var(--mist); font-size:1.15rem; max-width:620px; }
/* ============================================================
Glass / hologram / orbit system
============================================================ */
.hologram-grid{
position:absolute; inset:0; pointer-events:none;
background-image:
linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
background-size:46px 46px;
-webkit-mask-image:radial-gradient(circle at 50% 35%, black 0%, transparent 65%);
mask-image:radial-gradient(circle at 50% 35%, black 0%, transparent 65%);
}
.glow-blob{
position:absolute; width:560px; height:560px; border-radius:50%;
background:radial-gradient(circle, var(--signal-soft), transparent 70%);
filter:blur(10px); pointer-events:none; z-index:0;
animation:ayascBlobDrift 14s ease-in-out infinite;
}
.glow-blob.ember{ background:radial-gradient(circle, var(--ember-soft), transparent 70%); animation-duration:17s; animation-delay:-4s; }
.glow-blob.violet{ background:radial-gradient(circle, var(--violet-soft), transparent 70%); animation-duration:20s; animation-delay:-9s; }
@keyframes ayascBlobDrift{
0%, 100%{ transform:translate(0,0) scale(1); opacity:1; }
33%{ transform:translate(24px,-18px) scale(1.08); opacity:0.85; }
66%{ transform:translate(-16px,14px) scale(0.96); opacity:0.95; }
}
/* ---- Orbit hero: real logo on its own dark "stage" so it reads
the same in light and dark mode ---- */
.hero-copy{ position:relative; z-index:3; }
.orbit-stage{ position:relative; display:flex; align-items:center; justify-content:center; min-height:560px; height:560px; width:100%; perspective:1200px; }
.logo-stage{
position:absolute; width:88%; max-width:440px; aspect-ratio:1; border-radius:50%;
background:radial-gradient(circle at 42% 38%, var(--logo-stage-a), var(--logo-stage-b) 72%);
box-shadow:inset 0 0 60px rgba(0,0,0,0.4), 0 40px 90px -30px rgba(0,0,0,0.5);
display:none; /* built for the old small abstract-orb hero; a full globe doesn't need
(or want) a separate dark backdrop showing through behind it */
}
.orbit-ring{ position:absolute; border-radius:50%; border:1px solid var(--line-strong); pointer-events:none; }
.orbit-ring.r1{ width:100%; max-width:540px; aspect-ratio:1; animation:ayascSpin 26s linear infinite; }
.orbit-ring.r2{ width:84%; max-width:460px; aspect-ratio:1; border-style:dashed; border-color:var(--signal-dim); animation:ayascSpin 17s linear infinite reverse; }
@keyframes ayascSpin{ to{ transform:rotate(360deg); } }
.orbit-node{ position:absolute; width:9px; height:9px; border-radius:50%; background:var(--signal); box-shadow:0 0 12px var(--signal); }
.orbit-core{ position:relative; width:58%; max-width:250px; aspect-ratio:1; border-radius:50%; background:var(--logo-stage-b); animation:ayascFloat 6s ease-in-out infinite; }
.orbit-core img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 0 40px rgba(0,229,255,0.35)); }
@keyframes ayascFloat{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-14px) rotate(1.5deg); } }
/* The hero is a 2-column grid, but two columns get uncomfortably narrow
on tablet-portrait widths: the headline breaks badly and the two CTAs
stack on top of each other. Stack the hero into one column below
980px so tablets get the same clean layout phones do (copy first,
globe underneath), rather than a cramped desktop layout. */
@media (max-width:980px){
#hero .grid-2{ grid-template-columns:1fr; gap:28px; }
#hero .hero-copy{ text-align:left; }
.orbit-stage{ min-height:460px; height:460px; }
}
@media (max-width:640px){
.orbit-stage{ min-height:420px; height:420px; }
/* rings are sized for desktop; cap them to the stage so they don't
push past the edge of a phone screen */
.orbit-ring.r1{ max-width:88vw; }
.orbit-ring.r2{ max-width:74vw; }
}
/* ---- Theme toggle ---- */
.theme-toggle{
width:2.6rem; height:2.6rem; border-radius:var(--radius-full);
background:var(--surface-2); border:1px solid var(--line);
display:inline-flex; align-items:center; justify-content:center;
color:var(--paper-dim); flex-shrink:0;
}
.theme-toggle:hover{ color:var(--signal); border-color:var(--signal); }
.theme-toggle .fa-sun{ display:none; }
[data-theme="light"] .theme-toggle .fa-sun{ display:inline; }
[data-theme="light"] .theme-toggle .fa-moon{ display:none; }
/* ============================================================
Journey / pain-hook system (homepage scroll story)
============================================================ */
.journey-rail{ position:relative; }
.journey-rail .glow-blob{ opacity:.7; }
/* floating pain bubbles — tappable AND draggable */
.bubble-field{ position:relative; min-height:520px; }
.pain-bubble{
position:absolute; display:flex; align-items:center; gap:10px;
padding:1rem 1.4rem; border-radius:var(--radius-full);
background:var(--glass-bg); border:1px solid var(--glass-border);
backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
font-weight:600; font-size:0.95rem; cursor:grab; user-select:none;
animation:ayascDrift 8s ease-in-out infinite, ayascBubbleGlow 4.5s ease-in-out infinite;
touch-action:none;
}
.pain-bubble:active{ cursor:grabbing; animation-play-state:paused; }
.pain-bubble i{ color:var(--ember); }
@keyframes ayascDrift{ 0%,100%{ transform:translateY(0px);} 50%{ transform:translateY(-10px);} }
@keyframes ayascBubbleGlow{
0%, 100%{ box-shadow:0 20px 40px -20px rgba(0,0,0,0.4), 0 0 0 0 var(--signal-soft); }
50%{ box-shadow:0 20px 40px -20px rgba(0,0,0,0.4), 0 0 22px 3px var(--signal-soft); }
}
@media (max-width:760px){
/* Absolute floating + drag suits a wide canvas; on narrow screens it just
overlaps, so fall back to a clean wrapped flow like the tap-grid. */
.bubble-field{ display:flex; flex-wrap:wrap; gap:10px; min-height:0; position:static; justify-content:center; }
.pain-bubble{ position:static !important; animation:none; cursor:default; }
}
/* generic bubble/pill tap-select tile used in signup pain picker */
.bubble-tile{
display:flex; align-items:center; gap:12px; padding:1rem 1.3rem;
border-radius:var(--radius-full); background:var(--surface-3); border:1px solid var(--line);
cursor:pointer; transition:transform .25s var(--ease), border-color .25s, background .25s, box-shadow .25s;
font-weight:600; font-size:0.92rem;
}
.bubble-tile i{ width:20px; text-align:center; color:var(--mist); flex-shrink:0; transition:color .25s; }
.bubble-tile:hover{ transform:translateY(-2px); border-color:var(--line-strong); }
.bubble-tile.selected{ background:linear-gradient(135deg, var(--signal-soft), var(--violet-soft)); border-color:var(--signal); box-shadow:0 16px 34px -18px rgba(0,229,255,0.4); }
.bubble-tile.selected i{ color:var(--signal); }
.bubble-field-grid{ display:flex; flex-wrap:wrap; gap:12px; }
/* one-stop journey diagram */
.journey-diagram{ display:flex; align-items:center; justify-content:center; gap:0; flex-wrap:wrap; position:relative; }
.journey-node{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; width:150px; }
.journey-node .ic{
width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
background:var(--glass-bg); border:1px solid var(--glass-border); backdrop-filter:blur(14px);
color:var(--signal); font-size:1.4rem; box-shadow:0 20px 40px -22px rgba(0,229,255,0.4);
}
.journey-node span{ font-size:0.84rem; color:var(--mist); font-weight:600; }
.journey-arrow{ color:var(--mist-2); font-size:1.2rem; margin:0 6px; flex-shrink:0; }
@media (max-width:760px){
.journey-diagram{ flex-direction:column; gap:18px; }
.journey-arrow{ transform:rotate(90deg); margin:0; }
}
/* pinned/sticky story panel used by the homepage journey */
.pin-stage{ position:relative; }
.pin-visual{ position:sticky; top:120px; }
/* 3D flip / depth card for services teaser */
.depth-card{
border-radius:var(--radius-l); background:var(--glass-bg); border:1px solid var(--glass-border);
backdrop-filter:blur(18px); padding:30px; transform-style:preserve-3d;
}
.call-btn{ display:inline-flex; align-items:center; gap:8px; padding:0.55rem 1rem; border-radius:var(--radius-full); background:var(--good); color:#04180d; font-weight:700; font-size:0.82rem; }
.call-btn:hover{ filter:brightness(1.08); }
/* ---- Voice call UI ---- */
.call-overlay{ z-index:600; }
.call-sheet{
background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l);
padding:44px 32px 32px; width:100%; max-width:340px; text-align:center;
display:flex; flex-direction:column; align-items:center; gap:6px;
box-shadow:0 40px 90px -30px rgba(0,0,0,0.6);
}
.call-demo-tag{ font-size:0.68rem; color:var(--ember); background:var(--ember-soft); border:1px dashed rgba(255,145,89,0.4); border-radius:var(--radius-full); padding:0.3rem 0.7rem; margin-bottom:18px; }
.call-avatar{
width:88px; height:88px; border-radius:50%; margin-bottom:6px;
background:linear-gradient(145deg, var(--signal), var(--violet));
display:flex; align-items:center; justify-content:center;
font-family:var(--font-display); font-weight:700; font-size:1.8rem; color:#04151b;
box-shadow:0 0 0 6px var(--signal-soft);
}
.call-sheet h3{ font-size:1.2rem; }
.call-sheet p{ color:var(--mist); font-family:var(--font-mono); font-size:0.9rem; margin-bottom:26px; }
.call-controls{ display:flex; align-items:center; gap:18px; }
.call-ctrl{
width:54px; height:54px; border-radius:50%; border:none; cursor:pointer;
background:var(--surface-3); color:var(--paper); font-size:1.1rem;
display:flex; align-items:center; justify-content:center; transition:.2s;
}
.call-ctrl:hover{ filter:brightness(1.15); }
.call-ctrl.active{ background:var(--signal); color:var(--btn-ink); }
.call-ctrl.end{ background:var(--danger); color:#2a0808; width:60px; height:60px; font-size:1.25rem; }
.call-ctrl.sm{ width:42px; height:42px; font-size:0.9rem; }
.call-ctrl.accept{ background:var(--good); color:#04180d; }
.incoming-call{
position:fixed; top:24px; left:50%; transform:translateX(-50%) translateY(-140%);
display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:var(--radius-l);
z-index:601; width:min(360px, calc(100vw - 32px));
box-shadow:0 30px 60px -20px rgba(0,0,0,0.5);
transition:transform .4s var(--ease);
}
.incoming-call.show{ transform:translateX(-50%) translateY(0); }
/* ---- Real WebGL 3D hero canvas ---- */
/* The canvas deliberately extends BEYOND the visual stage. The globe's
outer rings and light streaks reach ~1.7x the globe radius, so a canvas
cropped to the stage sliced them off. Rather than pulling the camera
back (which shrinks the globe), the render area is enlarged and the
camera stays close, so the globe keeps its size and the rings simply
have somewhere to go. Weighted less to the left so it doesn't reach
into the headline column. */
/* Insets MUST stay symmetric. The WebGL globe renders at the centre of
this canvas, so uneven insets shift it off the stage centre and it stops
lining up with anything else in the hero. (An earlier asymmetric version
with left:-10% / right:-24% is exactly what knocked the rings out of
alignment.) The canvas is larger than the stage on purpose, so the
globe's outer rings have room instead of being cropped. */
.hero-3d-canvas{
position:absolute; inset:-24%;
opacity:0; transition:opacity .6s ease;
pointer-events:auto; z-index:1;
display:flex; align-items:center; justify-content:center;
}
.hero-3d-canvas.ready{ opacity:1; }
/* The 2D logo is a FALLBACK only, so it starts hidden — otherwise it
flashes on screen for a moment before the WebGL globe takes over,
which reads as a broken/placeholder image. index.html reveals it only
if the globe hasn't started rendering after a couple of seconds
(blocked CDN, no WebGL, very slow device), so a real failure still
shows something rather than an empty space. */
#hero-2d-fallback{ opacity:0; transition:opacity .5s ease; pointer-events:none; }
#hero-2d-fallback.show-fallback{ opacity:1; }
/* ---- Theme switch veil ----
Covers the repaint when switching light/dark. Uses a plain colour rather
than a blur so it costs nothing to render at the exact moment the page is
already busy restyling everything. */
/* Theme switching used to route through a full-page veil meant to hide
the swap. Two rounds of tuning that veil both made the actual
experience worse: what the client saw as a "blank page that takes a
long time" WAS the veil itself (a solid var(--ink) block covering
everything), not a slow repaint underneath it. Removed entirely — the
body's own background/colour transition (added below, in the base
body rule) now handles the crossfade in place instead. */
/* ---- Page loader ---- */
.page-loader{
position:fixed; inset:0; z-index:2000; background:var(--ink);
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
transition:opacity .5s ease, visibility .5s ease;
}
.page-loader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.page-loader .pl-mark{ font-family:var(--font-display); font-weight:700; font-size:1.6rem; letter-spacing:-0.01em; color:var(--paper); }
.page-loader .pl-mark span{ color:var(--signal); }
.page-loader .pl-track{ width:170px; height:2px; border-radius:2px; background:var(--surface-3); overflow:hidden; }
.page-loader .pl-fill{ display:block; width:40%; height:100%; border-radius:2px; background:linear-gradient(90deg, transparent, var(--signal), transparent); animation:plSlide 1.1s ease-in-out infinite; }
@keyframes plSlide{ 0%{ transform:translateX(-110%);} 100%{ transform:translateX(310%);} }
@media (prefers-reduced-motion: reduce){ .page-loader .pl-fill{ animation:none; width:100%; } }
/* ============================================================
Story timeline (homepage "what happens when you work with us")
============================================================ */
.story-line{ position:relative; max-width:760px; margin:0 auto; padding-left:8px; }
.story-line::before{
content:''; position:absolute; left:23px; top:10px; bottom:10px; width:2px;
background:linear-gradient(180deg, var(--signal), var(--violet) 50%, var(--ember));
opacity:0.35;
}
/* a small pulse of light continuously travels the line, top to bottom —
the same "travelling star" idea as the hero, echoed at a smaller scale */
.story-line::after{
content:''; position:absolute; left:19px; width:10px; height:10px; border-radius:50%;
background:var(--signal); box-shadow:0 0 14px 3px var(--signal-soft), 0 0 4px 1px var(--signal);
animation:ayascStoryTravel 6s ease-in-out infinite;
}
@keyframes ayascStoryTravel{
0%{ top:2%; opacity:0; }
12%{ opacity:1; }
88%{ opacity:1; }
100%{ top:97%; opacity:0; }
}
.story-step{ position:relative; display:flex; gap:24px; padding-bottom:52px; }
.story-step:last-child{ padding-bottom:0; }
.story-num{
flex-shrink:0; width:48px; height:48px; border-radius:50%;
background:var(--surface-2); border:1px solid var(--line-strong);
display:flex; align-items:center; justify-content:center;
font-family:var(--font-display); font-weight:700; font-size:0.95rem; color:var(--mist);
position:relative; z-index:1; transition:background .4s, color .4s, border-color .4s, box-shadow .4s;
}
.story-step.active .story-num{ background:linear-gradient(135deg, var(--signal), var(--violet)); color:var(--btn-ink); border-color:transparent; animation:ayascStoryNumGlow 2.6s ease-in-out infinite; }
@keyframes ayascStoryNumGlow{
0%, 100%{ box-shadow:0 0 18px rgba(0,229,255,0.35); }
50%{ box-shadow:0 0 30px rgba(0,229,255,0.55); }
}
.story-body h3{ font-size:1.25rem; margin-bottom:10px; transition:color .4s; }
.story-body p{ color:var(--mist); font-size:0.96rem; line-height:1.65; max-width:560px; }
.story-step.active .story-body h3{ color:var(--signal); }
@media (max-width:640px){
.story-line{ padding-left:0; }
.story-step{ gap:16px; }
.story-num{ width:40px; height:40px; font-size:0.85rem; }
}