/* =========================
       RESET + TOKENS
    ========================== */
    *, *::before, *::after { box-sizing: border-box; }
    html, body { height: 100%; }
    body { margin: 0; }
    img { max-width: 100%; display: block; }
    html { -webkit-text-size-adjust: 100%; }

    :root{
      --primary-dark:#0a0e27;
      --primary-blue:#0033a0;
      --accent-blue:#0066ff;
      --accent-gold:#ffd700;
      --accent-cyan:#00d9ff;
      --accent-green:#00ff9d;

      --text-light:#ffffff;
      --text-gray:#e0e0e0;

      --gradient-bg:linear-gradient(135deg,#0a0e27 0%,#1a1f4d 50%,#2a3580 100%);
      --gradient-gold:linear-gradient(135deg,#ffd700 0%,#ffed4e 100%);
      --gradient-blue:linear-gradient(135deg,#0066ff 0%,#00d9ff 100%);

      --card-bg:rgba(26,31,77,.55);
      --card-border:rgba(0,217,255,.18);

      --shadow-heavy:0 20px 60px rgba(0,0,0,.5);
      --shadow-soft:0 18px 55px rgba(0,0,0,.42);

      --radius-xl:28px;
      --radius-lg:22px;
      --radius-md:16px;

      --container:1400px;
      --header-h:84px;
    }

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

    /* =========================
       ANIMATIONS
    ========================== */
    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
    @keyframes fadeInUp { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:translateY(0)} }
    @keyframes slideInDown { from{transform:translateY(-100%);opacity:0} to{transform:translateY(0);opacity:1} }
    @keyframes pulse { 0%,100%{transform:scale(1);opacity:.55} 50%{transform:scale(1.08);opacity:.85} }

    /* =========================
       BASE
    ========================== */
    body{
      font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
      background: var(--primary-dark);
      color: var(--text-light);
      line-height: 1.6;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    body::before{
      content:"";
      position:fixed;
      inset:0;
      background:
        radial-gradient(circle at 20% 50%, rgba(0,102,255,.15) 0%, transparent 52%),
        radial-gradient(circle at 80% 80%, rgba(255,215,0,.12) 0%, transparent 52%),
        radial-gradient(circle at 40% 20%, rgba(0,217,255,.12) 0%, transparent 52%);
      pointer-events:none;
      z-index:-2;
    }

    .container{
      max-width: var(--container);
      margin: 0 auto;
      padding: 0 24px;
    }

    /* =========================
       HEADER / NAV
    ========================== */
    .header{
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(10,14,39,.95);
      backdrop-filter: blur(20px) saturate(180%);
      border-bottom: 1px solid rgba(255,215,0,.15);
      box-shadow: 0 8px 32px rgba(0,102,255,.22);
      animation: slideInDown .55s ease-out;
      transition: padding .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
    }
    .header::after{
      content:"";
      position:absolute;
      bottom:0; left:0;
      width:100%;
      height: 3px;
      background: linear-gradient(90deg, var(--accent-cyan), var(--accent-gold));
    }
    .header-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 16px;
      padding: 14px 0;
      min-height: var(--header-h);
    }
    .header.scrolled{
      box-shadow: 0 12px 42px rgba(0,0,0,.45);
      backdrop-filter: blur(28px) saturate(200%);
    }

    .logo{
      display:flex;
      align-items:center;
      gap: 12px;
      text-decoration:none;
      color: inherit;
      min-width: 0;
      flex: 1 1 auto;
    }
    .logo-icon{
      width: 50px;
      height: 50px;
      border-radius: 12px;
      background: var(--gradient-gold);
      color: var(--primary-dark);
      display:grid;
      place-items:center;
      font-weight: 900;
      font-size: 1.5rem;
      box-shadow: 0 10px 26px rgba(255,215,0,.28);
      animation: float 6s ease-in-out infinite;
      flex: 0 0 auto;
    }
    .logo-text{ min-width: 0; }
    .logo-main{
      font-size: 1.25rem;
      font-weight: 900;
      background: var(--gradient-gold);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1.15;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 52vw;
    }
    .logo-sub{
      font-size: .82rem;
      color: var(--accent-cyan);
      letter-spacing: 1px;
      font-weight: 600;
      opacity: .95;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 52vw;
    }

    .nav-links{
      display:flex;
      align-items:center;
      gap: 6px;
      flex: 0 0 auto;
    }
    .nav-link{
      color: var(--text-light);
      text-decoration:none;
      padding: .62rem 1.05rem;
      border-radius: 999px;
      font-weight: 700;
      font-size: .95rem;
      position: relative;
      transition: transform .2s ease, color .2s ease, background .2s ease;
    }
    .nav-link:hover{ color: var(--accent-gold); transform: translateY(-2px); }
    .nav-link.active{
      background: rgba(255,215,0,.14);
      color: var(--accent-gold);
      box-shadow: 0 6px 18px rgba(255,215,0,.14);
    }

    .btn-join{
      background: var(--gradient-gold);
      color: var(--primary-dark) !important;
      padding: .78rem 1.25rem;
      border-radius: 999px;
      font-weight: 900;
      text-decoration:none;
      box-shadow: 0 10px 28px rgba(255,215,0,.35);
      transition: transform .2s ease, box-shadow .2s ease;
      white-space: nowrap;
    }
    .btn-join:hover{ transform: translateY(-3px); box-shadow: 0 14px 38px rgba(255,215,0,.55); }

    .burger{
      display:none;
      width: 46px;
      height: 46px;
      border-radius: 14px;
      border: 1px solid rgba(0,217,255,.25);
      background: rgba(10,14,39,.78);
      backdrop-filter: blur(16px);
      box-shadow: 0 12px 30px rgba(0,0,0,.35);
      cursor: pointer;
      position: relative;
      align-items:center;
      justify-content:center;
      transition: transform .2s ease, border-color .2s ease;
      flex: 0 0 auto;
      touch-action: manipulation;
    }
    .burger:hover{ transform: translateY(-2px); border-color: rgba(255,215,0,.45); }
    .burger span{
      position:absolute;
      left: 12px;
      right: 12px;
      height: 2px;
      border-radius: 2px;
      background: linear-gradient(90deg, var(--accent-cyan), var(--accent-gold));
      transition: transform .25s ease, top .25s ease, opacity .2s ease;
    }
    .burger span:nth-child(1){ top: 16px; }
    .burger span:nth-child(2){ top: 22px; }
    .burger span:nth-child(3){ top: 28px; }
    .burger.is-open span:nth-child(1){ top:22px; transform: rotate(45deg); }
    .burger.is-open span:nth-child(2){ opacity:0; }
    .burger.is-open span:nth-child(3){ top:22px; transform: rotate(-45deg); }

    .menu-overlay{
      position:fixed;
      inset:0;
      background: rgba(0,0,0,.68);
      backdrop-filter: blur(8px);
      opacity:0;
      pointer-events:none;
      transition: opacity .25s ease;
      z-index: 998;
    }
    .menu-overlay.is-open{
      opacity:1;
      pointer-events:auto;
    }

    .mobile-menu{
      position:fixed;
      top:0;
      right:0;
      height:100vh;
      width:min(400px, 90vw);
      padding: 96px 22px 28px;
      background: rgba(10,14,39,.98);
      backdrop-filter: blur(30px);
      border-left: 1px solid rgba(0,217,255,.2);
      box-shadow: -20px 0 80px rgba(0,0,0,.65);
      transform: translateX(100%);
      transition: transform .35s cubic-bezier(.4,0,.2,1);
      z-index: 999;
      overflow:auto;
      display:flex;
      flex-direction:column;
      gap: 10px;
      -webkit-overflow-scrolling: touch;
    }
    .mobile-menu.is-open{ transform: translateX(0); }
    .mobile-menu a{
      text-decoration:none;
      color: var(--text-light);
      padding: 1rem 1rem;
      border-radius: 14px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.10);
      font-weight: 800;
    }
    .mobile-menu a:hover{ border-color: rgba(255,215,0,.35); }

    @media (max-width: 992px){
      .burger{ display:inline-flex; }
      .nav-links{ display:none; }
      .logo-main, .logo-sub{ max-width: calc(100vw - 140px); }
    }

    /* =========================
       BUTTONS (main)
    ========================== */
    .btn-primary, .btn-secondary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: .75rem;
      padding: 1.08rem 2.15rem;
      border-radius: 999px;
      text-decoration:none;
      font-weight: 900;
      font-size: 1.08rem;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
      position: relative;
      overflow:hidden;
      user-select:none;
      touch-action: manipulation;
    }
    .btn-primary{
      background: var(--gradient-gold);
      color: var(--primary-dark);
      box-shadow: 0 12px 32px rgba(255,215,0,.35);
    }
    .btn-primary:hover{ transform: translateY(-5px); box-shadow: 0 16px 44px rgba(255,215,0,.55); }
    .btn-secondary{
      background: transparent;
      color: var(--accent-gold);
      border: 2px solid var(--accent-gold);
      box-shadow: 0 10px 30px rgba(255,215,0,.12);
    }
    .btn-secondary:hover{ transform: translateY(-5px); border-color: rgba(255,215,0,.85); }

    /* =========================
       HERO (left text / right photo)
    ========================== */
    .hero{
      background: transparent;
      position: relative;
      overflow:hidden;
      padding: 72px 0 92px;
      border-top: 1px solid rgba(0, 217, 255, 0.2);
    }

    .hero-inner{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap: clamp(22px, 4vw, 64px);
      align-items:center;
      padding: 10px 0;
    }

    .hero h1{
      margin: 0 0 .75rem;
      font-size: clamp(2.1rem, 3.6vw, 4rem);
      line-height: 1.06;
      font-weight: 950;
      animation: fadeInUp .9s ease-out .15s both;
      white-space: nowrap;
    }

    .hero h1 .hero-word-white {
      color: #ffffff;
      display: inline-block;
    }

    .hero h1 .hero-word-gradient {
      background: linear-gradient(135deg, #00d9ff 0%, #ffd700 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-shadow: 0 0 60px rgba(0,217,255,.25);
      display: inline-block;
    }
    .hero h2{
      margin: 0 0 1.1rem;
      color: var(--accent-gold);
      font-size: clamp(1.35rem, 2.1vw, 2.2rem);
      font-weight: 800;
      animation: fadeInUp .9s ease-out .25s both;
    }
    .hero p{
      margin: 0 0 2.2rem;
      color: rgba(224,224,224,.92);
      font-size: clamp(1.05rem, 1.2vw, 1.35rem);
      line-height: 1.75;
      max-width: 760px;
      animation: fadeInUp .9s ease-out .35s both;
    }
    .hero-buttons{
      display:flex;
      gap: 14px;
      flex-wrap: wrap;
      animation: fadeInUp .9s ease-out .45s both;
    }

    .hero-media{
      display:flex;
      justify-content:flex-end;
    }
    .hero-photo{
      position:relative;
      width: min(520px, 42vw);
      max-width: 520px;
    }
    .hero-photo-glow{
      position:absolute;
      inset:-42px;
      background:
        radial-gradient(circle at 25% 25%, rgba(0,217,255,.20) 0%, transparent 55%),
        radial-gradient(circle at 75% 75%, rgba(255,215,0,.16) 0%, transparent 60%);
      filter: blur(18px);
      z-index:-1;
      pointer-events:none;
    }
    .hero-photo-frame{
      position:relative;
      border-radius: var(--radius-xl);
      overflow:hidden;
      aspect-ratio: 4 / 5;
      background: rgba(10,14,39,.35);
      border: 1px solid rgba(0,217,255,.22);
      box-shadow: 0 26px 75px rgba(0,0,0,.55);
      transform: perspective(1200px) rotateY(-7deg) rotateX(2deg);
      transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    }
    .hero-photo-frame::before{
      content:"";
      position:absolute;
      inset:-2px;
      border-radius: calc(var(--radius-xl) + 2px);
      padding: 2px;
      background: linear-gradient(135deg, rgba(0,217,255,.45), rgba(255,215,0,.28), rgba(0,217,255,.35));
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events:none;
      opacity:.9;
      z-index:2;
    }
    .hero-photo-frame::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 20% 20%, rgba(0,217,255,.16) 0%, transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(255,215,0,.12) 0%, transparent 60%);
      pointer-events:none;
      opacity:.65;
      z-index:1;
    }
    .hero-photo-frame img{
      width:100%;
      height:100%;
      object-fit:cover;
      transform: scale(1.03);
      filter: saturate(1.05) contrast(1.03);
    }
    .hero-photo-frame:hover{
      transform: perspective(1200px) rotateY(0) rotateX(0) translateY(-8px);
      border-color: rgba(255,215,0,.55);
      box-shadow: 0 34px 95px rgba(0,217,255,.16), 0 0 55px rgba(255,215,0,.10);
    }

    @media (max-width: 992px){
      .hero{ padding: 56px 0 74px; }
      .hero-inner{ grid-template-columns: 1fr; justify-items:center; text-align:center; }
      .hero-buttons{ justify-content:center; }
      .hero-media{ justify-content:center; }
      .hero-photo{ width: min(420px, 100%); }
      .hero-photo-frame{ transform:none; }
    }

    @media (max-width: 640px){
      .hero h1{ white-space: normal; }
    }

    /* =========================
       SECTIONS
    ========================== */
    .section{
      padding: 72px 0;
      position: relative;
      z-index: 1;
    }

    .section-title{
      text-align:center;
      font-size: clamp(1.85rem, 2.6vw, 2.8rem);
      margin: 0 0 36px;
      padding-bottom: 18px;
      position:relative;
      font-weight: 950;
      letter-spacing: .2px;
    }
    .section-title::before{
      content:"";
      position:absolute;
      left:50%;
      bottom:0;
      transform: translateX(-50%);
      width: 210px;
      height: 4px;
      background: linear-gradient(90deg, transparent, var(--accent-cyan), var(--accent-gold), transparent);
      border-radius: 99px;
    }
    .section-title span{
      background: linear-gradient(135deg, var(--accent-gold), var(--accent-cyan));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip:text;
    }

    /* =========================
       PROGRAM (audience panel)
    ========================== */
    #program .audience-panel{
      position:relative;
      border-radius: var(--radius-xl);
      background: rgba(26,31,77,.40);
      border: 1px solid rgba(0,217,255,.18);
      box-shadow: var(--shadow-heavy);
      overflow:hidden;
      padding: 18px;
    }
    #program .audience-head{
      position:relative;
      z-index:1;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 14px;
      padding: 10px 12px 16px;
      margin-bottom: 10px;
      border-bottom: 1px solid rgba(255,255,255,.10);
    }
    #program .audience-kicker{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(0,217,255,.10);
      border: 1px solid rgba(0,217,255,.22);
      color: rgba(224,224,224,.92);
      font-weight: 800;
      font-size: .95rem;
      white-space: nowrap;
    }
    #program .audience-kicker b{ color: var(--accent-cyan); }
    #program .audience-lead{
      color: rgba(224,224,224,.74);
      font-size: 1rem;
      line-height: 1.55;
      max-width: 560px;
    }

    #program .audience-grid{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }
    #program .aud-row{
      display:grid;
      grid-template-columns: 72px 1fr;
      gap: 14px;
      align-items:center;
      padding: 14px;
      border-radius: 18px;
      background: rgba(10,14,39,.55);
      border: 1px solid rgba(255,255,255,.10);
      transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
      position:relative;
      overflow:hidden;
    }
    #program .aud-row::after{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(90deg, transparent, rgba(255,215,0,.08), transparent);
      transform: translateX(-120%);
      transition: transform .65s ease;
      pointer-events:none;
    }
    #program .aud-row:hover{
      transform: translateY(-4px);
      border-color: rgba(255,215,0,.35);
      background: rgba(26,31,77,.55);
      box-shadow: 0 14px 40px rgba(0,217,255,.14);
    }
    #program .aud-row:hover::after{ transform: translateX(120%); }

    #program .aud-ico{
      width: 60px;
      height: 60px;
      border-radius: 18px;
      display:grid;
      place-items:center;
      font-size: 26px;
      background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: inset 0 0 22px rgba(255,255,255,.10), 0 10px 26px rgba(0,0,0,.30);
      color:#fff;
      position:relative;
    }
    #program .aud-ico::before{
      content:"";
      position:absolute;
      inset:-6px;
      border-radius: 22px;
      border: 2px solid rgba(255,255,255,.14);
      opacity:.65;
      pointer-events:none;
    }
    /* soft color variety */
    #program .aud-row:nth-child(1) .aud-ico{ background:linear-gradient(135deg,#ff6b6b,#ff8e8e); }
    #program .aud-row:nth-child(2) .aud-ico{ background:linear-gradient(135deg,#4ecdc4,#6ae2db); }
    #program .aud-row:nth-child(3) .aud-ico{ background:linear-gradient(135deg,#ffd166,#ffe08a); }
    #program .aud-row:nth-child(4) .aud-ico{ background:linear-gradient(135deg,#06d6a0,#0ce9b0); }
    #program .aud-row:nth-child(5) .aud-ico{ background:linear-gradient(135deg,#118ab2,#2aa9d6); }
    #program .aud-row:nth-child(6) .aud-ico{ background:linear-gradient(135deg,#9d4edd,#b57eed); }
    #program .aud-row:nth-child(7) .aud-ico{ background:linear-gradient(135deg,#ff9e6d,#ffb894); }
    #program .aud-row:nth-child(8) .aud-ico{ background:linear-gradient(135deg,#2d8cf0,#5ba5f5); }

    #program .aud-title{
      font-size: 1.1rem;
      font-weight: 950;
      color: var(--accent-gold);
      line-height: 1.2;
      margin: 0 0 6px;
    }
    #program .card-content{
      margin: 0;
      color: rgba(224,224,224,.90);
      font-size: 1rem;
      line-height: 1.55;
    }
    #program .card-highlight{
      display:inline-block;
      background: rgba(0,217,255,.12);
      padding: 2px 8px;
      border-radius: 8px;
      color: var(--accent-cyan);
      font-weight: 800;
    }

    @media (min-width: 900px){
      #program .audience-grid{ grid-template-columns: 1fr 1fr; gap: 14px; }
      #program .aud-row{ grid-template-columns: 76px 1fr; padding: 16px; }
    }
    @media (max-width: 520px){
      #program .audience-head{
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
      }

      /* mobile: hide the lead text */
      #program .audience-lead{
        display: none;
      }

      /* mobile: kicker in TWO lines (max), centered */
      #program .audience-kicker{
        width: 100%;
        text-align: center;
        padding: 10px 14px;
        font-size: .96rem;
        line-height: 1.25;

        /* allow wrapping and clamp to 2 lines */
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }
    @media (max-width: 420px){
      #program .aud-row{ grid-template-columns: 64px 1fr; gap: 12px; padding: 12px; }
      #program .aud-ico{ width: 54px; height: 54px; border-radius: 16px; font-size: 24px; }
    }

    /* =========================
       PATH STEPS
    ========================== */
    .path-steps{
      max-width: 920px;
      margin: 0 auto;
      position: relative;
      padding-left: 120px;
    }
    .path-steps::before{
      content:"";
      position:absolute;
      left: 60px;
      top: 60px;
      bottom: 60px;
      width: 3px;
      border-radius: 2px;
      background: linear-gradient(180deg, rgba(0,217,255,.85), rgba(255,215,0,.7), rgba(0,217,255,.85));
      box-shadow: 0 0 15px rgba(0,217,255,.4);
    }
    .step{
      background: var(--card-bg);
      backdrop-filter: blur(18px);
      padding: 26px;
      margin-bottom: 22px;
      border-radius: var(--radius-lg);
      border: 1px solid rgba(0,217,255,.25);
      position: relative;
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
      animation: fadeInUp .75s ease-out;
    }
    .step::before{
      content:"";
      position:absolute;
      left: -85px;
      top: 50%;
      transform: translateY(-50%);
      width: 22px;
      height: 3px;
      border-radius: 2px;
      background: rgba(0,217,255,.75);
      box-shadow: 0 0 10px rgba(0,217,255,.55);
    }
    .step:hover{
      transform: translateX(10px);
      border-color: rgba(255,215,0,.55);
      box-shadow: 0 15px 40px rgba(0,102,255,.22);
      background: rgba(26,31,77,.70);
    }
    .step-number{
      position:absolute;
      left: -90px;
      top: 50%;
      transform: translateY(-50%);
      width: 70px;
      height: 70px;
      border-radius: 999px;
      display:grid;
      place-items:center;
      font-size: 2rem;
      font-weight: 950;
      color: var(--accent-gold);
      background: var(--primary-dark);
      border: 3px solid rgba(0,217,255,.82);
      box-shadow: 0 0 20px rgba(0,217,255,.5), inset 0 0 15px rgba(0,217,255,.18);
    }
    .step h3{ margin: 0; font-size: 1.25rem; font-weight: 900; }

    @media (max-width: 768px){
      .path-steps{ padding-left: 80px; }
      .path-steps::before{ left: 40px; }
      .step-number{ left: -60px; width: 52px; height: 52px; font-size: 1.5rem; }
      .step::before{ left: -70px; width: 18px; }
      .step{ padding: 22px; }
    }
    @media (max-width: 480px){
      .path-steps{ padding-left: 70px; }
      .step-number{ left: -55px; width: 46px; height: 46px; font-size: 1.3rem; }
    }

    /* =========================
       RESULTS HUB (tabs)
    ========================== */
    .results-hub{
      display:grid;
      grid-template-columns: 400px 1fr;
      gap: 30px;
      align-items:start;
    }
    .results-nav{
      position: sticky;
      top: calc(var(--header-h) + 24px);
      border-radius: var(--radius-xl);
      background: rgba(26,31,77,.40);
      border: 1px solid rgba(0,217,255,.18);
      backdrop-filter: blur(18px);
      box-shadow: var(--shadow-soft);
      overflow:hidden;
      padding: 18px;
    }

    .results-nav-track{
      display:flex;
      flex-direction:column;
      gap: 12px;
    }

    .results-scroll-indicator{
      display:none;
    }
    .results-nav::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 20% 20%, rgba(0,217,255,.15) 0%, transparent 55%),
        radial-gradient(circle at 80% 70%, rgba(255,215,0,.12) 0%, transparent 55%);
      pointer-events:none;
    }

    .results-nav-item{
      position:relative;
      display:grid;
      grid-template-columns: 60px 1fr auto;
      align-items:center;
      gap: 12px;
      width:100%;
      text-align:left;
      padding: 14px 14px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(10,14,39,.60);
      color: var(--text-light);
      cursor:pointer;
      transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
      overflow:hidden;
      touch-action: manipulation;
    }
    .results-nav-item:hover{
      transform: translateY(-3px);
      border-color: rgba(255,215,0,.35);
      background: rgba(10,14,39,.80);
      box-shadow: 0 12px 30px rgba(0,217,255,.16);
    }
    .results-nav-item.is-active{
      border-color: rgba(255,215,0,.65);
      background: rgba(26,31,77,.70);
      box-shadow: 0 14px 34px rgba(255,215,0,.14);
    }

    .rni-icon{
      width:60px;
      height:60px;
      border-radius: 16px;
      display:grid;
      place-items:center;
      font-size: 2rem;
      background: rgba(0,217,255,.12);
      border: 1px solid rgba(0,217,255,.25);
      box-shadow: inset 0 0 18px rgba(0,217,255,.12);
    }
    .results-nav-item.is-active .rni-icon{
      background: rgba(255,215,0,.14);
      border-color: rgba(255,215,0,.35);
      box-shadow: inset 0 0 18px rgba(255,215,0,.12);
    }
    .rni-text{
      font-weight: 900;
      font-size: 1.02rem;
      line-height: 1.2;
    }
    .rni-sub{
      display:block;
      margin-top: 4px;
      font-size: .9rem;
      color: rgba(224,224,224,.78);
      font-weight: 600;
    }
    .rni-badge{
      font-size: .82rem;
      padding: .42rem .72rem;
      border-radius: 999px;
      background: rgba(255,215,0,.14);
      border: 1px solid rgba(255,215,0,.28);
      color: var(--accent-gold);
      font-weight: 800;
      white-space:nowrap;
    }

    .results-panel{
      position:relative;
      border-radius: var(--radius-xl);
      padding: 26px;
      background: rgba(26,31,77,.45);
      border: 1px solid rgba(0,217,255,.18);
      backdrop-filter: blur(18px);
      box-shadow: var(--shadow-heavy);
      overflow:hidden;
      min-height: 520px;
    }
    .results-panel::before{
      content:"";
      position:absolute;
      inset:-2px;
      border-radius: calc(var(--radius-xl) + 2px);
      padding: 2px;
      background: linear-gradient(135deg, rgba(0,217,255,.38), rgba(255,215,0,.22), rgba(0,217,255,.30));
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events:none;
      opacity:.9;
    }
    .results-panel::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 25% 25%, rgba(0,217,255,.14) 0%, transparent 55%),
        radial-gradient(circle at 75% 75%, rgba(255,215,0,.12) 0%, transparent 60%);
      pointer-events:none;
      opacity:.75;
    }

    .results-content{ position:relative; z-index:1; display:none; animation: fadeInUp .4s ease-out; }
    .results-content.is-active{ display:block; }
    .results-kicker{
      display:inline-flex;
      align-items:center;
      gap: 10px;
      padding: .45rem 1rem;
      border-radius: 999px;
      background: rgba(0,217,255,.10);
      border: 1px solid rgba(0,217,255,.22);
      color: rgba(224,224,224,.95);
      font-weight: 700;
      margin-bottom: 14px;
    }
    .results-kicker b{ color: var(--accent-cyan); }
    .results-content h3{
      margin: 0 0 14px;
      color: var(--accent-gold);
      font-size: 1.85rem;
      font-weight: 950;
    }
    .results-content ul{ list-style:none; margin:0; padding:0; }
    .results-content li{
      position:relative;
      padding: 14px 0 14px 32px;
      border-bottom: 1px solid rgba(255,255,255,.10);
      color: rgba(224,224,224,.92);
      font-size: 1.03rem;
      line-height: 1.65;
    }
    .results-content li:last-child{ border-bottom:none; }
    .results-content li::before{
      content:"✓";
      position:absolute;
      left:0;
      top: 14px;
      color: var(--accent-gold);
      font-weight: 950;
      font-size: 1.2rem;
    }

    @media (max-width: 1200px){
      .results-hub{ grid-template-columns: 1fr; gap: 18px; }

      .results-nav{
        position: relative;
        top: auto;
        padding: 0;
        overflow: hidden;
      }

      .results-nav-track{
        display:flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: visible;
        padding: 14px 14px 30px; /* место под подсказку */
        gap: 10px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .results-nav-track::-webkit-scrollbar{ display:none; }

      /* Плавная прокрутка для анимации подсказки */
      .results-nav-track {
        scroll-behavior: smooth;
      }

      .results-nav::after{
        content:"";
        position:absolute;
        left: 14px;
        right: 14px;
        bottom: 10px;
        height: 8px;
        border-radius: 999px;
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(255,215,0,.18);
        box-shadow: inset 0 1px 8px rgba(0,0,0,.55);
        pointer-events:none;
        z-index: 2;
      }

      .results-scroll-indicator{
        display:block;
        position:absolute;
        left: 14px;
        bottom: 10px;
        height: 8px;
        width: 120px; /* JS пересчитает под контент */
        border-radius: 999px;

        background: linear-gradient(90deg,
          rgba(255,215,0,.35) 0%,
          rgba(255,215,0,1) 18%,
          rgba(255,245,180,1) 50%,
          rgba(255,215,0,1) 82%,
          rgba(255,215,0,.35) 100%
        );
        border: 1px solid rgba(255,215,0,.85);
        box-shadow:
          0 0 0 1px rgba(10,14,39,.35),
          0 0 26px rgba(255,215,0,.40),
          0 10px 18px rgba(0,0,0,.38);
        filter: saturate(1.18) contrast(1.12);

        opacity: 1;
        pointer-events: none;
        z-index: 3;
        transform: translateX(0);
        transition: opacity .2s ease;
      }

      .results-nav-item{ min-width: 280px; }
      .results-panel{ min-height: unset; }
    }

    /* =========================
       PRICING SLIDER
    ========================== */
    .pricing-container{ position:relative; margin-top: 10px; }
    .pricing-slider{
      display:flex;
      gap: 16px;
      overflow-x:auto;
      padding: 16px 10px;
      scroll-behavior:smooth;
      scrollbar-width:none;
      -ms-overflow-style:none;
      align-items: stretch;
      -webkit-overflow-scrolling: touch;
    }

    /* Desktop / large screens: show ALL 4 cards without cropping */
    @media (min-width: 1200px){
      .pricing-slider{
        display:grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px; /* minimal distance so cards don’t stick together */
        overflow: visible;
        padding: 0;
      }
    }

    /* Mid screens: 2 columns grid (no horizontal crop) */
    @media (min-width: 900px) and (max-width: 1199px){
      .pricing-slider{
        display:grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        overflow: visible;
        padding: 0;
      }
    }
    .pricing-slider::-webkit-scrollbar{ display:none; }

    .price-card{
      background: var(--card-bg);
      border-radius: 26px;
      border: 2px solid rgba(0,217,255,.26);
      backdrop-filter: blur(18px);
      box-shadow: var(--shadow-heavy);
      padding: 28px;
      min-width: 340px;
      flex: 0 0 auto;

      /* allow grid layouts to shrink cards without overlap */
      min-width: 0;
      text-align:center;
      position:relative;
      overflow:hidden;
      transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;

      display:flex;
      flex-direction:column;
      align-self: stretch;
      width: 100%;
    }
    .price-card:hover{
      transform: translateY(-12px);
      border-color: rgba(255,215,0,.55);
      background: rgba(26,31,77,.72);
      box-shadow: 0 26px 70px rgba(255,215,0,.18), 0 14px 50px rgba(0,217,255,.16);
    }
    .price-card.popular{
      border-color: rgba(255,215,0,.55);
    }

    .price-card h3{
      position:relative; z-index:1;
      margin: 0 0 14px;
      color: var(--accent-gold);
      font-weight: 950;
      font-size: 1.85rem;
    }
    .price-features{
      position:relative; z-index:1;
      list-style:none;
      padding:0;
      margin: 18px 0 18px;
      text-align:left;
      flex: 1 1 auto;
    }
    .price-features li{
      padding: 12px 0 12px 28px;
      border-bottom: 1px solid rgba(255,255,255,.14);
      color: rgba(224,224,224,.92);
      position:relative;
    }
    .price-features li::before{
      content:"✓";
      position:absolute;
      left:0;
      color: var(--accent-gold);
      font-weight: 950;
    }
    .price-card .btn-primary{
      width: 100%;
      position:relative;
      z-index:1;
      margin-top: auto;
    }

    /* In grid mode, remove fixed card width constraints */
    @media (min-width: 900px){
      .price-card{ min-width: 0; }
    }

    /* Arrows: mobile/tablet = visible, desktop = hidden */
    @media (max-width: 899px){
      .slider-arrows{ display:flex !important; }
    }
    @media (min-width: 900px){
      .slider-arrows{ display:none !important; }
    }

    .slider-arrows{
      display:flex;
      justify-content:center;
      gap: 12px;
      margin-top: 16px;
    }
    .slider-arrow{
      width: 50px;
      height: 50px;
      border-radius: 999px;
      background: rgba(26,31,77,.78);
      border: 1px solid rgba(0,217,255,.28);
      color: var(--accent-cyan);
      display:grid;
      place-items:center;
      cursor:pointer;
      transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
      font-size: 1.1rem;
      touch-action: manipulation;
    }
    .slider-arrow:hover{
      transform: scale(1.08);
      background: rgba(0,217,255,.14);
      border-color: rgba(255,215,0,.45);
      color: var(--accent-gold);
    }

    @media (max-width: 768px){
      .pricing-slider{
        --pkg-card-w: min(420px, calc(100% - 32px));
        padding: 16px 0;
        gap: 14px;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 calc((100% - var(--pkg-card-w))/2);
      }
      .pricing-slider::before,
      .pricing-slider::after{
        content:"";
        flex: 0 0 calc((100% - var(--pkg-card-w))/2);
      }

      .price-card{
        min-width: var(--pkg-card-w);
        max-width: var(--pkg-card-w);
        padding: 22px;
        scroll-snap-align: center;
      }

      .btn-primary, .btn-secondary{ width: 100%; max-width: 320px; }

      /* HERO buttons: keep text on ONE line on mobile */
      .hero-buttons .btn-primary,
      .hero-buttons .btn-secondary{
        width: 100%;
        max-width: none;
        white-space: nowrap;
        flex-wrap: nowrap;
        font-size: clamp(.92rem, 4.2vw, 1.05rem);
        padding: .95rem 1.25rem;
        gap: .6rem;
      }
      .hero-buttons .btn-primary i,
      .hero-buttons .btn-secondary i{
        font-size: 1.05em;
      }

      .hero-buttons{ flex-direction: column; align-items:center; }
    }

    @media (max-width: 360px){
      .hero-buttons .btn-primary,
      .hero-buttons .btn-secondary{
        font-size: .9rem;
        padding: .88rem 1.05rem;
      }
    }

    /* =========================
       AUTHOR
    ========================== */
    .author-card{
      background: rgba(26,31,77,.50);
      border-radius: var(--radius-xl);
      border: 1px solid rgba(255,215,0,.25);
      backdrop-filter: blur(20px);
      box-shadow: var(--shadow-heavy);
      padding: 26px;
      position:relative;
      overflow:hidden;
    }

    .author-top{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns: 280px 1fr;
      gap: 22px;
      align-items:start;
    }
    .author-avatar{
      width: 280px;
      aspect-ratio: 3 / 4;
      border-radius: var(--radius-lg);
      padding: 7px;
      background: linear-gradient(135deg, rgba(0,217,255,.85), rgba(255,215,0,.92));
      box-shadow: 0 18px 55px rgba(0,217,255,.16), 0 18px 55px rgba(255,215,0,.12);
    }
    .author-avatar-inner{
      width:100%;
      height:100%;
      border-radius: calc(var(--radius-lg) - 6px);
      overflow:hidden;
      background: rgba(10,14,39,.65);
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: 0 18px 55px rgba(0,0,0,.35);
      position:relative;
    }
    .author-avatar-inner::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 20% 20%, rgba(0,217,255,.16) 0%, transparent 55%),
        radial-gradient(circle at 80% 85%, rgba(255,215,0,.12) 0%, transparent 60%);
      pointer-events:none;
    }
    .author-avatar img{
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center 15%;
      transform: scale(1.03);
      filter: saturate(1.04) contrast(1.03);
      transition: transform .3s ease;
    }
    .author-card:hover .author-avatar img{ transform: scale(1.07); }

    .author-name{
      margin: 0 0 14px;
      color: var(--accent-gold);
      font-weight: 950;
      font-size: 2.05rem;
      line-height: 1.12;
    }
    .author-info ul{
      list-style:none;
      margin:0;
      padding:0;
    }
    .author-info li{
      padding: .52rem 0 .52rem 28px;
      position:relative;
      color: rgba(255,255,255,.93);
      font-size: 1.02rem;
      line-height: 1.45;
    }
    .author-info li::before{
      content:"★";
      position:absolute;
      left:0;
      color: var(--accent-gold);
      font-size: 1.1rem;
      top: .55rem;
    }

    .author-stats{
      margin-top: 18px;
      border-top: 1px solid rgba(255,255,255,.14);
      position:relative;
      z-index:1;
    }
    .stats-grid{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
    }
    .stat-item{
      padding: 18px 14px;
      min-height: 92px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      border-bottom: 1px solid rgba(255,255,255,.10);
      border-right: 1px solid rgba(255,255,255,.10);
      transition: background .2s ease;
    }
    .stat-item:nth-child(4n){ border-right:none; }
    .stat-item:nth-last-child(-n+4){ border-bottom:none; }
    .stat-item:hover{ background: rgba(255,255,255,.05); }
    .stat-number{
      font-size: 2.0rem;
      font-weight: 950;
      color: var(--accent-gold);
      line-height: 1.05;
      margin-bottom: 6px;
    }
    .stat-text{
      color: rgba(224,224,224,.95);
      font-weight: 650;
      line-height: 1.35;
    }

    @media (max-width: 1200px){
      .stats-grid{ grid-template-columns: repeat(2, 1fr); }
      .stat-item:nth-child(2n){ border-right:none; }
      .stat-item:nth-last-child(-n+2){ border-bottom:none; }
    }
    @media (max-width: 768px){
      .author-top{ grid-template-columns: 1fr; text-align:center; }
      .author-avatar{ margin: 0 auto; width: min(280px, 86vw); }
      .author-info li{ text-align:left; }
      .stats-grid{ grid-template-columns: 1fr; }
      .stat-item{ border-right:none !important; border-bottom: 1px solid rgba(255,255,255,.10); }
      .stat-item:last-child{ border-bottom:none; }
    }

    /* =========================
       FORMAT
    ========================== */
    #format{ position:relative; overflow:hidden; }
    .format-headline{
      position:relative; z-index:1;
      display:flex;
      align-items:center;
      justify-content:center;
      gap: 16px;
      margin-bottom: 22px;
    }
    .format-star{
      font-size: 1.6rem;
      color: rgba(0,102,255,.9);
      text-shadow: 0 0 18px rgba(0,217,255,.35);
      transform: translateY(-6px);
      user-select:none;
    }
    .format-grid{
      position:relative; z-index:1;
      display:grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 18px;
    }
    .format-card{
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(0,217,255,.22);
      border-radius: var(--radius-xl);
      padding: 24px 22px;
      box-shadow: var(--shadow-soft);
      position:relative;
      overflow:hidden;
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
    }
    .format-card::after{
      content:"";
      position:absolute;
      left:0; right:0; bottom:0;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(0,217,255,.85), rgba(255,215,0,.85), transparent);
      transform: scaleX(0);
      transform-origin:center;
      transition: transform .22s ease;
      pointer-events:none;
    }
    .format-card:hover{
      transform: translateY(-8px);
      border-color: rgba(255,215,0,.55);
      background: rgba(26,31,77,.60);
      box-shadow: 0 26px 75px rgba(0,217,255,.18), 0 0 55px rgba(255,215,0,.10);
    }
    .format-card:hover::after{ transform: scaleX(1); }

    .format-card-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 14px;
      margin-bottom: 14px;
      position:relative;
      z-index:1;
    }
    .format-icon{
      width: 68px;
      height: 68px;
      border-radius: 999px;
      display:grid;
      place-items:center;
      font-size: 1.9rem;
      background: var(--gradient-blue);
      box-shadow: 0 12px 30px rgba(0,102,255,.30);
      position:relative;
    }
    .format-icon::after{
      content:"";
      position:absolute;
      inset:-6px;
      border-radius: 999px;
      border: 2px solid rgba(0,102,255,.55);
      box-shadow: 0 0 18px rgba(0,217,255,.22);
      opacity:.9;
    }
    .format-num{
      width: 46px;
      height: 46px;
      border-radius: 14px;
      display:grid;
      place-items:center;
      font-weight: 950;
      font-size: 1.2rem;
      color: var(--accent-gold);
      background: rgba(255,215,0,.12);
      border: 2px solid rgba(255,215,0,.55);
      box-shadow: inset 0 0 18px rgba(255,215,0,.16);
    }
    .format-line{
      width: 64px;
      height: 3px;
      border-radius: 99px;
      background: linear-gradient(90deg, rgba(0,102,255,.95), transparent);
      margin: 8px 0 12px;
    }
    .format-title{
      margin: 0 0 8px;
      font-size: 1.25rem;
      font-weight: 950;
      color: var(--accent-gold);
      line-height: 1.15;
    }
    .format-text{
      margin:0;
      color: rgba(224,224,224,.92);
      line-height: 1.55;
    }

    @media (max-width: 1100px){
      .format-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
    }
    @media (max-width: 768px){
      .format-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
      .format-card{ padding: 20px 16px; border-radius: var(--radius-lg); }
      .format-icon{ width: 60px; height: 60px; font-size: 1.7rem; }
      .format-num{ width: 42px; height: 42px; }
      .format-title{ font-size: 1.16rem; }
      .format-text{ font-size: .97rem; }
    }
    @media (max-width: 420px){
      .format-star{ display:none; }
      .format-grid{ grid-template-columns: 1fr; }
    }

    /* =========================
       CONTACT / JOIN
    ========================== */
    .join-lead{
      font-size: 1.15rem;
      margin: 0 auto 26px;
      max-width: 860px;
      text-align:center;
      color: rgba(224,224,224,.92);
      line-height: 1.8;
    }
    .join-cta{
      text-align:center;
      margin-bottom: 26px;
    }
    .join-cta .btn-primary{
      font-size: 1.2rem;
      padding: 1.15rem 2.4rem;
      max-width: 380px;
      width: 100%;
    }
    .join-note{
      margin-top: 14px;
      color: var(--accent-cyan);
      font-weight: 750;
    }

    .contact-card{
      max-width: 920px;
      margin: 18px auto 0;
      padding: 24px 22px;
      border-radius: var(--radius-xl);
      background: rgba(26,31,77,.45);
      border: 1px solid rgba(0,217,255,.20);
      backdrop-filter: blur(20px);
      box-shadow: var(--shadow-heavy);
      position:relative;
      overflow:hidden;
    }
    .contact-title{
      position:relative; z-index:1;
      text-align:center;
      margin: 0 0 6px;
      color: var(--accent-gold);
      font-weight: 950;
      font-size: 1.75rem;
    }
    .contact-subtitle{
      position:relative; z-index:1;
      text-align:center;
      margin: 0 auto 18px;
      max-width: 740px;
      color: rgba(224,224,224,.92);
      line-height: 1.65;
    }

    .contact-form{
      position:relative; z-index:1;
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 14px 14px;
    }
    .field{ display:flex; flex-direction:column; gap: 6px; }
    .field.full{ grid-column: 1 / -1; }

    .field label{
      font-weight: 850;
      color: rgba(255,255,255,.92);
      font-size: .95rem;
    }
    .field input, .field textarea{
      width:100%;
      padding: .95rem 1.05rem;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(10,14,39,.55);
      color: var(--text-light);
      outline:none;
      transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
      font-size: 1rem;
    }
    .field textarea{ min-height: 120px; resize: vertical; }
    .field input::placeholder, .field textarea::placeholder{ color: rgba(224,224,224,.55); }
    .field input:focus, .field textarea:focus{
      border-color: rgba(255,215,0,.55);
      box-shadow: 0 0 0 4px rgba(0,217,255,.12);
      background: rgba(10,14,39,.70);
    }

    .field .error{
      display:none;
      color: rgba(255,160,160,.95);
      font-size: .9rem;
      line-height: 1.35;
    }
    .field.is-error input, .field.is-error textarea{
      border-color: rgba(255,120,120,.65);
      box-shadow: 0 0 0 4px rgba(255,120,120,.10);
    }
    .field.is-error .error{ display:block; }

    .contact-meta{
      grid-column: 1 / -1;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 2px;
      position:relative;
      z-index:1;
    }
    .consent{
      display:inline-flex;
      align-items:flex-start;
      gap: 10px;
      max-width: 560px;
      color: rgba(224,224,224,.90);
      font-size: .95rem;
      line-height: 1.45;
    }
    .consent input{
      width: 18px;
      height: 18px;
      margin-top: 3px;
      accent-color: #ffd700;
    }
    .contact-actions{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap: 10px;
      flex: 1;
      min-width: 260px;
    }
    .contact-actions .btn-primary{ width: min(360px, 100%); }

    .form-status{
      grid-column: 1 / -1;
      display:none;
      margin-top: 8px;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid rgba(0,217,255,.25);
      background: rgba(0,217,255,.08);
      color: rgba(224,224,224,.95);
      line-height: 1.5;
      position:relative;
      z-index:1;
    }
    .form-status.is-visible{ display:block; }

    @media (max-width: 768px){
      .section{ padding: 56px 0; }
      .contact-form{ grid-template-columns: 1fr; }
      .contact-card{ padding: 20px 16px; border-radius: var(--radius-lg); }
      .contact-actions{ width:100%; justify-content:stretch; min-width: unset; }
      .contact-actions .btn-primary{ width: 100%; }
      .field textarea{ resize: none; }
    }

    /* =========================
       FOOTER
    ========================== */
    .footer{
      background: rgba(10,14,39,.95);
      border-top: 1px solid rgba(0,217,255,.20);
      margin-top: 34px;
      position:relative;
      overflow:hidden;
      padding: 52px 0 26px;
    }
    .footer::before{
      content:"";
      position:absolute;
      top:0; left:0;
      width:100%;
      height: 3px;
      background: linear-gradient(90deg, var(--accent-cyan), var(--accent-gold));
    }
    .footer-inner{ text-align:center; }
    .footer-logo{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap: 10px;
      margin-bottom: 18px;
    }
    .footer-logo .logo-icon{ width: 68px; height: 68px; font-size: 2rem; }
    .footer-links{
      display:flex;
      justify-content:center;
      gap: 20px;
      flex-wrap: wrap;
      margin: 18px 0 18px;
    }
    .footer-link{
      color: rgba(224,224,224,.85);
      text-decoration:none;
      font-weight: 700;
    }
    .footer-link:hover{ color: var(--accent-gold); }
    .footer-bottom{
      border-top: 1px solid rgba(255,255,255,.10);
      padding-top: 16px;
      color: rgba(224,224,224,.75);
      font-size: .92rem;
    }

    /* =========================
       SCROLL TOP
    ========================== */
    .scroll-top{
      position:fixed;
      bottom: 26px;
      right: 26px;
      width: 50px;
      height: 50px;
      border-radius: 999px;
      background: var(--gradient-gold);
      color: var(--primary-dark);
      display:grid;
      place-items:center;
      text-decoration:none;
      box-shadow: 0 10px 28px rgba(255,215,0,.35);
      opacity:0;
      visibility:hidden;
      transform: translateY(18px);
      transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
      z-index: 999;
      touch-action: manipulation;
    }
    .scroll-top.visible{
      opacity:1;
      visibility:visible;
      transform: translateY(0);
    }
    .scroll-top:hover{ transform: translateY(-6px); box-shadow: 0 14px 38px rgba(255,215,0,.55); }

    @media (max-width: 480px){
      .container{ padding: 0 16px; }
      .scroll-top{ bottom: 18px; right: 18px; width: 46px; height: 46px; }
    }