/* Phone Pop University — official brand.
   Palette and type from the Phone Pop University brand package. Every one of
   the five brand colours has a job here rather than sitting in a swatch row:

     #0D0D0D  ground
     #333333  rules and borders
     #C0C0C0  secondary text — the silver of the chrome ring on the mark
     #0088FF  accent, links, focus, anything interactive
     #0033CC  primary button fill

   Orbitron throughout, same as the mark and the main site.

   Orbitron runs wide and tall for its point size, so body copy is set a
   little smaller, a lot looser in the leading, and slightly tightened in the
   tracking. Without those three it stacks up and becomes hard to read at
   arm's length on a phone. */

:root{
  --ground:#0D0D0D;
  --surface:#151517;
  --surface-2:#1D1D20;
  --rule:#333333;
  --rule-hot:rgba(0,136,255,.32);
  --ink:#F5F5F5;
  --silver:#C0C0C0;
  --muted:#C0C0C0;
  --faint:#7C7C80;
  --accent:#0088FF;
  --accent-deep:#0033CC;
  --accent-glow:#4DA9FF;
  --good:#3FC168;
  --warn:#EFA831;
  --bad:#E64343;

  --display:'Orbitron',system-ui,sans-serif;
  --body:'Orbitron',system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-size:15.5px;
  line-height:1.78;
  letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  background-image:
    radial-gradient(1100px 620px at 50% -10%, rgba(0,51,204,.16), transparent 70%),
    linear-gradient(rgba(0,136,255,.035) 1px, transparent 1px);
  background-size:auto, 100% 3px;
  background-attachment:fixed;
}
.wrap{max-width:960px;margin:0 auto;padding:0 1.15rem}

/* ---------- header ---------- */
.top{border-bottom:1px solid var(--rule);background:rgba(0,0,0,.92);
  backdrop-filter:blur(10px);position:sticky;top:0;z-index:10}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-top:.85rem;padding-bottom:.85rem}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:700;
  font-size:.92rem;letter-spacing:.11em;text-transform:uppercase;color:#fff;
  text-decoration:none;line-height:1.15}
.brand img{width:34px;height:34px;flex:none;
  filter:drop-shadow(0 0 8px rgba(0,136,255,.45))}
.brand span{color:var(--accent);text-shadow:0 0 14px rgba(0,136,255,.55)}
.brand .wm{white-space:nowrap}
@media(max-width:460px){
  .brand{font-size:.72rem;letter-spacing:.05em;gap:.45rem}
  .brand img{width:28px;height:28px}
  .top nav a{font-size:.6rem;letter-spacing:.09em}
  .top .wrap{gap:.6rem}
}

/* chrome ring on the mark, echoed as a hairline */
.silverline{height:1px;background:linear-gradient(90deg,transparent,var(--silver),transparent);
  opacity:.5;margin:0}
.top nav a{font-family:var(--display);color:var(--muted);text-decoration:none;font-weight:500;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.top nav a:hover{color:var(--accent)}

/* ---------- type ---------- */
h1{font-family:var(--display);font-weight:700;
  font-size:clamp(2rem,7.5vw,3.9rem);line-height:1.02;letter-spacing:.01em;
  text-transform:uppercase;margin:0 0 .7rem;text-wrap:balance}
h2{font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,4vw,1.9rem);
  letter-spacing:.03em;text-transform:uppercase;margin:0 0 .7rem;text-wrap:balance}
h3{font-family:var(--display);font-weight:600;font-size:1.02rem;letter-spacing:.055em;
  text-transform:uppercase;margin:0 0 .35rem}
p{margin:0 0 1.15rem;max-width:56ch}
a{color:var(--accent)}
.eyebrow{font-family:var(--display);font-weight:600;font-size:.74rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent);margin-bottom:1rem;
  text-shadow:0 0 12px rgba(0,136,255,.4)}
.lede{font-size:1.05rem;line-height:1.7;color:var(--muted);max-width:46ch}

/* ghost numeral, as used for section markers on the main site */
.ghost{font-family:var(--display);font-weight:700;font-size:3.2rem;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(0,136,255,.38);letter-spacing:.04em}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--display);font-weight:700;font-size:.86rem;
  letter-spacing:.15em;text-transform:uppercase;background:var(--accent-deep);color:#fff;
  border:none;padding:.95rem 1.7rem;cursor:pointer;text-decoration:none;
  clip-path:polygon(0 0,100% 0,calc(100% - 13px) 100%,0 100%);
  transition:background .14s ease,box-shadow .14s ease}
.btn:hover{background:var(--accent);box-shadow:0 0 26px rgba(0,136,255,.45)}
.btn:disabled{background:#1B2733;color:var(--faint);cursor:not-allowed;box-shadow:none}
.btn.block{display:block;width:100%;text-align:center;font-size:1rem;padding:1.05rem 1rem;
  clip-path:polygon(0 0,100% 0,calc(100% - 16px) 100%,0 100%)}
.btn.ghostbtn{background:transparent;color:var(--accent);border:1px solid var(--accent);
  clip-path:none}
.btn.ghostbtn:hover{background:rgba(0,136,255,.1);color:#fff}
:focus-visible{outline:2px solid var(--accent-glow);outline-offset:3px}

/* chip, as used under the hero copy on the main site */
.chip{display:inline-block;font-family:var(--display);font-weight:500;font-size:.7rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--rule-hot);padding:.42rem .7rem;margin:0 .4rem .4rem 0}

/* ---------- layout ---------- */
.hero{padding:3.2rem 0 2.6rem;border-bottom:1px solid var(--rule)}
section{padding:2.6rem 0}
.grid{display:grid;gap:1.15rem;grid-template-columns:1fr;margin:2rem 0}
@media(min-width:760px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--surface);border:1px solid var(--rule);padding:1.35rem}
.card .n{font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.2em;
  color:var(--accent);margin-bottom:.6rem}
.card p{font-size:.94rem;line-height:1.72;color:var(--muted);margin:0}

/* thin rule with a bright segment, as on the main site */
.hr{height:1px;background:var(--rule);position:relative;margin:2.4rem 0}
.hr::after{content:"";position:absolute;left:0;top:0;width:110px;height:1px;
  background:var(--accent);box-shadow:0 0 12px var(--accent)}

.foot{border-top:1px solid var(--rule);color:var(--faint);font-size:.82rem;
  padding:1.8rem 0;margin-top:2.5rem;background:rgba(0,0,0,.6)}
.foot strong{color:var(--muted)}

/* ---------- corner brackets: the site's signature frame ---------- */
.frame, .card.frame{
  --b:2px; --s:18px; --c:var(--accent);
  position:relative;
  background:
    linear-gradient(var(--c),var(--c)) 0 0/var(--s) var(--b) no-repeat,
    linear-gradient(var(--c),var(--c)) 0 0/var(--b) var(--s) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/var(--s) var(--b) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/var(--b) var(--s) no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/var(--s) var(--b) no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/var(--b) var(--s) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--s) var(--b) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--b) var(--s) no-repeat,
    var(--surface);
  border:1px solid var(--rule);
}

.heromark{width:104px;height:104px;display:block;margin:0 0 1.4rem;
  filter:drop-shadow(0 0 26px rgba(0,136,255,.4))}
@media(min-width:760px){.heromark{width:132px;height:132px}}