/* =========================================================
   XravvaTeam — design tokens
   Concept: a dev-team console. The brand voice already speaks
   in INIT/STATUS/STACK readouts, so the whole site leans into
   a terminal aesthetic rather than a generic SaaS-card look.
   ========================================================= */
:root{
  --bg:#0a0a12;
  --bg-elev:#0f0f1a;
  --card:#14141f;
  --card-hover:#181826;
  --border:#26263a;
  --border-soft:#1c1c2c;
  --text:#e9e9f2;
  --text-dim:#9494ab;
  --text-faint:#5c5c72;
  --accent:#8b6bff;
  --accent-soft:#8b6bff26;
  --accent2:#22d3ee;
  --accent2-soft:#22d3ee22;
  --accent3:#ff5c8a;
  --accent3-soft:#ff5c8a22;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Space Grotesk', -apple-system, 'Segoe UI', sans-serif;
  --radius: 14px;
  --maxw: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(600px 400px at 85% -5%, var(--accent-soft), transparent 60%),
    radial-gradient(500px 350px at 5% 15%, var(--accent2-soft), transparent 60%);
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3{font-family:var(--sans); margin:0; letter-spacing:-0.01em;}
p{color:var(--text-dim); margin:0;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px; position:relative; z-index:1;}
.mono{font-family:var(--mono);}

::selection{background:var(--accent); color:#fff;}
:focus-visible{outline:2px solid var(--accent2); outline-offset:3px;}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
}

/* ---------- icons ---------- */
.icon{width:1em; height:1em; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; vertical-align:-0.15em;}

/* ---------- navbar ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(10,10,18,0.72);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:68px;}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--sans); font-weight:700; font-size:1.05rem;}
.brand .dot{width:9px; height:9px; border-radius:50%; background:var(--accent2); box-shadow:0 0 10px var(--accent2);}
.nav-links{display:flex; align-items:center; gap:28px; font-size:0.94rem; color:var(--text-dim);}
.nav-links a{transition:color .15s;}
.nav-links a:hover{color:var(--text);}
.nav-toggle{display:none; background:none; border:1px solid var(--border); border-radius:8px; padding:8px; color:var(--text);}
.nav-cta{background:var(--accent); color:#fff; padding:9px 16px; border-radius:9px; font-size:0.9rem; font-weight:600;}

@media (max-width:820px){
  .nav-links{position:fixed; top:68px; left:0; right:0; background:var(--bg-elev); border-bottom:1px solid var(--border); flex-direction:column; align-items:flex-start; padding:18px 24px; gap:16px; transform:translateY(-8px); opacity:0; pointer-events:none; transition:.18s;}
  .nav-links.open{transform:translateY(0); opacity:1; pointer-events:auto;}
  .nav-toggle{display:block;}
}

/* ---------- hero ---------- */
.hero{padding:88px 0 64px;}
.hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center;}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;}}
.eyebrow-term{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:0.78rem; color:var(--accent2);
  background:var(--accent2-soft); border:1px solid #22d3ee40; padding:6px 12px; border-radius:100px; margin-bottom:22px;
}
.hero h1{font-size:clamp(2.2rem, 4.6vw, 3.5rem); line-height:1.08; font-weight:700;}
.hero h1 .grad{background:linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero p.lead{margin-top:20px; font-size:1.08rem; max-width:52ch;}
.hero-actions{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:10px;
  font-weight:600; font-size:0.94rem; border:1px solid transparent; cursor:pointer;
}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover{background:#7955ff;}
.btn-ghost{border-color:var(--border); color:var(--text);}
.btn-ghost:hover{border-color:var(--accent2); color:var(--accent2);}

/* terminal window mock */
.term{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; box-shadow:0 30px 60px -30px #000000aa;
}
.term-bar{display:flex; align-items:center; gap:7px; padding:12px 14px; border-bottom:1px solid var(--border-soft); background:var(--bg-elev);}
.term-bar span{width:10px; height:10px; border-radius:50%; background:#333;}
.term-bar .r{background:#ff5f57;} .term-bar .y{background:#febc2e;} .term-bar .g{background:#28c840;}
.term-bar em{font-style:normal; font-family:var(--mono); font-size:0.75rem; color:var(--text-faint); margin-left:8px;}
.term-body{padding:20px 18px; font-family:var(--mono); font-size:0.86rem; color:var(--text-dim);}
.term-body .ln{margin-bottom:8px;}
.term-body .k{color:var(--accent2);}
.term-body .v{color:var(--text);}
.term-body .ok{color:#28c840;}
.term-body .cursor{display:inline-block; width:7px; height:14px; background:var(--accent2); vertical-align:-2px; animation:blink 1s step-end infinite;}
@keyframes blink{50%{opacity:0;}}

/* ---------- section shell ---------- */
section{padding:72px 0;}
.section-head{margin-bottom:38px; max-width:60ch;}
.section-tag{font-family:var(--mono); font-size:0.78rem; color:var(--accent); text-transform:none;}
.section-head h2{font-size:clamp(1.6rem, 3vw, 2.1rem); margin-top:10px;}
.section-head p{margin-top:12px;}
.section-alt{background:var(--bg-elev); border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft);}

/* ---------- team cards ---------- */
.team-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
@media (max-width:760px){.team-grid{grid-template-columns:1fr;}}
.member-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:26px; display:flex; flex-direction:column; gap:16px; transition:border-color .18s, transform .18s;
}
.member-card:hover{border-color:var(--accent); transform:translateY(-3px);}
.member-top{display:flex; align-items:center; gap:14px;}
.member-avatar{
  width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--accent), var(--accent2)); color:#fff; font-weight:700; font-size:1.1rem; flex-shrink:0;
}
.member-role{font-family:var(--mono); font-size:0.72rem; color:var(--accent2);}
.member-name{font-size:1.15rem; font-weight:700; margin-top:2px;}
.member-rows{font-family:var(--mono); font-size:0.82rem; display:flex; flex-direction:column; gap:9px; border-top:1px solid var(--border-soft); padding-top:16px;}
.member-rows .row span.k{color:var(--text-faint);}
.member-rows .row span.v{color:var(--text-dim);}
.status-pill{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:0.75rem; color:#28c840;}
.status-pill .d{width:7px; height:7px; border-radius:50%; background:#28c840; box-shadow:0 0 8px #28c840;}
.member-btn{
  margin-top:4px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--border); border-radius:9px; padding:10px; font-size:0.86rem; font-weight:600;
  color:var(--text); transition:.15s;
}
.member-btn:hover{border-color:var(--accent2); color:var(--accent2);}

/* ---------- proof / history / shop cards ---------- */
.proof-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
@media (max-width:760px){.proof-grid{grid-template-columns:1fr;}}
.proof-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:border-color .18s;}
.proof-card:hover{border-color:var(--accent2);}
.proof-media{aspect-ratio:16/10; overflow:hidden; background:var(--bg-elev);}
.proof-media img{width:100%; height:100%; object-fit:cover;}
.proof-body{padding:20px;}
.proof-body h3{font-size:1.05rem; margin-bottom:8px;}
.proof-body p{font-size:0.92rem;}

.scroller{display:flex; gap:20px; overflow-x:auto; padding:4px 4px 18px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;}
.scroller::-webkit-scrollbar{height:6px;}
.scroller::-webkit-scrollbar-thumb{background:var(--border); border-radius:10px;}
.scroller > *{scroll-snap-align:start; flex:0 0 auto;}
.scroll-card{width:300px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;}
.scroll-tag{font-family:var(--mono); font-size:0.68rem; letter-spacing:0.02em; color:var(--accent2); padding:10px 16px 0;}
.scroll-media{aspect-ratio:16/10; background:var(--bg-elev);}
.scroll-media img{width:100%; height:100%; object-fit:cover;}
.scroll-body{padding:16px;}
.scroll-body h3{font-size:0.98rem; margin-bottom:6px;}
.scroll-body p{font-size:0.86rem;}

.scroll-controls{display:flex; gap:10px; justify-content:flex-end; margin:-14px 0 18px;}
.scroll-btn{width:36px; height:36px; border-radius:50%; border:1px solid var(--border); background:var(--card); color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer;}
.scroll-btn:hover{border-color:var(--accent2); color:var(--accent2);}
.swipe-hint{font-family:var(--mono); font-size:0.76rem; color:var(--text-faint); margin:-10px 0 18px;}

/* shop cards */
.shop-card{width:300px;}
.price{font-family:var(--mono); color:var(--accent2); font-weight:700; font-size:1rem; margin-top:10px;}
.shop-btn{
  margin-top:14px; display:inline-flex; width:100%; align-items:center; justify-content:center; gap:8px;
  background:var(--accent3); color:#fff; padding:10px; border-radius:9px; font-size:0.85rem; font-weight:700;
}
.shop-btn:hover{background:#ff3f76;}
.badge-tag{display:inline-block; font-family:var(--mono); font-size:0.66rem; color:var(--accent3); background:var(--accent3-soft); border:1px solid #ff5c8a40; padding:4px 9px; border-radius:100px; margin-bottom:10px;}

/* upcoming */
.phase-card{width:280px; padding:20px; display:flex; flex-direction:column; gap:12px;}
.phase-badge{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:0.68rem; padding:5px 10px; border-radius:100px; width:fit-content;}
.phase-badge.dev{color:var(--accent2); background:var(--accent2-soft); border:1px solid #22d3ee40;}
.phase-badge.plan{color:var(--accent); background:var(--accent-soft); border:1px solid #8b6bff40;}
.phase-badge.concept{color:var(--accent3); background:var(--accent3-soft); border:1px solid #ff5c8a40;}
.phase-badge.research{color:#f5c451; background:#f5c45122; border:1px solid #f5c45140;}
.phase-owner{font-family:var(--mono); font-size:0.72rem; color:var(--text-faint);}
.phase-card h3{font-size:1.02rem;}
.phase-card p{font-size:0.86rem;}

/* ---------- CTA / footer ---------- */
.cta-band{text-align:center; padding:80px 0;}
.cta-band h2{font-size:clamp(1.5rem,3vw,2rem);}
.cta-band p{margin:14px auto 28px; max-width:48ch;}
footer{border-top:1px solid var(--border-soft); padding:36px 0; background:var(--bg-elev);}
.footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
.footer-row p{font-size:0.85rem; font-family:var(--mono);}
.footer-links{display:flex; gap:20px; font-size:0.88rem; color:var(--text-dim);}
.footer-links a:hover{color:var(--text);}

/* ---------- about page ---------- */
.about-hero{padding:70px 0 30px;}
.about-hero h1{font-size:clamp(2rem,4vw,2.8rem);}
.about-body{display:grid; grid-template-columns:1.4fr 1fr; gap:48px;}
@media (max-width:860px){.about-body{grid-template-columns:1fr;}}
.about-block{margin-bottom:34px;}
.about-block h2{font-size:1.3rem; margin-bottom:12px;}
.about-block p{font-size:0.98rem; margin-bottom:10px;}
.about-side{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:24px; height:fit-content; font-family:var(--mono); font-size:0.85rem;}
.about-side h3{font-family:var(--sans); font-size:0.95rem; margin-bottom:14px;}
.about-side .row{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border-soft); color:var(--text-dim);}
.about-side .row span.v{color:var(--text);}