/* ============================================================
   GetUpskilled - AI Guide PDP Styles
   Theme: High-tech Dark, Cyan/Teal accents, High-contrast Orange CTAs
   ============================================================ */

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

html {
   scroll-behavior: smooth;
   -webkit-text-size-adjust: 100%;
}

:root {
   /* AI Brand Colors */
   --ai: #00C6A2;
   --ai-d: #007A65;
   --ai-l: #E4FBF6;
   --ai-glow: rgba(0, 198, 162, 0.18);

   /* Accents */
   --purple: #7C3AED;
   --purple-l: #F5F0FF;
   --gold: #F4A300;
   --gold-l: #FFF8E6;

   /* Backgrounds */
   --dark: #0B0F19;
   --dark2: #131A27;
   --card: #1B2334;

   /* Text & Structure */
   --txt: #111827;
   --mid: #4B5563;
   --border: #E5E7EB;
   --bg: #F9FAFB;
   --radius: 12px;
   --max-w: 540px;

   /* CTA Buttons - High contrast orange/amber for dark background visibility */
   --cta-bg: linear-gradient(135deg, #F59E0B, #E85D04);
   --cta-shadow: 0 8px 28px rgba(232, 93, 4, 0.5);
   --cta-color: #fff;
}

body {
   font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
   background: var(--bg);
   color: var(--txt);
   line-height: 1.6;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
.logo,
.btn-hero,
.price-main {
   font-family: 'Outfit', sans-serif;
}

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

button {
   cursor: pointer;
   border: none;
   outline: none;
   background: transparent;
}

/* SPA */
.page {
   display: none !important;
}

.page.active {
   display: block !important;
   animation: fade 0.22s ease-out;
}

@keyframes fade {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

/* ============================================================
   URGENCY BAR & NAVBAR
============================================================ */
#urgencyBar {
   background: linear-gradient(90deg, #060B14, #0B0F19);
   color: #fff;
   text-align: center;
   padding: 10px 16px;
   font-size: 13px;
   font-weight: 600;
   position: sticky;
   top: 0;
   z-index: 1000;
   border-bottom: 1px solid rgba(0, 198, 162, 0.2);
}

.ub-cyan {
   color: var(--ai);
   font-weight: 700;
}

#countdown {
   display: inline-block;
   background: rgba(0, 198, 162, 0.15);
   border: 1px solid rgba(0, 198, 162, 0.35);
   border-radius: 4px;
   padding: 2px 7px;
   font-variant-numeric: tabular-nums;
   letter-spacing: 0.05em;
   color: var(--ai);
}

.navbar {
   background: var(--dark);
   border-bottom: 1px solid rgba(0, 198, 162, 0.15);
   padding: 14px 20px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: sticky;
   top: 40px;
   z-index: 999;
}

.logo {
   font-weight: 800;
   font-size: 20px;
   color: #fff;
   letter-spacing: -0.02em;
}

.logo span {
   color: var(--ai);
}

.secure-tag {
   font-size: 12px;
   color: rgba(255, 255, 255, 0.55);
   display: flex;
   align-items: center;
   gap: 5px;
   font-weight: 600;
}

/* ============================================================
   CTA BUTTON
============================================================ */
.btn-hero {
   background: var(--cta-bg);
   color: var(--cta-color);
   font-weight: 800;
   font-size: 17px;
   padding: 18px 24px;
   border-radius: 100px;
   width: 100%;
   max-width: 360px;
   display: block;
   margin: 0 auto 12px;
   box-shadow: var(--cta-shadow);
   transition: transform 0.15s;
   position: relative;
   z-index: 1;
   border: none;
}

.btn-hero:active {
   transform: scale(0.97);
}

@keyframes pulse-cta {

   0%,
   100% {
      box-shadow: 0 6px 28px rgba(232, 93, 4, 0.5);
   }

   50% {
      box-shadow: 0 6px 40px rgba(232, 93, 4, 0.75), 0 0 0 6px rgba(232, 93, 4, 0.15);
   }
}

.pulse {
   animation: pulse-cta 2s ease-in-out infinite;
}

/* ============================================================
   HERO
============================================================ */
.hero {
   background: var(--dark);
   padding: 44px 20px 52px;
   text-align: center;
   position: relative;
   overflow: hidden;
}

.hero::before {
   content: '';
   position: absolute;
   top: -70px;
   right: -60px;
   width: 280px;
   height: 280px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(0, 198, 162, 0.12) 0%, transparent 70%);
   pointer-events: none;
}

.hero::after {
   content: '';
   position: absolute;
   bottom: -60px;
   left: -50px;
   width: 240px;
   height: 240px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(124, 58, 237, 0.1) 0%, transparent 70%);
   pointer-events: none;
}

.hero-pill {
   display: inline-block;
   background: rgba(0, 198, 162, 0.12);
   border: 1px solid rgba(0, 198, 162, 0.35);
   color: var(--ai);
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   padding: 6px 16px;
   border-radius: 100px;
   margin-bottom: 18px;
   position: relative;
   z-index: 1;
}

.hero h1 {
   font-size: clamp(26px, 7.5vw, 38px);
   font-weight: 900;
   color: #fff;
   line-height: 1.15;
   letter-spacing: -0.02em;
   margin-bottom: 12px;
   position: relative;
   z-index: 1;
}

.hero h1 em {
   font-style: normal;
   color: var(--gold);
}

.hero-sub {
   color: rgba(255, 255, 255, 0.82);
   font-size: 15px;
   line-height: 1.7;
   margin-bottom: 12px;
   max-width: 420px;
   margin-inline: auto;
   position: relative;
   z-index: 1;
}

.hero-note {
   color: rgba(255, 255, 255, 0.5);
   font-size: 13px;
   position: relative;
   z-index: 1;
}

.hero-note strong {
   color: var(--gold);
}

/* AI TOOLS ROW */
.ai-tools-row {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   flex-wrap: wrap;
   margin-bottom: 28px;
   position: relative;
   z-index: 1;
}

.ai-tool-chip {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   background: rgba(255, 255, 255, 0.07);
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 100px;
   padding: 5px 10px;
   font-size: 12px;
   font-weight: 700;
   color: rgba(255, 255, 255, 0.75);
}

.ai-tool-chip svg {
   flex-shrink: 0;
}

/* ============================================================
   TRUST STRIP & TICKER
============================================================ */
.trust-strip {
   background: var(--dark2);
   border-bottom: 1px solid rgba(0, 198, 162, 0.12);
   padding: 14px 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   font-size: 14px;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.7);
   text-align: center;
}

.stars {
   color: var(--gold);
   letter-spacing: -2px;
   font-size: 16px;
}

.proof-ticker {
   background: rgba(0, 198, 162, 0.07);
   border-bottom: 1px solid rgba(0, 198, 162, 0.15);
   padding: 10px 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   font-size: 13px;
   font-weight: 600;
   color: var(--ai);
}

.ticker-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--ai);
   flex-shrink: 0;
   animation: blink 1.5s infinite;
}

.ticker-msg {
   transition: opacity 0.4s ease;
}

@keyframes blink {

   0%,
   100% {
      opacity: 1;
   }

   50% {
      opacity: 0.3;
   }
}

/* ============================================================
   LAYOUT WRAPPERS & SECTIONS
============================================================ */
.section {
   padding: 48px 20px;
   max-width: var(--max-w);
   margin: 0 auto;
}

.full-dark {
   background: var(--dark);
}

.full-dark2 {
   background: var(--dark2);
}

.full-white {
   background: #fff;
}

.full-light {
   background: var(--bg);
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
}

.text-center {
   text-align: center;
}

.section-header {
   text-align: center;
   margin-bottom: 28px;
}

.sec-title {
   font-size: clamp(22px, 6vw, 30px);
   font-weight: 800;
   line-height: 1.2;
   letter-spacing: -0.02em;
   margin-bottom: 12px;
}

.light {
   color: #fff;
}

.dark {
   color: var(--txt);
}

.sec-sub {
   font-size: 15px;
   line-height: 1.6;
   max-width: 400px;
   margin: 0 auto;
}

.sub-light {
   color: rgba(255, 255, 255, 0.72);
}

.sub-dark {
   color: var(--mid);
}

/* TAGS */
.tag-ai {
   display: inline-block;
   background: rgba(0, 198, 162, 0.12);
   border: 1px solid rgba(0, 198, 162, 0.3);
   color: var(--ai);
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   padding: 6px 14px;
   border-radius: 100px;
   margin-bottom: 16px;
}

.tag-red {
   display: inline-block;
   background: #FEE2E2;
   color: #DC2626;
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   padding: 6px 14px;
   border-radius: 100px;
   margin-bottom: 16px;
}

.tag-gold {
   display: inline-block;
   background: rgba(244, 163, 0, 0.15);
   border: 1px solid rgba(244, 163, 0, 0.35);
   color: var(--gold);
   font-size: 12px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   padding: 6px 14px;
   border-radius: 100px;
   margin-bottom: 16px;
}

.tag-purple {
   display: inline-block;
   background: rgba(124, 58, 237, 0.12);
   border: 1px solid rgba(124, 58, 237, 0.3);
   color: #A78BFA;
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   padding: 6px 14px;
   border-radius: 100px;
   margin-bottom: 16px;
}

/* ============================================================
   HOOK & STATS SECTION
============================================================ */
.hook-body {
   font-size: 15px;
   line-height: 1.8;
   color: rgba(255, 255, 255, 0.8);
}

.hook-body strong {
   color: #fff;
   font-weight: 700;
}

.hook-callout {
   background: rgba(0, 198, 162, 0.08);
   border-left: 4px solid var(--ai);
   border-radius: 0 10px 10px 0;
   padding: 16px 18px;
   margin: 20px 0;
}

.hook-callout p {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.85);
   line-height: 1.7;
   margin: 0;
}

.stats-row {
   display: flex;
   gap: 10px;
}

.stat-item {
   flex: 1;
   background: rgba(0, 198, 162, 0.08);
   border: 1px solid rgba(0, 198, 162, 0.2);
   border-radius: 10px;
   padding: 14px 8px;
   text-align: center;
}

.stat-num {
   font-family: 'Outfit', sans-serif;
   font-size: 22px;
   font-weight: 900;
   color: var(--ai);
   line-height: 1;
   margin-bottom: 4px;
}

.stat-label {
   font-size: 11px;
   color: rgba(255, 255, 255, 0.6);
   font-weight: 600;
   line-height: 1.4;
}

/* ============================================================
   POST SIMULATIONS (FB, TWITTER, CHATGPT, VOICE)
============================================================ */
.fb-post {
   background: #fff;
   border: 1px solid #dddfe2;
   border-radius: 10px;
   overflow: hidden;
   margin: 10px 0;
}

.fb-post-header {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 14px 14px 8px;
}

.fb-avatar {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 15px;
   font-weight: 800;
   color: #fff;
   flex-shrink: 0;
   font-family: 'Outfit', sans-serif;
}

.fb-avatar.bad {
   background: linear-gradient(135deg, #1877F2, #42A5F5);
}

.fb-avatar.good {
   background: linear-gradient(135deg, var(--ai), var(--ai-d));
}

.fb-name {
   font-size: 14px;
   font-weight: 700;
   color: #050505;
   font-family: 'Outfit', sans-serif;
}

.fb-time {
   font-size: 11px;
   color: #65676B;
}

.fb-body {
   padding: 4px 14px 12px;
   font-size: 14px;
   color: #050505;
   line-height: 1.6;
}

.fb-reactions {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 10px 14px;
   border-top: 1px solid #E4E6EB;
}

.fb-react {
   display: flex;
   align-items: center;
   gap: 4px;
   font-size: 13px;
   font-weight: 600;
}

.fb-react.bad {
   color: #BCC0C4;
}

.fb-react.good {
   color: #1877F2;
}

.tweet-post {
   background: #000;
   border: 1px solid #2F3336;
   border-radius: 14px;
   padding: 16px;
   margin: 10px 0;
}

.tweet-header {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 10px;
}

.tweet-avatar {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 15px;
   font-weight: 800;
   color: #fff;
   flex-shrink: 0;
   font-family: 'Outfit', sans-serif;
}

.tweet-avatar.bad {
   background: linear-gradient(135deg, #1D9BF0, #0070C0);
}

.tweet-avatar.good {
   background: linear-gradient(135deg, var(--ai), var(--ai-d));
}

.tweet-name {
   font-size: 14px;
   font-weight: 700;
   color: #fff;
   font-family: 'Outfit', sans-serif;
}

.tweet-handle {
   font-size: 13px;
   color: #71767B;
}

.tweet-x {
   margin-left: auto;
   color: #71767B;
   font-size: 18px;
   line-height: 1;
}

.tweet-body {
   font-size: 14px;
   color: #fff;
   line-height: 1.6;
   margin-bottom: 14px;
}

.tweet-reacts {
   display: flex;
   align-items: center;
   gap: 16px;
}

.tweet-r {
   display: flex;
   align-items: center;
   gap: 5px;
   font-size: 13px;
   font-weight: 600;
}

.tweet-r.bad {
   color: #536471;
}

.tweet-r.good {
   color: #1D9BF0;
}

.voice-note {
   background: var(--dark2);
   border: 1px solid rgba(0, 198, 162, 0.2);
   border-radius: 12px;
   padding: 16px;
   display: flex;
   align-items: center;
   gap: 12px;
   margin: 10px 0;
}

.voice-icon {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   background: var(--ai);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.voice-waves {
   flex: 1;
   display: flex;
   align-items: center;
   gap: 3px;
   height: 28px;
}

.voice-wave-bar {
   width: 3px;
   border-radius: 2px;
   background: rgba(0, 198, 162, 0.45);
}

.voice-quote {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.65);
   padding: 14px;
   background: rgba(255, 255, 255, 0.04);
   border-radius: 10px;
   margin-bottom: 14px;
   font-style: italic;
   line-height: 1.7;
}

.chatgpt-sim {
   background: #212121;
   border: 1px solid #3D3D3D;
   border-radius: 14px;
   overflow: hidden;
   margin: 10px 0;
}

.chatgpt-header {
   background: #2D2D2D;
   padding: 10px 14px;
   display: flex;
   align-items: center;
   gap: 8px;
}

.chatgpt-logo {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: #10A37F;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   color: #fff;
   font-weight: 800;
   font-family: 'Outfit', sans-serif;
}

.chatgpt-label {
   font-size: 13px;
   font-weight: 700;
   color: #ECECEC;
}

.chatgpt-body {
   padding: 14px;
   font-size: 13px;
   color: #ECECEC;
   line-height: 1.8;
}

.cg-item {
   margin-bottom: 8px;
   padding-left: 4px;
}

.cg-num {
   color: var(--ai);
   font-weight: 800;
}

/* ARROWS & BADGES */
.arrow-wrap {
   text-align: center;
   padding: 12px 0 4px;
}

.arrow-label {
   font-size: 11px;
   color: rgba(255, 255, 255, 0.38);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   margin-top: 6px;
}

.before-badge {
   display: inline-block;
   background: rgba(239, 68, 68, 0.15);
   border: 1px solid rgba(239, 68, 68, 0.4);
   color: #EF4444;
   font-size: 11px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   padding: 4px 12px;
   border-radius: 100px;
   margin-bottom: 8px;
}

.after-badge {
   display: inline-block;
   background: rgba(0, 198, 162, 0.15);
   border: 1px solid rgba(0, 198, 162, 0.4);
   color: var(--ai);
   font-size: 11px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   padding: 4px 12px;
   margin-bottom: 8px;
   border-radius: 100px;
}

/* ============================================================
   PHOTO SHOWCASE (AI Images)
============================================================ */
.photo-original {
   border-radius: 14px;
   overflow: hidden;
   border: 2px solid rgba(239, 68, 68, 0.3);
}

.ai-photo {
   border-radius: 14px;
   overflow: hidden;
   border: 2px solid rgba(0, 198, 162, 0.4);
   position: relative;
}

.ai-watermark {
   position: absolute;
   top: 10px;
   right: 10px;
   background: rgba(0, 198, 162, 0.92);
   color: #000;
   font-size: 10px;
   font-weight: 800;
   padding: 4px 10px;
   border-radius: 100px;
   font-family: 'Outfit', sans-serif;
   text-transform: uppercase;
}

.insta-frame {
   background: #000;
   border-radius: 18px;
   overflow: hidden;
   max-width: 100%;
   margin: 0 auto;
   position: relative;
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.insta-bar {
   height: 3px;
   background: rgba(255, 255, 255, 0.3);
   margin: 10px 12px 0;
   border-radius: 2px;
}

.insta-head {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 8px 12px;
}

.insta-name {
   font-size: 12px;
   font-weight: 700;
   color: #fff;
}

.insta-time {
   font-size: 10px;
   color: rgba(255, 255, 255, 0.65);
}

.insta-frame .ai-watermark {
   top: 8px;
   right: 10px;
}

/* CALLOUTS */
.callout-ai {
   background: rgba(0, 198, 162, 0.08);
   border: 1.5px solid rgba(0, 198, 162, 0.25);
   border-radius: 12px;
   padding: 16px;
   margin: 14px 0;
}

.callout-ai h4 {
   font-size: 14px;
   font-weight: 800;
   color: var(--ai);
   margin-bottom: 6px;
   line-height: 1.3;
}

.callout-ai p {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.72);
   line-height: 1.65;
   margin: 0;
}

.callout-purple {
   background: rgba(124, 58, 237, 0.08);
   border: 1.5px solid rgba(124, 58, 237, 0.28);
   border-radius: 12px;
   padding: 16px;
   margin: 14px 0;
}

.callout-purple h4 {
   font-size: 14px;
   font-weight: 800;
   color: #A78BFA;
   margin-bottom: 6px;
   line-height: 1.3;
}

.callout-purple p {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.72);
   line-height: 1.65;
   margin: 0;
}

.callout-gold {
   background: rgba(244, 163, 0, 0.08);
   border: 1.5px solid rgba(244, 163, 0, 0.28);
   border-radius: 12px;
   padding: 16px;
   margin: 14px 0;
}

.callout-gold h4 {
   font-size: 14px;
   font-weight: 800;
   color: var(--gold);
   margin-bottom: 6px;
   line-height: 1.3;
}

.callout-gold p {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.72);
   line-height: 1.65;
   margin: 0;
}

.shoot-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 7px;
   margin-top: 10px;
}

.shoot-tag {
   background: rgba(0, 198, 162, 0.1);
   border: 1px solid rgba(0, 198, 162, 0.2);
   color: var(--ai);
   font-size: 11px;
   font-weight: 700;
   padding: 4px 11px;
   border-radius: 100px;
}

/* ============================================================
   VIDEO GENERATION PIPELINE
============================================================ */
.video-gen {
   background: linear-gradient(135deg, var(--dark), #1A0A2E);
   border: 1px solid rgba(124, 58, 237, 0.3);
   border-radius: 16px;
   padding: 22px 16px;
   margin: 14px 0;
}

.video-pipeline {
   display: flex;
   align-items: center;
   gap: 0;
   margin: 0 0 18px;
}

.vp-step {
   flex: 1;
   text-align: center;
}

.vp-icon {
   width: 72px;
   height: 72px;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 30px;
   margin: 0 auto 8px;
}

.vp-icon.inp {
   background: rgba(239, 68, 68, 0.12);
   border: 2px solid rgba(239, 68, 68, 0.35);
}

.vp-icon.ai {
   background: rgba(0, 198, 162, 0.12);
   border: 2px solid rgba(0, 198, 162, 0.35);
}

.vp-icon.out {
   background: rgba(124, 58, 237, 0.12);
   border: 2px solid rgba(124, 58, 237, 0.35);
}

.vp-label {
   font-size: 11px;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.55);
}

.vp-arrow {
   color: var(--ai);
   font-size: 24px;
   font-weight: 900;
   padding: 0 8px;
   flex-shrink: 0;
}

.video-desc {
   text-align: center;
   font-size: 13px;
   color: rgba(255, 255, 255, 0.75);
   line-height: 1.65;
}

/* ============================================================
   INFLUENCER VS AI COMPARISON
============================================================ */
.influencer-comparison {
   display: flex;
   gap: 0;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   overflow: hidden;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
   margin-bottom: 20px;
}

.inf-col {
   flex: 1;
   display: flex;
   flex-direction: column;
}

.inf-col-bad {
   background: #FAFAFA;
   border-right: 1px solid var(--border);
}

.inf-col-good {
   background: var(--bg);
}

.inf-col-header {
   padding: 12px 14px;
   font-family: 'Outfit', sans-serif;
   font-size: 13px;
   font-weight: 800;
   text-align: center;
   border-bottom: 1px solid var(--border);
}

.inf-col-bad .inf-col-header {
   color: #DC2626;
   background: #FEE2E2;
}

.inf-col-good .inf-col-header {
   color: var(--ai-d);
   background: var(--ai-l);
}

.inf-row {
   padding: 10px 12px;
   border-bottom: 1px solid var(--border);
   display: flex;
   flex-direction: column;
   gap: 3px;
}

.inf-row:last-child {
   border-bottom: none;
}

.inf-label {
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: #9CA3AF;
}

.inf-val-bad {
   font-size: 12px;
   font-weight: 600;
   color: #DC2626;
   line-height: 1.4;
}

.inf-val-good {
   font-size: 12px;
   font-weight: 700;
   color: var(--ai-d);
   line-height: 1.4;
}

.inf-callout {
   background: var(--ai-l);
   border: 1.5px solid rgba(0, 198, 162, 0.3);
   border-radius: 12px;
   padding: 16px;
   font-size: 14px;
   color: var(--ai-d);
   line-height: 1.7;
}

.inf-callout strong {
   display: block;
   font-size: 14px;
   font-weight: 800;
   margin-bottom: 4px;
}

/* ============================================================
   OBJECTION CARDS & INSIDE LIST
============================================================ */
.obj-card {
   background: #fff;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 20px;
   margin-bottom: 14px;
}

.obj-q {
   font-size: 15px;
   font-weight: 800;
   color: var(--txt);
   margin-bottom: 12px;
   padding-bottom: 12px;
   border-bottom: 1px solid var(--border);
   line-height: 1.35;
   font-family: 'Outfit', sans-serif;
}

.obj-q-emoji {
   font-size: 20px;
   margin-right: 6px;
}

.obj-a {
   font-size: 14px;
   color: var(--mid);
   line-height: 1.65;
}

.obj-a p {
   margin-bottom: 8px;
}

.obj-a p:last-child {
   margin-bottom: 0;
}

.obj-proof {
   background: var(--ai-l);
   border-radius: 8px;
   padding: 12px 14px;
   margin-top: 10px;
   display: flex;
   align-items: flex-start;
   gap: 8px;
}

.obj-proof-text {
   font-size: 13px;
   font-weight: 600;
   color: var(--ai-d);
   line-height: 1.5;
}

.inside-list {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin: 16px 0;
}

.inside-item {
   background: var(--card);
   border: 1px solid rgba(0, 198, 162, 0.15);
   border-left: 4px solid var(--ai);
   border-radius: 0 10px 10px 0;
   padding: 14px 16px;
   display: flex;
   gap: 14px;
   align-items: flex-start;
}

.inside-icon {
   font-size: 22px;
   flex-shrink: 0;
   margin-top: 2px;
}

.inside-text h4 {
   font-size: 14px;
   font-weight: 800;
   color: #fff;
   margin-bottom: 3px;
   line-height: 1.3;
}

.inside-text p {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.6);
   line-height: 1.55;
}

/* ============================================================
   TIMELINE
============================================================ */
.timeline {
   display: flex;
   flex-direction: column;
}

.tl-item {
   display: flex;
   gap: 16px;
   padding-bottom: 28px;
   position: relative;
}

.tl-item:last-child {
   padding-bottom: 0;
}

.tl-item::before {
   content: '';
   position: absolute;
   left: 23px;
   top: 48px;
   width: 2px;
   height: calc(100% - 16px);
   background: linear-gradient(180deg, var(--ai), transparent);
}

.tl-item:last-child::before {
   display: none;
}

.tl-dot {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: var(--ai);
   color: #000;
   font-family: 'Outfit', sans-serif;
   font-size: 14px;
   font-weight: 800;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   box-shadow: 0 4px 16px rgba(0, 198, 162, 0.35);
   z-index: 2;
}

.tl-content {
   padding-top: 10px;
}

.tl-content h3 {
   font-size: 16px;
   color: var(--txt);
   margin-bottom: 4px;
   line-height: 1.3;
   font-weight: 700;
}

.tl-content p {
   font-size: 14px;
   color: var(--mid);
   line-height: 1.55;
}

/* ============================================================
   TESTIMONIALS
============================================================ */
.testi-card {
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 22px;
   margin-bottom: 14px;
   position: relative;
}

.testi-card::before {
   content: '\201C';
   position: absolute;
   top: 0;
   right: 16px;
   font-size: 80px;
   color: var(--ai-l);
   font-family: Georgia, serif;
   line-height: 1;
   pointer-events: none;
}

.testi-stars {
   color: var(--gold);
   font-size: 15px;
   margin-bottom: 10px;
}

.testi-text {
   font-size: 14px;
   line-height: 1.7;
   color: var(--txt);
   margin-bottom: 18px;
   font-style: italic;
   position: relative;
   z-index: 1;
}

.testi-author {
   display: flex;
   align-items: center;
   gap: 12px;
}

.testi-avatar {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'Outfit', sans-serif;
   font-size: 13px;
   font-weight: 800;
   color: #fff;
   flex-shrink: 0;
}

.testi-name {
   font-size: 14px;
   font-weight: 700;
   color: var(--txt);
   line-height: 1.2;
}

.testi-loc {
   font-size: 12px;
   color: var(--mid);
}

.verified-badge {
   margin-left: auto;
   background: var(--ai-l);
   color: var(--ai-d);
   font-size: 11px;
   font-weight: 700;
   padding: 4px 8px;
   border-radius: 100px;
   flex-shrink: 0;
}

/* ============================================================
   COMPARISON TABLE
============================================================ */
.comparison-table {
   background: #fff;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   overflow: hidden;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
   margin-bottom: 20px;
}

.comp-header {
   display: flex;
   background: #F3F4F6;
   font-weight: 800;
   font-family: 'Outfit', sans-serif;
   font-size: 14px;
}

.comp-row {
   display: flex;
   border-top: 1px solid var(--border);
   font-size: 13px;
   line-height: 1.5;
}

.comp-col-bad {
   padding: 14px;
   width: 50%;
   color: var(--mid);
   background: #FAFAFA;
   border-right: 1px solid var(--border);
}

.comp-col-good {
   padding: 14px;
   width: 50%;
   color: var(--ai-d);
   font-weight: 600;
   background: var(--ai-l);
}

/* ============================================================
   PHONE MOCKUP
============================================================ */
.mockup-tag {
   display: inline-block;
   background: var(--ai);
   color: #000;
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   padding: 6px 14px;
   border-radius: 100px;
   margin-bottom: 16px;
}

.phone-mockup {
   width: 260px;
   height: 530px;
   margin: 0 auto;
   background: #000;
   border-radius: 36px;
   border: 7px solid #111;
   box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
   position: relative;
   overflow: hidden;
}

.phone-notch {
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 110px;
   height: 24px;
   background: #111;
   border-bottom-left-radius: 14px;
   border-bottom-right-radius: 14px;
   z-index: 10;
}

.phone-screen {
   width: 100%;
   height: 100%;
   background: linear-gradient(145deg, var(--dark), var(--dark2));
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   color: #fff;
   padding: 20px;
   text-align: center;
}

.phone-play {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background: rgba(0, 198, 162, 0.2);
   border: 2px solid var(--ai);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 26px;
   margin-bottom: 14px;
}

.phone-screen-text {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.55);
   line-height: 1.5;
   font-weight: 500;
}

/* ============================================================
   PRICING BLOCK
============================================================ */
.pricing-block {
   background: var(--dark2);
   border: 2px solid var(--ai);
   border-radius: 16px;
   padding: 24px 20px;
   text-align: center;
   position: relative;
   overflow: hidden;
}

.pricing-block::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse at top center, rgba(0, 198, 162, 0.07) 0%, transparent 70%);
   pointer-events: none;
}

.scarcity-bar {
   background: rgba(0, 198, 162, 0.1);
   border: 1px solid rgba(0, 198, 162, 0.25);
   border-radius: 8px;
   padding: 12px;
   margin-bottom: 20px;
   font-size: 13px;
   font-weight: 600;
   color: var(--ai);
}

.progress-wrap {
   background: rgba(0, 198, 162, 0.15);
   border-radius: 100px;
   height: 8px;
   margin-top: 8px;
   overflow: hidden;
}

.progress-fill {
   background: linear-gradient(90deg, var(--ai), var(--ai-d));
   height: 100%;
   border-radius: 100px;
}

.price-old {
   font-size: 15px;
   color: rgba(255, 255, 255, 0.4);
   text-decoration: line-through;
   margin-bottom: 4px;
}

.price-main {
   font-size: 52px;
   font-weight: 900;
   color: #fff;
   letter-spacing: -0.03em;
   line-height: 1;
}

.price-main sup {
   font-size: 26px;
   vertical-align: top;
   margin-top: 10px;
}

.price-save {
   display: inline-block;
   background: rgba(244, 163, 0, 0.15);
   border: 1px solid rgba(244, 163, 0, 0.35);
   color: var(--gold);
   font-size: 14px;
   font-weight: 700;
   padding: 4px 12px;
   border-radius: 100px;
   margin: 12px 0 20px;
}

.guarantee-note {
   font-size: 12px;
   color: rgba(255, 255, 255, 0.45);
   font-weight: 500;
}

/* ============================================================
   GUARANTEE & FAQ
============================================================ */
.guarantee-box {
   background: rgba(0, 198, 162, 0.06);
   border: 1px solid rgba(0, 198, 162, 0.25);
   border-radius: var(--radius);
   padding: 32px 20px;
   text-align: center;
}

.guarantee-icon {
   font-size: 48px;
   margin-bottom: 12px;
   line-height: 1;
}

.guarantee-box h3 {
   font-size: 20px;
   font-weight: 800;
   color: var(--ai);
   margin-bottom: 8px;
}

.guarantee-box p {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.65);
}

.faq-container {
   display: flex;
   flex-direction: column;
}

.faq-item {
   border-bottom: 1px solid var(--border);
   overflow: hidden;
   cursor: pointer;
}

.faq-item:first-child {
   border-top: 1px solid var(--border);
}

.faq-q {
   width: 100%;
   text-align: left;
   padding: 18px 0;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 12px;
   font-size: 15px;
   font-weight: 700;
   color: var(--txt);
   line-height: 1.4;
   font-family: 'Outfit', sans-serif;
}

.faq-icon {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: var(--ai-l);
   color: var(--ai-d);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   font-size: 18px;
   transition: transform 0.3s, background 0.3s;
}

.faq-item.open .faq-icon {
   transform: rotate(45deg);
   background: var(--ai);
   color: #fff;
}

.faq-a {
   font-size: 14px;
   color: var(--mid);
   line-height: 1.65;
   padding-bottom: 18px;
   display: none;
}

.faq-item.open .faq-a {
   display: block;
}

.faq-a p {
   margin-bottom: 8px;
}

.faq-a p:last-child {
   margin-bottom: 0;
}

/* ============================================================
   FINAL CTA
============================================================ */
.final-cta {
   background: var(--dark);
   padding: 56px 20px;
   text-align: center;
}

.final-inner {
   max-width: 440px;
   margin: 0 auto;
}

.final-cta h2 {
   font-size: clamp(26px, 7vw, 34px);
   font-weight: 900;
   color: #fff;
   line-height: 1.2;
   margin-bottom: 24px;
}

.final-cta h2 em {
   font-style: normal;
   color: var(--ai);
}

.final-price-box {
   background: rgba(0, 198, 162, 0.08);
   border: 1px solid rgba(0, 198, 162, 0.25);
   border-radius: var(--radius);
   padding: 24px;
   margin: 0 auto 24px;
   max-width: 320px;
}

.final-old {
   font-size: 15px;
   color: rgba(255, 255, 255, 0.4);
   text-decoration: line-through;
   margin-bottom: 4px;
}

.final-main {
   font-family: 'Outfit', sans-serif;
   font-size: 56px;
   font-weight: 900;
   color: var(--ai);
   line-height: 1;
}

.final-save {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.6);
   margin-top: 8px;
   font-weight: 500;
}

/* ============================================================
   STICKY BAR
============================================================ */
.sticky-bottom-bar {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   background: var(--dark2);
   border-top: 1px solid rgba(0, 198, 162, 0.25);
   box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);
   transform: translateY(100%);
   transition: transform 0.3s ease-in-out;
   z-index: 1000;
   display: flex;
   justify-content: center;
}

.sticky-bottom-bar.visible {
   transform: translateY(0);
}

.sticky-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   max-width: var(--max-w);
   padding: 12px 20px;
}

.sbb-info {
   display: flex;
   flex-direction: column;
}

.sbb-price {
   font-family: 'Outfit', sans-serif;
   font-weight: 800;
   font-size: 18px;
   color: #fff;
   line-height: 1.2;
}

.sbb-left {
   font-size: 11px;
   font-weight: 600;
   color: var(--ai);
}

.btn-sbb {
   background: var(--cta-bg);
   color: #fff;
   font-family: 'Outfit', sans-serif;
   font-weight: 800;
   font-size: 15px;
   padding: 12px 24px;
   border-radius: 100px;
   box-shadow: 0 4px 16px rgba(232, 93, 4, 0.45);
}

.btn-sbb:active {
   transform: scale(0.96);
}

/* ============================================================
   FOOTER
============================================================ */
.footer {
   background: #000;
   padding: 32px 20px 90px;
   text-align: center;
   color: #555;
   font-size: 13px;
   line-height: 1.8;
}

.footer strong {
   color: #888;
}

.footer-links {
   margin: 12px 0;
}

.footer-links a {
   color: #666;
   text-decoration: underline;
   text-underline-offset: 2px;
}

.footer-micro {
   margin-top: 16px;
   font-size: 11px;
   color: #333;
}

/* ============================================================
   EMAIL PAGE & UPSELL PAGE
============================================================ */
#emailPage {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   background: var(--bg);
}

.email-nav {
   padding: 16px 20px;
   display: flex;
   align-items: center;
   gap: 12px;
   border-bottom: 1px solid var(--border);
   background: #fff;
}

.back-btn {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: var(--bg);
   border: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--txt);
   flex-shrink: 0;
}

.email-body {
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 32px 24px 64px;
   max-width: 440px;
   margin: 0 auto;
   width: 100%;
   text-align: center;
}

.email-icon {
   font-size: 56px;
   margin-bottom: 16px;
}

.email-body h2 {
   font-size: 24px;
   font-weight: 800;
   color: var(--txt);
   margin-bottom: 10px;
   line-height: 1.2;
}

.email-body>p {
   font-size: 15px;
   color: var(--mid);
   line-height: 1.6;
   margin-bottom: 28px;
}

.order-summary-mini {
   background: #fff;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 16px;
   margin-bottom: 24px;
   text-align: left;
}

.osm-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 14px;
   margin-bottom: 6px;
}

.osm-row.total {
   font-weight: 800;
   font-family: 'Outfit', sans-serif;
   font-size: 16px;
   margin-top: 10px;
   padding-top: 10px;
   border-top: 1px solid var(--border);
   margin-bottom: 0;
}

.osm-label {
   color: var(--mid);
   font-weight: 500;
}

.osm-price {
   font-weight: 700;
   color: var(--txt);
}

.input-wrap {
   position: relative;
   margin-bottom: 16px;
   text-align: left;
}

.input-wrap label {
   display: block;
   font-size: 13px;
   font-weight: 700;
   color: var(--txt);
   margin-bottom: 6px;
}

.input-wrap input {
   width: 100%;
   padding: 16px;
   border: 1.5px solid var(--border);
   border-radius: var(--radius);
   font-family: 'Plus Jakarta Sans', sans-serif;
   font-size: 16px;
   color: var(--txt);
   background: #fff;
   outline: none;
   transition: border-color 0.2s;
}

.input-wrap input:focus {
   border-color: var(--ai);
}

.input-wrap input.error {
   border-color: #DC2626;
}

.err-msg {
   font-size: 12px;
   color: #DC2626;
   margin-top: 6px;
   display: none;
   font-weight: 500;
}

.err-msg.show {
   display: block;
}

.btn-submit {
   background: linear-gradient(135deg, var(--ai), var(--ai-d));
   color: #000;
   font-family: 'Outfit', sans-serif;
   font-weight: 800;
   font-size: 17px;
   padding: 18px 24px;
   border-radius: 100px;
   width: 100%;
   box-shadow: 0 6px 20px rgba(0, 198, 162, 0.35);
   transition: transform 0.15s;
   margin-top: 8px;
}

.btn-submit:active {
   transform: scale(0.97);
}

.btn-submit:disabled {
   opacity: 0.7;
   cursor: not-allowed;
}

.privacy-note {
   font-size: 12px;
   color: var(--mid);
   margin-top: 16px;
   line-height: 1.5;
   font-weight: 500;
}

.spinner {
   display: none;
   width: 22px;
   height: 22px;
   border: 3px solid rgba(0, 0, 0, 0.2);
   border-top-color: #000;
   border-radius: 50%;
   animation: spin 0.7s linear infinite;
   margin: 0 auto;
}

#upsellPage {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   background: var(--bg);
}

.upsell-header {
   background: linear-gradient(135deg, var(--dark), var(--dark2));
   border-bottom: 1px solid rgba(0, 198, 162, 0.2);
   padding: 20px;
   text-align: center;
   color: #fff;
}

.upsell-header h3 {
   font-family: 'Outfit', sans-serif;
   font-size: 18px;
   font-weight: 800;
   line-height: 1.3;
   margin-bottom: 4px;
}

.upsell-header p {
   font-size: 13px;
   font-weight: 500;
   opacity: 0.8;
}

.upsell-body {
   flex: 1;
   padding: 28px 20px 64px;
   max-width: 480px;
   margin: 0 auto;
   width: 100%;
}

.upsell-badge {
   background: var(--ai-l);
   border: 1px solid rgba(0, 198, 162, 0.25);
   border-radius: var(--radius);
   padding: 20px;
   margin-bottom: 20px;
   text-align: center;
}

.upsell-badge .emoji {
   font-size: 40px;
   margin-bottom: 8px;
}

.upsell-badge h4 {
   font-family: 'Outfit', sans-serif;
   font-size: 20px;
   font-weight: 800;
   color: var(--ai-d);
   margin-bottom: 6px;
   line-height: 1.2;
}

.upsell-badge p {
   font-size: 14px;
   color: var(--mid);
   line-height: 1.5;
   font-weight: 500;
}

.upsell-features {
   margin-bottom: 20px;
   background: #fff;
   padding: 16px 20px;
   border-radius: var(--radius);
   border: 1px solid var(--border);
}

.upsell-feature {
   display: flex;
   gap: 12px;
   align-items: flex-start;
   padding: 10px 0;
   border-bottom: 1px solid var(--border);
   font-size: 14px;
   color: var(--txt);
   line-height: 1.45;
}

.upsell-feature:last-child {
   border-bottom: none;
   padding-bottom: 0;
}

.upsell-feature:first-child {
   padding-top: 0;
}

.upsell-price-note {
   background: var(--ai-l);
   border-radius: 8px;
   padding: 16px;
   margin-bottom: 20px;
   font-size: 15px;
   font-weight: 600;
   color: var(--ai-d);
   text-align: center;
   line-height: 1.5;
   border: 1px dashed var(--ai);
}

.btn-yes {
   background: var(--cta-bg);
   color: #fff;
   font-family: 'Outfit', sans-serif;
   font-weight: 800;
   font-size: 17px;
   padding: 18px 24px;
   border-radius: 100px;
   width: 100%;
   box-shadow: var(--cta-shadow);
   transition: transform 0.15s;
   margin-bottom: 16px;
   line-height: 1.3;
   text-align: center;
   display: block;
}

.btn-yes:active {
   transform: scale(0.97);
}

.btn-no {
   background: transparent;
   color: var(--mid);
   font-size: 15px;
   font-weight: 600;
   padding: 12px;
   border-radius: 100px;
   width: 100%;
   text-align: center;
   display: block;
   text-decoration: underline;
   text-underline-offset: 4px;
}

.upsell-micro {
   font-size: 12px;
   color: var(--mid);
   text-align: center;
   margin-top: 16px;
   line-height: 1.5;
   font-weight: 500;
}