:root {
      --bg: #030712;
      --bg-2: #050a18;
      --card: rgba(255, 255, 255, .065);
      --card-2: rgba(255, 255, 255, .095);
      --border: rgba(255, 255, 255, .12);
      --text: #eef6ff;
      --muted: #a9b8cf;
      --muted-2: #78879d;
      --brand: #00e5ff;
      --brand-2: #7c3cff;
      --brand-3: #21ffb4;
      --danger: #ff477e;
      --warning: #ffd166;
      --shadow: 0 24px 80px rgba(0,0,0,.45);
      --radius: 28px;
      --radius-sm: 18px;
      --container: 1180px;
    }

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

    html { scroll-behavior: smooth; }

    body {
      min-height: 100vh;
      font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background:
        radial-gradient(circle at 12% 8%, rgba(0, 229, 255, .18), transparent 32%),
        radial-gradient(circle at 86% 12%, rgba(124, 60, 255, .22), transparent 28%),
        radial-gradient(circle at 50% 50%, rgba(33, 255, 180, .08), transparent 35%),
        linear-gradient(180deg, #02030a 0%, #071020 48%, #02030a 100%);
      color: var(--text);
      overflow-x: hidden;
    }

    body::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: -3;
      opacity: .58;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size: 72px 72px;
      mask-image: radial-gradient(circle at center, black, transparent 80%);
    }

    body::after {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -2;
      background: linear-gradient(90deg, rgba(0,0,0,.6), transparent 18%, transparent 82%, rgba(0,0,0,.6));
    }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    button, input, textarea { font-family: inherit; }

    .container {
      width: min(100% - 40px, var(--container));
      margin: 0 auto;
    }

    .noise {
      position: fixed;
      inset: 0;
      z-index: 9999;
      pointer-events: none;
      opacity: .08;
      background-image: url("assets/noise.svg");
    }

    #particles {
      position: fixed;
      inset: 0;
      z-index: -1;
      opacity: .65;
    }

    .topbar {
      position: fixed;
      top: 16px;
      left: 0;
      right: 0;
      z-index: 1000;
      transition: .25s ease;
    }

    .nav {
      width: min(100% - 32px, 1240px);
      margin: 0 auto;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 999px;
      background: rgba(3, 7, 18, .58);
      backdrop-filter: blur(20px);
      box-shadow: 0 18px 70px rgba(0,0,0,.35);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 14px 12px 22px;
    }

    .topbar.scrolled .nav {
      background: rgba(3, 7, 18, .86);
      border-color: rgba(0,229,255,.2);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 170px;
    }

    .brand-logo {
      width: 172px;
      height: auto;
      filter: invert(1) brightness(2.45) contrast(.82);
      opacity: .94;
    }

    .brand-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--brand-3);
      box-shadow: 0 0 20px var(--brand-3);
      display: none;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .nav-links a {
      color: rgba(238,246,255,.74);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: -.02em;
      padding: 11px 12px;
      border-radius: 999px;
      transition: .2s ease;
    }

    .nav-links a:hover,
    .nav-links a.active {
      color: #fff;
      background: rgba(255,255,255,.08);
    }

    .nav-actions { display: flex; align-items: center; gap: 10px; }

    .menu-toggle {
      display: none;
      width: 42px;
      height: 42px;
      border: 1px solid var(--border);
      border-radius: 50%;
      background: rgba(255,255,255,.08);
      color: #fff;
      font-size: 22px;
      cursor: pointer;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      border: 0;
      border-radius: 999px;
      min-height: 48px;
      padding: 0 20px;
      color: #031018;
      background: linear-gradient(135deg, var(--brand), var(--brand-3));
      font-weight: 900;
      letter-spacing: -.03em;
      cursor: pointer;
      box-shadow: 0 14px 34px rgba(0,229,255,.2);
      transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
      white-space: nowrap;
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 20px 46px rgba(0,229,255,.28);
      filter: saturate(1.12);
    }

    .btn.secondary {
      color: #fff;
      background: rgba(255,255,255,.07);
      border: 1px solid var(--border);
      box-shadow: none;
    }

    .btn.secondary:hover { border-color: rgba(0,229,255,.35); }

    .btn.purple {
      color: #fff;
      background: linear-gradient(135deg, #7c3cff, #00e5ff);
    }

    .section {
      position: relative;
      padding: 112px 0;
    }

    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding: 146px 0 82px;
      overflow: hidden;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.02fr) minmax(440px, .98fr);
      gap: 54px;
      align-items: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border: 1px solid rgba(0,229,255,.22);
      border-radius: 999px;
      background: rgba(0,229,255,.08);
      color: #cdfaff;
      font-weight: 800;
      font-size: 13px;
      letter-spacing: -.02em;
      margin-bottom: 22px;
    }

    .eyebrow i { color: var(--brand-3); }

    h1 {
      font-size: clamp(44px, 6.4vw, 86px);
      line-height: .95;
      letter-spacing: -.085em;
      font-weight: 900;
      max-width: 780px;
    }

    h1 .gradient, .gradient-text {
      background: linear-gradient(135deg, #fff 0%, #bff8ff 24%, #00e5ff 48%, #21ffb4 72%, #7c3cff 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .lead {
      color: var(--muted);
      font-size: clamp(17px, 1.7vw, 21px);
      line-height: 1.65;
      margin-top: 24px;
      max-width: 720px;
    }

    .hero-cta {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 34px;
    }

    .hero-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 34px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 999px;
      background: rgba(255,255,255,.055);
      color: rgba(238,246,255,.82);
      font-size: 13px;
      font-weight: 700;
    }

    .badge i { color: var(--brand); }

    .hero-visual {
      position: relative;
      min-height: 620px;
      perspective: 1200px;
    }

    .orbit {
      position: absolute;
      width: 580px;
      height: 580px;
      right: -40px;
      top: 20px;
      border-radius: 50%;
      border: 1px solid rgba(0,229,255,.14);
      animation: spin 32s linear infinite;
      box-shadow: inset 0 0 70px rgba(0,229,255,.04);
    }

    .orbit::before,
    .orbit::after {
      content: '';
      position: absolute;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--brand);
      box-shadow: 0 0 28px var(--brand);
    }

    .orbit::before { left: 44px; top: 92px; }
    .orbit::after { right: 36px; bottom: 116px; background: var(--brand-3); box-shadow: 0 0 28px var(--brand-3); }

    @keyframes spin { to { transform: rotate(360deg); } }

    .dashboard {
      position: absolute;
      right: 24px;
      top: 56px;
      width: min(530px, 100%);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 34px;
      background: linear-gradient(145deg, rgba(14,24,48,.92), rgba(4,8,18,.92));
      box-shadow: var(--shadow), 0 0 0 1px rgba(0,229,255,.05), 0 0 80px rgba(0,229,255,.08);
      padding: 18px;
      transform: rotateY(-11deg) rotateX(6deg);
      transform-style: preserve-3d;
      overflow: hidden;
    }

    .dashboard::before {
      content: '';
      position: absolute;
      inset: -50%;
      background: radial-gradient(circle, rgba(0,229,255,.18), transparent 34%);
      transform: translate(20%, -12%);
      pointer-events: none;
    }

    .dash-top {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .window-dots { display: flex; gap: 7px; }
    .window-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.25); }
    .window-dots span:nth-child(1) { background: #ff477e; }
    .window-dots span:nth-child(2) { background: #ffd166; }
    .window-dots span:nth-child(3) { background: #21ffb4; }

    .ai-status {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #cffff2;
      font-size: 12px;
      font-weight: 900;
      padding: 8px 10px;
      border-radius: 999px;
      background: rgba(33,255,180,.09);
      border: 1px solid rgba(33,255,180,.22);
    }

    .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-3); box-shadow: 0 0 0 0 rgba(33,255,180,.7); animation: pulse 1.7s infinite; }
    @keyframes pulse { 70% { box-shadow: 0 0 0 12px rgba(33,255,180,0); } 100% { box-shadow: 0 0 0 0 rgba(33,255,180,0); } }

    .dash-main {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 14px;
    }

    .video-card {
      min-height: 250px;
      border-radius: 24px;
      padding: 16px;
      background:
        linear-gradient(135deg, rgba(0,229,255,.18), rgba(124,60,255,.12)),
        radial-gradient(circle at 70% 20%, rgba(33,255,180,.18), transparent 34%),
        rgba(255,255,255,.055);
      border: 1px solid rgba(255,255,255,.12);
      overflow: hidden;
      position: relative;
    }

    .play {
      width: 70px;
      height: 70px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: rgba(255,255,255,.14);
      border: 1px solid rgba(255,255,255,.22);
      backdrop-filter: blur(12px);
      font-size: 34px;
      margin: 48px auto 26px;
      box-shadow: 0 20px 60px rgba(0,0,0,.3);
    }

    .video-card h3 { font-size: 20px; letter-spacing: -.05em; }
    .video-card p { color: rgba(238,246,255,.72); font-size: 13px; line-height: 1.5; margin-top: 6px; }
    .progress { margin-top: 18px; height: 8px; background: rgba(255,255,255,.12); border-radius: 999px; overflow: hidden; }
    .progress span { display: block; width: 74%; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-3)); border-radius: inherit; }

    .dash-side { display: grid; gap: 14px; }

    .mini-card {
      border-radius: 24px;
      background: rgba(255,255,255,.065);
      border: 1px solid rgba(255,255,255,.12);
      padding: 15px;
    }

    .mini-card .label { color: var(--muted-2); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
    .mini-card strong { display: block; font-size: 26px; letter-spacing: -.06em; margin-top: 8px; }
    .mini-card small { color: var(--muted); }

    .chart {
      height: 66px;
      display: flex;
      align-items: end;
      gap: 7px;
      margin-top: 14px;
    }

    .chart span { flex: 1; min-width: 9px; border-radius: 999px 999px 4px 4px; background: linear-gradient(180deg, var(--brand), rgba(0,229,255,.12)); }
    .chart span:nth-child(2) { height: 64%; }
    .chart span:nth-child(3) { height: 42%; }
    .chart span:nth-child(4) { height: 84%; }
    .chart span:nth-child(5) { height: 58%; }
    .chart span:nth-child(6) { height: 96%; }

    .float-card {
      position: absolute;
      z-index: 2;
      border-radius: 24px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(7,13,28,.78);
      backdrop-filter: blur(18px);
      box-shadow: 0 24px 70px rgba(0,0,0,.35);
      padding: 16px;
      animation: float 5s ease-in-out infinite;
    }

    @keyframes float { 50% { transform: translateY(-14px); } }

    .float-card.cart {
      width: 270px;
      left: 4px;
      bottom: 100px;
    }

    .float-card.cart h4,
    .float-card.notify h4 { font-size: 15px; letter-spacing: -.04em; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
    .float-card.cart p,
    .float-card.notify p { color: var(--muted); font-size: 13px; line-height: 1.5; }

    .float-card.notify {
      width: 268px;
      right: -12px;
      bottom: 16px;
      animation-delay: -.8s;
    }

    .whats { color: #21ffb4; }
    .ai { color: #00e5ff; }

    .stats-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-top: 38px;
    }

    .stat {
      padding: 22px;
      border-radius: 24px;
      background: rgba(255,255,255,.052);
      border: 1px solid rgba(255,255,255,.11);
    }

    .stat strong { display: block; font-size: 34px; letter-spacing: -.06em; }
    .stat span { color: var(--muted); font-size: 13px; font-weight: 700; }

    .section-head {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      align-items: end;
      gap: 40px;
      margin-bottom: 44px;
    }

    .section-kicker {
      color: var(--brand);
      font-size: 13px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .14em;
      margin-bottom: 13px;
    }

    h2 {
      font-size: clamp(34px, 4vw, 58px);
      line-height: 1.02;
      letter-spacing: -.075em;
      font-weight: 900;
    }

    .section-head p,
    .section-copy {
      color: var(--muted);
      font-size: 17px;
      line-height: 1.72;
    }

    .positioning {
      padding-top: 42px;
    }

    .glass-panel {
      border: 1px solid rgba(255,255,255,.13);
      border-radius: var(--radius);
      background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
    }

    .glass-panel::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 0 0, rgba(0,229,255,.14), transparent 34%), radial-gradient(circle at 100% 0, rgba(124,60,255,.12), transparent 30%);
      pointer-events: none;
    }

    .position-grid {
      display: grid;
      grid-template-columns: 1.02fr .98fr;
      gap: 0;
      position: relative;
      z-index: 1;
    }

    .position-content { padding: 46px; }
    .position-content h2 { max-width: 600px; }
    .position-content p { color: var(--muted); font-size: 17px; line-height: 1.75; margin-top: 18px; }

    .position-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
      padding: 46px;
      border-left: 1px solid rgba(255,255,255,.1);
    }

    .small-feature {
      padding: 20px;
      border-radius: 22px;
      background: rgba(3,7,18,.38);
      border: 1px solid rgba(255,255,255,.1);
    }

    .icon {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border-radius: 15px;
      background: linear-gradient(135deg, rgba(0,229,255,.16), rgba(124,60,255,.12));
      border: 1px solid rgba(0,229,255,.18);
      color: var(--brand);
      font-size: 22px;
      margin-bottom: 16px;
    }

    .small-feature h3 { font-size: 17px; letter-spacing: -.04em; margin-bottom: 8px; }
    .small-feature p { color: var(--muted); font-size: 13px; line-height: 1.55; }

    .product-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    .product-card {
      position: relative;
      min-height: 385px;
      padding: 28px;
      border-radius: var(--radius);
      background: rgba(255,255,255,.058);
      border: 1px solid rgba(255,255,255,.11);
      overflow: hidden;
      transition: transform .22s ease, border-color .22s ease, background .22s ease;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .product-card:hover {
      transform: translateY(-7px);
      border-color: rgba(0,229,255,.34);
      background: rgba(255,255,255,.08);
    }

    .product-card::before {
      content: '';
      position: absolute;
      width: 170px;
      height: 170px;
      border-radius: 50%;
      background: rgba(0,229,255,.12);
      filter: blur(32px);
      right: -70px;
      top: -70px;
      transition: .22s ease;
    }

    .product-card:hover::before { transform: scale(1.25); }

    .product-icon {
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      border-radius: 20px;
      background: linear-gradient(135deg, rgba(0,229,255,.18), rgba(33,255,180,.1));
      border: 1px solid rgba(0,229,255,.22);
      color: var(--brand);
      font-size: 28px;
      margin-bottom: 20px;
      position: relative;
      z-index: 1;
    }

    .product-card h3 { position: relative; z-index: 1; font-size: 24px; letter-spacing: -.06em; margin-bottom: 12px; }
    .product-card p { position: relative; z-index: 1; color: var(--muted); line-height: 1.62; font-size: 15px; margin-bottom: 20px; }

    .tag-list {
      position: relative;
      z-index: 1;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: auto;
      align-content: flex-start;
    }

    .tag-list span {
      padding: 7px 9px;
      border-radius: 999px;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.09);
      color: rgba(238,246,255,.78);
      font-size: 12px;
      font-weight: 700;
    }

    .product-card.featured {
      background: linear-gradient(135deg, rgba(0,229,255,.13), rgba(124,60,255,.16));
      border-color: rgba(0,229,255,.28);
      box-shadow: inset 0 0 0 1px rgba(0,229,255,.06), 0 20px 50px rgba(0,0,0,.22);
    }

    .dottai-section {
      overflow: hidden;
    }

    .ai-panel {
      display: grid;
      grid-template-columns: .95fr 1.05fr;
      gap: 32px;
      align-items: center;
      padding: 34px;
      border-radius: 36px;
      background:
        radial-gradient(circle at 15% 20%, rgba(0,229,255,.16), transparent 30%),
        radial-gradient(circle at 80% 10%, rgba(124,60,255,.22), transparent 33%),
        rgba(255,255,255,.055);
      border: 1px solid rgba(255,255,255,.13);
      box-shadow: var(--shadow);
    }

    .ai-copy { padding: 16px; }
    .ai-copy h2 { margin-bottom: 20px; }
    .ai-copy p { color: var(--muted); line-height: 1.72; font-size: 17px; margin-bottom: 28px; }

    .ai-benefits { display: grid; gap: 12px; }
    .ai-benefit {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 14px;
      border: 1px solid rgba(255,255,255,.11);
      border-radius: 20px;
      background: rgba(3,7,18,.35);
    }
    .ai-benefit i { color: var(--brand-3); font-size: 22px; }
    .ai-benefit strong { display: block; letter-spacing: -.03em; margin-bottom: 4px; }
    .ai-benefit span { color: var(--muted); font-size: 13px; line-height: 1.5; }

    .automation-board {
      position: relative;
      border-radius: 30px;
      background: rgba(2,6,18,.65);
      border: 1px solid rgba(255,255,255,.12);
      padding: 20px;
      min-height: 590px;
      overflow: hidden;
    }

    .automation-board::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(0,229,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,229,255,.05) 1px, transparent 1px);
      background-size: 38px 38px;
      mask-image: radial-gradient(circle at center, black, transparent 78%);
    }

    .flow-card {
      position: relative;
      z-index: 1;
      padding: 17px;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.065);
      backdrop-filter: blur(12px);
      margin-bottom: 14px;
    }

    .flow-card h4 { display: flex; align-items: center; gap: 8px; font-size: 15px; letter-spacing: -.03em; margin-bottom: 8px; }
    .flow-card p { color: var(--muted); font-size: 13px; line-height: 1.5; }

    .flow-line {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 28px;
      color: var(--brand);
      opacity: .82;
    }

    .ai-terminal {
      position: relative;
      z-index: 1;
      margin-top: 18px;
      border-radius: 22px;
      background: #01050d;
      border: 1px solid rgba(33,255,180,.18);
      padding: 17px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      box-shadow: inset 0 0 26px rgba(33,255,180,.05);
    }

    .terminal-row { color: #91ffe1; font-size: 12px; line-height: 1.7; }
    .terminal-row.muted { color: #67a49b; }

    .tech-cloud {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }

    .tech-item {
      min-height: 94px;
      padding: 18px;
      border-radius: 20px;
      background: rgba(255,255,255,.052);
      border: 1px solid rgba(255,255,255,.1);
      transition: .2s ease;
    }

    .tech-item:hover { background: rgba(0,229,255,.075); border-color: rgba(0,229,255,.22); transform: translateY(-4px); }
    .tech-item i { color: var(--brand); font-size: 24px; }
    .tech-item strong { display: block; margin-top: 12px; font-size: 14px; letter-spacing: -.035em; }

    .difference-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    .difference-card {
      padding: 26px;
      border-radius: var(--radius);
      background: rgba(255,255,255,.052);
      border: 1px solid rgba(255,255,255,.11);
      min-height: 245px;
    }

    .difference-card h3 { font-size: 20px; letter-spacing: -.05em; margin-bottom: 10px; }
    .difference-card p { color: var(--muted); font-size: 14px; line-height: 1.64; }

    .experience-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 22px;
    }

    .experience-card {
      border-radius: 34px;
      background: rgba(255,255,255,.055);
      border: 1px solid rgba(255,255,255,.12);
      padding: 30px;
      overflow: hidden;
      min-height: 500px;
      width: 100%;
    }

    .experience-card h3 { font-size: 30px; letter-spacing: -.07em; margin-bottom: 12px; }
    .experience-card > p { color: var(--muted); line-height: 1.65; margin-bottom: 24px; }

    .student-ui, .admin-ui {
      border-radius: 26px;
      background: rgba(3,7,18,.62);
      border: 1px solid rgba(255,255,255,.11);
      padding: 18px;
      overflow: visible;
    }

    .platform-mockup {
      position: relative;
      border-radius: 28px;
      overflow: hidden;
      background:
        radial-gradient(circle at 15% 15%, rgba(0,229,255,.12), transparent 22%),
        radial-gradient(circle at 82% 10%, rgba(124,60,255,.14), transparent 20%),
        linear-gradient(180deg, rgba(7,12,23,.98), rgba(3,7,18,.98));
      border: 1px solid rgba(255,255,255,.1);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 35px 80px rgba(0,0,0,.35);
      transform: perspective(2200px) rotateX(8deg) rotateY(-11deg) scale(.985);
      transform-style: preserve-3d;
      transition: transform .55s ease, box-shadow .35s ease, border-color .35s ease;
      isolation: isolate;
    }

    .platform-mockup:hover {
      transform: perspective(2200px) rotateX(5deg) rotateY(-6deg) scale(1);
      border-color: rgba(0,229,255,.22);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 42px 110px rgba(0,0,0,.44), 0 0 0 1px rgba(0,229,255,.06);
    }

    .platform-mockup::after {
      content: '';
      position: absolute;
      inset: auto 8% -26px 8%;
      height: 48px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0,0,0,.45), transparent 72%);
      filter: blur(10px);
      z-index: -1;
      pointer-events: none;
    }

    .platform-topbar {
      display: grid;
      grid-template-columns: 180px 1fr auto;
      align-items: center;
      gap: 16px;
      padding: 16px 18px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      background: rgba(6,10,20,.88);
      backdrop-filter: blur(18px);
    }

    .mock-logo-chip {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: #fff;
      font-weight: 900;
      letter-spacing: -.05em;
      font-size: 15px;
      text-transform: lowercase;
    }

    .mock-logo-chip span {
      display: inline-grid;
      place-items: center;
      width: 36px;
      height: 36px;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(0,229,255,.28), rgba(124,60,255,.32));
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: 0 10px 30px rgba(0,229,255,.16);
    }

    .platform-search {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 16px;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.035));
      border: 1px solid rgba(255,255,255,.08);
      color: var(--muted);
      font-size: 13px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      transition: border-color .25s ease, background .25s ease, transform .25s ease;
    }

    .platform-search:hover {
      border-color: rgba(0,229,255,.22);
      background: rgba(255,255,255,.07);
      transform: translateY(-1px);
    }

    .platform-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .ui-hover {
      transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease, color .25s ease;
    }

    .platform-actions .action {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.08);
      color: rgba(255,255,255,.86);
      font-size: 16px;
    }

    .platform-actions .action:hover,
    .side-item:hover,
    .platform-complete:hover,
    .speaker-thumb:hover,
    .speaker-plus:hover,
    .doc-item:hover,
    .ai-tool:hover,
    .right-card:hover,
    .under-card:hover,
    .tab-chip:hover {
      transform: translateY(-3px);
      border-color: rgba(0,229,255,.24);
      background: rgba(255,255,255,.08);
      box-shadow: 0 12px 28px rgba(0,0,0,.18), 0 0 0 1px rgba(0,229,255,.04);
    }

    .platform-body {
      display: grid;
      grid-template-columns: 84px 1.28fr .74fr;
      gap: 14px;
      padding: 14px;
    }

    .platform-side {
      border-radius: 20px;
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.07);
      padding: 12px 8px;
      display: grid;
      gap: 8px;
      align-content: start;
    }

    .side-item {
      display: grid;
      justify-items: center;
      gap: 5px;
      padding: 8px 5px;
      border-radius: 14px;
      color: rgba(238,246,255,.68);
      font-size: 9.5px;
      text-align: center;
      background: rgba(255,255,255,.025);
      border: 1px solid transparent;
    }

    .side-item.active {
      color: #fff;
      background: linear-gradient(135deg, rgba(0,229,255,.16), rgba(124,60,255,.18));
      border: 1px solid rgba(0,229,255,.22);
    }

    .side-item i { font-size: 18px; }

    .platform-center {
      display: grid;
      gap: 12px;
      align-content: start;
    }

    .platform-course-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      padding: 4px 4px 0;
    }

    .platform-back {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--brand);
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 10px;
    }

    .course-title {
      font-size: 19px;
      line-height: 1.15;
      letter-spacing: -.04em;
      font-weight: 800;
      color: #fff;
      margin-bottom: 6px;
    }

    .course-meta {
      color: rgba(238,246,255,.72);
      font-size: 12px;
    }

    .platform-complete {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.04);
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      flex-shrink: 0;
      margin-top: 22px;
    }

    .platform-player-shell {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      align-items: stretch;
    }

    .speaker-rail {
      border-radius: 20px;
      background: rgba(255,255,255,.035);
      border: 1px solid rgba(255,255,255,.07);
      padding: 10px;
      display: grid;
      gap: 10px;
      align-content: start;
    }

    .live-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      padding: 8px 10px;
      border-radius: 999px;
      background: rgba(3,7,18,.62);
      border: 1px solid rgba(0,229,255,.18);
      color: #fff;
      font-size: 11px;
      font-weight: 800;
    }

    .live-pill i { color: var(--brand); }

    .speaker-thumb {
      border-radius: 16px;
      overflow: hidden;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      min-height: 112px;
      position: relative;
    }

    .speaker-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .speaker-thumb .name {
      position: absolute;
      left: 8px;
      bottom: 8px;
      font-size: 9.5px;
      font-weight: 700;
      color: #fff;
      padding: 5px 8px;
      border-radius: 999px;
      background: rgba(0,0,0,.45);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,.12);
    }

    .speaker-plus {
      border-radius: 16px;
      padding: 18px 8px;
      min-height: 72px;
      display: grid;
      place-items: center;
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.07);
      color: #fff;
      text-align: center;
      font-size: 11px;
      line-height: 1.25;
    }

    .speaker-plus strong {
      display: block;
      font-size: 24px;
      letter-spacing: -.05em;
      margin-bottom: 3px;
    }

    .player-card {
      border-radius: 22px;
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.08);
      overflow: hidden;
      box-shadow: 0 18px 46px rgba(0,0,0,.18);
    }

    .platform-video {
      position: relative;
      min-height: 376px;
      background: #000;
      border-bottom: 1px solid rgba(255,255,255,.08);
      overflow: hidden;
    }

    .video-still {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      filter: saturate(1.04) contrast(1.04);
      transform: scale(1.01);
    }

    .platform-video::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(6,10,20,.08), transparent 18%, transparent 72%, rgba(6,10,20,.65) 100%),
        linear-gradient(90deg, rgba(0,0,0,.12), transparent 24%, transparent 76%, rgba(0,0,0,.12));
      pointer-events: none;
      z-index: 1;
    }

    .video-overlay-top {
      position: absolute;
      inset: 14px 14px auto 14px;
      z-index: 2;
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: flex-start;
    }

    .live-badge,
    .video-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(3,7,18,.52);
      color: #fff;
      font-size: 12px;
      font-weight: 800;
      backdrop-filter: blur(10px);
    }

    .video-tag { color: #d9f8ff; }
    .live-badge i { color: var(--brand-3); }

    .video-title-card {
      position: absolute;
      left: 16px;
      bottom: 64px;
      z-index: 2;
      max-width: 45%;
      padding: 14px 16px;
      border-radius: 18px;
      background: rgba(3,7,18,.48);
      border: 1px solid rgba(255,255,255,.1);
      backdrop-filter: blur(12px);
      box-shadow: 0 18px 36px rgba(0,0,0,.25);
    }

    .video-title-card strong {
      display: block;
      font-size: 22px;
      line-height: 1.08;
      letter-spacing: -.05em;
      margin-bottom: 6px;
      color: #fff;
    }

    .video-title-card span {
      display: block;
      color: rgba(238,246,255,.82);
      font-size: 13px;
      line-height: 1.45;
    }

    .play-button {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 86px;
      height: 86px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: rgba(255,255,255,.16);
      border: 1px solid rgba(255,255,255,.25);
      color: #fff;
      font-size: 38px;
      box-shadow: 0 20px 46px rgba(0,0,0,.36);
      backdrop-filter: blur(18px);
      z-index: 2;
      transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
    }

    .platform-video:hover .play-button {
      transform: translate(-50%, -50%) scale(1.05);
      background: rgba(255,255,255,.22);
      box-shadow: 0 24px 60px rgba(0,0,0,.42);
    }

    .player-controls {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 12px 16px;
      background: rgba(5,9,18,.92);
      color: #fff;
      font-size: 12px;
    }

    .player-controls .control-icon {
      font-size: 16px;
      color: rgba(255,255,255,.88);
    }

    .control-progress {
      flex: 1;
      height: 4px;
      border-radius: 999px;
      background: rgba(255,255,255,.12);
      overflow: hidden;
      margin: 0 4px;
    }

    .control-progress span {
      display: block;
      width: 72%;
      height: 100%;
      background: linear-gradient(90deg, var(--brand), var(--brand-3));
    }

    .time-label { color: rgba(255,255,255,.74); }

    .player-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 14px 14px;
      color: rgba(238,246,255,.76);
      font-size: 12px;
    }

    .nav-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      border-radius: 12px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      color: #fff;
      font-weight: 700;
    }

    .nav-btn.next { margin-left: auto; }

    .platform-under {
      display: grid;
      grid-template-columns: 1.22fr .78fr;
      gap: 10px;
    }

    .under-card {
      padding: 16px;
      border-radius: 18px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
    }

    .under-card .meta-kicker {
      color: var(--muted-2);
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-bottom: 8px;
    }

    .under-card strong {
      display: block;
      font-size: 18px;
      line-height: 1.18;
      letter-spacing: -.05em;
      margin-bottom: 10px;
      color: #fff;
    }

    .under-card p {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.55;
    }

    .course-stats {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      margin-top: 10px;
      color: rgba(238,246,255,.76);
      font-size: 12px;
    }

    .course-stats span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .mini-progress {
      margin-top: 12px;
      display: grid;
      gap: 8px;
    }

    .mini-progress .track {
      height: 6px;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      overflow: hidden;
    }

    .mini-progress .track span {
      display: block;
      width: 58%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--brand), var(--brand-3));
    }

    .mini-progress .row {
      display: flex;
      justify-content: space-between;
      color: rgba(238,246,255,.8);
      font-size: 12px;
    }

    .platform-tabs {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 2px;
    }

    .tab-chip {
      padding: 9px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      color: rgba(238,246,255,.74);
      font-size: 12px;
      font-weight: 700;
    }

    .tab-chip.active {
      color: #fff;
      border-color: rgba(0,229,255,.24);
      background: rgba(0,229,255,.08);
    }

    .platform-right {
      display: grid;
      gap: 12px;
      align-content: start;
    }

    .right-card {
      padding: 16px;
      border-radius: 18px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
    }

    .right-card h4 {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      letter-spacing: -.03em;
      margin-bottom: 14px;
      color: #fff;
    }

    .doc-item,
    .ai-tool {
      display: grid;
      grid-template-columns: 38px 1fr auto;
      gap: 10px;
      align-items: center;
      padding: 11px;
      border-radius: 14px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.06);
    }

    .doc-item + .doc-item,
    .ai-tool + .ai-tool { margin-top: 8px; }

    .doc-ico,
    .tool-ico {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      font-size: 18px;
      color: #fff;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    }

    .doc-ico.pdf { background: linear-gradient(135deg, #ff6b6b, #e63946); }
    .doc-ico.slide { background: linear-gradient(135deg, #ff9f43, #ff7a00); }
    .doc-ico.xls { background: linear-gradient(135deg, #6ddf63, #2ca44f); }

    .tool-ico.summary { background: linear-gradient(135deg, #845ef7, #5f3dc4); }
    .tool-ico.flash { background: linear-gradient(135deg, #69db7c, #2b8a3e); }
    .tool-ico.bot { background: linear-gradient(135deg, #4dabf7, #1971c2); }

    .doc-text strong,
    .tool-text strong {
      display: block;
      font-size: 12px;
      line-height: 1.35;
      letter-spacing: -.02em;
      color: #fff;
    }

    .doc-text span,
    .tool-text span {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.45;
    }

    .doc-item i:last-child,
    .ai-tool i:last-child {
      color: rgba(255,255,255,.72);
      font-size: 16px;
    }

    .link-more {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--brand);
      font-size: 12px;
      font-weight: 700;
      margin-top: 12px;
    }

    @media (max-width: 1100px) {
      .platform-mockup { transform: none; }
      .platform-mockup:hover { transform: none; }
      .platform-body { grid-template-columns: 80px 1fr; }
      .platform-right { grid-column: span 2; }
    }

    @media (max-width: 860px) {
      .platform-topbar { grid-template-columns: 1fr auto; }
      .platform-search { grid-column: 1 / -1; order: 3; }
      .platform-player-shell { grid-template-columns: 1fr; }
      .speaker-rail { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
      .live-pill { grid-column: 1 / -1; }
    }

    @media (max-width: 660px) {
      .platform-body,
      .platform-under {
        grid-template-columns: 1fr;
      }
      .platform-right { order: 3; grid-column: auto; }
      .platform-side { display: none; }
      .platform-search { display: none; }
      .video-title-card { max-width: calc(100% - 32px); bottom: 74px; }
      .video-title-card strong { font-size: 20px; }
      .platform-course-head { flex-direction: column; }
      .platform-complete { margin-top: 0; }
      .speaker-rail { grid-template-columns: 1fr 1fr; }
    }
    .platform-mockup {
      --mx: 50%;
      --my: 50%;
      cursor: default;
    }

    .platform-mockup::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.10), transparent 24%),
        linear-gradient(120deg, rgba(255,255,255,.05), transparent 22%, transparent 78%, rgba(255,255,255,.03));
      pointer-events: none;
      z-index: 0;
      opacity: .9;
      transition: opacity .3s ease;
    }

    .platform-mockup:hover::before { opacity: 1; }

    .platform-side,
    .platform-center,
    .platform-right,
    .player-card,
    .speaker-rail {
      position: relative;
      z-index: 1;
      transition: transform .35s ease;
      transform-style: preserve-3d;
    }

    .platform-mockup:hover .platform-side { transform: translate3d(-4px, -3px, 28px); }
    .platform-mockup:hover .platform-center { transform: translate3d(0, -4px, 32px); }
    .platform-mockup:hover .platform-right { transform: translate3d(6px, -4px, 26px); }
    .platform-mockup:hover .player-card { transform: translate3d(0, -5px, 38px); }
    .platform-mockup:hover .speaker-rail { transform: translate3d(-3px, -4px, 24px); }

    .ui-hover,
    .platform-video,
    .nav-btn,
    .platform-complete,
    .player-card,
    .right-card,
    .under-card,
    .side-item,
    .doc-item,
    .ai-tool,
    .speaker-thumb,
    .speaker-plus,
    .tab-chip,
    .action {
      will-change: transform, box-shadow, border-color, background;
    }

    .platform-video:hover {
      box-shadow: 0 18px 54px rgba(0,0,0,.28), 0 0 0 1px rgba(0,229,255,.06);
    }

    .platform-video:hover .video-still {
      transform: scale(1.03);
      transition: transform .6s ease;
    }

    .right-card,
    .under-card,
    .speaker-rail,
    .platform-side,
    .player-card {
      backdrop-filter: blur(12px);
    }

    .platform-course-head,
    .platform-player-shell,
    .platform-under,
    .platform-right {
      position: relative;
      z-index: 1;
    }

    @media (max-width: 1100px) {
      .platform-mockup:hover .platform-side,
      .platform-mockup:hover .platform-center,
      .platform-mockup:hover .platform-right,
      .platform-mockup:hover .player-card,
      .platform-mockup:hover .speaker-rail { transform: none; }
    }

    .admin-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; }
    .admin-box {
      padding: 18px;
      border-radius: 18px;
      background: rgba(255,255,255,.055);
      border: 1px solid rgba(255,255,255,.09);
    }
    .admin-box span { color: var(--muted-2); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
    .admin-box strong { display: block; font-size: 24px; margin-top: 8px; letter-spacing: -.05em; }

    .bar-list { display: grid; gap: 12px; }
    .bar-row {
      display: grid;
      grid-template-columns: 112px 1fr 42px;
      align-items: center;
      gap: 10px;
      color: var(--muted);
      font-size: 13px;
    }
    .bar-track { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
    .bar-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), var(--brand-3)); }

    .usecase-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }

    .usecase {
      padding: 20px;
      border-radius: 22px;
      background: rgba(255,255,255,.052);
      border: 1px solid rgba(255,255,255,.1);
      min-height: 145px;
    }
    .usecase i { color: var(--brand-3); font-size: 28px; }
    .usecase strong { display: block; margin-top: 16px; letter-spacing: -.04em; }


    .faq-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }

    .faq-item {
      border-radius: 22px;
      background: rgba(255,255,255,.052);
      border: 1px solid rgba(255,255,255,.1);
      overflow: hidden;
      transition: transform .22s ease, border-color .22s ease, background .22s ease;
    }

    .faq-item:hover {
      transform: translateY(-4px);
      border-color: rgba(0,229,255,.24);
      background: rgba(255,255,255,.07);
    }

    .faq-item summary {
      cursor: pointer;
      padding: 20px 22px;
      font-weight: 900;
      letter-spacing: -.04em;
      list-style: none;
    }

    .faq-item summary::-webkit-details-marker { display: none; }

    .faq-item p {
      color: var(--muted);
      line-height: 1.65;
      font-size: 14px;
      padding: 0 22px 22px;
    }

    .workflow {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }

    .step {
      position: relative;
      padding: 24px;
      min-height: 190px;
      border-radius: 26px;
      background: rgba(255,255,255,.052);
      border: 1px solid rgba(255,255,255,.1);
      overflow: hidden;
    }
    .step::before {
      content: attr(data-step);
      position: absolute;
      right: 18px;
      top: 10px;
      color: rgba(255,255,255,.07);
      font-size: 72px;
      font-weight: 900;
      letter-spacing: -.08em;
    }
    .step i { position: relative; z-index: 1; color: var(--brand); font-size: 30px; }
    .step h3 { position: relative; z-index: 1; margin-top: 24px; font-size: 18px; letter-spacing: -.05em; }
    .step p { position: relative; z-index: 1; color: var(--muted); font-size: 13px; line-height: 1.6; margin-top: 8px; }

    .cta { padding-bottom: 60px; }
    .cta-panel {
      position: relative;
      overflow: hidden;
      padding: 56px;
      border-radius: 40px;
      background:
        radial-gradient(circle at 15% 20%, rgba(0,229,255,.2), transparent 32%),
        radial-gradient(circle at 85% 10%, rgba(33,255,180,.14), transparent 36%),
        linear-gradient(135deg, rgba(124,60,255,.18), rgba(0,229,255,.08)),
        rgba(255,255,255,.055);
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: var(--shadow);
      display: grid;
      grid-template-columns: 1fr 380px;
      gap: 32px;
      align-items: center;
    }
    .cta-panel::after {
      content: '';
      position: absolute;
      width: 420px;
      height: 420px;
      border-radius: 50%;
      background: rgba(0,229,255,.13);
      filter: blur(80px);
      right: -150px;
      bottom: -150px;
    }
    .cta-panel h2 { max-width: 750px; }
    .cta-panel p { color: var(--muted); font-size: 17px; line-height: 1.7; margin-top: 18px; max-width: 820px; }

    .contact-card {
      position: relative;
      z-index: 1;
      padding: 22px;
      border-radius: 26px;
      background: rgba(3,7,18,.58);
      border: 1px solid rgba(255,255,255,.13);
    }
    .contact-card h3 { letter-spacing: -.05em; margin-bottom: 14px; }
    .contact-field {
      width: 100%;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 15px;
      background: rgba(255,255,255,.06);
      color: #fff;
      padding: 13px 14px;
      margin-bottom: 10px;
      outline: 0;
    }
    .contact-field:focus { border-color: rgba(0,229,255,.5); }
    textarea.contact-field { min-height: 92px; resize: vertical; }
    .contact-card .btn { width: 100%; }

    .footer {
      border-top: 1px solid rgba(255,255,255,.08);
      padding: 30px 0 44px;
      color: var(--muted);
    }
    .footer-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
    }
    .footer .brand-logo { width: 150px; opacity: .8; }
    .footer-links { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }
    .footer-links a:hover { color: #fff; }

    .whatsapp-float {
      position: fixed;
      right: 22px;
      bottom: 22px;
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: linear-gradient(135deg, #21ffb4, #00d66f);
      color: #02130a;
      font-size: 29px;
      z-index: 1200;
      box-shadow: 0 18px 48px rgba(33,255,180,.28);
      transition: .2s ease;
    }
    .whatsapp-float:hover { transform: translateY(-4px) scale(1.04); }

    .toast {
      position: fixed;
      left: 50%;
      bottom: 24px;
      z-index: 1500;
      transform: translate(-50%, 140px);
      padding: 14px 18px;
      border-radius: 999px;
      background: rgba(3,7,18,.88);
      border: 1px solid rgba(33,255,180,.25);
      color: #fff;
      backdrop-filter: blur(16px);
      box-shadow: 0 18px 60px rgba(0,0,0,.38);
      transition: .3s ease;
      font-weight: 800;
      font-size: 14px;
    }
    .toast.show { transform: translate(-50%, 0); }

    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .7s ease, transform .7s ease;
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    @media (max-width: 1100px) {
      .hero-grid, .ai-panel, .position-grid, .experience-grid, .cta-panel { grid-template-columns: 1fr; }
      .hero-visual { min-height: 570px; }
      .dashboard { left: 50%; right: auto; transform: translateX(-50%) rotateY(-7deg) rotateX(4deg); }
      .float-card.cart { left: 0; }
      .float-card.notify { right: 0; }
      .product-grid, .difference-grid { grid-template-columns: repeat(2, 1fr); }
      .product-card.featured { grid-column: span 1; }
      .tech-cloud, .usecase-grid, .workflow { grid-template-columns: repeat(2, 1fr); }
      .position-list { border-left: 0; border-top: 1px solid rgba(255,255,255,.1); }
      .stats-row { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 920px) {
      .nav { border-radius: 28px; align-items: flex-start; }
      .nav-links {
        position: absolute;
        left: 16px;
        right: 16px;
        top: 76px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 14px;
        border-radius: 22px;
        background: rgba(3,7,18,.94);
        border: 1px solid rgba(255,255,255,.12);
        backdrop-filter: blur(18px);
      }
      .nav.open .nav-links { display: flex; }
      .nav-links a { padding: 14px; }
      .nav-actions .btn { display: none; }
      .menu-toggle { display: grid; place-items: center; }
      .section-head { grid-template-columns: 1fr; gap: 16px; }
      .dash-main { grid-template-columns: 1fr; }
      .dashboard { width: min(520px, 96%); }
    }

    @media (max-width: 720px) {
      .container { width: min(100% - 28px, var(--container)); }
      .brand-logo { width: 138px; }
      .hero { padding-top: 128px; }
      .hero-visual { min-height: 720px; }
      .orbit { width: 420px; height: 420px; right: -90px; }
      .float-card.cart, .float-card.notify { left: 50%; right: auto; transform: translateX(-50%); width: min(310px, 92%); }
      .float-card.cart { bottom: 108px; }
      .float-card.notify { bottom: 4px; }
      .product-grid, .difference-grid, .tech-cloud, .usecase-grid, .workflow, .faq-grid, .position-list, .stats-row, .admin-metrics { grid-template-columns: 1fr; }
      .position-content, .position-list, .cta-panel { padding: 28px; }
      .ai-panel { padding: 20px; }
      .automation-board { min-height: auto; }
      .bar-row { grid-template-columns: 86px 1fr 34px; }
      .footer-inner { flex-direction: column; align-items: flex-start; }
      .section { padding: 78px 0; }
    }

    .challenge-phrase {
      margin-top: 26px;
      padding: 24px 26px;
      border-radius: 24px;
      background:
        radial-gradient(circle at 0% 0%, rgba(0,229,255,.18), transparent 36%),
        linear-gradient(135deg, rgba(0,229,255,.10), rgba(124,60,255,.12));
      border: 1px solid rgba(0,229,255,.22);
      color: #fff;
      font-size: clamp(22px, 2.5vw, 34px);
      line-height: 1.12;
      letter-spacing: -.06em;
      font-weight: 900;
      box-shadow: 0 24px 70px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.04);
    }

    .challenge-phrase span {
      color: var(--brand);
    }


/* Ajustes v10 */
.cta-panel.cta-whatsapp-only {
  grid-template-columns: 1fr;
  text-align: left;
}

.cta-panel.cta-whatsapp-only .hero-cta {
  margin-top: 28px;
}

.cta-panel.cta-whatsapp-only .btn {
  width: fit-content;
}

.platform-player-shell {
  grid-template-columns: 1fr;
}

.platform-course-head {
  grid-template-columns: 1fr;
}

.platform-video .video-title-card span {
  max-width: 100%;
}

@media (max-width: 660px) {
  .cta-panel.cta-whatsapp-only .btn {
    width: 100%;
  }
}