:root{
    --bg: #301650;
    --bg-soft: #0b1210;
    --panel: #301650;
    --panel-2: #101a17;
    --border: rgba(120,255,180,0.12);
    --border-strong: rgba(120,255,180,0.28);
    --green: #37ffa0;
    --green-dim: #1fae6f;
    --green-deep: #0a4d33;
    --text: #eaf4ef;
    --text-dim: #9fb3ab;
    --text-faint: #6c8079;
    --radius: 16px;
    --maxw: 1180px;
    --font: 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
  }

  @font-face{
    font-family: 'Space Grotesk';
    src: local('Arial');
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{
    margin:0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  a{ color: inherit; text-decoration: none; }
  ul{ list-style: none; margin:0; padding:0; }
  img{ max-width:100%; display:block; }
  button{ font-family: inherit; cursor:pointer; }

  ::selection{ background: var(--green); color:#04140c; }

  .wrap{
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 32px;
  }

  /* Background ambience */
  .glow{
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
      radial-gradient(600px 400px at 12% 8%, #d726fc2b, transparent 60%), 
      radial-gradient(700px 500px at 88% 30%, #00c5fa40, transparent 60%), 
      radial-gradient(900px 600px at 50% 100%, #0080ca63, transparent 60%)
  }

  /* NAV */
  header.site{
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 18px 0;
  }
  .navbar{
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 12px 20px;
    display:flex;
    align-items:center;
    justify-content: space-between;
    background: rgba(10,16,14,0.65);
    border: 1px solid var(--border);
    border-radius: 999px;
    backdrop-filter: blur(14px);
  }
  .brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing: 0.3px; }
  .brand-mark{
    width: 30px; height:30px; border-radius: 8px;
    background: linear-gradient(145deg, var(--green), var(--green-deep));
    display:flex; align-items:center; justify-content:center;
    font-size: 14px; color:#04140c; font-weight:800;
    box-shadow: 0 0 18px rgba(55,255,160,0.35);
  }
  nav.links{ display:flex; gap: 30px; }
  nav.links a{
    font-size: 14.5px;
    color: var(--text-dim);
    transition: color .2s ease;
  }
  nav.links a:hover{ color: var(--text); }
  .nav-cta{ display:flex; align-items:center; gap:14px; }

  .menu-toggle{
    display:none;
    background:none; border:none; color:var(--text);
    width: 36px; height:36px; align-items:center; justify-content:center;
  }
  .menu-toggle span, .menu-toggle::before, .menu-toggle::after{
    content:''; display:block; width: 20px; height:2px; background: var(--text); margin: 4px auto; transition:.25s;
  }

  /* Buttons */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding: 12px 24px;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 600;
    border: 1px solid transparent;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
    white-space: nowrap;
  }
  .btn-solid{
    background: var(--green);
    color: #04140c;
    box-shadow: 0 0 0 rgba(55,255,160,0);
  }
  .btn-solid:hover{ box-shadow: 0 6px 24px rgba(55,255,160,0.35); transform: translateY(-1px); }
  .btn-outline{
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text);
  }
  .btn-outline:hover{ border-color: var(--green); color: var(--green); }
  .btn-ghost{
    background: rgba(255,255,255,0.03);
    border-color: var(--border);
    color: var(--text-dim);
    font-size: 13.5px;
    padding: 10px 18px;
  }
  .btn-ghost:hover{ border-color: var(--border-strong); color: var(--text); }

  section{ position: relative; z-index: 1; }

  /* HERO */
  .hero{
    text-align:center;
    padding: 80px 20px 40px;
  }
  .hero h1{
    font-size: clamp(32px, 5.4vw, 58px);
    line-height: 1.12;
    margin: 0 auto 22px;
    max-width: 920px;
    font-weight: 700;
    letter-spacing: -0.5px;
  }
  .hero h1 .accent{ color: var(--green); }
  .hero p.lead{
    max-width: 620px;
    margin: 0 auto 32px;
    color: var(--text-dim);
    font-size: 16px;
  }
  .hero-ctas{ display:flex; gap:14px; justify-content:center; margin-bottom: 56px; flex-wrap: wrap; }

  .hero-orb{
    position: relative;
    width: 260px; height: 260px;
    margin: 0 auto;
  }
  .hero-orb .ring{
    position:absolute; inset:0;
    border: 1px solid var(--border);
    border-radius: 50%;
  }
  .hero-orb .ring.r2{ inset: -40px; opacity:.6; }
  .hero-orb .ring.r3{ inset: -80px; opacity:.3; }
  .hero-orb .core{
    position:absolute; inset: 10px;
    border-radius: 24px;
    background: transparent;
    /* border: 1px solid var(--border-strong); */
    display:flex; align-items:center; justify-content:center;
    /* box-shadow: 0 0 60px rgba(55,255,160,0.25), inset 0 0 30px rgba(55,255,160,0.08); */
    animation: floaty 5s ease-in-out infinite;
  }
  .hero-orb .core svg{ width:100px; height:100px; }
  @keyframes floaty{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-10px); }
  }
  .hero-lines{
    max-width: 900px; margin: -20px auto 0; opacity:.5;
  }

  /* SECTION HEADS */
  .eyebrow-free-head{ max-width: 640px; margin-bottom: 36px; }
  .sec-title{
    font-size: clamp(24px, 3.2vw, 34px);
    font-weight: 700;
    margin: 0 0 10px;
    letter-spacing: -0.3px;
  }
  .sec-title .accent{ color: var(--green); }
  .sec-sub{ color: var(--text-dim); font-size: 15px; max-width: 560px; }

  .section-pad{ padding: 90px 0; }

  /* WHAT IS AIPF */
  .about-grid{
    display:grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: center;
  }
  .about-grid h2{ font-size: clamp(26px,3.4vw,34px); margin: 0 0 16px; font-weight:700; }
  .about-grid p{ color: var(--text-dim); margin: 0 0 22px; font-size: 15px; }
  .about-grid p .hl{ color: var(--green); }
  .why-list{ margin-bottom: 26px; }
  .why-list li{
    display:flex; gap:10px; align-items:flex-start;
    color: var(--text-dim); font-size: 14.5px; margin-bottom: 10px;
  }
  .why-list li::before{
    content:''; flex:none; width:6px; height:6px; margin-top:8px;
    border-radius:50%; background: var(--green);
    box-shadow: 0 0 8px rgba(55,255,160,0.7);
  }
  .about-actions{ display:flex; gap: 12px; flex-wrap: wrap; }

  .bot-panel{
    position: relative;
    border-radius: var(--radius);
    background: radial-gradient(circle at 50% 30%, #533f8d, #050908 75%);
    border: 1px solid var(--border);
    aspect-ratio: 4/5;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .bot-panel svg{ width: 62%; }

  /* FEATURES */
  .feat-lead{ margin-bottom: 40px; }
  .feat-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
  }
  .feat-card{
    border-radius: var(--radius);
    padding: 26px;
    border: 1px solid var(--border);
    background: var(--panel);
    min-height: 220px;
    display:flex; flex-direction:column; justify-content:flex-end;
    transition: border-color .2s ease, transform .2s ease;
  }
  .feat-card:hover{ border-color: var(--border-strong); transform: translateY(-3px); }
  .feat-card.highlight{
    background: linear-gradient(165deg, #163227, #3a188c);
    border-color: var(--border-strong);
    justify-content: space-between;
  }
  .feat-card h3{ font-size: 17px; margin: 0 0 10px; font-weight: 700; }
  .feat-card p{ font-size: 13.6px; color: var(--text-dim); margin:0; }
  .feat-card .tag{
    align-self: flex-start;
    font-size: 11.5px;
    color: var(--green);
    background: rgba(55,255,160,0.08);
    border: 1px solid var(--border-strong);
    padding: 5px 12px;
    border-radius: 999px;
  }

  .feat-grid-2{
    display:grid;
    grid-template-columns: repeat(2,1fr);
    gap: 20px;
  }
  .feat-wide{
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--panel-2);
    overflow:hidden;
    display:flex; flex-direction:column;
    min-height: 230px;
  }
  .feat-wide .art{
    flex: 1;
    background: linear-gradient(150deg, #0e1e18, #301650);
    display:flex; align-items:center; justify-content:center;
  }
  .feat-wide .art svg{ width: 46%; opacity:.9; }
  .feat-wide .body{ padding: 22px 26px 26px; }
  .feat-wide h3{ margin:0 0 8px; font-size: 16.5px; font-weight:700; }
  .feat-wide p{ margin:0; font-size: 13.6px; color: var(--text-dim); }

  /* POWER OF AI */
  .power-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items:center;
  }
  .power-text p{ color: var(--text-dim); font-size: 15px; margin-bottom: 26px; }
  .power-checks{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .check-item{
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    background: var(--panel);
  }
  .check-item .mark{
    width: 22px; height:22px; border-radius:6px;
    background: rgba(55,255,160,0.12);
    border: 1px solid var(--border-strong);
    display:flex; align-items:center; justify-content:center;
    margin-bottom: 12px;
    color: var(--green); font-size: 13px;
  }
  .check-item h4{ font-size: 14px; margin: 0 0 4px; font-weight:700; }
  .check-item p{ font-size: 12.5px; color: var(--text-faint); margin:0; }

  .chip-panel{
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: radial-gradient(circle at 50% 40%, #39286d, #050807 70%);
    aspect-ratio: 1/1;
    display:flex; align-items:center; justify-content:center;
    position: relative;
  }
  .chip-panel svg{ width: 55%; }

  /* HOW IT WORKS */
  .works-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .work-card{
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    padding: 26px 22px;
    position: relative;
  }
  .work-card .icon{
    width: 44px; height:44px; border-radius: 10px;
    background: rgba(55,255,160,0.08);
    border: 1px solid var(--border-strong);
    display:flex; align-items:center; justify-content:center;
    margin-bottom: 18px;
    color: var(--green);
  }
  .work-card h3{ font-size: 16px; margin: 0 0 8px; font-weight:700; }
  .work-card p{ font-size: 13.4px; color: var(--text-dim); margin: 0 0 16px; }
  .work-card .foot{
    font-size: 11.5px; color: var(--text-faint);
    padding-top: 12px; border-top: 1px dashed var(--border);
    letter-spacing: .3px;
  }

  /* BLOCKCHAIN STEPS */
  .chain-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
  }
  .chain-steps{ border-top: 1px solid var(--border); }
  .chain-step{
    display:flex; align-items:center; gap: 18px;
    padding: 18px 6px;
    border-bottom: 1px solid var(--border);
    cursor:pointer;
    transition: background .2s ease;
  }
  .chain-step:hover{ background: rgba(255,255,255,0.02); }
  .chain-step.active{ background: rgba(55,255,160,0.05); }
  .chain-step .num{
    font-size: 12px; color: var(--text-faint); width: 30px; flex:none;
  }
  .chain-step.active .num{ color: var(--green); }
  .chain-step .body{ flex:1; }
  .chain-step h4{ margin:0 0 4px; font-size: 15.5px; font-weight:700; }
  .chain-step p{ margin:0; font-size: 13px; color: var(--text-dim); max-height:0; overflow:hidden; transition: max-height .3s ease, margin .3s ease; }
  .chain-step.active p{ max-height: 60px; margin-top:4px; }
  .chain-step .arrow{ color: var(--text-faint); transition: transform .2s ease; flex:none; }
  .chain-step.active .arrow{ color: var(--green); transform: rotate(90deg); }

  .chain-visual{
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: radial-gradient(circle at 50% 30%, #39286d, #050807 75%);
    aspect-ratio: 1/0.95;
    position: relative;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .chain-visual svg{ width:52%; }
  .chain-visual .badge{
    position:absolute; top:16px; left:16px;
    background: rgba(6,10,9,0.7); border:1px solid var(--border-strong);
    padding: 6px 12px; border-radius: 8px; font-size: 11px; color: var(--text-dim);
  }
  .chain-visual .badge b{ display:block; color: var(--text); font-size: 13px; }
  .chain-visual .preview-tag{
    position:absolute; top:16px; right:16px;
    font-size: 11px; color: var(--text-faint);
  }

  /* GOVERNANCE TOKEN */
  .gov-grid{
    display:grid;
    grid-template-columns: 1fr 0.85fr;
    gap: 60px;
    align-items:center;
  }
  .gov-grid h2{ font-size: clamp(24px,3.2vw,32px); margin:0 0 16px; font-weight:700; }
  .gov-grid > div p{ color: var(--text-dim); font-size: 15px; margin-bottom: 26px; }
  .gov-grid .hl{ color: var(--green); }
  .gov-points{
    display:grid; grid-template-columns: 1fr 1fr; gap: 16px;
  }
  .gov-points div{
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    background: var(--panel);
    font-size: 13px;
    color: var(--text-dim);
  }
  .gov-points strong{ display:block; color: var(--text); font-size: 14px; margin-bottom: 4px; }

  .token-visual{
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: radial-gradient(circle at 50% 20%, #39286d, #050807 70%);
    aspect-ratio: 4/5;
    display:flex; align-items:center; justify-content:center;
  }
  .token-visual svg{ width: 50%; }

  /* COMMUNITY */
  .community-band{
    border-radius: 24px;
    border: 1px solid var(--border);
    background: linear-gradient(160deg, #0f1c17, #060b09 65%);
    padding: 54px;
    display:grid;
    grid-template-columns: 1fr 0.8fr;
    gap: 40px;
    align-items:center;
  }
  .community-band h2{ font-size: clamp(22px,2.8vw,30px); margin: 0 0 16px; font-weight:700; }
  .community-band p{ color: var(--text-dim); font-size: 14.5px; margin-bottom: 26px; max-width: 520px; }
  .community-points{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .community-points div{ display:flex; gap:10px; align-items:flex-start; font-size: 13.2px; color: var(--text-dim); }
  .community-points span.dot{
    flex:none; width:8px; height:8px; margin-top:6px; border-radius:50%;
    background: var(--green); box-shadow: 0 0 8px rgba(55,255,160,0.6);
  }
  .community-visual{
    border-radius: 18px;
    background: radial-gradient(circle at 50% 30%, #10221c, #050908 75%);
    border: 1px solid var(--border);
    aspect-ratio: 1/0.85;
    display:flex; align-items:center; justify-content:center;
  }
  .community-visual svg{ width:55%; }

  /* FAQ */
  .faq-head{ text-align:center; margin-bottom: 42px; }
  .faq-head .sec-sub{ margin: 0 auto; }
  .faq-list{ max-width: 760px; margin: 0 auto; }
  .faq-item{
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-bottom: 14px;
    background: var(--panel);
    overflow: hidden;
  }
  .faq-q{
    display:flex; align-items:center; justify-content:space-between;
    padding: 20px 24px;
    font-size: 15px; font-weight: 600;
    background:none; border:none; color: var(--text); width:100%;
    text-align:left;
  }
  .faq-q .plusminus{
    flex:none; width: 26px; height:26px; border-radius: 8px;
    border: 1px solid var(--border-strong);
    display:flex; align-items:center; justify-content:center;
    font-size: 15px; color: var(--green);
    transition: transform .2s ease;
  }
  .faq-item.open .plusminus{ transform: rotate(180deg); }
  .faq-a{
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .faq-a p{
    margin: 0; padding: 0 24px 22px;
    color: var(--text-dim); font-size: 14px;
  }
  .faq-item.open .faq-a{ max-height: 200px; }

  /* CTA */
  .cta-band{
    text-align:center;
    padding: 90px 20px;
    position: relative;
  }
  .cta-band h2{
    font-size: clamp(26px, 4vw, 40px);
    margin: 0 0 14px;
    font-weight: 700;
  }
  .cta-band p{ color: var(--text-dim); max-width: 480px; margin: 0 auto 30px; font-size: 15px; }

  /* FOOTER */
  footer{
    border-top: 1px solid var(--border);
    padding: 40px 0 30px;
  }
  .footer-top{
    display:flex; justify-content:center; gap: 18px; margin-bottom: 26px;
  }
  .footer-top a{
    width: 38px; height:38px; border-radius: 999px;
    border: 1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    color: var(--text-dim); font-size: 13px;
    transition: .2s ease;
  }
  .footer-top a:hover{ border-color: var(--green); color: var(--green); }
  .footer-links{
    display:flex; justify-content:center; gap: 26px; flex-wrap:wrap;
    font-size: 13px; color: var(--text-faint); margin-bottom: 24px;
  }
  .footer-links a:hover{ color: var(--text-dim); }
  .footer-bottom{ text-align:center; color: var(--text-faint); font-size: 12.5px; margin-bottom: 26px; }
  .footer-brand{ display:flex; justify-content:center; align-items:center; gap:8px; color: var(--text-dim); font-weight:700; letter-spacing:.4px; font-size: 14px; }

  /* Toast */
  #toast{
    position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: var(--panel); border: 1px solid var(--border-strong);
    color: var(--text); padding: 12px 22px; border-radius: 999px;
    font-size: 13.5px; opacity:0; pointer-events:none; transition: .3s ease;
    z-index: 200;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  }
  #toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

  /* Swap modal */
  .modal-overlay{
    position: fixed; inset:0; background: rgba(3,6,5,0.7);
    display:none; align-items:center; justify-content:center; z-index: 300;
    backdrop-filter: blur(4px);
    padding: 20px;
  }
  .modal-overlay.show{ display:flex; }
  .modal{
    width: 100%; max-width: 400px;
    background: var(--panel-2);
    border: 1px solid var(--border-strong);
    border-radius: 20px;
    padding: 26px;
  }
  .modal h3{ margin:0 0 18px; font-size: 18px; }
  .swap-box{
    border: 1px solid var(--border); border-radius: 14px; padding: 16px; margin-bottom: 10px;
    background: var(--bg-soft);
  }
  .swap-box label{ font-size: 11.5px; color: var(--text-faint); display:block; margin-bottom: 8px; }
  .swap-row{ display:flex; justify-content:space-between; align-items:center; gap: 10px; }
  .swap-row input{
    background:none; border:none; color: var(--text); font-size: 20px; width: 100%; outline:none;
    font-family: inherit;
  }
  .swap-row select{
    background: rgba(255,255,255,0.05); border:1px solid var(--border-strong); color: var(--text);
    border-radius: 999px; padding: 8px 12px; font-size: 13px; font-family: inherit;
  }
  .swap-mid{ display:flex; justify-content:center; margin: -6px 0; position: relative; z-index: 2; }
  .swap-mid button{
    width: 34px; height:34px; border-radius: 50%; background: var(--panel);
    border: 1px solid var(--border-strong); color: var(--green);
  }
  .swap-details{ font-size: 12.5px; color: var(--text-faint); margin: 14px 0; display:flex; justify-content:space-between; }
  .modal-close{
    position:absolute; top:16px; right:16px; background:none; border:none; color: var(--text-dim); font-size: 18px;
  }
  .modal{ position: relative; }

  /* Responsive */
  @media (max-width: 980px){
    .about-grid, .power-grid, .chain-grid, .gov-grid, .community-band{
      grid-template-columns: 1fr;
    }
    .works-grid{ grid-template-columns: repeat(2,1fr); }
    .feat-grid{ grid-template-columns: 1fr 1fr; }
    .feat-grid-2{ grid-template-columns: 1fr; }
    .power-checks{ grid-template-columns: 1fr 1fr; }
    .community-band{ padding: 36px; }
  }
  @media (max-width: 720px){
    .wrap{ padding: 0 18px; }
    nav.links{ display:none; }
    .menu-toggle{ display:flex; flex-direction:column; }
    .nav-cta .btn-outline{ display:none; }
    .feat-grid{ grid-template-columns: 1fr; }
    .works-grid{ grid-template-columns: 1fr; }
    .power-checks{ grid-template-columns: 1fr; }
    .gov-points{ grid-template-columns: 1fr; }
    .community-points{ grid-template-columns: 1fr; }
    .about-actions{ flex-direction: column; }
    .about-actions .btn{ width:100%; }
    .section-pad{ padding: 60px 0; }
  }

  .mobile-menu{
    display:none;
    flex-direction:column;
    gap: 4px;
    max-width: var(--maxw);
    margin: 8px auto 0;
    padding: 10px 20px;
    background: rgba(10,16,14,0.9);
    border: 1px solid var(--border);
    border-radius: 18px;
  }
  .mobile-menu.show{ display:flex; }
  .mobile-menu a{ padding: 12px 6px; color: var(--text-dim); border-bottom: 1px solid var(--border); font-size:14px; }
  .mobile-menu a:last-child{ border-bottom:none; }

  [data-reveal]{ opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
  [data-reveal].in{ opacity: 1; transform: translateY(0); }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    [data-reveal]{ opacity:1; transform:none; transition:none; }
    .hero-orb .core{ animation: none; }
  }