:root{
    --bg:#090D13;
    --bg-alt:#0C1119;
    --panel:#121822;
    --panel-2:#161E2A;
    --border:#222B38;
    --border-soft:#1A222E;
    --text:#EAF0EE;
    --text-dim:#7C8AA0;
    --text-dimmer:#4A5567;
    --verify:#00F5A0;
    --verify-dim:rgba(0,245,160,0.10);
    --fake:#FF4D5E;
    --fake-dim:rgba(255,77,94,0.10);
    --used:#FFB020;
    --used-dim:rgba(255,176,32,0.10);
    --font-display:'Space Grotesk', sans-serif;
    --font-mono:'JetBrains Mono', monospace;
    --font-body:'Inter', sans-serif;
  }

  *{box-sizing:border-box; margin:0; padding:0;}

  html{scroll-behavior:smooth;}

  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    line-height:1.6;
    overflow-x:hidden;
    background-image:
      radial-gradient(circle at 15% 10%, rgba(0,245,160,0.05), transparent 40%),
      radial-gradient(circle at 85% 30%, rgba(255,176,32,0.04), transparent 40%),
      linear-gradient(var(--border-soft) 1px, transparent 1px),
      linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
    background-size: auto, auto, 44px 44px, 44px 44px;
    background-position: 0 0, 0 0, -1px -1px, -1px -1px;
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }

  a{color:inherit; text-decoration:none;}
  button{font-family:inherit; cursor:pointer;}

  ::selection{background:var(--verify); color:#04140D;}

  :focus-visible{
    outline:2px solid var(--verify);
    outline-offset:3px;
  }

  .eyebrow{
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--verify);
    display:inline-flex;
    align-items:center;
    gap:8px;
  }
  .eyebrow::before{
    content:'';
    width:6px; height:6px;
    background:var(--verify);
    border-radius:50%;
    box-shadow:0 0 8px var(--verify);
    animation:pulse 2s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{opacity:1;}
    50%{opacity:0.35;}
  }

  /* ---------- NAV ---------- */
  .nav{
    position:fixed;
    top:0; left:0; right:0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 32px;
    background:rgba(9,13,19,0.72);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border-soft);
  }
  .nav-brand{
    font-family:var(--font-display);
    font-weight:700;
    font-size:19px;
    letter-spacing:0.01em;
  }
  .nav-brand span{color:var(--verify);}
  .nav-links{
    display:flex;
    align-items:center;
    gap:6px;
  }
  .nav-link{
    font-family:var(--font-mono);
    font-size:13px;
    letter-spacing:0.03em;
    text-transform:uppercase;
    color:var(--text-dim);
    padding:9px 16px;
    border-radius:8px;
    transition:color .2s ease, background .2s ease;
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:transparent;
    border:1px solid transparent;
  }
  .nav-link:hover, .nav-link.active{
    color:var(--text);
    background:var(--panel-2);
    border-color:var(--border);
  }
  .nav-dropdown{position:relative;}
  .dropdown-trigger svg{
    width:11px; height:11px;
    transition:transform .2s ease;
  }
  .nav-dropdown.open .dropdown-trigger svg{transform:rotate(180deg);}
  .dropdown-menu{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    min-width:190px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:10px;
    padding:6px;
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
    box-shadow:0 20px 40px rgba(0,0,0,0.45);
  }
  .nav-dropdown.open .dropdown-menu{
    opacity:1; visibility:visible; transform:translateY(0);
  }
  .dropdown-menu a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 12px;
    font-size:13px;
    font-family:var(--font-mono);
    color:var(--text-dim);
    border-radius:6px;
    transition:color .15s ease, background .15s ease;
  }
  .dropdown-menu a:hover{
    color:var(--verify);
    background:var(--verify-dim);
  }
  .dropdown-menu a::after{content:'↗'; opacity:0.5; font-size:11px;}

  /* ---------- LAYOUT ---------- */
  main{padding-top:0;}
  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 32px;
  }

  /* ---------- HERO ---------- */
  .hero{
    padding:64px 0 90px;
  }
  .hero .wrap{
    display:flex;
    flex-direction:column;
    gap:56px;
  }
  @media (min-width:960px){
    .hero .wrap{
      flex-direction:row;
      align-items:center;
      gap:64px;
    }
    .hero-copy{flex:1 1 46%;}
    .hero-scanner{flex:1 1 54%;}
  }

  .hero-copy h1{
    font-family:var(--font-display);
    font-size:clamp(38px, 5.6vw, 62px);
    font-weight:700;
    line-height:1.04;
    letter-spacing:-0.01em;
    margin:18px 0 20px;
  }
  .hero-copy h1 em{
    font-style:normal;
    color:var(--verify);
    position:relative;
  }
  .hero-copy p{
    color:var(--text-dim);
    font-size:16.5px;
    max-width:440px;
    margin-bottom:26px;
  }
  .range-info{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--text-dimmer);
    border:1px dashed var(--border);
    border-radius:8px;
    padding:10px 14px;
  }
  .range-info b{color:var(--text-dim); font-weight:600;}

  /* ---------- SCANNER PANEL ---------- */
  .hero-scanner{
    background:linear-gradient(180deg, var(--panel), var(--bg-alt));
    border:1px solid var(--border);
    border-radius:20px;
    padding:40px 32px;
    position:relative;
    overflow:hidden;
  }
  .hero-scanner::before{
    content:'';
    position:absolute;
    inset:0;
    background:
      repeating-linear-gradient(115deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 10px);
    pointer-events:none;
  }

  .seal-wrap{
    display:flex;
    justify-content:center;
    margin-bottom:28px;
  }
  .seal{
    width:148px; height:148px;
    position:relative;
  }
  .seal svg{width:100%; height:100%; display:block;}
  .seal .ring-outer{
    fill:none; stroke:var(--border); stroke-width:1.5;
  }
  .seal .ring-status{
    fill:none;
    stroke:var(--text-dimmer);
    stroke-width:2.5;
    stroke-linecap:round;
    stroke-dasharray:339;
    stroke-dashoffset:339;
    transform-origin:center;
    transform:rotate(-90deg);
    transition:stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1), stroke 0.4s ease;
  }
  .seal.state-authentic .ring-status{stroke:var(--verify); stroke-dashoffset:0; filter:drop-shadow(0 0 6px rgba(0,245,160,0.6));}
  .seal.state-fake .ring-status{stroke:var(--fake); stroke-dashoffset:0; filter:drop-shadow(0 0 6px rgba(255,77,94,0.5));}
  .seal.state-used .ring-status{stroke:var(--used); stroke-dashoffset:0; filter:drop-shadow(0 0 6px rgba(255,176,32,0.5));}

  .seal .sweep{
    transform-origin:74px 74px;
    opacity:0;
  }
  .seal.state-checking .sweep{
    opacity:1;
    animation:sweep 1s linear infinite;
  }
  .seal.state-checking .ring-status{
    stroke:var(--text-dim);
    stroke-dashoffset:255;
    animation:none;
  }
  @keyframes sweep{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
  }

  .seal-icon{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .seal-icon svg{width:44px; height:44px;}
  .seal-icon .icon{
    opacity:0;
    transform:scale(0.6);
    transition:opacity .3s ease, transform .3s ease;
    position:absolute;
  }
  .seal.state-idle .icon-idle{opacity:1; transform:scale(1);}
  .seal.state-checking .icon-checking{opacity:1; transform:scale(1);}
  .seal.state-authentic .icon-authentic{opacity:1; transform:scale(1);}
  .seal.state-fake .icon-fake{opacity:1; transform:scale(1);}
  .seal.state-used .icon-used{opacity:1; transform:scale(1);}

  .icon-idle path, .icon-idle circle{stroke:var(--text-dimmer);}
  .icon-checking path{stroke:var(--text-dim);}
  .icon-authentic path{stroke:var(--verify);}
  .icon-fake path{stroke:var(--fake);}
  .icon-used path{stroke:var(--used);}

  #verify-form{
    display:flex;
    flex-direction:column;
    gap:12px;
    position:relative;
    z-index:1;
  }
  #token-input{
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:10px;
    padding:16px 16px;
    font-family:var(--font-mono);
    font-size:15px;
    letter-spacing:0.06em;
    color:var(--text);
    text-transform:uppercase;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  #token-input::placeholder{color:var(--text-dimmer); text-transform:none; letter-spacing:normal;}
  #token-input:focus{
    border-color:var(--verify);
    box-shadow:0 0 0 3px var(--verify-dim);
    outline:none;
  }
  .verify-btn{
    background:var(--verify);
    color:#04140D;
    font-family:var(--font-display);
    font-weight:700;
    font-size:15px;
    border:none;
    border-radius:10px;
    padding:16px;
    letter-spacing:0.01em;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
    box-shadow:0 0 0 rgba(0,245,160,0);
  }
  .verify-btn:hover{
    box-shadow:0 8px 24px rgba(0,245,160,0.28);
    transform:translateY(-1px);
  }
  .verify-btn:active{transform:translateY(0);}
  .verify-btn:disabled{opacity:0.6; cursor:not-allowed; transform:none; box-shadow:none;}

  .result-panel{
    margin-top:20px;
    border-radius:12px;
    padding:18px 18px;
    border:1px solid var(--border);
    background:var(--bg);
    display:none;
    animation:reveal .35s ease;
  }
  .result-panel.show{display:block;}
  @keyframes reveal{
    from{opacity:0; transform:translateY(6px);}
    to{opacity:1; transform:translateY(0);}
  }
  .result-panel.authentic{border-color:rgba(0,245,160,0.35); background:var(--verify-dim);}
  .result-panel.fake{border-color:rgba(255,77,94,0.35); background:var(--fake-dim);}
  .result-panel.used{border-color:rgba(255,176,32,0.35); background:var(--used-dim);}
  .result-title{
    font-family:var(--font-display);
    font-weight:700;
    font-size:16.5px;
    margin-bottom:6px;
  }
  .result-panel.authentic .result-title{color:var(--verify);}
  .result-panel.fake .result-title{color:var(--fake);}
  .result-panel.used .result-title{color:var(--used);}
  .result-message{font-size:14px; color:var(--text); margin-bottom:4px;}
  .result-sub{font-size:12.5px; color:var(--text-dim); font-family:var(--font-mono);}

  /* ---------- SECTIONS ---------- */
  section.block{
    padding:80px 0;
    border-top:1px solid var(--border-soft);
  }
  .block-head{
    max-width:560px;
    margin-bottom:48px;
  }
  .block-head h2{
    font-family:var(--font-display);
    font-size:clamp(26px,3.4vw,36px);
    font-weight:700;
    margin-top:14px;
    letter-spacing:-0.01em;
  }

  /* TOP PRODUCT SHOWCASE — full-bleed, first thing visible */
  .top-showcase{
    position:relative;
    width:100%;
    height:100vh;
    height:100dvh;
    overflow:hidden;
    border-bottom:1px solid var(--border-soft);
  }
  @media (min-width:960px){
    .top-showcase{
      height:74vh;
      min-height:560px;
      max-height:800px;
    }
  }
  .top-showcase img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
  }
  .top-showcase .frame-empty{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    color:var(--text-dimmer);
    font-family:var(--font-mono);
    font-size:13px;
    text-align:center;
    padding:24px;
    background:
      radial-gradient(circle at 30% 20%, rgba(0,245,160,0.06), transparent 45%),
      var(--bg-alt);
  }
  .top-showcase .frame-empty svg{width:40px; height:40px; opacity:0.5;}
  .top-showcase .frame-empty b{color:var(--text-dim); font-weight:600;}

  .top-showcase .scrim{
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(9,13,19,0.96) 0%, rgba(9,13,19,0.55) 32%, rgba(9,13,19,0.05) 60%, transparent 100%);
    pointer-events:none;
    z-index:1;
  }
  .top-showcase .scrim-top{
    position:absolute;
    top:0; left:0; right:0;
    height:150px;
    background:linear-gradient(to bottom, rgba(9,13,19,0.55), transparent);
    pointer-events:none;
    z-index:1;
  }

  /* corner brackets, like an authentication label */
  .corner{
    position:absolute;
    width:24px; height:24px;
    border:2px solid var(--verify);
    opacity:0.9;
    z-index:2;
  }
  .corner.tl{top:96px; left:20px; border-right:none; border-bottom:none; border-top-left-radius:6px;}
  .corner.tr{top:96px; right:20px; border-left:none; border-bottom:none; border-top-right-radius:6px;}
  .corner.bl{bottom:20px; left:20px; border-right:none; border-top:none; border-bottom-left-radius:6px;}
  .corner.br{bottom:20px; right:20px; border-left:none; border-top:none; border-bottom-right-radius:6px;}

  .top-showcase-content{
    position:absolute;
    left:0; right:0; bottom:0;
    z-index:2;
    padding:0 24px 30px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
    text-align:center;
  }
  .top-tag{
    background:rgba(9,13,19,0.55);
    border:1px solid var(--border);
    backdrop-filter:blur(6px);
    border-radius:999px;
    padding:9px 18px;
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--text-dim);
    white-space:nowrap;
    display:inline-flex;
    align-items:center;
    gap:8px;
  }
  .top-tag::before{
    content:'';
    width:6px; height:6px;
    border-radius:50%;
    background:var(--verify);
    box-shadow:0 0 6px var(--verify);
  }
  .scroll-cue{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
    font-family:var(--font-mono);
    font-size:10.5px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--text-dimmer);
  }
  .scroll-cue svg{
    width:15px; height:15px;
    animation:bob 1.7s ease-in-out infinite;
  }
  @keyframes bob{
    0%,100%{transform:translateY(0); opacity:0.6;}
    50%{transform:translateY(6px); opacity:1;}
  }

  /* HOW IT WORKS */
  .steps{
    display:grid;
    grid-template-columns:1fr;
    gap:1px;
    background:var(--border);
    border:1px solid var(--border);
    border-radius:14px;
    overflow:hidden;
  }
  @media (min-width:760px){
    .steps{grid-template-columns:repeat(3,1fr);}
  }
  .step{
    background:var(--panel);
    padding:32px 28px;
  }
  .step-mark{
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--verify);
    letter-spacing:0.1em;
    display:block;
    margin-bottom:16px;
  }
  .step h3{
    font-family:var(--font-display);
    font-size:18px;
    margin-bottom:10px;
  }
  .step p{color:var(--text-dim); font-size:14.5px;}

  /* WHY VERIFY */
  .why-box{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:16px;
    padding:44px;
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  @media (min-width:860px){
    .why-box{flex-direction:row; align-items:center; gap:48px;}
    .why-box .why-visual{flex:0 0 200px;}
    .why-box .why-copy{flex:1;}
  }
  .why-visual{
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .why-visual svg{width:120px; height:120px;}
  .why-copy h2{
    font-family:var(--font-display);
    font-size:26px;
    margin-bottom:14px;
  }
  .why-copy p{color:var(--text-dim); font-size:15px; max-width:560px;}

  /* FAQ */
  .faq-list{
    display:flex;
    flex-direction:column;
    gap:1px;
    background:var(--border);
    border:1px solid var(--border);
    border-radius:14px;
    overflow:hidden;
  }
  .faq-item{
    background:var(--panel);
  }
  .faq-q{
    width:100%;
    text-align:left;
    background:none;
    border:none;
    color:var(--text);
    padding:22px 26px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-family:var(--font-body);
    font-weight:600;
    font-size:15px;
  }
  .faq-q svg{
    width:16px; height:16px;
    flex-shrink:0;
    color:var(--text-dim);
    transition:transform .25s ease;
  }
  .faq-item.open .faq-q svg{transform:rotate(45deg); color:var(--verify);}
  .faq-a{
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
  }
  .faq-a p{
    padding:0 26px 22px;
    color:var(--text-dim);
    font-size:14.5px;
    max-width:640px;
  }

  /* FOOTER */
  footer{
    border-top:1px solid var(--border-soft);
    padding:36px 0;
  }
  footer .wrap{
    display:flex;
    flex-direction:column;
    gap:14px;
    align-items:flex-start;
  }
  @media (min-width:640px){
    footer .wrap{flex-direction:row; align-items:center; justify-content:space-between;}
  }
  footer p{font-size:13px; color:var(--text-dimmer); font-family:var(--font-mono);}
  footer a{
    font-size:13px;
    font-family:var(--font-mono);
    color:var(--text-dim);
    border-bottom:1px solid var(--border);
    padding-bottom:2px;
    transition:color .2s ease, border-color .2s ease;
  }
  footer a:hover{color:var(--verify); border-color:var(--verify);}