:root{
    --bg-deep:#12071f;
    --bg-deep2:#1c0e33;
    --magenta:#ff3f9e;
    --cyan:#4be8d0;
    --gold:#ffcf72;
    --violet:#9b5bff;
    --text-light:#f4ecff;
    --text-muted:#b6a3d9;
    --card-bg:rgba(255,255,255,0.04);
    --card-border:rgba(255,255,255,0.09);
  }

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

  html{scroll-behavior:smooth;}

  body{
    background:var(--bg-deep);
    color:var(--text-light);
    font-family:'Manrope', sans-serif;
    overflow-x:hidden;
    line-height:1.6;
  }

  h1,h2,h3,.display{
    font-family:'Cormorant Garamond', serif;
    font-weight:600;
    letter-spacing:0.01em;
  }

  .eyebrow{
    font-family:'Manrope', sans-serif;
    font-size:0.78rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:700;
    display:inline-block;
    margin-bottom:14px;
  }

  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}

  .container{
    max-width:1120px;
    margin:0 auto;
    padding:0 28px;
  }

  section{
    position:relative;
    padding:120px 0;
  }

  /* ===== Aurora background ===== */
  .aurora-bg{
    position:fixed;
    inset:0;
    z-index:-2;
    background:var(--bg-deep);
    overflow:hidden;
  }
  .aurora-bg::before, .aurora-bg::after{
    content:"";
    position:absolute;
    width:140vw;
    height:140vw;
    border-radius:50%;
    filter:blur(90px);
    opacity:0.35;
    animation:drift 34s ease-in-out infinite alternate;
  }
  .aurora-bg::before{
    background:radial-gradient(circle at 30% 30%, var(--magenta), transparent 60%);
    top:-50%;
    left:-40%;
  }
  .aurora-bg::after{
    background:radial-gradient(circle at 70% 70%, var(--violet), transparent 60%);
    bottom:-50%;
    right:-40%;
    animation-delay:-12s;
  }
  @keyframes drift{
    0%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(5%, 4%) scale(1.08); }
    100%{ transform:translate(-4%, -3%) scale(0.98); }
  }

  /* ===== Portal ring — signature element ===== */
  .portal{
    --size:1;
    width:calc(320px * var(--size));
    height:calc(320px * var(--size));
    border-radius:50%;
    position:relative;
    background:conic-gradient(from 0deg, var(--magenta), var(--violet), var(--cyan), var(--gold), var(--magenta));
    animation:spin 18s linear infinite;
    padding:3px;
  }
  .portal-inner{
    width:100%;
    height:100%;
    border-radius:50%;
    background:var(--bg-deep);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .portal-core{
    width:78%;
    height:78%;
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%, rgba(255,255,255,0.14), transparent 60%),
                radial-gradient(circle at 65% 70%, var(--violet) 0%, var(--bg-deep2) 70%);
    box-shadow: inset 0 0 60px rgba(255,255,255,0.06);
  }
  @keyframes spin{
    to{ transform:rotate(360deg); }
  }
  .portal-mini{
    width:64px; height:64px;
  }
  .portal-mini .portal-core{
    box-shadow:none;
  }

  /* ===== Nav ===== */
  .site-header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:100;
    backdrop-filter:blur(14px);
    background:rgba(18,7,31,0.55);
    border-bottom:1px solid rgba(255,255,255,0.06);
  }
  .site-header > nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 28px;
    max-width:1120px;
    margin:0 auto;
  }
  .logo{
    font-family:'Cormorant Garamond', serif;
    font-size:1.35rem;
    font-weight:600;
    letter-spacing:0.02em;
  }
  .logo span{
    background:linear-gradient(90deg, var(--magenta), var(--gold));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .nav-links{
    display:flex;
    gap:32px;
    font-size:0.92rem;
    color:var(--text-muted);
  }
  .nav-links a:hover{ color:var(--text-light); }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:13px 28px;
    border-radius:100px;
    font-weight:700;
    font-size:0.92rem;
    cursor:pointer;
    border:none;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .btn-primary{
    background:linear-gradient(90deg, var(--magenta), var(--violet));
    color:#fff;
    box-shadow:0 8px 30px rgba(255,63,158,0.35);
  }
  .btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 40px rgba(255,63,158,0.5);
  }
  .btn-ghost{
    background:transparent;
    border:1px solid rgba(255,255,255,0.25);
    color:var(--text-light);
  }
  .btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }
  .btn-small{ padding:10px 22px; font-size:0.85rem; }

  /* ===== Hero ===== */
  .hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    padding-top:120px;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:60px;
    align-items:center;
  }
  .hero h1{
    font-size:clamp(2.6rem, 5vw, 4.2rem);
    line-height:1.08;
    margin-bottom:24px;
  }
  .course-name{
    display:block;
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-size:clamp(1.1rem, 1.6vw, 1.35rem);
    color:var(--text-muted);
    margin-bottom:14px;
    letter-spacing:0.01em;
  }
  .course-name b{
    font-style:normal;
    font-weight:600;
    background:linear-gradient(90deg, var(--gold), var(--magenta));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .hero h1 em{
    font-style:italic;
    background:linear-gradient(90deg, var(--gold), var(--magenta) 60%, var(--cyan));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .hero p.lead{
    font-size:1.15rem;
    color:var(--text-muted);
    max-width:520px;
    margin-bottom:36px;
  }
  .hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:28px; }
  .start-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:0.88rem;
    color:var(--text-muted);
    padding:10px 18px;
    border:1px solid var(--card-border);
    border-radius:100px;
    background:var(--card-bg);
  }
  .start-badge b{ color:var(--gold); font-weight:700; }
  .dot{ width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }

  .hero-visual{
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
  }
  .hero-visual .portal{ --size:1.15; }
  .hero-visual .float-word{
    position:absolute;
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-size:1rem;
    color:var(--text-muted);
    opacity:0.7;
    animation:float 6s ease-in-out infinite;
  }
  .fw1{ top:6%; left:0%; animation-delay:0s; }
  .fw2{ top:80%; left:6%; animation-delay:1.5s; }
  .fw3{ top:45%; right:-4%; animation-delay:3s; }
  @keyframes float{
    0%,100%{ transform:translateY(0px); }
    50%{ transform:translateY(-14px); }
  }

  /* ===== Section headers ===== */
  .section-head{
    max-width:640px;
    margin-bottom:56px;
  }
  .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
  .section-head h2{ font-size:clamp(2rem, 3.4vw, 2.8rem); }
  .section-head p{ color:var(--text-muted); font-size:1.05rem; margin-top:14px; }

  /* ===== Pains ===== */
  .pains{
    background:linear-gradient(180deg, transparent, rgba(155,91,255,0.06), transparent);
  }
  .pains-list{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:16px;
    margin-bottom:56px;
  }
  .pain-item{
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:20px 22px;
    background:var(--card-bg);
    border:1px solid var(--card-border);
    border-radius:16px;
  }
  .pain-item .mark{
    color:var(--magenta);
    font-size:1.3rem;
    font-family:'Cormorant Garamond', serif;
  }
  .promise{
    text-align:center;
    max-width:680px;
    margin:0 auto;
    font-family:'Cormorant Garamond', serif;
    font-size:1.7rem;
    font-style:italic;
    line-height:1.5;
    color:var(--text-light);
    padding-top:20px;
    border-top:1px solid var(--card-border);
  }
  .promise b{
    background:linear-gradient(90deg, var(--gold), var(--cyan));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    font-style:normal;
  }

  /* ===== Benefits grid ===== */
  .benefits-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
  }
  .benefit-card{
    padding:32px 26px;
    border-radius:20px;
    background:var(--card-bg);
    border:1px solid var(--card-border);
    transition:transform .3s ease, border-color .3s ease;
  }
  .benefit-card:hover{
    transform:translateY(-6px);
    border-color:rgba(255,207,114,0.4);
  }
  .benefit-icon{
    width:44px; height:44px;
    border-radius:12px;
    margin-bottom:18px;
    background:linear-gradient(135deg, var(--magenta), var(--violet));
    display:flex; align-items:center; justify-content:center;
    font-size:1.2rem;
  }
  .benefit-card h3{ font-size:1.3rem; margin-bottom:10px; font-weight:600; }
  .benefit-card p{ color:var(--text-muted); font-size:0.95rem; }

  /* ===== Program / steps ===== */
  .program{
    background:radial-gradient(ellipse at 50% 0%, rgba(255,63,158,0.08), transparent 60%);
  }
  .steps{
    position:relative;
  }
  .steps::before{
    content:"";
    position:absolute;
    left:31px;
    top:12px;
    bottom:12px;
    width:2px;
    background:linear-gradient(180deg, var(--magenta), var(--cyan), var(--gold));
    opacity:0.4;
  }
  .step{
    display:grid;
    grid-template-columns:64px 1fr;
    gap:26px;
    padding:26px 0;
  }
  .step .portal-mini{ align-self:start; }
  .step-body h3{ font-size:1.4rem; margin-bottom:8px; font-weight:600; }
  .step-body .step-eyebrow{ color:var(--cyan); font-size:0.8rem; letter-spacing:0.15em; text-transform:uppercase; font-weight:700; margin-bottom:6px; display:block; }
  .step-body p{ color:var(--text-muted); }

  /* ===== Author ===== */
  .author{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:56px;
    align-items:center;
  }
  .author-avatar{
    width:280px; height:280px;
    border-radius:50%;
    background:conic-gradient(from 120deg, var(--gold), var(--magenta), var(--violet), var(--cyan), var(--gold));
    padding:5px;
    justify-self:center;
  }
  .author-avatar-inner{
    width:100%; height:100%;
    border-radius:50%;
    background:var(--bg-deep2);
    display:flex; align-items:center; justify-content:center;
    font-family:'Cormorant Garamond', serif;
    font-size:5rem;
    color:var(--text-light);
    overflow:hidden;
  }
  .author-avatar-inner img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
  }
  .author-text .eyebrow{ margin-bottom:8px; }
  .author-text h2{ font-size:2.2rem; margin-bottom:6px; }
  .author-role{ color:var(--gold); font-size:0.95rem; margin-bottom:20px; display:block; }
  .author-text p{ color:var(--text-muted); margin-bottom:14px; }

  /* ===== Testimonials ===== */
  .review-videos-row{
    display:flex;
    justify-content:center;
    gap:22px;
    flex-wrap:wrap;
    margin-bottom:64px;
  }
  .review-video-wrap{
    max-width:300px;
    width:100%;
    padding:4px;
    border-radius:28px;
    background:conic-gradient(from 0deg, var(--magenta), var(--violet), var(--cyan), var(--gold), var(--magenta));
  }
  .review-video-inner{
    background:var(--bg-deep2);
    border-radius:24px;
    overflow:hidden;
  }
  .review-video-inner video{
    width:100%;
    display:block;
    border-radius:24px 24px 0 0;
    max-height:520px;
    background:#000;
  }
  .review-video-caption{
    padding:16px 20px;
    text-align:center;
    font-size:0.85rem;
    color:var(--text-muted);
  }
  .review-video-caption b{ color:var(--text-light); }

  .screenshots-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:22px;
    align-items:start;
  }
  .screenshot-card{
    border-radius:20px;
    padding:4px;
    background:linear-gradient(160deg, rgba(255,207,114,0.5), rgba(255,63,158,0.25), rgba(75,232,208,0.35));
  }
  .screenshot-card-inner{
    border-radius:16px;
    overflow:hidden;
    background:var(--bg-deep2);
  }
  .screenshot-card-inner img{
    width:100%;
    display:block;
  }
  .screenshot-card-inner img + img{
    border-top:3px solid var(--bg-deep2);
  }
  .screenshot-caption{
    padding:12px 16px 16px;
    font-size:0.82rem;
    color:var(--text-muted);
  }
  .screenshot-caption b{ color:var(--gold); font-family:'Cormorant Garamond', serif; font-size:0.95rem; }

  /* ===== Pricing ===== */
  .pricing-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
    align-items:stretch;
  }
  .price-card{
    padding:34px 28px;
    border-radius:22px;
    background:var(--card-bg);
    border:1px solid var(--card-border);
    display:flex;
    flex-direction:column;
  }
  .price-card.featured{
    border:1px solid transparent;
    background:linear-gradient(var(--bg-deep2), var(--bg-deep2)) padding-box,
               conic-gradient(from 0deg, var(--magenta), var(--violet), var(--cyan), var(--gold), var(--magenta)) border-box;
    transform:scale(1.03);
    position:relative;
  }
  .featured-tag{
    position:absolute; top:-14px; left:50%; transform:translateX(-50%);
    background:linear-gradient(90deg, var(--gold), var(--magenta));
    color:#12071f;
    font-size:0.72rem;
    font-weight:800;
    letter-spacing:0.08em;
    text-transform:uppercase;
    padding:6px 16px;
    border-radius:100px;
  }
  .price-name{ font-size:1.1rem; font-weight:700; margin-bottom:6px; }
  .price-tagline{ color:var(--text-muted); font-size:0.88rem; margin-bottom:20px; }
  .price-value{
    font-family:'Cormorant Garamond', serif;
    font-size:2.6rem;
    font-weight:600;
    margin-bottom:22px;
  }
  .price-value span{ font-size:1rem; color:var(--text-muted); font-family:'Manrope', sans-serif; }
  .price-features{ list-style:none; margin-bottom:28px; flex-grow:1; }
  .price-features li{
    padding:9px 0;
    border-top:1px solid var(--card-border);
    font-size:0.92rem;
    color:var(--text-muted);
    display:flex;
    gap:10px;
  }
  .price-features li:first-child{ border-top:none; }
  .price-features li::before{ content:"◈"; color:var(--gold); }
  .price-card .btn{ width:100%; justify-content:center; }
  .price-card-actions{ display:flex; flex-direction:column; gap:10px; }
  .btn-crypto{
    background:transparent;
    border:1px dashed rgba(255,255,255,0.25);
    color:var(--text-muted);
    font-size:0.85rem;
    padding:10px 22px;
  }
  .btn-crypto:hover{ border-color:var(--cyan); color:var(--cyan); }
  .btn-card{
    background:transparent;
    border:1px dashed rgba(255,255,255,0.25);
    color:var(--text-muted);
    font-size:0.85rem;
    padding:10px 22px;
    cursor:pointer;
  }
  .btn-card:hover{ border-color:var(--gold); color:var(--gold); }
  .card-details{
    display:none;
    margin-top:10px;
    padding:16px;
    border-radius:14px;
    background:rgba(255,255,255,0.04);
    border:1px solid var(--card-border);
    font-size:0.85rem;
    color:var(--text-muted);
  }
  .card-details.open{ display:block; }
  .card-details .card-number{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    background:rgba(255,255,255,0.05);
    border-radius:10px;
    padding:10px 14px;
    margin:8px 0;
    font-family:'Manrope', monospace;
    font-size:1rem;
    color:var(--text-light);
    letter-spacing:0.03em;
  }
  .card-details .copy-btn{
    background:transparent;
    border:1px solid rgba(255,255,255,0.2);
    color:var(--gold);
    font-size:0.75rem;
    padding:4px 10px;
    border-radius:100px;
    cursor:pointer;
    white-space:nowrap;
  }

  /* ===== FAQ ===== */
  .faq-item{
    border-bottom:1px solid var(--card-border);
  }
  .faq-q{
    padding:24px 0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
    font-weight:600;
    font-size:1.05rem;
  }
  .faq-q .plus{
    font-size:1.4rem;
    color:var(--gold);
    transition:transform .3s ease;
    font-family:'Cormorant Garamond', serif;
  }
  .faq-item.open .plus{ transform:rotate(45deg); }
  .faq-a{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease, padding .35s ease;
    color:var(--text-muted);
    font-size:0.95rem;
  }
  .faq-item.open .faq-a{ max-height:600px; padding-bottom:22px; }

  /* ===== Final CTA ===== */
  .final-cta{
    text-align:center;
    padding:100px 0 140px;
  }
  .final-cta .portal{ margin:0 auto 40px; --size:0.5; }
  .final-cta h2{ font-size:clamp(2.2rem, 4vw, 3.2rem); margin-bottom:18px; }
  .final-cta p{ color:var(--text-muted); max-width:520px; margin:0 auto 36px; font-size:1.05rem; }

  footer{
    padding:40px 0;
    border-top:1px solid var(--card-border);
    text-align:center;
    color:var(--text-muted);
    font-size:0.85rem;
  }

  /* ===== Reveal on scroll ===== */
  .reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .7s ease, transform .7s ease;
  }
  .reveal.visible{ opacity:1; transform:translateY(0); }

  /* ===== Responsive ===== */
  @media (max-width:860px){
    .nav-links{ display:none; }
    .hero-grid{ grid-template-columns:1fr; }
    .hero-visual{ order:-1; margin-bottom:20px; }
    .hero-visual .portal{ --size:0.75; }
    .pains-list{ grid-template-columns:1fr; }
    .benefits-grid{ grid-template-columns:1fr; }
    .author{ grid-template-columns:1fr; text-align:center; }
    .author-text p{ text-align:left; }
    .screenshots-grid{ grid-template-columns:1fr; }
    .screenshot-card[style]{ max-width:100% !important; }
    .review-video-wrap{ max-width:280px; }
    .pricing-grid{ grid-template-columns:1fr; }
    .price-card.featured{ transform:none; }
    section{ padding:80px 0; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
  }

  /* ===== ZavERP authentication ===== */
  .header-actions{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .auth-actions{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .auth-button{
    min-height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 15px;
    border:1px solid rgba(255,255,255,0.22);
    border-radius:100px;
    background:rgba(255,255,255,0.05);
    color:var(--text-light);
    font-family:'Manrope', sans-serif;
    font-size:0.76rem;
    font-weight:700;
    cursor:pointer;
  }
  .auth-button--primary{
    border-color:transparent;
    background:linear-gradient(90deg, var(--magenta), var(--violet));
  }
  .account-menu{ position:relative; }
  .account-menu summary{ list-style:none; }
  .account-menu summary::-webkit-details-marker{ display:none; }
  .account-trigger{
    min-height:38px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:0 13px;
    border:1px solid rgba(255,255,255,0.2);
    border-radius:100px;
    background:rgba(255,255,255,0.05);
    color:var(--text-light);
    font-size:0.76rem;
    cursor:pointer;
  }
  .account-trigger__status{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--cyan);
    box-shadow:0 0 10px var(--cyan);
  }
  .account-trigger__label{
    max-width:120px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .account-trigger__chevron{ color:var(--gold); }
  .account-menu__panel{
    position:absolute;
    z-index:10;
    top:calc(100% + 12px);
    right:0;
    width:250px;
    display:grid;
    gap:2px;
    padding:8px;
    border:1px solid rgba(255,255,255,0.14);
    border-radius:16px;
    background:rgba(28,14,51,0.97);
    box-shadow:0 24px 60px rgba(0,0,0,0.4);
    backdrop-filter:blur(16px);
  }
  .account-menu__panel a{
    min-height:38px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:0 11px;
    border-radius:9px;
    color:var(--text-muted);
    font-size:0.78rem;
  }
  .account-menu__panel a:hover{
    color:var(--text-light);
    background:rgba(255,255,255,0.07);
  }
  .account-menu__panel a > span:last-child{ color:var(--cyan); }
  .account-menu__divider{
    height:1px;
    margin:6px 8px;
    background:var(--card-border);
  }
  .account-menu__logout{ color:#ffb6da !important; }

  @media (max-width:860px){
    .site-header > nav{ gap:12px; }
    .header-actions > .btn{ display:none; }
  }

  @media (max-width:560px){
    .site-header > nav{ padding-left:18px; padding-right:18px; }
    .logo{ font-size:1.15rem; }
    .account-trigger__label{ max-width:82px; }
    .auth-button{ min-height:36px; padding:0 12px; font-size:0.7rem; }
    .account-menu__panel{
      position:fixed;
      top:72px;
      right:16px;
      left:16px;
      width:auto;
    }
  }