@font-face{font-family:'Quantify';src:url('/public/fonts/Quantify.ttf') format('truetype');font-weight:normal;font-display:swap;}
  :root{
    --crimson:#C9184A;--crimson-light:#FF2D6B;--crimson-dark:#8B0F33;
    --gold:#FFB703;--green:#4ade80;
    --bg:#06060D;--bg2:#0C0C18;--bg3:#121220;
    --card:#14142A;--card2:#1C1C35;
    --border:rgba(201,24,74,0.2);--border-s:rgba(255,255,255,0.06);
    --text:#F0F0FF;--text2:#C8C8E8;--muted:#6868A0;
    --fd:'Quantify',sans-serif;--fb:'Outfit',sans-serif;--fc:'Barlow Condensed',sans-serif;--fs:'Playfair Display',serif;
  }
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{font-family:var(--fb);background:var(--bg);color:var(--text);overflow-x:hidden;cursor:none;}
  ::-webkit-scrollbar{width:3px;}
  ::-webkit-scrollbar-track{background:var(--bg);}
  ::-webkit-scrollbar-thumb{background:linear-gradient(var(--crimson-dark),var(--crimson));border-radius:2px;}
  body::after{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");pointer-events:none;z-index:9999;opacity:0.4;}
  /* CURSOR */
  .cursor{position:fixed;width:10px;height:10px;background:var(--crimson);border-radius:50%;pointer-events:none;z-index:99999;transform:translate(-50%,-50%);transition:width .2s,height .2s;mix-blend-mode:screen;}
  .cursor-ring{position:fixed;width:38px;height:38px;border:1.5px solid rgba(201,24,74,0.5);border-radius:50%;pointer-events:none;z-index:99998;transform:translate(-50%,-50%);transition:width .3s,height .3s,opacity .3s;}
  .cursor.hov{width:16px;height:16px;} .cursor-ring.hov{width:56px;height:56px;opacity:0.3;}
  /* NAV */
  nav#nb{position:fixed;top:0;left:0;right:0;z-index:1000;padding:20px 60px;display:flex;align-items:center;justify-content:space-between;transition:all .5s;}
  nav#nb.sc{background:rgba(6,6,13,0.94);backdrop-filter:blur(24px);border-bottom:1px solid var(--border);padding:14px 60px;}
  .nav-logo{text-decoration:none;display:flex;align-items:center;}
  .nav-logo img{height:44px;transition:filter .3s,transform .3s;}
  .nav-logo img:hover{filter:drop-shadow(0 0 20px rgba(201,24,74,0.7));transform:scale(1.03);}
  .nav-logo-text{display:none;font-family:var(--fc);font-size:20px;font-weight:800;letter-spacing:2px;color:var(--text);}
  .nav-logo-text span{color:var(--crimson);}
  .nav-links{display:flex;align-items:center;gap:32px;list-style:none;}
  .nav-links a{color:var(--muted);text-decoration:none;font-family:var(--fc);font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;transition:color .3s;position:relative;}
  .nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:1px;background:var(--crimson);transform:scaleX(0);transform-origin:left;transition:transform .35s;}
  .nav-links a:hover{color:var(--text);}
  .nav-links a:hover::after{transform:scaleX(1);}
  .nav-actions{display:flex;align-items:center;gap:10px;}
  .btn-si{color:var(--text2);text-decoration:none;font-family:var(--fc);font-size:13px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;padding:10px 20px;border-radius:4px;border:1px solid var(--border-s);transition:all .3s;}
  .btn-si:hover{border-color:rgba(201,24,74,0.4);color:var(--text);background:rgba(255,255,255,0.04);}
  .btn-jf{color:white;text-decoration:none;font-family:var(--fc);font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:10px 20px;border-radius:4px;background:var(--crimson);box-shadow:0 0 20px rgba(201,24,74,0.35);transition:all .3s;}
  .btn-jf:hover{background:var(--crimson-light);box-shadow:0 0 32px rgba(201,24,74,0.6);transform:translateY(-1px);}
  .hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;}
  .hamburger span{display:block;width:24px;height:2px;background:var(--text);border-radius:2px;transition:all .3s;}
  /* LAYOUT */
  .container{max-width:1280px;margin:0 auto;padding:0 60px;}
  .sl{font-family:var(--fc);font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--crimson);font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:12px;}
  .sl::before{content:'';width:24px;height:1px;background:var(--crimson);}
  .sl.c{justify-content:center;} .sl.c::before{display:none;}
  h2.st{font-family:var(--fd);font-size:clamp(32px,4vw,58px);line-height:1;color:var(--text);margin-bottom:18px;}
  h2.st em{font-style:normal;color:var(--crimson);}
  .ss{font-size:16px;line-height:1.85;color:var(--muted);max-width:560px;}
  /* BTNS */
  .bp{display:inline-flex;align-items:center;gap:10px;background:var(--crimson);color:white;padding:14px 32px;border-radius:6px;font-family:var(--fc);font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase;text-decoration:none;transition:all .3s;box-shadow:0 8px 32px rgba(201,24,74,0.4);position:relative;overflow:hidden;}
  .bp::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.18),transparent);transition:left .5s;}
  .bp:hover::before{left:100%;}
  .bp:hover{background:var(--crimson-light);box-shadow:0 12px 40px rgba(201,24,74,0.65);transform:translateY(-2px);}
  .bs{display:inline-flex;align-items:center;gap:10px;color:var(--text2);padding:14px 26px;border-radius:6px;font-family:var(--fc);font-size:14px;font-weight:600;letter-spacing:2px;text-transform:uppercase;text-decoration:none;border:1px solid var(--border-s);transition:all .3s;}
  .bs:hover{border-color:rgba(201,24,74,0.5);color:var(--crimson-light);background:rgba(201,24,74,0.06);}
  /* REVEAL */
  .rv{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s ease;}
  .rv.on{opacity:1;transform:translateY(0);}
  .rl{opacity:0;transform:translateX(-40px);transition:opacity .8s ease,transform .8s ease;}
  .rl.on{opacity:1;transform:translateX(0);}
  .rr{opacity:0;transform:translateX(40px);transition:opacity .8s ease,transform .8s ease;}
  .rr.on{opacity:1;transform:translateX(0);}
  .d1{transition-delay:.1s;} .d2{transition-delay:.2s;} .d3{transition-delay:.3s;} .d4{transition-delay:.4s;}
  /* FOOTER */
  footer{background:var(--bg2);border-top:1px solid var(--border-s);padding:70px 0 0;}
  .ft{max-width:1280px;margin:0 auto;padding:0 60px 60px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:50px;}
  .fb img{height:40px;margin-bottom:18px;display:block;}
  .fb p{font-size:14px;line-height:1.8;color:var(--muted);margin-bottom:20px;max-width:260px;}
  .fsoc{display:flex;gap:10px;}
  .fsoc a{width:36px;height:36px;border-radius:8px;background:var(--card);border:1px solid var(--border-s);display:flex;align-items:center;justify-content:center;font-size:15px;text-decoration:none;transition:all .3s;}
  .fsoc a:hover{background:rgba(201,24,74,0.15);border-color:var(--border);transform:translateY(-2px);}
  .fc-col h4{font-family:var(--fc);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--text2);font-weight:700;margin-bottom:20px;}
  .fc-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
  .fc-col ul li a{font-size:14px;color:var(--muted);text-decoration:none;transition:color .3s;}
  .fc-col ul li a:hover{color:var(--text);}
  .fbot{max-width:1280px;margin:0 auto;padding:20px 60px;border-top:1px solid var(--border-s);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
  .fbot p{font-size:12px;color:var(--muted);}
  .fbot a{color:var(--muted);text-decoration:none;transition:color .3s;}
  .fbot a:hover{color:var(--crimson-light);}
  /* PAGE HERO (inner pages) */
  .ph{padding:150px 0 70px;position:relative;overflow:hidden;text-align:center;}
  .ph::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(201,24,74,0.14) 0%,transparent 70%);pointer-events:none;}
  #pc{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.5;}
  .ph-inner{position:relative;z-index:2;}
  .ph h1{font-family:var(--fd);font-size:clamp(40px,6vw,84px);line-height:1;color:var(--text);margin-bottom:22px;}
  .ph h1 em{font-style:normal;color:var(--crimson);}
  .ph p{font-family:var(--fs);font-style:italic;font-size:clamp(16px,2vw,24px);color:var(--text2);max-width:600px;margin:0 auto;line-height:1.6;}
  /* CTA SECTION */
  .cta-s{padding:120px 0;text-align:center;position:relative;overflow:hidden;}
  .cta-s::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(201,24,74,0.11) 0%,transparent 70%);}
  .cta-s .inner{position:relative;z-index:1;}
  .cta-s h2{font-family:var(--fd);font-size:clamp(34px,4.5vw,64px);line-height:1;margin-bottom:18px;}
  .cta-s p{font-size:17px;color:var(--muted);max-width:500px;margin:0 auto 36px;line-height:1.7;}
  .cta-acts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
  .cta-note{margin-top:16px;font-size:13px;color:var(--muted);}
  .cta-note a{color:var(--crimson-light);text-decoration:none;}
  /* ── RESPONSIVE BASE ── */
  @media(max-width:1100px){
    nav#nb,nav#nb.sc{padding:16px 30px;}
    .container{padding:0 30px;}
    .ft{grid-template-columns:1fr 1fr;gap:36px;}
    .fbot{padding:20px 30px;}
  }
  @media(max-width:768px){
    .nav-links{display:none;}
    .nav-actions .btn-si{display:none;}
    .hamburger{display:flex;}
    .ft{grid-template-columns:1fr 1fr;}
  }
  @media(max-width:540px){
    .ft{grid-template-columns:1fr;}
    .cta-s{padding:80px 0;}
  }


    /* STATUS PAGE */
    .status-wrap { max-width:900px; margin:0 auto; padding:110px 60px 100px; }

    /* HEADER */
    .sh { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-bottom:28px; border-bottom:1px solid var(--border-s); margin-bottom:36px; flex-wrap:wrap; }
    .sh-left { }
    .sh-eyebrow { font-family:var(--fc); font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--crimson); font-weight:700; margin-bottom:10px; display:flex; align-items:center; gap:10px; }
    .sh-eyebrow::before { content:''; width:20px; height:1px; background:var(--crimson); }
    .sh-title { font-family:var(--fd); font-size:clamp(28px,4vw,48px); color:var(--text); letter-spacing:1px; }
    .sh-right { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
    .sh-updated { font-size:12px; color:var(--muted); font-family:var(--fc); letter-spacing:1px; text-transform:uppercase; }
    .checking-badge { display:inline-flex; align-items:center; gap:7px; background:rgba(201,24,74,.1); border:1px solid rgba(201,24,74,.25); border-radius:100px; padding:6px 14px; font-family:var(--fc); font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--crimson-light); }
    .checking-spin { width:10px; height:10px; border:2px solid rgba(201,24,74,.3); border-top-color:var(--crimson-light); border-radius:50%; animation:spin 0.8s linear infinite; display:none; }
    .checking-dot { width:8px; height:8px; background:var(--green); border-radius:50%; }
    @keyframes spin { to { transform:rotate(360deg); } }

    /* OVERALL BANNER */
    .ob { background:var(--card); border:1px solid var(--border-s); border-radius:18px; padding:24px 28px; display:flex; align-items:center; gap:20px; position:relative; overflow:hidden; margin-bottom:32px; }
    .ob::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--sc,var(--muted)); transition:background .5s; }
    .pulse-ring { width:52px; height:52px; flex-shrink:0; border-radius:50%; display:flex; align-items:center; justify-content:center; position:relative; transition:background .5s,border .5s; }
    .pulse-ring::after { content:''; position:absolute; inset:-7px; border-radius:50%; border:1px solid var(--sc-faint,transparent); animation:pulseRing 2.4s ease-out infinite; }
    @keyframes pulseRing { 0%{transform:scale(.85);opacity:0;} 50%{opacity:1;} 100%{transform:scale(1.4);opacity:0;} }
    .pulse-dot { width:16px; height:16px; border-radius:50%; background:var(--sc,var(--muted)); transition:background .5s,box-shadow .5s; }
    .ob-text { }
    .ob-status { font-family:var(--fd); font-size:clamp(20px,2.5vw,28px); color:var(--sc,var(--muted)); transition:color .5s; margin-bottom:4px; }
    .ob-sub { font-size:14px; color:var(--muted); }

    /* GROUPS */
    .group { margin-bottom:28px; }
    .group-title { font-family:var(--fc); font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:12px; padding-left:4px; }
    .group-cards { display:flex; flex-direction:column; gap:10px; }

    /* SERVICE CARD */
    .svc { background:var(--card); border:1px solid var(--border-s); border-radius:12px; padding:16px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; transition:border-color .3s; }
    .svc:hover { border-color:var(--border); }
    .svc-left { display:flex; align-items:center; gap:14px; min-width:0; }
    .svc-indicator { width:10px; height:10px; border-radius:50%; background:var(--muted); flex-shrink:0; transition:background .4s,box-shadow .4s; }
    .svc-name { font-family:var(--fc); font-size:14px; font-weight:700; letter-spacing:.5px; color:var(--text); }
    .svc-url { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; }
    .svc-right { display:flex; align-items:center; gap:16px; flex-shrink:0; }
    .svc-latency { font-family:var(--fc); font-size:12px; color:var(--muted); letter-spacing:1px; min-width:60px; text-align:right; }
    .svc-badge { font-family:var(--fc); font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:5px 12px; border-radius:100px; border:1px solid; transition:all .4s; white-space:nowrap; }

    /* HISTORY */
    .history-wrap { margin-top:36px; background:var(--card); border:1px solid var(--border-s); border-radius:14px; padding:24px 28px; }
    .history-title { font-family:var(--fc); font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:16px; }
    .history-list { display:flex; flex-direction:column; gap:8px; max-height:240px; overflow-y:auto; }
    .history-item { display:flex; align-items:center; gap:12px; font-size:13px; color:var(--muted); padding:8px 0; border-bottom:1px solid var(--border-s); }
    .history-item:last-child { border-bottom:none; }
    .hi-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
    .hi-time { font-family:var(--fc); font-size:11px; color:var(--muted); letter-spacing:1px; flex-shrink:0; min-width:56px; }
    .history-empty { font-size:13px; color:var(--muted); text-align:center; padding:20px 0; }

    @media(max-width:700px){
      .status-wrap { padding:90px 20px 80px; }
      .sh { flex-direction:column; align-items:flex-start; }
      .sh-right { align-items:flex-start; }
      .svc-url { display:none; }
      .svc-right { gap:10px; }
    }

/* ══════════════════════════════════════════════════════════════════════
   MOBILE-FIRST · ACCESSIBILITY · MOTION  (added in modularisation pass)
   ══════════════════════════════════════════════════════════════════════ */
@media (hover: none), (pointer: coarse) {
  body { cursor: auto; }
  .cursor, .cursor-ring { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rv, .rl, .rr { opacity: 1 !important; transform: none !important; }
}
img { max-width: 100%; }
.hamburger span { transition: transform .3s ease, opacity .2s ease; }
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
body.menu-open { overflow: hidden; }
@media (max-width: 768px) {
  .nav-links.open {
    display: flex; flex-direction: column; position: fixed;
    top: 64px; left: 0; right: 0; gap: 18px; padding: 28px 30px;
    background: rgba(6, 6, 13, .97);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(201, 24, 74, .2); z-index: 999;
  }
  .nav-links.open li { width: 100%; }
  .nav-links.open a { display: block; width: 100%; padding: 10px 0; font-size: 18px; }
  input, select, textarea { font-size: 16px; }
}