/* ============================================================
   Arkoder — LANDING ONE PAGE
   Sistema de diseño: dark, gradiente verde esmeralda (paleta
   Top-Coding: verde bosque + menta + esmeralda), glassmorphism
   ============================================================ */
    :root {
      --bg: #05060b;
      --bg-2: #0a0d17;
      --surface: #0d1120;
      --surface-2: #121731;
      --line: rgba(148, 163, 184, .13);
      --line-strong: rgba(148, 163, 184, .26);
      --text: #e6eaf2;
      --muted: #8f99b0;
      --muted-2: #5d677e;
      /* Paleta Top-Coding (Spec Wizard / botones oficiales) */
      --green-deep: #0f241b;
      --green-hover: #153a2e;
      --green-soft: #a7f3d0;
      --emerald-400: #34d399;
      --emerald-500: #10b981;
      --emerald-600: #059669;
      --green: #34d399;
      --mint: #6ee7b7;
      /* Alias de compatibilidad (apuntan a la gama verde) */
      --violet: #34d399;
      --violet-2: #6ee7b7;
      --indigo: #10b981;
      --cyan: #34d399;
      --red: #f87171;
      --amber: #fbbf24;
      --grad: linear-gradient(100deg, #059669 0%, #10b981 45%, #34d399 100%);
      --font-body: 'Inter', system-ui, -apple-system, sans-serif;
      --font-head: 'Space Grotesk', 'Inter', sans-serif;
      --font-mono: 'JetBrains Mono', ui-monospace, monospace;
      --radius: 18px;
      --maxw: 1180px;
      --nav-h: 76px;
    }

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

    html {
      scroll-behavior: smooth;
      scroll-padding-top: calc(var(--nav-h) + 16px)
    }

    body {
      font-family: var(--font-body);
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
      font-size: 16px;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    ::selection {
      background: rgba(16, 185, 129, .45);
      color: #fff
    }

    img,
    svg {
      display: block;
      max-width: 100%
    }

    a {
      color: inherit;
      text-decoration: none
    }

    button {
      font-family: inherit;
      cursor: pointer;
      border: none;
      background: none;
      color: inherit
    }

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

    .grad-text {
      background: var(--grad);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent
    }

    /* Fondo decorativo global */
    .grid-bg {
      position: fixed;
      inset: 0;
      z-index: -2;
      pointer-events: none;
      background-image: linear-gradient(rgba(148, 163, 184, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, .045) 1px, transparent 1px);
      background-size: 56px 56px;
      -webkit-mask-image: radial-gradient(ellipse 90% 62% at 50% 0%, #000 25%, transparent 78%);
      mask-image: radial-gradient(ellipse 90% 62% at 50% 0%, #000 25%, transparent 78%);
    }

    .glow-bg {
      position: fixed;
      inset: 0;
      z-index: -3;
      pointer-events: none;
      background:
        radial-gradient(58% 42% at 50% -6%, rgba(16, 185, 129, .16), transparent 60%),
        radial-gradient(38% 30% at 88% 8%, rgba(52, 211, 153, .09), transparent 62%),
        radial-gradient(42% 34% at 8% 42%, rgba(110, 231, 183, .08), transparent 62%),
        radial-gradient(50% 40% at 50% 110%, rgba(52, 211, 153, .06), transparent 65%);
    }

    /* ============ Utilidades ============ */
    .kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--mint);
    }

    .kicker::before {
      content: "";
      width: 26px;
      height: 1px;
      background: var(--grad)
    }

    h1,
    h2,
    h3 {
      font-family: var(--font-head);
      line-height: 1.12;
      font-weight: 700;
      letter-spacing: -.02em
    }

    h2 {
      font-size: clamp(1.9rem, 3.8vw, 2.9rem)
    }

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

    .section-head {
      max-width: 760px;
      margin: 0 auto 56px;
      text-align: center
    }

    .section-head .kicker {
      justify-content: center
    }

    .section-head .kicker::after {
      content: "";
      width: 26px;
      height: 1px;
      background: var(--grad)
    }

    .section-head h2 {
      margin: 16px 0 18px
    }

    .section-head p {
      color: var(--muted);
      font-size: 17px
    }

    .lead {
      color: var(--muted);
      font-size: 17px
    }

    /* Botones */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 14px 26px;
      border-radius: 14px;
      font-weight: 600;
      font-size: 15.5px;
      transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
      white-space: nowrap;
    }

    .btn-primary {
      color: #fff;
      position: relative;
      background: var(--grad);
      background-size: 150% 150%;
      box-shadow: 0 10px 34px -10px rgba(16, 185, 129, .6), inset 0 1px 0 rgba(255, 255, 255, .22);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 44px -12px rgba(16, 185, 129, .75), inset 0 1px 0 rgba(255, 255, 255, .22)
    }

    .btn-ghost {
      color: var(--text);
      border: 1px solid var(--line-strong);
      background: rgba(255, 255, 255, .03);
      backdrop-filter: blur(6px);
    }

    .btn-ghost:hover {
      border-color: rgba(110, 231, 183, .55);
      background: rgba(52, 211, 153, .1);
      transform: translateY(-2px)
    }

    .btn .ic {
      width: 18px;
      height: 18px
    }

    /* ============ Navbar ============ */
    .nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      height: var(--nav-h);
      transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
      border-bottom: 1px solid transparent;
    }

    .nav.scrolled {
      background: rgba(5, 6, 11, .82);
      backdrop-filter: blur(16px);
      border-bottom-color: var(--line);
      box-shadow: 0 10px 40px -18px rgba(0, 0, 0, .8);
    }

    .nav-inner {
      height: var(--nav-h);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--font-head);
      font-weight: 700;
      font-size: 19px;
      letter-spacing: -.01em;
      flex: none;
      white-space: nowrap
    }

    .brand img {
      width: 38px;
      height: auto;
      flex: none
    }

    .brand-mark {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      flex: none;
      background: var(--grad);
      display: grid;
      place-items: center;
      color: #fff;
      box-shadow: 0 6px 20px -6px rgba(16, 185, 129, .7);
    }

    .brand-mark svg {
      width: 19px;
      height: 19px
    }

    .brand b {
      font-weight: 700
    }

    .brand span {
      color: var(--muted);
      font-weight: 500
    }

    .nav-links {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(14px, 1.6vw, 30px);
      list-style: none;
      margin: 0 auto;
      min-width: 0
    }

    .nav-links li {
      flex: none
    }

    .nav-links a {
      font-size: 14.5px;
      font-weight: 500;
      color: var(--muted);
      white-space: nowrap;
      transition: color .2s
    }

    .nav-links a:hover {
      color: var(--text)
    }

    .nav-cta {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: none
    }

    .nav-cta .btn {
      padding: 10px 16px;
      font-size: 14px;
      border-radius: 11px
    }

    .nav-cta .btn-ghost {
      color: var(--muted);
      border: 1px solid var(--line-strong);
      background: transparent
    }

    .nav-cta .btn-ghost:hover {
      color: var(--text);
      border-color: var(--green);
      background: rgba(16, 185, 129, .08)
    }

    /* Selector de idioma desplegable del nav */
    .lang-select {
      position: relative;
      flex: none
    }

    .lang-trigger {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      height: 38px;
      padding: 0 10px;
      border: 1px solid var(--line-strong);
      border-radius: 11px;
      background: transparent;
      color: var(--muted);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .02em;
      cursor: pointer;
      transition: color .2s, border-color .2s, background .2s
    }

    .lang-trigger:hover {
      color: var(--text);
      border-color: var(--green);
      background: rgba(16, 185, 129, .06)
    }

    .lang-trigger .ic {
      flex: none
    }

    .lang-trigger .globe {
      width: 15px;
      height: 15px;
      color: var(--muted)
    }

    .lang-trigger .caret {
      width: 13px;
      height: 13px;
      color: var(--muted-2);
      transition: transform .25s ease
    }

    .lang-select.open .lang-trigger {
      color: var(--text);
      border-color: var(--green)
    }

    .lang-select.open .lang-trigger .caret {
      transform: rotate(180deg);
      color: var(--green)
    }

    .lang-menu {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      min-width: 158px;
      margin: 0;
      padding: 6px;
      list-style: none;
      background: var(--surface-2);
      border: 1px solid var(--line-strong);
      border-radius: 12px;
      box-shadow: 0 20px 44px -20px rgba(0, 0, 0, .8);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px);
      transition: opacity .18s ease, transform .18s ease, visibility .18s;
      z-index: 130
    }

    .lang-select.open .lang-menu {
      opacity: 1;
      visibility: visible;
      transform: none
    }

    .lang-menu li {
      margin: 0
    }

    .lang-menu a {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 11px;
      border-radius: 8px;
      color: var(--muted);
      font-size: 13.5px;
      font-weight: 500;
      white-space: nowrap;
      transition: color .2s, background .2s
    }

    .lang-menu a:hover {
      color: var(--text);
      background: rgba(16, 185, 129, .08)
    }

    .lang-menu a.on {
      color: var(--green);
      background: rgba(16, 185, 129, .12);
      font-weight: 600
    }

    .lang-menu a.on::after {
      content: "";
      margin-left: auto;
      width: 15px;
      height: 15px;
      background: currentColor;
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat
    }

    .burger {
      display: none;
      flex-direction: column;
      gap: 5px;
      padding: 8px;
      z-index: 110
    }

    .burger span {
      width: 22px;
      height: 2px;
      background: var(--text);
      border-radius: 2px;
      transition: transform .3s, opacity .3s
    }

    .burger.open span:nth-child(1) {
      transform: translateY(7px) rotate(45deg)
    }

    .burger.open span:nth-child(2) {
      opacity: 0
    }

    .burger.open span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg)
    }

    .mobile-menu {
      display: none;
      position: fixed;
      top: var(--nav-h);
      left: 0;
      right: 0;
      z-index: 99;
      background: rgba(7, 9, 16, .97);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--line);
      padding: 0 24px;
      overflow: hidden;
      max-height: 0;
      transition: max-height .4s ease;
    }

    .mobile-menu.open {
      max-height: 620px
    }

    .mobile-menu ul {
      list-style: none;
      padding: 10px 0
    }

    .mobile-menu li a {
      display: block;
      padding: 13px 4px;
      font-size: 16px;
      font-weight: 500;
      color: var(--muted);
      border-bottom: 1px solid rgba(148, 163, 184, .07)
    }

    .mobile-menu li a:hover {
      color: var(--text)
    }

    .mobile-menu .btn {
      width: 100%;
      margin: 16px 0 6px
    }

    .mobile-lang {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 6px 0 20px;
      font-size: 14px;
      font-weight: 600;
      color: var(--muted-2)
    }

    .mobile-lang a {
      color: var(--muted-2);
      padding: 4px 8px;
      border-radius: 8px;
      transition: color .2s
    }

    .mobile-lang a.on {
      color: var(--green);
      background: rgba(16, 185, 129, .1)
    }

    .mobile-lang a:hover {
      color: var(--text)
    }

    /* ============ Hero ============ */
    .hero {
      padding: calc(var(--nav-h) + 70px) 0 70px;
      position: relative;
      overflow: hidden
    }

    .hero-inner {
      text-align: center;
      max-width: 1200px;
      margin: 0 auto
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px 8px 10px;
      border-radius: 999px;
      border: 1px solid var(--line-strong);
      background: rgba(255, 255, 255, .03);
      font-size: 13.5px;
      font-weight: 500;
      color: var(--muted);
      backdrop-filter: blur(6px);
      margin-bottom: 30px;
    }

    .hero-badge .tag {
      background: var(--grad);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 999px;
    }

    .hero-badge .pulse {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 0 0 rgba(52, 211, 153, .55);
      animation: pulse 2.2s infinite
    }

    @keyframes pulse {
      0% {
        box-shadow: 0 0 0 0 rgba(52, 211, 153, .55)
      }

      70% {
        box-shadow: 0 0 0 9px rgba(52, 211, 153, 0)
      }

      100% {
        box-shadow: 0 0 0 0 rgba(52, 211, 153, 0)
      }
    }

    .hero-pain {
      font-size: 15px;
      color: var(--muted-2);
      font-weight: 500;
      letter-spacing: .01em;
      margin-bottom: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .hero-pain svg {
      width: 16px;
      height: 16px;
      color: var(--amber)
    }

    .hero h1 {
      font-size: clamp(2.5rem, 6vw, 4.5rem);
      margin-bottom: 24px;
    }

    .hero h1 .grad-text {
      display: inline-block
    }

    .hero-sub {
      font-size: clamp(16.5px, 2vw, 19px);
      color: var(--muted);
      max-width: 720px;
      margin: 0 auto 38px
    }

    .hero-cta {
      display: flex;
      gap: 14px;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 20px
    }

    .hero-note {
      font-size: 13.5px;
      color: var(--muted-2);
      display: flex;
      gap: 18px;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 64px
    }

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

    .hero-note svg {
      width: 14px;
      height: 14px;
      color: var(--green)
    }

    /* Mockup editor */
    .hero-visual {
      position: relative;
      max-width: 980px;
      margin: 0 auto
    }

    .mock {
      background: linear-gradient(180deg, #0c101e, #090c16);
      border: 1px solid var(--line-strong);
      border-radius: 16px;
      overflow: hidden;
      text-align: left;
      box-shadow:
        0 60px 140px -40px rgba(16, 185, 129, .5),
        0 30px 80px -30px rgba(0, 0, 0, .9),
        inset 0 1px 0 rgba(255, 255, 255, .05);
    }

    .mock-bar {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 13px 16px;
      border-bottom: 1px solid var(--line);
      background: rgba(255, 255, 255, .025)
    }

    .mock-dot {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      flex: none
    }

    .mock-dot.r {
      background: #ff5f57
    }

    .mock-dot.y {
      background: #febc2e
    }

    .mock-dot.g {
      background: #28c840
    }

    .mock-title {
      margin-left: 8px;
      font-family: var(--font-mono);
      font-size: 11.5px;
      color: var(--muted-2);
      letter-spacing: .02em
    }

    .mock-body {
      display: flex;
      min-height: 440px
    }

    .mock-activity {
      width: 52px;
      flex: none;
      border-right: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      padding: 16px 0;
      color: var(--muted-2)
    }

    .mock-activity svg {
      width: 20px;
      height: 20px
    }

    .mock-activity .active {
      color: var(--green)
    }

    .mock-sidebar {
      width: 218px;
      flex: none;
      border-right: 1px solid var(--line);
      padding: 16px 14px;
      font-family: var(--font-mono);
      font-size: 11.5px;
      color: var(--muted)
    }

    .mock-sidebar .sb-label {
      font-size: 10px;
      letter-spacing: .14em;
      color: var(--muted-2);
      margin-bottom: 12px;
      font-weight: 600
    }

    .tree {
      list-style: none
    }

    .tree li {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 4px 6px;
      border-radius: 6px;
      white-space: nowrap
    }

    .tree li.dir {
      color: var(--muted)
    }

    .tree li.file {
      padding-left: 22px
    }

    .tree li.active {
      background: rgba(52, 211, 153, .16);
      color: var(--text)
    }

    .tree svg {
      width: 13px;
      height: 13px;
      flex: none
    }

    .tree .chev {
      width: 11px;
      height: 11px;
      color: var(--muted-2)
    }

    .mock-editor {
      flex: 1;
      padding: 0;
      font-family: var(--font-mono);
      font-size: 12.5px;
      line-height: 1.75;
      overflow: hidden
    }

    .mock-tabs {
      display: flex;
      align-items: center;
      gap: 2px;
      border-bottom: 1px solid var(--line);
      padding: 0 10px;
      background: rgba(255, 255, 255, .015)
    }

    .mock-tab {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 10px 14px;
      font-size: 12px;
      color: var(--muted-2);
      border-bottom: 2px solid transparent;
      white-space: nowrap
    }

    .mock-tab.active {
      color: var(--text);
      border-bottom-color: var(--green)
    }

    .mock-tab svg {
      width: 13px;
      height: 13px
    }

    .code {
      padding: 18px 20px 26px;
      white-space: pre;
      overflow-x: auto
    }

    .tk-k {
      color: #34d399
    }

    .tk-s {
      color: #a7f3d0
    }

    .tk-f {
      color: #6ee7b7
    }

    .tk-c {
      color: #64748b;
      font-style: italic
    }

    .tk-n {
      color: #fbbf24
    }

    .tk-v {
      color: #e6eaf2
    }

    .tk-p {
      color: #94a3b8
    }

    .tk-ok {
      color: #34d399
    }

    .code .line-mark {
      color: var(--muted-2);
      user-select: none
    }

    .float-chip {
      position: absolute;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 13px 18px;
      border-radius: 16px;
      background: rgba(13, 17, 32, .88);
      backdrop-filter: blur(14px);
      border: 1px solid rgba(52, 211, 153, .35);
      box-shadow: 0 20px 60px -16px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .06);
      font-size: 13.5px;
      font-weight: 500;
      animation: float 6s ease-in-out infinite;
    }

    .float-chip .ic {
      width: 20px;
      height: 20px;
      color: var(--green);
      flex: none
    }

    .float-chip b {
      display: block;
      font-size: 13.5px;
      color: var(--text)
    }

    .float-chip small {
      display: block;
      color: var(--muted);
      font-size: 12px;
      font-weight: 400
    }

    .float-chip .checks {
      display: flex;
      gap: 8px;
      align-items: center
    }

    .float-chip .checks span {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11.5px;
      color: var(--green);
      font-family: var(--font-mono)
    }

    .chip-context {
      top: -26px;
      right: 6%;
      animation-delay: .4s
    }

    .chip-learn {
      bottom: -24px;
      left: 4%;
      animation-delay: 1.6s
    }

    .chip-learn .ic {
      color: var(--mint)
    }

    @keyframes float {

      0%,
      100% {
        transform: translateY(0)
      }

      50% {
        transform: translateY(-12px)
      }
    }

    /* Stats */
    .stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
      max-width: 980px;
      margin: 74px auto 0
    }

    .stat {
      text-align: center;
      padding: 26px 18px;
      border-radius: var(--radius);
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, .025);
      backdrop-filter: blur(4px);
    }

    .stat .num {
      font-family: var(--font-head);
      font-weight: 700;
      font-size: clamp(1.7rem, 3vw, 2.4rem);
      line-height: 1
    }

    .stat .num span {
      background: var(--grad);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent
    }

    .stat .lbl {
      margin-top: 10px;
      font-size: 13.5px;
      color: var(--muted)
    }

    /* ============ Marquee ============ */
    .marquee {
      margin-top: 88px;
      padding: 18px 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      overflow: hidden;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
      background: rgba(255, 255, 255, .012);
    }

    .marquee-track {
      display: flex;
      gap: 56px;
      width: max-content;
      animation: marquee 34s linear infinite
    }

    .marquee-track span {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 14.5px;
      font-weight: 500;
      color: var(--muted);
      white-space: nowrap
    }

    .marquee-track svg {
      width: 16px;
      height: 16px;
      color: var(--green)
    }

    @keyframes marquee {
      to {
        transform: translateX(-50%)
      }
    }

    /* ============ Problema ============ */
    .problem-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px
    }

    .prob-card {
      position: relative;
      padding: 28px 24px;
      border-radius: var(--radius);
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01));
      transition: transform .3s ease, border-color .3s ease;
    }

    .prob-card:hover {
      transform: translateY(-4px);
      border-color: rgba(248, 113, 113, .4)
    }

    .prob-card .p-ic {
      width: 46px;
      height: 46px;
      border-radius: 13px;
      display: grid;
      place-items: center;
      margin-bottom: 18px;
      background: rgba(248, 113, 113, .1);
      color: var(--red);
      border: 1px solid rgba(248, 113, 113, .25);
    }

    .prob-card .p-ic svg {
      width: 21px;
      height: 21px
    }

    .prob-card h3 {
      font-size: 17.5px;
      margin-bottom: 10px
    }

    .prob-card p {
      font-size: 14.5px;
      color: var(--muted)
    }

    /* ============ Proyectos ============ */
    .split {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 64px;
      align-items: center
    }

    .feature-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 34px
    }

    .feature {
      padding: 22px;
      border-radius: 16px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .008));
      transition: transform .3s ease, border-color .3s ease, background .3s ease;
    }

    .feature:hover {
      transform: translateY(-3px);
      border-color: rgba(52, 211, 153, .45);
      background: rgba(16, 185, 129, .07)
    }

    .feature .f-ic {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      margin-bottom: 14px;
      color: var(--mint);
      background: rgba(16, 185, 129, .13);
      border: 1px solid rgba(52, 211, 153, .3);
    }

    .feature .f-ic svg {
      width: 20px;
      height: 20px
    }

    .feature h3 {
      font-size: 16.5px;
      margin-bottom: 7px
    }

    .feature p {
      font-size: 14px;
      color: var(--muted)
    }

    .feature.wide {
      grid-column: 1/-1
    }

    .feature.wide .f-ic {
      color: var(--green);
      background: rgba(52, 211, 153, .1);
      border-color: rgba(52, 211, 153, .32)
    }

    /* Panel Proyectos (mockup) */
    .projects-panel {
      border: 1px solid var(--line-strong);
      border-radius: 16px;
      overflow: hidden;
      background: linear-gradient(180deg, #0c101e, #090c16);
      box-shadow: 0 50px 120px -40px rgba(16, 185, 129, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
      font-size: 13px;
    }

    .pp-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 18px;
      border-bottom: 1px solid var(--line)
    }

    .pp-bar strong {
      font-family: var(--font-head);
      font-size: 14px;
      letter-spacing: .04em
    }

    .pp-add {
      width: 26px;
      height: 26px;
      border-radius: 8px;
      background: var(--grad);
      color: #fff;
      display: grid;
      place-items: center;
      font-size: 16px;
      line-height: 1
    }

    .pp-search {
      margin: 12px 14px;
      padding: 9px 12px;
      border-radius: 9px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, .03);
      color: var(--muted-2);
      font-size: 12px
    }

    .pp-list {
      padding: 0 14px 16px;
      display: grid;
      gap: 12px
    }

    .pp-card {
      border: 1px solid var(--line);
      border-radius: 13px;
      padding: 15px;
      background: rgba(255, 255, 255, .022);
      position: relative;
      transition: border-color .25s;
    }

    .pp-card.active {
      border-color: rgba(52, 211, 153, .45);
      background: rgba(52, 211, 153, .045)
    }

    .pp-card.inactive {
      opacity: .72
    }

    .pp-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px
    }

    .pp-name {
      display: flex;
      align-items: center;
      gap: 9px;
      font-family: var(--font-head);
      font-weight: 600;
      font-size: 14.5px
    }

    .pp-name .folder {
      width: 30px;
      height: 30px;
      border-radius: 9px;
      background: rgba(16, 185, 129, .16);
      color: var(--mint);
      display: grid;
      place-items: center
    }

    .pp-name .folder svg {
      width: 16px;
      height: 16px
    }

    .badge-activo {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--green);
      background: rgba(52, 211, 153, .12);
      border: 1px solid rgba(52, 211, 153, .35);
      padding: 4px 9px;
      border-radius: 999px;
    }

    .badge-activo svg {
      width: 11px;
      height: 11px
    }

    .pp-rows {
      display: grid;
      gap: 7px;
      margin-bottom: 12px
    }

    .pp-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      color: var(--muted)
    }

    .pp-row .lbl {
      display: inline-flex;
      align-items: center;
      gap: 7px
    }

    .pp-row .lbl svg {
      width: 13px;
      height: 13px
    }

    .pp-row .val {
      font-family: var(--font-mono);
      color: var(--muted);
      background: rgba(148, 163, 184, .09);
      padding: 2px 7px;
      border-radius: 6px;
      font-size: 11px
    }

    .toggle {
      width: 30px;
      height: 17px;
      border-radius: 999px;
      position: relative;
      flex: none;
      transition: background .25s;
    }

    .toggle.on {
      background: var(--grad)
    }

    .toggle.off {
      background: rgba(148, 163, 184, .25)
    }

    .toggle::after {
      content: "";
      position: absolute;
      top: 2px;
      left: 2px;
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: #fff;
      transition: left .25s
    }

    .toggle.on::after {
      left: 15px
    }

    .pp-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 11px;
      color: var(--muted-2)
    }

    .pp-foot .learn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--green)
    }

    .pp-foot .learn svg {
      width: 12px;
      height: 12px
    }

    /* ============ Aprendizaje ============ */
    .learning .split {
      grid-template-columns: .95fr 1.05fr
    }

    .steps {
      display: grid;
      gap: 14px;
      margin-top: 34px;
      counter-reset: step
    }

    .step {
      display: flex;
      gap: 16px;
      align-items: flex-start;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .008));
      transition: transform .3s, border-color .3s;
    }

    .step:hover {
      transform: translateX(4px);
      border-color: rgba(52, 211, 153, .45)
    }

    .step-num {
      flex: none;
      width: 34px;
      height: 34px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      font-family: var(--font-head);
      font-weight: 700;
      font-size: 15px;
      color: #fff;
      background: var(--grad);
      box-shadow: 0 8px 20px -8px rgba(16, 185, 129, .7);
    }

    .step h3 {
      font-size: 16px;
      margin-bottom: 4px
    }

    .step p {
      font-size: 14px;
      color: var(--muted)
    }

    /* Ventana diff */
    .diff {
      border: 1px solid var(--line-strong);
      border-radius: 16px;
      overflow: hidden;
      background: linear-gradient(180deg, #0c101e, #090c16);
      box-shadow: 0 50px 120px -40px rgba(16, 185, 129, .35), inset 0 1px 0 rgba(255, 255, 255, .05);
    }

    .diff-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 16px 18px;
      border-bottom: 1px solid var(--line)
    }

    .diff-head .t {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--font-head);
      font-weight: 600;
      font-size: 14.5px
    }

    .diff-head .t svg {
      width: 19px;
      height: 19px;
      color: var(--mint)
    }

    .diff-head .file-chip {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--muted);
      background: rgba(148, 163, 184, .09);
      padding: 4px 9px;
      border-radius: 7px;
      border: 1px solid var(--line)
    }

    .diff-sub {
      padding: 10px 18px;
      border-bottom: 1px solid var(--line);
      font-size: 12.5px;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 8px
    }

    .diff-sub svg {
      width: 14px;
      height: 14px;
      color: var(--green)
    }

    .diff-body {
      padding: 14px;
      display: grid;
      gap: 9px
    }

    .diff-row {
      display: flex;
      align-items: flex-start;
      gap: 11px;
      padding: 11px 12px;
      border-radius: 10px;
      font-family: var(--font-mono);
      font-size: 12px;
      line-height: 1.5;
    }

    .diff-row input {
      appearance: none;
      -webkit-appearance: none;
      width: 17px;
      height: 17px;
      border-radius: 5px;
      border: 1.5px solid var(--muted-2);
      flex: none;
      margin-top: 1px;
      position: relative;
      cursor: pointer;
      transition: background .2s, border-color .2s
    }

    .diff-row input:checked {
      background: var(--grad);
      border-color: transparent
    }

    .diff-row input:checked::after {
      content: "";
      position: absolute;
      inset: 0;
      margin: auto;
      width: 9px;
      height: 5px;
      border-left: 2px solid #fff;
      border-bottom: 2px solid #fff;
      transform: rotate(-45deg) translateY(-1px)
    }

    .diff-row.add {
      background: rgba(52, 211, 153, .07);
      border: 1px solid rgba(52, 211, 153, .22)
    }

    .diff-row.add .sign {
      color: var(--green)
    }

    .diff-row.del {
      background: rgba(248, 113, 113, .055);
      border: 1px solid rgba(248, 113, 113, .2)
    }

    .diff-row.del .sign {
      color: var(--red)
    }

    .diff-row .sign {
      flex: none;
      font-weight: 700
    }

    .diff-row .tag {
      margin-left: auto;
      flex: none;
      font-size: 10px;
      letter-spacing: .05em;
      text-transform: uppercase;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 6px
    }

    .diff-row.add .tag {
      color: var(--green);
      background: rgba(52, 211, 153, .13)
    }

    .diff-row.del .tag {
      color: var(--red);
      background: rgba(248, 113, 113, .13)
    }

    .diff-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 18px;
      border-top: 1px solid var(--line);
      background: rgba(255, 255, 255, .015)
    }

    .diff-foot .hint {
      font-size: 12px;
      color: var(--muted-2);
      display: flex;
      align-items: center;
      gap: 7px
    }

    .diff-foot .hint svg {
      width: 14px;
      height: 14px;
      color: var(--amber)
    }

    .diff-actions {
      display: flex;
      gap: 9px
    }

    .mini-btn {
      padding: 8px 14px;
      border-radius: 10px;
      font-size: 12.5px;
      font-weight: 600;
      border: 1px solid var(--line-strong);
      color: var(--muted);
      transition: all .25s;
      white-space: nowrap
    }

    .mini-btn:hover {
      color: var(--text);
      border-color: var(--muted-2)
    }

    .mini-btn.ok {
      background: var(--grad);
      color: #fff;
      border-color: transparent;
      box-shadow: 0 8px 22px -8px rgba(16, 185, 129, .7)
    }

    .mini-btn.ok:hover {
      transform: translateY(-1px)
    }

    #nombre-cabecera {
      font-size: 19px;
      line-height: 1;
      white-space: nowrap;
      color: #fff;
    }

    /* ============ Spec Wizard ============ */
    .spec .split {
      grid-template-columns: .95fr 1.05fr
    }

    .spec-flow {
      display: grid;
      gap: 12px;
      margin-top: 30px
    }

    .spec-step {
      display: flex;
      gap: 15px;
      align-items: flex-start;
      padding: 17px 18px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .008));
      transition: transform .3s, border-color .3s;
    }

    .spec-step:hover {
      transform: translateX(4px);
      border-color: rgba(52, 211, 153, .45)
    }

    .spec-step .step-ic {
      flex: none;
      width: 38px;
      height: 38px;
      border-radius: 11px;
      display: grid;
      place-items: center;
      color: var(--mint);
      background: rgba(16, 185, 129, .13);
      border: 1px solid rgba(52, 211, 153, .3);
    }

    .spec-step .step-ic svg {
      width: 19px;
      height: 19px
    }

    .spec-step h3 {
      font-size: 15.5px;
      margin-bottom: 4px
    }

    .spec-step p {
      font-size: 13.5px;
      color: var(--muted)
    }

    .spec-step .muted-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin-top: 7px;
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--green);
      background: rgba(52, 211, 153, .1);
      border: 1px solid rgba(52, 211, 153, .22);
      padding: 3px 8px;
      border-radius: 6px;
    }

    .spec-step .muted-badge svg {
      width: 11px;
      height: 11px
    }

    /* Ventana del asistente del Spec Wizard */
    .spec-panel {
      border: 1px solid var(--line-strong);
      border-radius: 16px;
      overflow: hidden;
      background: linear-gradient(180deg, #0c101e, #090c16);
      box-shadow: 0 50px 120px -40px rgba(16, 185, 129, .4), inset 0 1px 0 rgba(255, 255, 255, .05);
      font-size: 13px;
    }

    .spec-panel .sp-head {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 15px 18px;
      border-bottom: 1px solid var(--line);
      background: rgba(255, 255, 255, .015);
    }

    .spec-panel .sp-head .sp-logo {
      width: 32px;
      height: 32px;
      border-radius: 9px;
      flex: none;
      display: grid;
      place-items: center;
      background: var(--grad);
      color: #fff;
    }

    .spec-panel .sp-head .sp-logo svg {
      width: 17px;
      height: 17px
    }

    .spec-panel .sp-head b {
      font-family: var(--font-head);
      font-size: 14px
    }

    .spec-panel .sp-head .sp-file {
      margin-left: auto;
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--muted);
      background: rgba(148, 163, 184, .09);
      border: 1px solid var(--line);
      padding: 4px 9px;
      border-radius: 7px
    }

    /* Burble de pregunta del wizard */
    .sp-q {
      display: flex;
      gap: 11px;
      padding: 16px 18px;
      border-bottom: 1px solid var(--line);
      background: rgba(52, 211, 153, .045);
    }

    .sp-q .q-ic {
      flex: none;
      width: 26px;
      height: 26px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      color: var(--green);
      background: rgba(52, 211, 153, .15);
    }

    .sp-q .q-ic svg {
      width: 14px;
      height: 14px
    }

    .sp-q .q-body {
      font-size: 12.5px;
      color: var(--muted);
      line-height: 1.5;
    }

    .sp-q .q-body b {
      display: block;
      font-size: 13.5px;
      color: var(--text);
      font-weight: 600;
      font-family: var(--font-head);
      margin-bottom: 3px
    }

    /* Campos de respuesta sugerida */
    .sp-options {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 10px
    }

    .sp-option {
      font-size: 11.5px;
      font-weight: 600;
      color: var(--text);
      background: rgba(255, 255, 255, .04);
      border: 1px solid var(--line-strong);
      padding: 5px 11px;
      border-radius: 999px;
    }

    .sp-option.sel {
      color: #fff;
      background: var(--grad);
      border-color: transparent
    }

    /* Documento de especificación */
    .sp-doc {
      padding: 16px 18px 18px;
      display: grid;
      gap: 11px
    }

    .sp-doc .doc-title {
      font-family: var(--font-head);
      font-weight: 700;
      font-size: 15px;
      letter-spacing: -.01em;
      display: flex;
      align-items: center;
      gap: 9px
    }

    .sp-doc .doc-title .st {
      width: 26px;
      height: 26px;
      border-radius: 8px;
      flex: none;
      display: grid;
      place-items: center;
      background: rgba(52, 211, 153, .14);
      color: var(--mint)
    }

    .sp-doc .doc-title .st svg {
      width: 14px;
      height: 14px
    }

    .sp-section {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px 14px;
      background: rgba(255, 255, 255, .02)
    }

    .sp-section .sec-name {
      font-size: 10.5px;
      letter-spacing: .13em;
      text-transform: uppercase;
      font-weight: 700;
      color: var(--muted-2);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 7px
    }

    .sp-section .sec-name svg {
      width: 12px;
      height: 12px;
      color: var(--green)
    }

    .sp-section ul {
      list-style: none;
      display: grid;
      gap: 6px
    }

    .sp-section li {
      display: flex;
      gap: 8px;
      align-items: flex-start;
      font-size: 12px;
      color: var(--muted);
      line-height: 1.45;
    }

    .sp-section li::before {
      content: "";
      flex: none;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      margin-top: 6px;
      background: var(--green)
    }

    .sp-section li b {
      color: var(--text);
      font-weight: 600
    }

    .sp-section li .tk {
      font-family: var(--font-mono);
      color: var(--mint);
      font-size: 11px
    }

    .sp-badge-ok {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--green);
      background: rgba(52, 211, 153, .12);
      border: 1px solid rgba(52, 211, 153, .32);
      padding: 2px 8px;
      border-radius: 999px;
    }

    .sp-badge-ok svg {
      width: 10px;
      height: 10px
    }

    .sp-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 18px;
      border-top: 1px solid var(--line);
      background: rgba(255, 255, 255, .015)
    }

    .sp-foot .hint {
      font-size: 11.5px;
      color: var(--muted-2);
      display: inline-flex;
      align-items: center;
      gap: 6px
    }

    .sp-foot .hint svg {
      width: 13px;
      height: 13px;
      color: var(--green)
    }

    .sp-actions {
      display: flex;
      gap: 9px
    }

    .spec-note {
      margin-top: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
      text-align: center;
      font-size: 13.5px;
      color: var(--muted);
      padding: 16px 22px;
      border-radius: 14px;
      border: 1px dashed rgba(52, 211, 153, .35);
      background: rgba(52, 211, 153, .04);
    }

    .spec-note svg {
      width: 16px;
      height: 16px;
      color: var(--green);
      flex: none
    }

    .spec-note b {
      color: var(--green)
    }

    /* ============ Simplicidad ============ */
    .settings-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px
    }

    .set-card {
      padding: 26px 22px;
      border-radius: var(--radius);
      text-align: center;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01));
      transition: transform .3s, border-color .3s;
    }

    .set-card:hover {
      transform: translateY(-4px);
      border-color: rgba(52, 211, 153, .5)
    }

    .set-card .s-ic {
      width: 52px;
      height: 52px;
      border-radius: 15px;
      margin: 0 auto 16px;
      display: grid;
      place-items: center;
      color: var(--mint);
      background: rgba(16, 185, 129, .13);
      border: 1px solid rgba(52, 211, 153, .32);
    }

    .set-card .s-ic svg {
      width: 24px;
      height: 24px
    }

    .set-card h3 {
      font-size: 16.5px;
      margin-bottom: 7px
    }

    .set-card p {
      font-size: 13.5px;
      color: var(--muted)
    }

    .llm-strip {
      margin-top: 22px;
      display: flex;
      align-items: center;
      gap: 18px;
      flex-wrap: wrap;
      padding: 24px 28px;
      border-radius: var(--radius);
      border: 1px solid rgba(52, 211, 153, .32);
      background: linear-gradient(100deg, rgba(52, 211, 153, .08), rgba(16, 185, 129, .08));
    }

    .llm-strip .s-ic {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      flex: none;
      display: grid;
      place-items: center;
      background: var(--grad);
      color: #fff;
      box-shadow: 0 10px 26px -8px rgba(16, 185, 129, .7);
    }

    .llm-strip .s-ic svg {
      width: 23px;
      height: 23px
    }

    .llm-strip b {
      font-family: var(--font-head);
      font-size: 17px;
      display: block
    }

    .llm-strip p {
      font-size: 14.5px;
      color: var(--muted)
    }

    /* ============ Privacidad ============ */
    .privacy-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px
    }

    .pri-card {
      position: relative;
      padding: 30px 26px;
      border-radius: var(--radius);
      overflow: hidden;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01));
      transition: transform .3s, border-color .3s;
    }

    .pri-card:hover {
      transform: translateY(-4px);
      border-color: rgba(52, 211, 153, .45)
    }

    .pri-card .p-ic {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      margin-bottom: 18px;
      color: var(--green);
      background: rgba(52, 211, 153, .1);
      border: 1px solid rgba(52, 211, 153, .28);
    }

    .pri-card .p-ic svg {
      width: 23px;
      height: 23px
    }

    .pri-card h3 {
      font-size: 17.5px;
      margin-bottom: 10px
    }

    .pri-card p {
      font-size: 14.5px;
      color: var(--muted)
    }

    .privacy-note {
      margin-top: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
      padding: 18px 26px;
      border-radius: 14px;
      text-align: center;
      border: 1px dashed rgba(52, 211, 153, .35);
      background: rgba(52, 211, 153, .04);
      font-size: 14px;
      color: var(--muted);
    }

    .privacy-note svg {
      width: 17px;
      height: 17px;
      color: var(--green);
      flex: none
    }

    .privacy-note b {
      color: var(--green)
    }

    /* ============ Precios ============ */
    .pricing-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px;
      max-width: 880px;
      margin: 0 auto;
      align-items: stretch
    }

    .plan {
      position: relative;
      display: flex;
      flex-direction: column;
      padding: 36px 32px;
      border-radius: 22px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .008));
      transition: transform .3s, border-color .3s, box-shadow .3s;
    }

    .plan:hover {
      transform: translateY(-5px)
    }

    .plan.featured {
      border-color: transparent;
      background:
        linear-gradient(180deg, #121731, #0d1120) padding-box,
        var(--grad) border-box;
      box-shadow: 0 40px 90px -35px rgba(16, 185, 129, .55);
    }

    .plan .pop-badge {
      position: absolute;
      top: -14px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--grad);
      color: #fff;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: 7px 16px;
      border-radius: 999px;
      white-space: nowrap;
      box-shadow: 0 10px 24px -8px rgba(16, 185, 129, .8);
    }

    .plan-name {
      font-family: var(--font-head);
      font-weight: 600;
      font-size: 18px;
      display: flex;
      align-items: center;
      gap: 10px
    }

    .plan-name svg {
      width: 20px;
      height: 20px;
      color: var(--mint)
    }

    .plan.featured .plan-name svg {
      color: var(--green)
    }

    .plan-desc {
      font-size: 14px;
      color: var(--muted);
      margin: 8px 0 22px
    }

    .plan-price {
      display: flex;
      align-items: baseline;
      gap: 6px;
      margin-bottom: 6px
    }

    .plan-price .amount {
      font-family: var(--font-head);
      font-weight: 700;
      font-size: clamp(2.4rem, 4vw, 3rem);
      letter-spacing: -.03em
    }

    .plan-price .per {
      color: var(--muted);
      font-size: 14px
    }

    .plan-iva {
      font-size: 12.5px;
      color: var(--muted-2);
      margin-bottom: 24px
    }

    .plan-feats {
      list-style: none;
      display: grid;
      gap: 12px;
      margin-bottom: 30px;
      flex: 1
    }

    .plan-feats li {
      display: flex;
      gap: 11px;
      align-items: flex-start;
      font-size: 14.5px;
      color: var(--muted)
    }

    .plan-feats li svg {
      width: 17px;
      height: 17px;
      color: var(--green);
      flex: none;
      margin-top: 3px
    }

    .plan-feats li b {
      color: var(--text);
      font-weight: 600
    }

    .plan .btn {
      width: 100%
    }

    .pricing-foot {
      text-align: center;
      margin-top: 26px;
      font-size: 13.5px;
      color: var(--muted-2)
    }

    .pricing-foot svg {
      width: 13px;
      height: 13px;
      vertical-align: -2px;
      color: var(--green)
    }

    /* ============ FAQ ============ */
    .faq {
      max-width: 780px;
      margin: 0 auto;
      display: grid;
      gap: 12px
    }

    .faq-item {
      border: 1px solid var(--line);
      border-radius: 15px;
      background: rgba(255, 255, 255, .02);
      overflow: hidden;
      transition: border-color .3s
    }

    .faq-item.open {
      border-color: rgba(52, 211, 153, .5)
    }

    .faq-q {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 19px 22px;
      text-align: left;
      font-family: var(--font-head);
      font-weight: 600;
      font-size: 16px;
    }

    .faq-q .chev {
      width: 20px;
      height: 20px;
      flex: none;
      color: var(--muted);
      transition: transform .35s ease
    }

    .faq-item.open .chev {
      transform: rotate(180deg);
      color: var(--mint)
    }

    .faq-a {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .4s ease
    }

    .faq-item.open .faq-a {
      grid-template-rows: 1fr
    }

    .faq-a-inner {
      overflow: hidden
    }

    .faq-a-inner p {
      padding: 0 22px 20px;
      font-size: 14.5px;
      color: var(--muted)
    }

    /* ============ CTA final ============ */
    .cta-final {
      position: relative;
      text-align: center;
      padding: 110px 0;
      overflow: hidden;
    }

    .cta-card {
      position: relative;
      max-width: 920px;
      margin: 0 auto;
      padding: 74px 40px;
      border-radius: 28px;
      border: 1px solid rgba(52, 211, 153, .35);
      overflow: hidden;
      background:
        radial-gradient(70% 120% at 50% 0%, rgba(16, 185, 129, .22), transparent 60%),
        linear-gradient(180deg, #0e1326, #0a0d17);
      box-shadow: 0 60px 140px -40px rgba(16, 185, 129, .55), inset 0 1px 0 rgba(255, 255, 255, .07);
    }

    .cta-card::before {
      content: "";
      position: absolute;
      inset: -2px;
      z-index: -1;
      border-radius: 30px;
      background: var(--grad);
      filter: blur(22px);
      opacity: .35;
    }

    .cta-card h2 {
      font-size: clamp(1.9rem, 4.2vw, 3rem);
      margin: 20px 0 18px
    }

    .cta-card p {
      color: var(--muted);
      font-size: 17px;
      max-width: 560px;
      margin: 0 auto 34px
    }

    .cta-actions {
      display: flex;
      gap: 14px;
      justify-content: center;
      flex-wrap: wrap
    }

    .cta-note {
      margin-top: 20px;
      font-size: 13px;
      color: var(--muted-2)
    }

    /* ============ Footer ============ */
    .footer {
      border-top: 1px solid var(--line);
      padding: 60px 0 34px;
      background: rgba(255, 255, 255, .012)
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr 1fr;
      gap: 40px;
      margin-bottom: 46px
    }

    .footer-brand p {
      font-size: 14px;
      color: var(--muted);
      margin-top: 14px;
      max-width: 300px
    }

    .footer h4 {
      font-family: var(--font-head);
      font-size: 13px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted-2);
      margin-bottom: 16px
    }

    .footer ul {
      list-style: none;
      display: grid;
      gap: 11px
    }

    .footer ul a {
      font-size: 14px;
      color: var(--muted);
      transition: color .2s
    }

    .footer ul a:hover {
      color: var(--text)
    }

    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      padding-top: 26px;
      border-top: 1px solid var(--line);
      font-size: 13px;
      color: var(--muted-2);
    }

    .footer-bottom .heart {
      color: var(--red);
      display: inline-block;
      animation: beat 1.6s infinite
    }

    @keyframes beat {

      0%,
      100% {
        transform: scale(1)
      }

      50% {
        transform: scale(1.22)
      }
    }

    /* ============ Reveal ============ */
    .reveal {
      opacity: 0;
      transform: translateY(26px);
      transition: opacity .7s ease, transform .7s ease
    }

    .reveal.visible {
      opacity: 1;
      transform: none
    }

    /* ============ Responsive ============ */
    @media(max-width:1024px) {

      .problem-grid,
      .settings-grid,
      .privacy-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .split {
        grid-template-columns: 1fr;
        gap: 48px
      }

      .learning .split,
      .spec .split {
        grid-template-columns: 1fr
      }

      .hero-visual {
        max-width: 760px
      }

      .mock-sidebar {
        display: none
      }

      .stats {
        grid-template-columns: repeat(2, 1fr)
      }

      .footer-grid {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:768px) {
      .section {
        padding: 80px 0
      }

      .nav-links,
      .nav-cta .btn,
      .lang-select {
        display: none
      }

      .burger {
        display: flex
      }

      .mobile-menu {
        display: block
      }

      .hero {
        padding-top: calc(var(--nav-h) + 48px)
      }

      .hero-note {
        gap: 10px;
        flex-direction: column
      }

      .float-chip {
        position: static;
        margin: 18px auto 0;
        width: max-content
      }

      .chip-context {
        margin-top: -14px
      }

      .pricing-grid {
        grid-template-columns: 1fr
      }

      .plan.featured {
        order: -1
      }

      .code {
        font-size: 11px
      }
    }

    @media(max-width:560px) {

      .problem-grid,
      .settings-grid,
      .privacy-grid,
      .stats {
        grid-template-columns: 1fr
      }

      .feature-list {
        grid-template-columns: 1fr
      }

      .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px
      }

      .hero-cta .btn {
        width: 100%
      }

      .cta-card {
        padding: 56px 22px
      }

      .mock-activity {
        width: 44px
      }
    }

    @media(prefers-reduced-motion:reduce) {

      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
      }

      html {
        scroll-behavior: auto
      }

      .reveal {
        opacity: 1;
        transform: none
      }
    }