:root {
   --color-primary: #0288D1;
   --color-primary-dark: #01579B;
   --color-primary-light: #E1F5FE;
   --color-secondary: #6C757D;
   --color-success: #198754;
   --color-success-dark: #2E7D32;
   --color-warning: #FF8F00;
   --color-error: #DC3545;
   --color-info: #0DCAF0;
   --color-premium: #FF8F00;
   --color-accent: #FF8F00;
   --bg-primary: #FAFAFA;
   --bg-surface: #FFF;
   --bg-surface-elevated: #FFF;
   --bg-secondary: #F5F5F5;
   --border-color: #E5E7EB;
   --text-primary: #1A1C1E;
   --text-secondary: #6B7280;
   --text-muted: #9CA3AF;
   --gradient-primary: linear-gradient(135deg, #0288D1 0, #03A9F4 100%);
   --gradient-premium: linear-gradient(135deg, #FF8F00 0, #FFA726 100%);
   --gradient-hero: linear-gradient(180deg, rgba(2, 136, 209, 0.05) 0, transparent 100%);
   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
   --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
   --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
   --radius-sm: 8px;
   --radius-md: 12px;
   --radius-lg: 16px;
   --radius-xl: 24px;
   --radius-pill: 9999px;
   --space-xs: 4px;
   --space-sm: 8px;
   --space-md: 12px;
   --space-lg: 16px;
   --space-xl: 24px;
   --space-2xl: 32px;
   --space-3xl: 32px;
   --space-4xl: 40px;
   --space-5xl: 56px;
   --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-display: 'Plus Jakarta Sans', var(--font-sans);
   --duration-fast: 150ms;
   --duration-normal: 300ms;
   --duration-slow: 500ms;
   --easing-default: cubic-bezier(0.4, 0, 0.2, 1)
}

[data-theme="dark"] {
   --bg-primary: #212529;
   --bg-surface: #343A40;
   --bg-surface-elevated: #3d444b;
   --bg-secondary: #2d3339;
   --border-color: rgba(255, 255, 255, 0.1);
   --text-primary: #F8F9FA;
   --text-secondary: #DEE2E6;
   --text-muted: #ADB5BD;
   --gradient-hero: linear-gradient(180deg, rgba(2, 136, 209, 0.1) 0, transparent 100%);
   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
   --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
   --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3)
}

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

html {
   scroll-behavior: smooth;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale
}

body {
   font-family: var(--font-sans);
   font-size: 16px;
   line-height: 1.6;
   color: var(--text-primary);
   background-color: var(--bg-primary);
   transition: background-color var(--duration-normal) var(--easing-default), color var(--duration-normal) var(--easing-default)
}

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

a {
   color: var(--color-primary);
   text-decoration: none;
   transition: color var(--duration-fast) var(--easing-default)
}

a:hover {
   color: var(--color-primary-dark)
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--font-display);
   font-weight: 700;
   line-height: 1.2;
   color: var(--text-primary)
}

h1 {
    font-size: clamp(1.75rem, 3vw, 2.25rem)
}

h2 {
    font-size: clamp(1.25rem, 2.5vw, 1.5rem)
}

h3 {
    font-size: clamp(1rem, 1.5vw, 1.125rem)
}

h4 {
   font-size: 1.125rem
}

p {
   color: var(--text-secondary)
}

strong {
   color: var(--text-primary);
   font-weight: 600
}

.container {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 var(--space-lg)
}

section {
   padding: var(--space-4xl) 0
}

.btn,
.download-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-sm);
   padding: var(--space-md) var(--space-xl);
   font-family: var(--font-sans);
   font-size: .9375rem;
   font-weight: 600;
   line-height: 1.5;
   text-decoration: none;
   border: none;
   border-radius: var(--radius-md);
   cursor: pointer;
   transition: all var(--duration-fast) var(--easing-default);
   position: relative;
   overflow: hidden
}

.btn::after,
.download-btn::after {
   content: "";
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
   transform: skewX(-20deg);
   pointer-events: none
}

.btn:hover::after,
.download-btn:hover::after {
   left: 100%;
   transition: left .5s
}

.btn-primary {
   background: var(--gradient-primary);
   color: white;
   box-shadow: var(--shadow-md), 0 0 0 0 rgba(2, 136, 209, 0)
}

.btn-primary:hover {
   transform: translateY(-3px) scale(1.02);
   box-shadow: var(--shadow-lg), 0 0 30px rgba(2, 136, 209, 0.4);
   color: white
}

.btn-secondary {
   background: var(--bg-surface);
   color: var(--text-primary);
   border: 1px solid var(--border-color)
}

.btn-secondary:hover {
   transform: translateY(-2px);
   background: var(--bg-surface-elevated);
   border-color: var(--color-primary);
   color: var(--color-primary);
   box-shadow: var(--shadow-md)
}

[data-theme="dark"] .btn-secondary {
   background: rgba(255, 255, 255, 0.15);
   border-color: rgba(255, 255, 255, 0.2);
   color: #FFF
}

[data-theme="dark"] .btn-secondary:hover {
   background: rgba(255, 255, 255, 0.25);
   color: #FFF;
   border-color: #FFF;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3)
}

.btn-secondary::after {
   background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent)
}

[data-theme="dark"] .btn-secondary::after {
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent)
}

.btn-lg {
   padding: var(--space-lg) var(--space-2xl);
   font-size: 1rem
}

.btn-block {
   width: 100%
}

.section-header {
   text-align: center;
   margin: 0 auto var(--space-2xl)
}

.section-tag {
   display: inline-block;
   padding: var(--space-xs) var(--space-md);
   background: var(--color-primary-light);
   color: var(--color-primary);
   font-size: .75rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .1em;
   border-radius: var(--radius-pill);
   margin-bottom: var(--space-lg)
}

[data-theme="dark"] .section-tag {
   background: rgba(2, 136, 209, 0.2)
}

.section-title {
   margin-bottom: var(--space-lg)
}

.section-subtitle {
   font-size: 1.125rem
}

.gradient-text {
   background: var(--gradient-primary);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text
}

@keyframes pulse {

   0%,
   100% {
      opacity: 1
   }

   50% {
      opacity: .5
   }
}

@keyframes float {

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

   33% {
      transform: translate(30px, -30px) scale(1.05)
   }

   66% {
      transform: translate(-20px, 20px) scale(0.95)
   }
}

@keyframes shine {
   0% {
      left: -100%;
      transition-property: left
   }

   100% {
      left: 100%;
      transition-property: left
   }
}

.navbar {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   background: var(--bg-surface);
   border-bottom: 1px solid var(--border-color);
   transition: box-shadow var(--duration-normal) var(--easing-default)
}

.navbar.scrolled {
   box-shadow: var(--shadow-md)
}

.navbar-container {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: var(--space-md) var(--space-lg);
   max-width: 1200px;
   margin: 0 auto
}

.navbar-brand {
   display: flex;
   align-items: center;
   gap: 6px;
   font-family: 'Nunito', 'Verdana', 'Segoe UI', sans-serif;
   font-size: 20px;
   font-weight: 800;
   font-style: italic;
   color: #1A1C1E
}

.navbar-brand:hover {
   color: #1A1C1E
}

.navbar-brand .logo-text {
   color: inherit
}

[data-theme="dark"] .navbar-brand {
   gap: 4px;
   color: #FFF
}

[data-theme="dark"] .navbar-brand:hover {
   color: #FFF
}

.nav-links {
   display: flex;
   align-items: center;
   gap: var(--space-xl);
   list-style: none
}

.nav-links a {
   color: var(--text-secondary);
   font-weight: 500;
   transition: color var(--duration-fast) var(--easing-default)
}

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

.nav-actions {
   display: flex;
   align-items: center;
   gap: var(--space-md)
}

.theme-toggle {
   background: none;
   border: none;
   cursor: pointer;
   padding: var(--space-sm);
   color: var(--text-secondary);
   border-radius: var(--radius-sm);
   transition: all var(--duration-fast) var(--easing-default)
}

.theme-toggle:hover {
   background: var(--bg-secondary);
   color: var(--text-primary)
}

.menu-toggle {
   display: none;
   background: none;
   border: none;
   cursor: pointer;
   padding: var(--space-sm);
   color: var(--text-primary)
}

@media(max-width:768px) {
   .nav-links {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: var(--bg-surface);
      flex-direction: column;
      padding: var(--space-lg);
      border-bottom: 1px solid var(--border-color);
      box-shadow: var(--shadow-lg)
   }

   .nav-links.active {
      display: flex
   }

   .menu-toggle {
      display: block
   }

   .nav-actions .btn {
      display: none
   }
}

.hero {
   position: relative;
   min-height: 100vh;
   display: flex;
   align-items: center;
   padding-top: 100px;
   overflow: hidden;
   background: var(--gradient-hero)
}

.hero-bg {
   position: absolute;
   inset: 0;
   overflow: hidden;
   pointer-events: none
}

.blob {
   position: absolute;
   border-radius: 50%;
   filter: blur(80px);
   opacity: .4
}

.blob1 {
   width: 600px;
   height: 600px;
   background: var(--color-primary);
   top: -200px;
   right: -100px;
   opacity: .15
}

.blob2 {
   width: 400px;
   height: 400px;
   background: var(--color-accent);
   bottom: -100px;
   left: -100px;
   opacity: .1
}

.blob3 {
   width: 300px;
   height: 300px;
   background: var(--color-premium);
   top: 50%;
   left: 50%;
   opacity: .08
}

.hero-content {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--space-4xl);
   align-items: center;
   position: relative;
   z-index: 1
}

.hero-text {
   max-width: 600px
}

.badge {
   display: inline-flex;
   align-items: center;
   gap: var(--space-sm);
   padding: var(--space-xs) var(--space-md);
   background: var(--bg-surface);
   border: 1px solid var(--border-color);
   color: var(--text-secondary);
   font-size: .8125rem;
   font-weight: 600;
   border-radius: var(--radius-pill);
   margin-bottom: var(--space-xl);
   box-shadow: var(--shadow-sm)
}

[data-theme="dark"] .badge {
   background: rgba(255, 255, 255, 0.05);
   border-color: rgba(255, 255, 255, 0.1);
   color: var(--text-primary)
}

.badge-dot {
   width: 8px;
   height: 8px;
   background: var(--color-success);
   border-radius: 50%;
   animation: pulse 2s infinite
}

.hero-title {
   margin-bottom: var(--space-xl)
}

.hero-subtitle {
   display: block;
   margin: 24px 0 32px 0;
   padding: 12px 24px;
   font-size: clamp(1rem, 2vw, 1.125rem);
   font-weight: 600;
   letter-spacing: .2px;
   position: relative;
   background-color: #FFF;
   color: #1A1C1E;
   border: 1px solid rgba(0, 0, 0, 0.08);
   border-radius: var(--radius-lg);
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
   max-width: 540px;
   line-height: 1.6
}

[data-theme="dark"] .hero-subtitle {
   background-color: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border-color: rgba(255, 255, 255, 0.15);
   color: #FFF;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5)
}

.hero-cta {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-lg);
   margin-bottom: var(--space-2xl)
}

.hero-platforms {
   display: flex;
   align-items: center;
   gap: var(--space-lg);
   color: var(--text-muted);
   font-size: .875rem;
   margin-top: var(--space-xl)
}

.platform-icons {
   display: flex;
   gap: var(--space-md)
}

.platform-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   background: var(--bg-surface);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-sm);
   color: var(--text-secondary)
}

[data-theme="dark"] .platform-icon {
   background: rgba(255, 255, 255, 0.1);
   border-color: rgba(255, 255, 255, 0.2);
   color: rgba(255, 255, 255, 0.8)
}

.platform-coming-soon {
   font-size: .8125rem;
   color: var(--text-muted);
   font-style: italic
}

.hero-visual {
   display: flex;
   justify-content: center;
   align-items: center
}

.hero-image {
   max-width: 100%;
   height: auto;
   border-radius: var(--radius-lg)
}

@media(max-width:1024px) {
   .hero-content {
      grid-template-columns: 1fr;
      text-align: center;
      gap: var(--space-2xl)
   }

   .hero-subtitle {
      margin-left: auto;
      margin-right: auto
   }

   .hero-text {
      max-width: 100%;
      order: 1
   }

   .hero-cta {
      justify-content: center
   }

   .hero-platforms {
      justify-content: center;
      flex-wrap: wrap
   }

   .hero-visual {
      order: 2;
      max-width: 400px;
      margin: 0 auto
   }

   .hero-image {
      max-height: 350px;
      width: auto
   }
}

@media(max-width:768px) {
   .hero {
      padding-top: 80px;
      min-height: auto
   }

   .hero-visual {
      order: 0 !important;
      max-width: 100%;
      width: 100%;
      margin-bottom: var(--space-xl)
   }

   .hero-text {
      order: 1 !important
   }

   .hero-image {
      max-height: none;
      width: 100%;
      max-width: 400px;
      margin: 0 auto;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-xl)
   }

   .hero-title {
      font-size: 1.75rem
   }

   .hero-subtitle {
      font-size: 1rem;
      max-width: 100%
   }
}

@media(max-width:500px) {
   .hero-cta {
      flex-direction: column
   }

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

.claims {
   padding: var(--space-4xl) 0
}

.claims-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--space-xl)
}

.claim-card {
   background: var(--bg-surface);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-lg);
   padding: var(--space-2xl);
   text-align: center;
   transition: all var(--duration-normal) var(--easing-default)
}

.claim-card:hover {
   transform: translateY(-8px);
   box-shadow: var(--shadow-xl)
}

.claim-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 64px;
   height: 64px;
   background: transparent;
   border-radius: var(--radius-md);
   margin-bottom: var(--space-lg)
}

.claim-card h2 {
   font-size: clamp(1.25rem, 2vw, 1.5rem);
   margin-bottom: var(--space-sm)
}

.claim-card p {
   font-size: .9375rem;
   line-height: 1.6
}

@media(max-width:768px) {
   .claims-grid {
      grid-template-columns: 1fr
   }
}

.how-it-works {
   background: var(--bg-surface);
   position: relative;
   overflow: hidden
}

.how-it-works::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230288D1' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
   pointer-events: none
}

.steps-container {
   display: flex;
   align-items: flex-start;
   justify-content: center;
   gap: var(--space-xl);
   position: relative
}

.step-card {
   flex: 1;
   max-width: 320px;
   text-align: center;
   padding: var(--space-2xl);
   background: var(--bg-primary);
   border-radius: var(--radius-xl);
   border: 1px solid var(--border-color);
   position: relative;
   transition: all var(--duration-normal) var(--easing-default)
}

.step-card:hover {
   transform: translateY(-8px);
   box-shadow: var(--shadow-xl);
   border-color: var(--border-color)
}

.step-number {
   width: 56px;
   height: 56px;
   background: var(--gradient-primary);
   color: white;
   font-family: var(--font-display);
   font-size: 1.5rem;
   font-weight: 800;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto var(--space-lg);
   box-shadow: 0 4px 15px rgba(2, 136, 209, 0.3)
}

.step-icon {
   font-size: 3rem;
   margin-bottom: var(--space-lg);
   display: flex;
   align-items: center;
   justify-content: center
}

.step-card h3 {
   margin-bottom: var(--space-sm);
   color: var(--text-primary)
}

.step-card p {
   font-size: .9375rem;
   line-height: 1.6
}

.step-arrow {
   display: flex;
   align-items: center;
   color: var(--color-primary);
   opacity: .5;
   padding-top: 80px
}

.floating-decoration {
   position: absolute;
   pointer-events: none;
   opacity: .1;
   animation: float 20s infinite ease-in-out
}

.floating-decoration.tomato {
   font-size: 4rem;
   top: 10%;
   left: 5%;
   animation-delay: 0s
}

.floating-decoration.carrot {
   font-size: 3rem;
   top: 60%;
   right: 8%;
   animation-delay: -5s
}

.floating-decoration.apple {
   font-size: 3.5rem;
   bottom: 15%;
   left: 15%;
   animation-delay: -10s
}

.floating-decoration.basket {
   font-size: 5rem;
   top: 30%;
   right: 3%;
   animation-delay: -15s
}

@media(max-width:1024px) {
   .steps-container {
      flex-wrap: wrap
   }

   .step-arrow {
      display: none
   }
}

@media(max-width:768px) {
   .steps-container {
      flex-direction: column;
      align-items: center
   }

   .step-card {
      max-width: 100%;
      width: 100%
   }

   .floating-decoration {
      display: none
   }
}

.screenshots-section {
   padding: var(--space-2xl) 0;
   background: var(--bg-surface)
}

.screenshots-layout {
   display: flex;
   align-items: center;
   gap: var(--space-xl)
}

.phone-mockup {
   flex: 0 0 auto
}

.phone-frame {
   position: relative;
   background: #1a1a1a;
   border-radius: 40px;
   padding: 12px;
   box-shadow: var(--shadow-xl), inset 0 0 4px rgba(255,255,255,.1);
   cursor: pointer
}

.phone-notch {
   position: absolute;
   top: 12px;
   left: 50%;
   transform: translateX(-50%);
   width: 80px;
   height: 24px;
   background: #1a1a1a;
   border-radius: 0 0 16px 16px;
   z-index: 2
}

.phone-screen {
   display: block;
   height: 440px;
   width: auto;
   border-radius: 28px
}

.phone-frame:hover {
   box-shadow: var(--shadow-xl), inset 0 0 4px rgba(255,255,255,.1), 0 0 20px rgba(2,136,209,.3)
}

.carousel-wrapper {
   flex: 1;
   overflow: hidden
}

.carousel-track {
   display: flex;
   gap: var(--space-lg);
   width: max-content;
   animation: carousel-scroll 25s linear infinite;
   padding: var(--space-md) 0;
   align-items: center
}

.carousel-track:hover {
   animation-play-state: paused
}

.carousel-track img {
   flex: 0 0 auto;
   height: 340px;
   width: auto;
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-md);
   transition: transform var(--duration-normal) var(--easing-default);
   cursor: pointer
}

.carousel-track img:hover {
   transform: scale(1.3);
   z-index: 10;
   position: relative;
   box-shadow: var(--shadow-xl)
}

.screenshot-lightbox {
   position: fixed;
   inset: 0;
   z-index: 9999;
   background: rgba(0,0,0,.85);
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   pointer-events: none;
   transition: opacity .3s ease;
   cursor: pointer
}

.screenshot-lightbox.active {
   opacity: 1;
   pointer-events: auto
}

.screenshot-lightbox img {
   max-height: 95vh;
   max-width: 95vw;
   width: auto;
   height: auto;
   border-radius: var(--radius-lg);
   box-shadow: 0 0 40px rgba(0,0,0,.5);
   transform: scale(.9);
   transition: transform .3s ease
}

.screenshot-lightbox.active img {
   transform: scale(1)
}

@keyframes carousel-scroll {
   0% { transform: translateX(0) }
   100% { transform: translateX(-50%) }
}

@media(max-width:1024px) {
   .screenshots-layout {
      flex-direction: column
   }

   .carousel-wrapper {
      width: 100%
   }
}

@media(max-width:768px) {
   .carousel-track img {
      height: 260px
   }

   .screenshots-section {
      padding: var(--space-xl) 0
   }

   .carousel-track {
      animation-duration: 20s
   }

   .phone-screen {
      height: 340px
   }

   .phone-frame {
      border-radius: 32px;
      padding: 10px
   }

   .phone-screen {
      border-radius: 22px
   }
}

.features {
   background: var(--bg-primary)
}

.features-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--space-xl)
}

.feature-card {
   background: var(--bg-surface);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-lg);
   padding: var(--space-xl);
   transition: all var(--duration-normal) var(--easing-default)
}

.feature-card:hover {
   transform: translateY(-8px);
   box-shadow: var(--shadow-xl)
}

.feature-card-large {
   grid-column: span 1;
   padding: var(--space-2xl)
}

.feature-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 48px;
   height: 48px;
   border-radius: var(--radius-md);
   margin-bottom: var(--space-lg)
}

.feature-card h3 {
   font-size: 1.125rem;
   margin-bottom: var(--space-sm)
}

.feature-card p {
   font-size: .9375rem;
   line-height: 1.6
}

.feature-list {
   list-style: none;
   margin-top: var(--space-xl)
}

.feature-list li {
   display: flex;
   align-items: flex-start;
   gap: var(--space-sm);
   padding: var(--space-sm) 0;
   font-size: .9375rem;
   color: var(--text-secondary)
}

.feature-list li svg {
   flex-shrink: 0;
   color: var(--color-success);
   margin-top: 2px
}

@media(max-width:1024px) {
   .features-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .feature-card-large {
      grid-column: span 2;
      grid-row: span 1
   }
}

@media(max-width:768px) {
   .features-grid {
      grid-template-columns: 1fr
   }

   .feature-card-large {
      grid-column: span 1
   }
}

.wave-divider {
   width: 100%;
   overflow: hidden;
   line-height: 0;
   background: var(--bg-primary)
}

.wave-divider svg {
   width: 100%;
   height: 60px;
   display: block
}

.wave-divider-bottom {
   width: 100%;
   overflow: hidden;
   line-height: 0;
   background: var(--bg-primary)
}

.wave-divider-bottom svg {
   width: 100%;
   height: 60px;
   display: block
}

.premium-section {
   position: relative;
   background: #FF8F00;
   padding: var(--space-3xl) 0 var(--space-4xl);
   overflow: visible
}

.premium-header {
   text-align: center;
   margin-bottom: var(--space-3xl);
   padding-top: 2rem;
   position: relative;
   z-index: 1
}

.premium-header::before {
   content: '\2601';
   position: absolute;
   top: 55%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-size: 28rem;
   opacity: .15;
   z-index: -1;
   pointer-events: none
}

.premium-title {
   position: relative;
   z-index: 1;
   font-size: clamp(2rem, 5vw, 3.5rem);
   margin-bottom: var(--space-lg);
   color: white;
   text-shadow: 3px 3px 0 #E65100, 6px 6px 0 rgba(0, 0, 0, 0.2)
}

.premium-gradient {
   color: white;
   text-shadow: 3px 3px 0 #E65100, 6px 6px 0 rgba(0, 0, 0, 0.2);
   position: relative;
   z-index: 1
}

.premium-tagline {
   display: inline-flex;
   align-items: center;
   gap: var(--space-sm);
   padding: var(--space-sm) var(--space-xl);
   background: rgba(255, 255, 255, 0.3);
   color: #1A1C1E;
   font-size: 1rem;
   font-weight: 600;
   border-radius: var(--radius-pill);
   margin-top: var(--space-lg)
}

.premium-benefits-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: var(--space-lg);
   margin-bottom: var(--space-3xl)
}

.premium-benefit-card {
   background: rgba(255, 255, 255, 0.85);
   border-radius: var(--radius-lg);
   padding: var(--space-xl);
   text-align: center;
   transition: all var(--duration-normal) var(--easing-default)
}

.premium-benefit-card:hover {
   background: #FFF;
   transform: translateY(-8px);
   box-shadow: var(--shadow-xl)
}

.premium-benefit-icon {
   margin-bottom: var(--space-md)
}

.premium-emoji {
   font-size: 2.5rem;
   display: block
}

.premium-benefit-card h3 {
   color: #1A1C1E;
   font-size: 1rem;
   margin-bottom: var(--space-sm);
   font-weight: 700
}

.premium-benefit-card p {
   color: #6B7280;
   font-size: .875rem;
   line-height: 1.5
}

.premium-cta {
   text-align: center
}

.premium-price-highlight {
   display: inline-flex;
   align-items: baseline;
   gap: var(--space-xs);
   margin-bottom: var(--space-xl);
   padding: var(--space-md) var(--space-2xl);
   background: rgba(255, 255, 255, 0.3);
   border-radius: var(--radius-pill)
}

.premium-price-label {
   color: #1A1C1E;
   font-size: 1rem
}

.premium-price-amount {
   color: #1A1C1E;
   font-family: var(--font-display);
   font-size: 2.5rem;
   font-weight: 800
}

.premium-price-period {
   color: #1A1C1E;
   font-size: 1rem
}

.premium-yearly {
   display: block;
   margin-top: var(--space-md);
   margin-bottom: var(--space-lg);
   text-align: center
}

.premium-yearly-or {
   color: #1A1C1E;
   font-size: .875rem;
   opacity: .8
}

.premium-yearly-price {
   color: #1A1C1E;
   font-size: 1rem;
   font-weight: 600
}

.premium-yearly-saving {
   display: inline-block;
   margin-left: var(--space-sm);
   font-size: .75rem;
   font-weight: 700;
   color: #1A1C1E;
   background: rgba(255, 255, 255, 0.5);
   padding: 2px 10px;
   border-radius: var(--radius-pill)
}

.btn-premium {
   background: #1A1C1E;
   color: white;
   font-weight: 700;
   padding: var(--space-lg) var(--space-3xl);
   font-size: 1.125rem;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
   border: none
}

.btn-premium:hover {
   background: #000;
   color: white;
   transform: translateY(-3px) scale(1.02);
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3)
}

.btn-premium svg {
   color: #FF8F00
}

@media(max-width:1024px) {
   .premium-benefits-grid {
      grid-template-columns: repeat(2, 1fr)
   }
}

@media(max-width:768px) {
   .premium-benefits-grid {
      grid-template-columns: 1fr
   }

   .premium-title {
      font-size: 2rem;
      text-shadow: 2px 2px 0 #E65100, 4px 4px 0 rgba(0, 0, 0, 0.2)
   }

   .premium-header::before {
      font-size: 14rem
   }
}

.pricing {
   background: var(--bg-primary)
}

.pricing-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: var(--space-xl);
   max-width: 900px;
   margin: 0 auto
}

.pricing-card {
   background: var(--bg-surface);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-xl);
   padding: var(--space-2xl);
   position: relative;
   transition: all var(--duration-normal) var(--easing-default)
}

.pricing-card:hover {
   transform: translateY(-8px);
   box-shadow: var(--shadow-xl)
}

.pricing-card-featured {
   border-color: var(--color-primary);
   box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-xl)
}

.pricing-card-featured:hover {
   box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-xl)
}

.pricing-badge {
   position: absolute;
   top: -12px;
   left: 50%;
   transform: translateX(-50%);
   padding: var(--space-xs) var(--space-lg);
   background: var(--gradient-primary);
   color: white;
   font-size: .75rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .05em;
   border-radius: var(--radius-pill)
}

.pricing-header {
   text-align: center;
   margin-bottom: var(--space-xl);
   padding-bottom: var(--space-xl);
   border-bottom: 1px solid var(--border-color)
}

.pricing-name {
   font-size: 1.25rem;
   margin-bottom: var(--space-md)
}

.pricing-price {
   display: flex;
   align-items: baseline;
   justify-content: center;
   gap: var(--space-xs);
   margin-bottom: var(--space-md)
}

.price-currency {
   font-size: 1rem;
   color: var(--text-muted)
}

.price-amount {
   font-family: var(--font-display);
   font-size: 3rem;
   font-weight: 800;
   color: var(--text-primary)
}

.price-period {
   font-size: .875rem;
   color: var(--text-muted)
}

.pricing-yearly {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-sm);
   margin-bottom: var(--space-md);
   flex-wrap: wrap
}

.yearly-or {
   font-size: .8125rem;
   color: var(--text-muted)
}

.yearly-price {
   font-size: .9375rem;
   font-weight: 600;
   color: var(--text-primary)
}

.yearly-saving {
   font-size: .75rem;
   font-weight: 600;
   color: var(--color-success);
   background: rgba(76, 175, 80, 0.1);
   padding: 2px 8px;
   border-radius: var(--radius-pill)
}

.pricing-description {
   font-size: .9375rem
}

.pricing-features {
   list-style: none;
   margin-bottom: var(--space-xl)
}

.pricing-features li {
   display: flex;
   align-items: flex-start;
   gap: var(--space-sm);
   padding: var(--space-sm) 0;
   font-size: .9375rem;
   color: var(--text-secondary)
}

.pricing-features li svg {
   flex-shrink: 0;
   color: var(--color-success);
   margin-top: 2px
}

@media(max-width:768px) {
   .pricing-grid {
      grid-template-columns: 1fr
   }
}

.faq {
   background: var(--bg-primary)
}

.faq-grid {
   max-width: 800px;
   margin: 0 auto
}

.faq-item {
   border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
   margin-bottom: var(--space-md);
   background: var(--bg-surface);
   overflow: hidden
}

.faq-question {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   padding: var(--space-xl);
   font-family: var(--font-sans);
   font-size: 1rem;
   font-weight: 600;
   color: var(--text-primary);
   text-align: left;
   cursor: pointer;
   list-style: none
}

.faq-question::-webkit-details-marker {
   display: none
}

.faq-question:hover {
   color: var(--color-primary)
}

.faq-question svg {
   flex-shrink: 0;
   color: var(--text-muted);
   transition: transform var(--duration-normal) var(--easing-default)
}

.faq-item[open] .faq-question svg {
   transform: rotate(180deg)
}

.faq-answer {
   padding: 0 var(--space-xl) var(--space-xl)
}

.faq-answer p {
   font-size: .9375rem;
   line-height: 1.7
}

.tips-section {
   background: linear-gradient(180deg, var(--bg-surface) 0, var(--bg-primary) 100%)
}

.tips-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: var(--space-xl)
}

.tip-card {
   background: var(--bg-surface);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-lg);
   padding: var(--space-xl);
   display: flex;
   gap: var(--space-lg);
   transition: all var(--duration-normal) var(--easing-default)
}

.tip-card:hover {
   transform: translateY(-8px);
   box-shadow: var(--shadow-xl);
   border-color: var(--border-color)
}

.tip-icon {
   width: 48px;
   height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0
}

.tip-content h3 {
   font-size: 1rem;
   margin-bottom: var(--space-xs)
}

.tip-content p {
   font-size: .875rem;
   line-height: 1.6
}

@media(max-width:768px) {
   .tips-grid {
      grid-template-columns: 1fr
   }

   .tip-card:hover {
      transform: translateY(-4px)
   }
}

.download {
   background: linear-gradient(180deg, var(--bg-primary) 0, var(--bg-surface) 100%);
   padding: var(--space-4xl) 0
}

.download-content {
   text-align: center;
   max-width: 700px;
   margin: 0 auto
}

.download-title {
   margin-bottom: var(--space-lg)
}

.download-subtitle {
   font-size: 1.125rem;
   margin-bottom: var(--space-2xl)
}

.download-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: var(--space-lg);
   max-width: 900px;
   margin: 0 auto var(--space-xl)
}

.download-btn {
   background: var(--text-primary);
   color: var(--bg-primary)
}

.download-btn:hover {
   transform: translateY(-3px);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
   color: var(--bg-primary)
}

[data-theme="dark"] .download-btn {
   background: #FFF;
   color: #1A1C1E
}

[data-theme="dark"] .download-btn:hover {
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
   color: #1A1C1E
}

.download-btn::after {
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent) !important
}

[data-theme="dark"] .download-btn::after {
   background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.3), transparent) !important
}

.download-btn svg {
   flex-shrink: 0
}

.download-btn-text {
   font-size: 1.125rem;
   font-weight: 600
}

.download-coming-soon {
   text-align: center;
   color: var(--text-secondary);
   font-size: 1rem
}

.download-coming-soon p {
   display: inline-flex;
   align-items: center;
   gap: var(--space-sm);
   padding: var(--space-sm) var(--space-lg);
   background: var(--bg-surface);
   border-radius: var(--radius-pill);
   border: 1px solid var(--border-color)
}

@media(max-width:768px) {
   .download-grid {
      grid-template-columns: repeat(2, 1fr)
   }
}

@media(max-width:500px) {
   .download-grid {
      grid-template-columns: 1fr;
      max-width: 280px
   }
}

.footer {
   background: var(--bg-surface);
   border-top: 1px solid var(--border-color);
   padding: var(--space-4xl) 0 var(--space-xl)
}

.footer-grid {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1fr;
   gap: var(--space-2xl);
   margin-bottom: var(--space-2xl)
}

.footer-brand {
   max-width: 300px
}

.footer-logo {
   display: flex;
   align-items: center;
   gap: 6px;
   font-family: 'Nunito', 'Verdana', 'Segoe UI', sans-serif;
   font-size: 20px;
   font-weight: 800;
   font-style: italic;
   color: #1A1C1E;
   margin-bottom: var(--space-lg)
}

.footer-logo:hover {
   color: #1A1C1E
}

.footer-logo .logo-text {
   color: inherit
}

[data-theme="dark"] .footer-logo {
   gap: 4px;
   color: #FFF
}

[data-theme="dark"] .footer-logo:hover {
   color: #FFF
}

.footer-description {
   font-size: .9375rem;
   line-height: 1.7
}

.footer-column h3 {
   font-size: .8rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .05em;
   margin-bottom: var(--space-md);
   color: var(--text-primary)
}

.footer-links {
   list-style: none
}

.footer-links li {
   margin-bottom: var(--space-xs)
}

.footer-links a {
   color: var(--text-secondary);
   font-size: .9375rem;
   transition: color var(--duration-fast) var(--easing-default)
}

.footer-links a:hover {
   color: var(--color-primary)
}

.footer-bottom {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-top: var(--space-xl);
   border-top: 1px solid var(--border-color);
   font-size: .875rem;
   color: var(--text-muted)
}

.footer-bottom span:last-child {
   text-align: right
}

@media(max-width:768px) {
   .footer-grid {
      grid-template-columns: 1fr 1fr
   }

   .footer-brand {
      grid-column: span 2
   }

   .footer-bottom {
      flex-direction: column;
      gap: var(--space-sm)
   }

   .footer-bottom span {
      text-align: center;
      width: 100%
   }
}

@media(max-width:480px) {
   .footer-grid {
      grid-template-columns: 1fr
   }

   .footer-brand {
      grid-column: span 1
   }
}

.lang-flag {
   width: 20px;
   height: 15px;
   object-fit: cover;
   border-radius: 2px
}

.lang-code {
   font-weight: 600
}

.lang-option {
   display: flex;
   align-items: center;
   gap: var(--space-sm);
   width: 100%;
   padding: var(--space-sm) var(--space-md);
   background: none;
   border: none;
   color: var(--text-secondary);
   font-size: .875rem;
   cursor: pointer;
   transition: all var(--duration-fast) var(--easing-default);
   white-space: nowrap;
   text-align: left
}

.lang-option:hover {
   background: var(--bg-secondary);
   color: var(--color-primary)
}

.lang-option.active {
   background: var(--color-primary-light);
   color: var(--color-primary);
   font-weight: 600
}

@media(max-width:500px) {
   .lang-code {
      display: none
   }
}

.site-header {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000
}

.announcement-banner {
   background: var(--gradient-primary);
   color: white;
   text-align: center;
   padding: var(--space-sm) var(--space-lg);
   font-size: .875rem
}

.announcement-banner a {
   color: white;
   text-decoration: underline
}

.site-header .navbar {
   position: relative;
   top: auto
}

body.has-announcement .hero {
   padding-top: 140px
}

@media(max-width:768px) {
   body.has-announcement .hero {
      padding-top: 120px
   }
}

.language-switcher {
   position: relative
}

.language-btn {
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 8px 12px;
   background: var(--bg-surface);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
   cursor: pointer;
   font-size: .875rem;
   font-weight: 500;
   color: var(--text-primary);
   transition: all var(--duration-fast) var(--easing-default)
}

.language-btn:hover {
   border-color: var(--color-primary);
   background: var(--bg-secondary)
}

.lang-flag {
   width: 20px;
   height: 15px;
   object-fit: cover;
   border-radius: 2px
}

.lang-code {
   font-weight: 600
}

.language-dropdown {
   position: absolute;
   top: calc(100%+8px);
   right: 0;
   min-width: 180px;
   background: var(--bg-surface);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-lg);
   opacity: 0;
   visibility: hidden;
   transform: translateY(-10px);
   transition: all var(--duration-fast) var(--easing-default);
   z-index: 1001;
   max-height: 400px;
   overflow-y: auto;
   padding: 4px 0
}

.language-dropdown.show {
   opacity: 1;
   visibility: visible;
   transform: translateY(0)
}

.lang-option {
   display: flex;
   align-items: center;
   gap: 10px;
   width: 100%;
   padding: 10px 16px;
   background: none;
   border: none;
   color: var(--text-primary);
   font-size: .875rem;
   font-family: inherit;
   text-align: left;
   cursor: pointer;
   transition: background var(--duration-fast)
}

.lang-option:hover {
   background: var(--bg-secondary)
}

.lang-option.active {
   background: var(--color-primary-light);
   color: var(--color-primary);
   font-weight: 600
}

@media(max-width:768px) {
   .language-switcher {
      order: -1
   }

   .lang-code {
      display: none
   }
}

@media(hover:none) {

   .btn::after,
   .download-btn::after {
      animation: none
   }
}

.claim-card:active,
.feature-card:active,
.premium-benefit-card:active,
.step-card:active,
.tip-card:active,
.download-btn:active {
   transform: scale(0.98);
   transition: transform var(--duration-fast)
}/* =========================================
   EXTRA PAGES & COMPONENTS CSS (Extracted)
   ========================================= */

/* --- FROM index.html --- */
.comparison-section {
   padding: 80px 0;
   background: var(--bg-surface)
}

.comparison-table-wrapper {
   overflow-x: auto;
   margin: 20px 0
}

.comparison-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 14px
}

.comparison-table th,
.comparison-table td {
   padding: 10px 8px;
   text-align: center;
   border-bottom: 1px solid var(--border-color)
}

.comparison-table th:first-child,
.comparison-table td:first-child {
   text-align: left;
   font-weight: 500;
   position: sticky;
   left: 0;
   background: var(--bg-surface);
   z-index: 1;
   border-right: 1px solid var(--border-color);
   box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
}

.comparison-table thead th {
   background: var(--bg-secondary);
   font-weight: 600;
   color: var(--text-primary);
   position: sticky;
   top: 0;
   z-index: 1;
}

.comparison-table thead th:first-child {
   border-radius: 8px 0 0 0;
   background: var(--bg-secondary);
   z-index: 2;
}

.comparison-table thead th:last-child {
   border-radius: 0 8px 0 0
}

.comparison-table tbody tr:hover {
   background: var(--bg-secondary)
}

.comparison-table .check {
   color: #22c55e;
   font-weight: 700
}

.comparison-table .cross {
   color: #ef4444
}

.comparison-table .partial {
   color: #f59e0b
}

.comparison-table .highlight {
   background: linear-gradient(135deg, #FF8F00, #FFB300);
   color: white;
   font-weight: 700;
   border-radius: 4px
}

.comparison-table .price-row td {
   font-weight: 600;
   background: var(--bg-secondary)
}

.comparison-table .price-row .highlight {
   background: linear-gradient(135deg, #FF8F00, #FFB300);
   color: white
}

.comparison-note {
   font-size: 14px;
   color: var(--text-secondary);
   margin-top: 16px;
   padding: 12px;
   background: var(--bg-secondary);
   border-radius: 8px;
   border-left: 3px solid var(--color-primary)
}

.mobile-scroll-hint {
   display: none;
   text-align: center;
   font-size: 0.85rem;
   color: var(--text-secondary);
   margin-bottom: 8px;
   animation: pulse 2s infinite;
}

@media (max-width:768px) {
   .mobile-scroll-hint {
      display: block;
   }

   .comparison-section {
      padding: 60px 0
   }

   .comparison-table {
      font-size: 12px
   }

   .comparison-table th,
   .comparison-table td {
      padding: 8px 4px
   }
}

.features-grid {
   grid-template-columns: repeat(4, 1fr)
}

@media (max-width: 1024px) {
   .features-grid {
      grid-template-columns: repeat(2, 1fr)
   }
}

.download-grid {
   grid-template-columns: repeat(4, 1fr);
   max-width: 1000px
}

.download-btn {
   height: 48px;
   padding: 0 20px;
   white-space: nowrap;
   min-width: 0
}

.legal-page {
   padding-top: 100px;
   padding-bottom: 60px;
   min-height: 100vh
}

.legal-content {
   max-width: 800px;
   margin: 0 auto;
   padding: 0 var(--space-lg)
}

.legal-content h1 {
   font-size: clamp(1.75rem, 4vw, 2.5rem);
   margin-bottom: var(--space-sm)
}

.legal-last-update {
   font-size: .875rem;
   color: var(--text-muted);
   margin-bottom: var(--space-2xl)
}

.legal-intro {
   font-size: 1rem;
   line-height: 1.7;
   margin-bottom: var(--space-2xl)
}

.legal-content h2 {
   font-size: clamp(1.25rem, 3vw, 1.5rem);
   margin-top: var(--space-2xl);
   margin-bottom: var(--space-lg);
   padding-bottom: var(--space-sm);
   border-bottom: 1px solid var(--border-color)
}

.legal-content h3 {
   font-size: 1.125rem;
   margin-top: var(--space-xl);
   margin-bottom: var(--space-sm)
}

.legal-content p {
   font-size: .9375rem;
   line-height: 1.7;
   margin-bottom: var(--space-lg)
}

.legal-content ul {
   list-style: none;
   padding: 0;
   margin-bottom: var(--space-lg)
}

.legal-content ul li {
   position: relative;
   padding-left: 1.5em;
   margin-bottom: var(--space-sm);
   font-size: .9375rem;
   line-height: 1.7;
   color: var(--text-secondary)
}

.legal-content ul li::before {
   content: "";
   position: absolute;
   left: 0;
   top: .6em;
   width: 6px;
   height: 6px;
   background: var(--color-primary);
   border-radius: 50%
}

.legal-content table {
   width: 100%;
   border-collapse: collapse;
   margin-bottom: var(--space-xl);
   font-size: .9375rem
}

.legal-content table th,
.legal-content table td {
   padding: var(--space-md) var(--space-lg);
   text-align: left;
   border-bottom: 1px solid var(--border-color);
   color: var(--text-secondary)
}

.legal-content table th {
   background: var(--bg-secondary);
   font-weight: 600;
   color: var(--text-primary)
}

.legal-content a {
   color: var(--color-primary);
   text-decoration: underline
}

.legal-content a:hover {
   color: var(--color-primary-dark)
}

.legal-back {
   display: inline-flex;
   align-items: center;
   gap: var(--space-sm);
   margin-bottom: var(--space-2xl);
   font-size: .9375rem;
   font-weight: 500;
   color: var(--text-secondary);
   text-decoration: none
}

.legal-back:hover {
   color: var(--color-primary)
}

.legal-footer-note {
   margin-top: var(--space-2xl);
   padding-top: var(--space-xl);
   border-top: 1px solid var(--border-color);
   font-size: .8125rem;
   font-style: italic;
   color: var(--text-muted)
}

@media (max-width:768px) {
   .legal-page {
      padding-top: 80px
   }

   .legal-content table {
      display: block;
      overflow-x: auto
   }
}

/* --- FROM pages/help/it.html --- */
.standalone-page {
   padding-top: 100px;
   padding-bottom: 60px;
   min-height: 100vh;
   background: var(--bg-surface);
}

.standalone-page h1 {
   font-size: 1.6rem;
}

.standalone-page h2 {
   font-size: 1.2rem;
}

.help-search-container {
   max-width: 600px;
   margin: 0 auto 40px;
}

.help-search-box {
   position: relative;
   border-radius: 30px;
   background: var(--bg-surface);
   border: 2px solid var(--border-color);
   display: flex;
   align-items: center;
   padding: 4px 16px;
   transition: border-color 0.3s ease;
}

.help-search-box:focus-within {
   border-color: var(--color-primary);
}

.help-search-icon {
   color: var(--text-secondary);
   margin-right: 12px;
}

.help-search-input {
   border: none;
   background: transparent;
   padding: 12px 0;
   width: 100%;
   font-size: 1rem;
   color: var(--text-primary);
   outline: none;
}

.help-search-clear {
   background: none;
   border: none;
   color: var(--text-secondary);
   cursor: pointer;
   padding: 8px;
   border-radius: 50%;
   display: none;
}

.help-search-clear.visible {
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--bg-secondary);
}

.help-toc {
   max-width: 800px;
   margin: 0 auto 32px;
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-lg);
   padding: 24px 32px;
}

.help-toc h3 {
   margin: 0 0 16px;
   font-size: 18px;
   color: var(--text-primary);
}

.help-toc-list {
   margin: 0;
   padding-left: 24px;
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.help-toc-list li {
   font-size: 14px;
   line-height: 1.5;
   color: var(--text-secondary);
}

.help-toc-list li::marker {
   color: var(--color-primary);
   font-weight: 600;
}

.help-toc-list a {
   color: var(--text-secondary);
   text-decoration: none;
   transition: color var(--duration-fast);
}

.help-toc-list a:hover {
   color: var(--color-primary);
}

.help-toc {
   display: none;
}

.help-accordion-controls {
   max-width: 800px;
   margin: 0 auto 16px;
   display: flex;
   gap: 12px;
   justify-content: flex-end;
}

.help-control-btn {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 8px 16px;
   font-size: 14px;
   font-weight: 500;
   color: var(--text-secondary);
   background: var(--bg-surface);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
   cursor: pointer;
   transition: all 0.2s ease;
}

.help-control-btn:hover {
   border-color: var(--color-primary);
   color: var(--color-primary);
}

.help-control-btn svg {
   flex-shrink: 0;
}

.help-content-list {
   max-width: 800px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.help-item {
   background: var(--bg-surface);
   border-radius: var(--radius-lg);
   border: 1px solid var(--border-color);
   overflow: hidden;
}

.help-item.hidden {
   display: none !important;
}

.help-item-title {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   padding: 16px 20px;
   font-size: 1rem;
   font-weight: 600;
   color: var(--text-primary);
   cursor: pointer;
   user-select: none;
   transition: background 0.2s ease;
   margin: 0;
}

.help-item-title:hover {
   background: var(--bg-secondary);
}

.help-item-title::after {
   content: "";
   flex-shrink: 0;
   width: 20px;
   height: 20px;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: center;
   background-size: 20px;
   transition: transform 0.2s ease;
}

.help-item.expanded .help-item-title::after {
   transform: rotate(180deg);
}

.help-item-content {
   padding: 0 20px 0;
   font-size: 0.9375rem;
   color: var(--text-secondary);
   line-height: 1.6;
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.3s ease, padding 0.3s ease;
}

.help-item.expanded .help-item-content {
   padding: 0 20px 20px;
   max-height: 2000px;
}

.help-topics-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 16px;
   max-width: 800px;
   margin: 0 auto 40px;
}

.help-topic-card {
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
   border-radius: 12px;
   padding: 16px;
   display: flex;
   align-items: center;
   gap: 12px;
   text-decoration: none;
   color: var(--text-primary);
   font-weight: 500;
   transition: all 0.2s ease;
}

.help-topic-card:hover {
   border-color: var(--color-primary);
   background: var(--color-primary-light);
}

.help-topic-card svg {
   color: var(--color-primary);
}

/* --- FROM pages/contact/it.html --- */
.contact-form {
   background: var(--bg-surface);
   border-radius: var(--radius-lg);
   padding: 32px;
   box-shadow: var(--shadow-md);
   margin-top: 24px;
}

.contact-form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
}

@media(max-width:600px) {
   .contact-form-row {
      grid-template-columns: 1fr;
   }
}

.contact-field {
   margin-bottom: 20px;
}

.contact-field label {
   display: block;
   font-weight: 500;
   margin-bottom: 8px;
   color: var(--text-primary);
   font-size: 14px;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
   width: 100%;
   padding: 12px 16px;
   border: 2px solid var(--border-color);
   border-radius: var(--radius-md);
   font-size: 15px;
   background: var(--bg-primary);
   color: var(--text-primary);
   transition: border-color var(--duration-fast);
   font-family: inherit;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
   outline: none;
   border-color: var(--color-primary);
}

.contact-field textarea {
   min-height: 120px;
   resize: vertical;
}

.contact-field select {
   cursor: pointer;
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 12px center;
   padding-right: 40px;
}

.contact-field-hint {
   font-size: 12px;
   color: var(--text-muted);
   margin-top: 4px;
}

.contact-screenshot-wrapper {
   position: relative;
}

.contact-screenshot-btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 10px 16px;
   background: var(--bg-secondary);
   border: 2px dashed var(--border-color);
   border-radius: var(--radius-md);
   color: var(--text-secondary);
   font-size: 14px;
   cursor: pointer;
   transition: all var(--duration-fast);
}

.contact-screenshot-btn:hover {
   border-color: var(--color-primary);
   color: var(--color-primary);
}

.contact-screenshot-preview {
   display: none;
   margin-top: 12px;
   position: relative;
}

.contact-screenshot-preview.visible {
   display: block;
}

.contact-screenshot-preview img {
   max-width: 200px;
   max-height: 150px;
   border-radius: var(--radius-sm);
   border: 1px solid var(--border-color);
}

.contact-screenshot-remove {
   position: absolute;
   top: -8px;
   left: 192px;
   background: var(--color-error);
   color: white;
   border: none;
   border-radius: 50%;
   width: 24px;
   height: 24px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
}

.user-verify-wrapper {
   margin-bottom: 20px;
}

.user-verify-label {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

.user-verify-question {
   display: flex;
   align-items: center;
   gap: 12px;
   flex-wrap: wrap;
}

.user-verify-prefix {
   font-size: 14px;
   font-weight: 500;
   color: var(--text-secondary);
}

.user-verify-question span {
   font-size: 18px;
   font-weight: 600;
   color: var(--text-primary);
}

.user-verify-input {
   width: 80px !important;
   padding: 10px 12px !important;
   text-align: center;
   font-size: 18px !important;
   font-weight: 600;
}

.user-verify-input.valid {
   border-color: var(--color-success) !important;
   background: rgba(34, 197, 94, 0.05);
}

.user-verify-input.invalid {
   border-color: var(--color-error) !important;
   background: rgba(220, 53, 69, 0.05);
}

.contact-submit {
   width: 100%;
   padding: 14px 24px;
   background: var(--gradient-primary);
   border: none;
   border-radius: var(--radius-md);
   color: white;
   font-size: 16px;
   font-weight: 600;
   cursor: pointer;
   transition: transform var(--duration-fast), box-shadow var(--duration-fast), opacity 0.2s;
}

.contact-submit:hover:not(:disabled) {
   transform: translateY(-1px);
   box-shadow: var(--shadow-lg);
}

.contact-submit:disabled {
   opacity: 0.5;
   cursor: not-allowed;
   transform: none;
}

.contact-status {
   margin-top: 16px;
   padding: 12px 16px;
   border-radius: var(--radius-md);
   font-size: 14px;
   display: none;
}

.contact-status.visible {
   display: block;
}

.contact-status.success {
   background: rgba(25, 133, 84, 0.1);
   border: 1px solid var(--color-success);
   color: var(--color-success);
}

.contact-status.error {
   background: rgba(220, 53, 69, 0.1);
   border: 1px solid var(--color-error);
   color: var(--color-error);
}

.contact-success-panel {
   text-align: center;
   padding: 48px 32px;
   background: var(--bg-card);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-md);
}

.contact-success-icon {
   width: 72px;
   height: 72px;
   margin: 0 auto 24px;
   background: rgba(25, 133, 84, 0.1);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 36px;
   color: var(--color-success);
   font-weight: 700;
}

.contact-success-panel h2 {
   margin: 0 0 12px;
   font-size: 24px;
   color: var(--text-primary);
}

.contact-success-panel p {
   margin: 0 0 28px;
   color: var(--text-secondary);
   font-size: 16px;
}

.contact-alt {
   margin-top: 32px;
   padding-top: 24px;
   border-top: 1px solid var(--border-color);
   text-align: center;
   color: var(--text-secondary);
}

.contact-alt a {
   color: var(--color-primary);
   text-decoration: none;
}

.contact-alt a:hover {
   text-decoration: underline;
}

@media(max-width:768px) {
   .contact-form {
      padding: 24px;
   }
}