:root{
    --purple:#16083f;
    --purple2:#32106f;
    --blue:#1648d8;
    --cyan:#27a8ff;
    --magenta:#ff2bd6;
    --pink:#ff63e8;
    --white:#f7f4ff;
    --muted:#c7c3dc;
    --panel:rgba(15,9,50,.72);
    --line:rgba(126,91,255,.65);
  }

  *{box-sizing:border-box}
  html{
    scroll-behavior:smooth
}

  body{
    margin:0;
    color:var(--white);
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:
      radial-gradient(circle at 15% 10%,rgba(47,64,255,.35),transparent 27%),
      radial-gradient(circle at 85% 15%,rgba(255,43,214,.22),transparent 25%),
      radial-gradient(circle at 50% 75%,rgba(44,95,255,.18),transparent 35%),
      linear-gradient(135deg,#07051d 0%,#12052e 48%,#07061c 100%);
    min-height:100vh;
    overflow-x:hidden;
    cursor: crosshair;
  }

  body:before{
    position:fixed;inset:0;pointer-events:none;opacity:.2;
    background-image:
      linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:42px 42px;
    mask-image:linear-gradient(to bottom,black,transparent 92%);
  }

  button {
    cursor: pointer;
  }

  .shell{width:min(1180px,94%);margin:auto}
  header{padding:28px 0 10px}
  .topbar{display:flex;justify-content:space-between;align-items:center;gap:20px}

  .logo{
    font-weight:950;letter-spacing:-.05em;line-height:.8;
    font-size:clamp(2rem,5vw,4rem);
    text-transform:uppercase;
    text-shadow:0 0 16px rgba(39,168,255,.8),4px 4px 0 rgba(255,43,214,.55);
  }

  .logo small{display:block;font-size:.28em;letter-spacing:.35em;margin-top:14px;color:#d8d1ff;text-shadow:none}
  .pill{
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(12px);
    padding:10px 15px;border-radius:999px;
    font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:#d9d5ef
  }

  .hero{text-align:center;padding:44px 0 28px;position:relative}
  .eyebrow{color:#ff65e8;text-transform:uppercase;letter-spacing:.3em;font-weight:800;font-size:.8rem}
  h1{
    margin: 12px auto 14px;max-width:1050px;
    font-size: clamp(3rem,9vw,7.8rem);
    line-height: .88;letter-spacing:-.065em;text-transform:uppercase;
    font-weight:1000;
    background:linear-gradient(180deg,#fff 10%,#e8e6ff 45%,#8fb8ff 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 0 14px rgba(39,168,255,.28));
  }

  .hero h2{font-size:clamp(1.1rem,2.5vw,1.8rem);margin:0 0 18px;color:#fff}
  .hero p{max-width:900px;margin:auto;color:var(--muted);font-size:clamp(.95rem,1.8vw,1.12rem);line-height:1.7}
  .tagline{margin:25px auto 0;color:#ff62e6;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
  .section-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:26px 0}
  .card{
    position:relative;overflow:hidden;
    background:linear-gradient(145deg,rgba(26,15,75,.86),rgba(7,8,34,.78));
    border:1px solid var(--line);border-radius:22px;padding:23px;
    box-shadow:0 0 0 1px rgba(255,43,214,.05) inset,0 20px 60px rgba(0,0,0,.24);
  }

  .card:after{
    content:"";position:absolute;right:-80px;top:-90px;width:190px;height:190px;border-radius:50%;
    background:radial-gradient(circle,rgba(255,43,214,.2),transparent 65%);pointer-events:none
  }


  .card-head{display:flex;align-items:end;justify-content:space-between;gap:15px;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:14px;margin-bottom:16px}
  .card h3{margin:0;font-size:clamp(1.7rem,3.5vw,2.6rem);font-style:italic;text-transform:uppercase;letter-spacing:-.04em}
  .card .micro{font-size:.66rem;color:#d7cfff;letter-spacing:.18em;text-transform:uppercase;text-align:right}
  .items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .item{
    min-height:94px;border:1px solid rgba(91,103,255,.5);border-radius:13px;
    background:rgba(4,6,29,.65);padding:12px 8px;display:flex;flex-direction:column;
    align-items:center;justify-content:center;text-align:center;gap:8px;
    transition:.2s ease;
  }


  .item:hover{transform:translateY(-3px);border-color:#ff43dd;box-shadow:0 0 22px rgba(255,43,214,.17)}






  .icon{font-size:1.65rem;filter:drop-shadow(0 0 7px rgba(39,168,255,.6))}
  .item span:last-child{font-size:.69rem;line-height:1.2;font-weight:800;color:#eeeaff}
  .wide .items {
    grid-template-columns:repeat(5,minmax(0,1fr))}

  .cta{
    margin:34px 0 10px;text-align:center;padding:42px 20px;
    border:1px solid rgba(255,43,214,.45);border-radius:26px;
    background:linear-gradient(135deg,rgba(36,10,81,.8),rgba(6,22,71,.72));
    box-shadow:0 0 50px rgba(55,49,255,.12);
  }

  .cta h2{margin:0 0 8px;font-size:clamp(1.7rem,4vw,2.8rem)}
  .cta p{margin:0 auto 22px;color:var(--muted)}

  .buttonref{
    display:inline-flex;align-items:center;gap:12px;
    color:#fff;text-decoration:none;font-weight:950;text-transform:uppercase;letter-spacing:.12em;
    padding:15px 27px;border-radius:12px;border:1px solid #ff42df;
    background:linear-gradient(90deg,#4010a2,#9b0fb0);
    box-shadow:0 0 28px rgba(255,43,214,.24),inset 0 0 20px rgba(255,255,255,.08);
  }

  .buttonref:hover{transform:translateY(-2px);box-shadow:0 0 38px rgba(255,43,214,.38)}
  footer{padding:35px 0 45px;text-align:center;color:#aaa5c8;font-size:.78rem;letter-spacing:.08em}
  footer strong{color:#fff}
  @media(max-width:760px){
    .topbar{align-items:flex-start}.pill{display:none}
    .hero{padding-top:35px}
    .section-grid{grid-template-columns:1fr}
    .items,.wide .items{grid-template-columns:repeat(2,minmax(0,1fr))}
    .item{min-height:82px}
    .card{padding:17px}
  }


  @media print{
    @page{size:A4 portrait;margin:10mm}
    body{background:#090621;-webkit-print-color-adjust:exact;print-color-adjust:exact}
    .shell{width:100%}
    .hero{padding-top:20px}
    .section-grid{gap:9px}
    .card{padding:13px;border-radius:12px}
    .item{min-height:64px;padding:7px}
    .icon{font-size:1.1rem}
    .item span:last-child{font-size:.56rem}
    .cta{margin-top:15px;padding:18px}
    footer{padding:12px}
  }