body { opacity: 0; }
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
    html { scroll-behavior: smooth; overflow-x: hidden; }
    .hero-sub-1, .hero-sub-2 { display: inline-block; }
    .feat-carousel, .pricing-card { opacity: 0; transform: translateY(40px); }
    .feat-tile { opacity: 0; }

    body {
      font-family: var(--font-sans);
      background: var(--bg);
      color: var(--text);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      min-height: 100vh;
    }

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

    /* SECTIONS */
    .section-label {
      font-family: var(--font-mono);
      font-size: 0.65rem;
      font-weight: 400;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 1.25rem;
    }
    .section-title {
      text-align: center;
      font-family: var(--font-display);
      font-size: 1.875rem;
      font-weight: 500;
      font-feature-settings: "liga" 1;
      letter-spacing: -0.015em;
      line-height: 2.25rem;
      margin-bottom: 3.5rem;
    }
    .pricing .section-title { margin-bottom: 3rem; }
    .features .section-title { margin-bottom: 2rem; font-size: 3.5rem; font-weight: 500; line-height: 1.2; }

    /* FEATURES */
    .features {
      padding: 5rem 2rem 8rem;
      max-width: 1200px;
      margin: 0 auto;
    }

    /* CAROUSEL MODE TOGGLE */
    .carousel-mode-toggle {
      display: flex;
      justify-content: center;
      margin-bottom: 0.65rem;
    }
    .carousel-mode-tabs {
      position: relative;
      display: flex;
      background: var(--unselected);
      border: 1px solid var(--glass-border);
      border-radius: 0.5rem;
      padding: 3px;
    }
    .carousel-mode-tab {
      position: relative;
      z-index: 1;
      padding: 0.3rem 1rem;
      font-family: var(--font-sans);
      font-size: 14px;
      font-weight: 400;
      color: var(--text-muted);
      background: none;
      border: none;
      cursor: pointer;
      transition: color 0.3s ease;
    }
    .carousel-mode-tab:hover { color: var(--text); }
    .carousel-mode-tab.active { color: var(--text); }
    .carousel-mode-indicator {
      position: absolute;
      top: 3px;
      height: calc(100% - 6px);
      background: var(--selected);
      border-radius: 0.375rem;
      transition: left 0.35s cubic-bezier(0.22, 1.2, 0.36, 1), width 0.35s cubic-bezier(0.22, 1.2, 0.36, 1);
    }

    /* Screenshot mode */
    .feat-slide-screenshot {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none;
    }
    .feat-slide-screenshot img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top;
      user-select: none;
      -webkit-user-drag: none;
      pointer-events: none;
    }
    .feat-slide-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: inherit;
      transition: opacity 0.4s ease;
      text-align: center;
    }
    .feat-carousel.screenshots-mode .feat-slide-content { opacity: 0; pointer-events: none; }
    .feat-carousel.screenshots-mode .feat-slide-screenshot { opacity: 1; pointer-events: auto; }

    /* FEATURE CAROUSEL */
    .feat-carousel {
      max-width: 1000px;
      margin: 0 auto;
    }
    .feat-display {
      position: relative;
      aspect-ratio: 1300 / 720;
      background: var(--selected);
      border: 1px solid var(--glass-border);
      border-radius: 1.25rem;
      overflow: hidden;
      margin-bottom: 0.85rem;
      color: var(--text);
      box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 24px 64px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.1);
      container-type: inline-size;
    }
    html[data-theme="light"] .feat-display { box-shadow: 0 16px 40px rgba(0,0,0,0.12); }
    html[data-theme="light"] .feat-display.screenshots-dark { background: #1a1a18; transition: background 0.3s ease; }
    .feat-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 0.5s ease;
      will-change: opacity;
      pointer-events: none;
    }
    .feat-slide-content {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 4.8cqw;
      transition: opacity 0.4s ease;
    }
    .feat-slide.active {
      opacity: 1;
      pointer-events: auto;
    }
    .feat-slide-icon {
      width: 9.6cqw;
      height: 9.6cqw;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 3.6cqw;
      color: var(--accent);
      filter: drop-shadow(0 0 20px rgba(128,128,128,0.1));
    }
    .feat-tile img { filter: brightness(0) invert(0.45); transition: filter 0.3s ease; }
    .feat-tile.active img { filter: brightness(0) invert(1); }
    html[data-theme="light"] .feat-tile img { filter: brightness(0) opacity(0.4); }
    html[data-theme="light"] .feat-tile.active img { filter: brightness(0); }
    .feat-slide-icon svg,
    .feat-slide-icon img {
      width: 100%;
      height: 100%;
      -webkit-user-select: none;
      user-select: none;
      pointer-events: none;
    }
    .feat-slide-title {
      font-family: var(--font-display);
      font-size: 3.6cqw;
      line-height: 4.2cqw;
      font-weight: 500;
      margin-bottom: 1.8cqw;
    }
    .feat-slide-counter {
      font: inherit;
    }
    .feat-slide-desc {
      font-family: var(--font-sans);
      font-size: 2cqw;
      line-height: 2.8cqw;
      font-weight: inherit;
      color: var(--text-muted);
      max-width: 72cqw;
    }

    .feat-controls {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      justify-content: center;
      height: 90px;
      -webkit-user-select: none;
      user-select: none;
      -webkit-user-drag: none;
      user-drag: none;
    }
    .feat-arrow {
      background: var(--bg-alt);
      border: 1px solid var(--glass-border);
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--text-muted);
      transition: color 0.2s ease, border-color 0.2s ease;
      flex-shrink: 0;
    }
    .feat-arrow:hover {
      color: var(--text);
      border-color: var(--accent-muted);
    }
    .feat-arrow svg {
      width: 18px;
      height: 18px;
    }

    .feat-tiles-viewport {
      overflow: visible;
      flex: 1;
      max-width: 700px;
    }
    .feat-tiles-track {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: transform 0.4s ease;
    }
    .feat-tile {
      flex-shrink: 0;
      width: 140px;
      height: 72px;
      border-radius: 0.5rem;
      background: var(--unselected);
      border: 1px solid var(--glass-border);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.35rem;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 8px 24px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08);
      transition: width 0.3s ease, height 0.3s ease, transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }
    html[data-theme="light"] .feat-tile { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
    .feat-tile.active {
      width: 170px;
      height: 84px;
      transform: scale(1.05);
      background: var(--selected);
      border-color: var(--accent-muted);
    }
    .feat-tile-icon {
      color: var(--text-muted);
      transition: color 0.3s ease;
    }
    .feat-tile.active .feat-tile-icon {
      color: var(--text);
    }
    .feat-tile-icon svg,
    .feat-tile-icon img {
      width: 20px;
      height: 20px;
      -webkit-user-select: none;
      user-select: none;
      pointer-events: none;
    }
    .feat-tile-label {
      font-family: var(--font-mono);
      font-size: 0.65rem;
      font-weight: 400;
      color: var(--text-muted);
      letter-spacing: 0.02em;
      text-transform: uppercase;
      transition: color 0.3s ease;
    }
    .feat-tile:hover .feat-tile-label { color: var(--text); }
    .feat-tile:hover .feat-tile-icon { color: var(--text); }
    .feat-tile:hover img { filter: brightness(0) invert(1); }
    html[data-theme="light"] .feat-tile:hover img { filter: brightness(0); }
    .feat-tile.active .feat-tile-label {
      color: var(--text);
    }

    .tile-timer {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 3px;
      width: 0%;
      background: var(--accent);
      border-radius: 0 0 0.5rem 0.5rem;
    }


    /* PRICING */
    .pricing {
      padding: 4rem 2rem 6rem;
      max-width: 1100px;
      margin: 0 auto;
    }
    .pricing-tabs {
      position: relative;
      display: flex;
      background: var(--unselected);
      border: 1px solid var(--glass-border);
      border-radius: 0.5rem;
      padding: 3px;
      margin: 6px auto 0.75rem;
      width: fit-content;
    }
    .pricing-tab {
      position: relative;
      z-index: 1;
      padding: 0.3rem 1rem;
      font-family: var(--font-sans);
      font-size: 14px;
      font-weight: 400;
      color: var(--text-muted);
      background: none;
      border: none;
      cursor: pointer;
      transition: color 0.3s ease;
    }
    .pricing-tab:hover { color: var(--text); }
    .pricing-tab.active { color: var(--text); }
    .tab-indicator {
      position: absolute;
      top: 3px;
      height: calc(100% - 6px);
      background: var(--selected);
      border-radius: 0.375rem;
      transition: left 0.4s cubic-bezier(0.22, 1.2, 0.36, 1), width 0.4s cubic-bezier(0.22, 1.2, 0.36, 1);
    }
    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
    .pricing-card {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--glass-border);
      border-radius: 0.75rem;
      padding: 1.75rem;
      display: flex;
      flex-direction: column;
      background: var(--selected);
      box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 24px 64px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.12);
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease, border-color 0.3s ease;
    }
    html[data-theme="light"] .pricing-card { box-shadow: 0 16px 40px rgba(0,0,0,0.12); }
    .pricing-card:hover {
      transform: translateY(-4px);
    }
    .pricing-card.popular {
      border-color: hsl(210deg 65.5% 67.1% / 0.5);
      box-shadow: 0 0 8px hsl(210deg 65.5% 67.1% / 0.25), 0 0 20px hsl(210deg 65.5% 67.1% / 0.18), 0 0 36px hsl(210deg 65.5% 67.1% / 0.12), 0 0 60px hsl(210deg 65.5% 67.1% / 0.07);
    }
    html[data-theme="light"] .pricing-card.popular { border-color: hsl(210deg 65.5% 50% / 0.6); box-shadow: 0 0 10px hsl(210deg 65.5% 50% / 0.35), 0 0 24px hsl(210deg 65.5% 50% / 0.25), 0 0 48px hsl(210deg 65.5% 50% / 0.15), 0 16px 40px rgba(0,0,0,0.12); }
    .pricing-card.best-value {
    }

    .pc-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 1.5rem;
      border-bottom: 1px solid var(--glass-border);
    }
    .pc-tier { font-family: var(--font-display); font-size: 19px; font-weight: 500; margin-bottom: 1.25rem; }
    .pc-price { font-size: 2.5rem; font-weight: 400; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
    .pc-bestfor {
      font-size: 16px;
      text-align: center;
      color: var(--text-muted);
    }

    .pc-benefits {
      display: flex;
      flex-direction: column;
      gap: 0.9rem;
      padding: 1.75rem 0;
      flex: 1;
    }
    .pc-benefit { display: flex; align-items: center; gap: 0.75rem; }
    .pc-benefit-icon {
      width: 18px; height: 18px;
      border-radius: 50%;
      display: grid; place-content: center;
      flex-shrink: 0;
    }
    .pc-benefit-icon svg { width: 11px; height: 11px; }
    .pc-benefit-icon.checked { background: var(--text); color: var(--bg); }
    .pc-benefit-icon.unchecked { background: var(--glass-border); color: var(--text-muted); }
    .pc-benefit-text { font-size: 1rem; line-height: 1.5rem; color: var(--text-muted); }
    .pc-benefit.is-checked .pc-benefit-text { color: var(--text); opacity: 0.75; }

    .pc-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 2.75rem;
      padding: 0 1.25rem;
      border-radius: 0.6rem;
      font-family: var(--font-sans);
      font-weight: 460;
      font-size: 1rem;
      line-height: 1.5rem;
      white-space: nowrap;
      cursor: pointer;
      border: none;
      background: var(--text);
      color: var(--bg);
      transition: opacity 0.3s ease, transform 0.15s cubic-bezier(0.165, 0.85, 0.45, 1);
    }
    .pc-btn:hover { opacity: 0.67; box-shadow: 0 6px 20px rgba(0,0,0,0.15); }

    /* TRIAL */
    .trial { text-align: center; margin-top: 2em; margin-bottom: 2.5rem; }
    .trial-text {
      font-size: 0.85rem;
      color: var(--text-muted);
      margin-bottom: 1.25rem;
      letter-spacing: 0.02em;
    }
    .trial-text strong { color: var(--text); font-weight: 400; }

    .trial-btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.75rem 2rem;
      background: var(--text);
      border: 1px solid var(--text);
      border-radius: 0.5rem;
      color: var(--bg);
      font-family: var(--font-mono);
      font-size: 0.8rem;
      font-weight: 400;
      line-height: 1;
      letter-spacing: 0.08em;
      cursor: pointer;
      transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }
    @media (hover: hover) { .trial-btn:hover { background: var(--unselected); border-color: var(--glass-border); color: var(--text); } }
    .trial-btn:active { background: var(--unselected); border-color: var(--glass-border); color: var(--text); }
    .trial-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

    .trial-btn.is-key .trial-btn-icon { color: var(--text-muted); transition: color 0.2s ease; }
    .trial-btn.is-key.copied .trial-btn-icon { color: var(--text); }
    .trial-btn.is-key {
      font-family: var(--font-mono);
      letter-spacing: 0.08em;
      cursor: pointer;
      -webkit-user-select: none;
      user-select: none;
      background: var(--unselected);
      border-color: var(--glass-border);
      color: var(--text);
    }
    @media (hover: hover) { .trial-btn.is-key:hover { border-color: var(--text); } }
    .trial-btn.is-key:active { border-color: var(--text); }
    .trial-icon-check .check-mark {
      stroke-dasharray: 24;
      stroke-dashoffset: 24;
      animation: drawCheck 0.35s ease-out 0.05s forwards;
    }
    @keyframes drawCheck {
      to { stroke-dashoffset: 0; }
    }
    .trial-btn .trial-spinner {
      width: 16px; height: 16px;
      border: 2px solid var(--glass-border);
      border-top-color: var(--text);
      border-radius: 50%;
      animation: spin 0.6s linear infinite;
      flex-shrink: 0;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    .trial-btn.is-loading {
      background: var(--unselected);
      border-color: transparent;
      color: var(--text);
      overflow: visible;
    }
    .trial-btn.is-loading .border-svg {
      position: absolute;
      inset: -1px;
      width: calc(100% + 2px);
      height: calc(100% + 2px);
      pointer-events: none;
      overflow: visible;
    }

    /* FOOTER */
    .footer { padding: 2.5rem 2rem; border-top: 1px solid var(--border); }
    .footer-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .footer-logo { font-weight: 400; font-size: 1rem; display: flex; align-items: center; gap: 0.3rem; }
    .footer-copy { font-size: 0.72rem; color: var(--text-muted); letter-spacing: 0.04em; }
    /* FAQ */
    .faq { max-width: 768px; margin: 0 auto; padding: 4rem 2rem; }
    .faq .section-title { margin-bottom: 2.5rem; }
    .faq-list { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
    .faq-item { overflow: hidden; }
    .faq-trigger {
      display: flex;
      width: 100%;
      align-items: center;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      color: inherit;
      font: inherit;
      text-align: left;
    }
    .faq-trigger-text {
      flex: 1;
      font-family: var(--font-display);
      font-size: 1.5rem;
      line-height: 2rem;
      font-weight: 500;
      color: var(--text-secondary);
    }
    .faq-trigger-icon {
      margin-left: 0.5rem;
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.15s ease-out;
    }
    .faq-trigger-icon svg { transition: transform 0.15s ease-out; }
    .faq-item.is-open .faq-trigger-icon { transform: rotate(45deg); }
    .faq-item.is-open .faq-trigger-icon svg { transform: rotate(45deg); }
    .faq-content {
      overflow: hidden;
      height: 0;
      transition: height 0.15s ease-out;
      font-family: var(--font-sans);
      font-size: 1rem;
      line-height: 1.625;
      text-wrap: pretty;
      color: var(--text-secondary);
    }
    .faq-content-inner {
      padding: 0.75rem 0 0.5rem;
      max-width: 672px;
    }

    .disclaimer {
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem 2rem 1.5rem;
      font-size: 0.82rem;
      color: var(--text-muted);
      line-height: 1.6;
      text-align: center;
      opacity: 0.8;
    }

    /* AUTH OVERLAY */
    .auth-overlay {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .auth-overlay.open {
      opacity: 1;
      pointer-events: auto;
    }
    .auth-panel {
      position: relative;
      width: 100%;
      max-width: 400px;
      margin: 1rem;
      background: var(--bg);
      border: 1px solid var(--glass-border);
      border-radius: 1rem;
      padding: 2.5rem 2rem;
      box-shadow: 0 24px 64px rgba(0,0,0,0.5);
      transform: translateY(24px);
      transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
    }
    .auth-overlay.open .auth-panel {
      transform: translateY(0);
    }
    .auth-close {
      position: absolute;
      top: 1rem;
      right: 1rem;
      background: none;
      border: none;
      color: var(--text-muted);
      font-size: 1.25rem;
      cursor: pointer;
      padding: 0.25rem;
      line-height: 1;
      transition: color 0.2s ease;
    }
    .auth-close:hover { color: var(--text); }
    .auth-title {
      font-size: 1.5rem;
      font-weight: 400;
      text-align: center;
      margin-bottom: 1.75rem;
      color: var(--text);
    }
    .auth-form {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    .auth-input {
      width: 100%;
      padding: 0.65rem 0.875rem;
      border: 1px solid var(--glass-border);
      border-radius: 0.5rem;
      background: var(--input-bg);
      color: var(--text);
      font-family: var(--font-sans);
      font-size: 0.875rem;
      outline: none;
      transition: border-color 0.2s ease;
    }
    .auth-input::placeholder { color: var(--text-muted); }
    .auth-input:focus { border-color: var(--accent-muted); }
    .auth-error {
      font-size: 0.8rem;
      color: #ef4444;
      min-height: 0;
      transition: min-height 0.2s ease;
    }
    .auth-error:empty { display: none; }
    .auth-btn {
      width: 100%;
      padding: 0.65rem;
      border: none;
      border-radius: 0.5rem;
      background: var(--text);
      color: var(--bg);
      font-family: var(--font-sans);
      font-size: 0.875rem;
      font-weight: 400;
      cursor: pointer;
      transition: opacity 0.2s ease;
      margin-top: 0.25rem;
    }
    .auth-btn:hover { opacity: 0.9; }
    .auth-btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .auth-switch {
      text-align: center;
      font-size: 0.825rem;
      color: var(--text-muted);
      margin-top: 1.5rem;
    }
    .auth-switch a {
      color: var(--text);
      font-weight: 400;
      margin-left: 0.25rem;
      transition: opacity 0.2s ease;
    }
    .auth-switch a:hover { opacity: 0.7; }

    /* NOISE */
    .noise-overlay {
      position: fixed; inset: 0;
      pointer-events: none;
      z-index: 9999;
      opacity: 0.028;
      mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-repeat: repeat;
      background-size: 200px;
    }

    /* TRANSITIONS */
    body, .pricing-card, .footer, .feat-display, .feat-tile, .carousel-mode-toggle, .pricing-tab-toggle {
      transition: background 0.5s ease, color 0.5s ease, border-color 0.5s ease;
    }

    /* RESPONSIVE HELPERS */
    .mobile-only { display: none; }
    @media (max-width: 768px) { .desktop-only { display: none; } .mobile-only { display: inline; } }

    /* RESPONSIVE */
    @media (max-width: 768px) {
      .pricing-grid { grid-template-columns: 1fr; }
      .features { padding: 4rem 1.5rem; }
      .pricing { padding: 3rem 1.5rem 5rem; }
      .section-title { margin-bottom: 3rem; }
      .hero-title { letter-spacing: 0.06em; }
      .feat-slide-icon { width: 60px; height: 60px; }
      .feat-slide-title { font-size: 5.4cqw; line-height: 6.3cqw; }
      .feat-slide-desc { font-size: 2.8cqw; line-height: 4.2cqw; max-width: 96cqw; }
      .feat-controls {
        flex-wrap: wrap;
        height: auto;
        gap: 0.75rem;
      }
      .feat-tiles-viewport {
        order: -1;
        flex-basis: 100%;
        padding: 0.5rem 0;
      }
      .feat-tile { width: 110px; height: 60px; }
      .feat-tile.active { width: 130px; height: 70px; }
    }

    @media (max-width: 520px) {
      .feat-arrow { width: 32px; height: 32px; }
      .feat-tile { width: 72px; height: 48px; }
      .feat-tile.active { width: 88px; height: 56px; }
      .feat-tile-label { font-size: 0.55rem; }
    }