/* ============================================================
   JARIE TECH — Y2K DESIGN SYSTEM (LIGHT)
   Palette locked to logo: magenta #B41684, deep purple #35026B
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Audiowide&family=Rajdhani:wght@400;500;600;700&family=VT323&display=swap');

:root{
  --void:#f3eefb;        /* page background (light lavender) */
  --void-2:#ffffff;      /* panels / fades */
  --panel:#ffffff;
  --panel-2:#f8f3ff;
  --magenta:#b41684;
  --magenta-hot:#e0149b;
  --purple:#35026b;
  --purple-bright:#7a1fd1;
  --lav:#564a73;         /* body text (muted purple-grey) */
  --lav-dim:#897fa6;     /* faint text */
  --chrome-hi:#ffffff;
  --chrome-mid:#6a3db5;
  --chrome-lo:#9a7fc4;
  --silver:#1d0f33;      /* default ink text */
  --ink:#1d0f33;
  --line:rgba(180,22,132,.24);
  --line-2:rgba(122,31,209,.20);
  --glow:0 6px 22px rgba(224,20,155,.28);
  --glow-soft:0 10px 30px rgba(122,31,209,.20);
  --maxw:1240px;
  --gutter:28px;
  --r:0px; /* sharp Y2K corners by default */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(ellipse 70% 50% at 80% -5%,rgba(224,20,155,.10),transparent 60%),
    radial-gradient(ellipse 70% 60% at 0% 100%,rgba(122,31,209,.10),transparent 60%),
    var(--void);
  color:var(--silver);
  font-family:'Rajdhani',sans-serif;
  font-size:18px;
  line-height:1.55;
  letter-spacing:.01em;
  overflow-x:hidden;
  position:relative;
}

/* ---- ambient backdrop ---- */
body::before{ /* pixel grid */
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(180,22,132,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(122,31,209,.06) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 35%,transparent 85%);
}
body::after{ /* faint CRT scanlines */
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(53,2,107,.05) 2px 3px);
  mix-blend-mode:multiply;opacity:.6;
}
.glow-orb{
  position:fixed;z-index:0;pointer-events:none;border-radius:50%;
  filter:blur(90px);opacity:.28;
}
.orb-a{top:-160px;right:-120px;width:520px;height:520px;background:radial-gradient(circle,var(--magenta),transparent 70%)}
.orb-b{bottom:-220px;left:-160px;width:600px;height:600px;background:radial-gradient(circle,var(--purple-bright),transparent 70%);opacity:.22}

main,header,footer{position:relative;z-index:1}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---- type ---- */
.eyebrow{
  font-family:'VT323',monospace;font-size:1.15rem;letter-spacing:.18em;
  color:var(--magenta-hot);text-transform:uppercase;display:inline-flex;align-items:center;gap:.5em;
}
.eyebrow::before{content:"▚";color:var(--purple-bright)}
h1,h2,h3{font-family:'Orbitron',sans-serif;font-weight:900;line-height:1.02;margin:0;letter-spacing:.01em}
.chrome{
  background:linear-gradient(180deg,#9a5be6 0%,#b41684 42%,#e0149b 68%,#5a14a0 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.6)) drop-shadow(0 4px 16px rgba(224,20,155,.22));
}
.mono{font-family:'VT323',monospace;letter-spacing:.06em}

/* ---- layout ---- */
.wrap{max-width:var(--maxw);margin-left:auto;margin-right:auto;padding-left:var(--gutter);padding-right:var(--gutter)}
section.wrap,div.wrap,header.wrap,footer.wrap,main.wrap,article.wrap{padding-left:var(--gutter);padding-right:var(--gutter)}
.section{padding-top:92px;padding-bottom:92px}
.section-head{max-width:760px;margin-bottom:54px}
.section-head h2{font-size:clamp(2rem,4.5vw,3.4rem);margin:.35em 0}
.lead{font-size:1.18rem;color:var(--lav)}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;cursor:pointer;
  font-family:'Audiowide',sans-serif;font-size:.92rem;letter-spacing:.08em;text-transform:uppercase;
  padding:15px 30px;border:1px solid var(--magenta);color:var(--magenta);background:#fff;
  position:relative;transition:.18s;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.btn::after{content:"›";font-size:1.3em;line-height:0}
.btn:hover{background:var(--magenta);color:#fff;box-shadow:var(--glow);transform:translateY(-2px)}
.btn.solid{background:linear-gradient(135deg,var(--magenta),var(--purple-bright));border-color:transparent;color:#fff;box-shadow:var(--glow-soft)}
.btn.solid:hover{filter:brightness(1.08);box-shadow:var(--glow)}
.btn.ghost{border-color:var(--line-2);color:var(--purple-bright);background:#fff}
.btn.ghost:hover{border-color:var(--purple-bright);background:rgba(122,31,209,.08);box-shadow:none;color:var(--purple)}

/* ---- corner-bracket card frame (signature) ---- */
.frame{position:relative;background:linear-gradient(160deg,var(--panel),var(--panel-2));border:1px solid var(--line);box-shadow:0 10px 30px rgba(53,2,107,.06)}
.frame::before,.frame::after{
  content:"";position:absolute;width:18px;height:18px;pointer-events:none;
}
.frame::before{top:-1px;left:-1px;border-top:2px solid var(--magenta-hot);border-left:2px solid var(--magenta-hot)}
.frame::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--purple-bright);border-right:2px solid var(--purple-bright)}

/* ============================================================  NAV  */
.nav{
  position:sticky;top:0;z-index:1000;
  backdrop-filter:blur(10px);
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.7));
  border-bottom:1px solid var(--line);
}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:12px 28px;display:flex;align-items:center;gap:28px}
.nav-logo img{height:38px;width:auto}
.nav-links{display:flex;gap:6px;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav-links a{
  font-family:'Audiowide',sans-serif;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--lav);padding:9px 14px;position:relative;transition:.16s
}
.nav-links a:hover,.nav-links a.active{color:var(--magenta)}
.nav-links a.active::after,.nav-links a:hover::after{
  content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;
  background:linear-gradient(90deg,var(--magenta-hot),var(--purple-bright))
}
.nav-cta{margin-left:6px}
.nav-toggle{display:none;background:none;border:1px solid var(--line);color:var(--magenta);font-size:1.3rem;padding:4px 10px;cursor:pointer;margin-left:auto}

/* ---- status ticker ---- */
.ticker{
  background:var(--panel-2);border-bottom:1px solid var(--line-2);border-top:1px solid var(--line-2);overflow:hidden;white-space:nowrap;
  font-family:'VT323',monospace;letter-spacing:.12em;color:var(--lav-dim);font-size:1rem
}
.ticker span{display:inline-block;padding:6px 0;animation:slide 30s linear infinite}
.ticker b{color:var(--magenta-hot);margin:0 26px}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================  FOOTER  */
.footer{border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,rgba(122,31,209,.08));margin-top:40px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding:64px 0 36px}
.footer h4{font-family:'Audiowide',sans-serif;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--magenta-hot);margin:0 0 16px}
.footer a{display:block;color:var(--lav);padding:5px 0;font-size:.96rem}
.footer a:hover{color:var(--magenta)}
.footer-logo img{height:46px;margin-bottom:14px}
.footer-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 0 40px;border-top:1px solid var(--line-2);font-family:'VT323',monospace;color:var(--lav-dim);letter-spacing:.08em}

/* ============================================================  REUSABLE GRID CARDS  */
.cards{display:grid;gap:22px}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}

.tag{
  display:inline-block;font-family:'VT323',monospace;font-size:.95rem;letter-spacing:.1em;
  color:var(--magenta-hot);border:1px solid var(--line);padding:2px 10px;text-transform:uppercase;background:var(--panel-2)
}

/* cards whose graphic is a full dark "display" panel keep light text */
.domain p{color:#d9c9f2}
.domain .tag{background:rgba(255,255,255,.08)}

/* fade-in on scroll */
.reveal{opacity:0;transform:translateY(24px);transition:.7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

@media (max-width:920px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  :root{--gutter:22px}
  .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    background:#fff;border-bottom:1px solid var(--line);padding:10px 18px 18px;display:none}
  .nav-links.open{display:flex}
  .nav-toggle{display:block}
  .nav-links a{padding:12px 6px}
  .nav-cta{margin:8px 0 0}
  .cols-2,.cols-3,.cols-4{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .section{padding-top:62px;padding-bottom:62px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}