@font-face {font-family: 'Apex New'; font-style: normal; font-weight: 300; src: local('apex-new-light'), url('fonts/apex-new-light.woff') format('woff'); font-display: swap;} 
@font-face {font-family: 'Apex New'; font-style: normal; font-weight: 400; src: local('apex-new-regular'), url('fonts/apex-new-regular.woff') format('woff'); font-display: swap;}
@font-face {font-family: 'Apex New'; font-style: normal; font-weight: 500; src: local('apex-new-medium'), url('fonts/apex-new-medium.woff') format('woff'); font-display: swap;}
@font-face {font-family: 'Apex New'; font-style: normal; font-weight: 700; src: local('apex-new-bold'), url('fonts/apex-new-bold.woff') format('woff');font-display: swap;}
@font-face {font-family: 'Apex New'; font-style: normal; font-weight: 900; src: local('apex-new-black'), url('fonts/apex-new-black.woff') format('woff');font-display: swap;}

body,h1,h2,h3,h4,h5,h6,p,td,label,input,a, li a {font-family:'Apex New'!important;font-weight: 400;}

  :root{
    --bg:#10141A;
    --grid:#1D2530;
    --paper:#F1EFE7;
    --muted:#585858;
    --amber:#FFB238;
    --teal:#3FB8AF;
    --frame:#2B3542;
  }

  *{box-sizing:border-box;}

  html,body{
    margin:0;
    padding:0;
    height:100%;
    color:var(--paper);
    font-family:'Apex New',sans-serif;
    overflow:hidden;
  }

   .logo{width:100%;}
  .stage{
    position:relative;
    width:100vw;
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .crop{
    position:absolute;
    width:22px;
    height:22px;
    border:1px solid var(--frame);
  }
  .crop.tl{ top:24px; left:24px; border-right:none; border-bottom:none; }
  .crop.tr{ top:24px; right:24px; border-left:none; border-bottom:none; }
  .crop.bl{ bottom:24px; left:24px; border-right:none; border-top:none; }
  .crop.br{ bottom:24px; right:24px; border-left:none; border-top:none; }

  .scale{
    position:absolute;
    bottom:32px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:6px;
    font-family:'Apex New',monospace;
    font-size:10px;
    letter-spacing:0.08em;
    color:var(--muted);
    text-transform:uppercase;
  }
  .scale .bar{
    width:64px;
    height:1px;
    background:repeating-linear-gradient(90deg, var(--frame) 0 6px, transparent 6px 12px);
  }

  .content{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:40px;
    max-width:520px;
  }

  .mark{
    width:88px;
    height:88px;
    margin-bottom:36px;
  }
  .mark .ring{
    fill:none;
    stroke:var(--amber);
    stroke-width:1.4;
    transform-origin:50% 50%;
    animation:focus 3.2s ease-in-out infinite;
  }
  .mark .tick{
    stroke:var(--paper);
    stroke-width:1.4;
    opacity:0.8;
  }
  .mark .dot{
    fill:var(--amber);
  }
  @keyframes focus{
    0%,100%{ r:30; opacity:0.35; }
    50%{ r:24; opacity:1; }
  }
  @media (prefers-reduced-motion: reduce){
    .mark .ring{ animation:none; r:26; opacity:0.9; }
  }

  .eyebrow{
    font-family:'Apex New',monospace;
    font-size:11px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--teal);
    margin:0 0 18px;
  }

  h1{
    font-family:'Apex New',sans-serif;
    font-weight:900;
    text-transform:uppercase;
    font-size:clamp(28px, 4vw, 42px);
    line-height:1.15;
    letter-spacing:-0.01em;
    margin:36px 0 8px;
    color:#222;
  }

  p.lead{
    font-size:15px;
    line-height:1.6;
    color:var(--muted);
    margin:0 0 40px;
    max-width:400px;
  }

  .rule{
    width:1px;
    height:32px;
    background:var(--frame);
    margin-bottom:32px;
  }

  .socials{
    display:flex;
    gap:14px;
  }

  .social{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    text-decoration:none;
    color:var(--muted);
    transition:color 0.2s ease;
  }

  .social .box{
    width:48px;
    height:48px;
    border:1px solid var(--frame);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:border-color 0.2s ease, transform 0.2s ease;
  }

  .social svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:var(--paper);
    stroke-width:1.6;
    transition:stroke 0.2s ease;
  }

  .social span{
    font-family:'Apex New',monospace;
    font-size:10px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    border-radius:4px;
  }

  .social:hover .box{
    transform:translateY(-3px);
  }

  .social:hover span{ color:#222; }
  .whatsapp{background-color:#25d366;}
  .facebook{background-color:#4267b2;}
  .instagram{background-color:#25d366;}

  @media (max-width: 480px){
    .socials{ gap:10px; }
    .social .box{ width:44px; height:44px; }
  }