:root{--brand-primary: #FF6B9D;--brand-secondary: #C77DFF;--brand-tertiary: #FFB5A7;--success: #06D6A0;--success-light: #B8F3E3;--success-dark: #048A67;--warning: #FFD60A;--warning-light: #FFF4CC;--warning-dark: #B39700;--error: #EF476F;--error-light: #FFD4DF;--error-dark: #C7244D;--info: #4ECDC4;--info-light: #C4F1EF;--info-dark: #2A9D96;--gray-50: #FAFAFA;--gray-100: #F5F5F5;--gray-200: #EEEEEE;--gray-300: #E0E0E0;--gray-400: #BDBDBD;--gray-500: #9E9E9E;--gray-600: #757575;--gray-700: #616161;--gray-800: #424242;--gray-900: #212121;--bg-primary: #FFFCF9;--bg-secondary: #FFF5F0;--bg-tertiary: #FFEDE5;--surface: #FFFFFF;--surface-raised: #FEFEFE;--surface-overlay: rgba(255, 255, 255, .9);--period-predicted: #FFD5DC;--period-confirmed: #FFB8C1;--period-active: #FF9AA2;--period-1: #E63946;--period-2: #FF6B9D;--period-3: #FFB3C6;--period-4: #FFE5EC;--period-heavy: var(--period-1);--period-medium: var(--period-2);--period-light: var(--period-3);--ovulation-predicted: #E8D5F2;--fertile-window: #F3E5F9;--fertile-peak: #9D4EDD;--fertile-high: #C77DFF;--fertile-moderate: #E0AAFF;--fertile-low: #F3E5FF;--fertile-peak-legacy: #C9A8D5;--fertile-moderate-legacy: #E8D5F2;--fertile-light: var(--fertile-low);--cramps-severe: #E63946;--cramps-moderate: #FF6B9D;--cramps-mild: #FFB3C6;--cramps-indicator: #FFE4CC;--mood-positive: #06D6A0;--mood-neutral: #FFD60A;--mood-negative: #EF476F;--current-day: #D4E4F7;--accent-primary: #FF6B9D;--accent-secondary: #C77DFF;--accent-tertiary: #4ECDC4;--text-primary: #3D3D3D;--text-secondary: #7A7A7A;--text-tertiary: #B0B0B0;--text-disabled: #D0D0D0;--text-inverse: #FFFFFF;--border-light: #F0F0F0;--border-medium: #E0E0E0;--border-strong: #BDBDBD;--border-accent: rgba(255, 107, 157, .3);--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .25);--shadow-soft: var(--shadow-sm);--shadow-medium: var(--shadow-md);--shadow-strong: var(--shadow-xl);--shadow-pink-sm: 0 4px 12px rgba(255, 107, 157, .15);--shadow-pink-md: 0 8px 24px rgba(255, 107, 157, .2);--shadow-pink-lg: 0 16px 48px rgba(255, 107, 157, .25);--shadow-purple-sm: 0 4px 12px rgba(199, 125, 255, .15);--shadow-purple-md: 0 8px 24px rgba(199, 125, 255, .2);--shadow-purple-lg: 0 16px 48px rgba(199, 125, 255, .25);--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, .06);--shadow-inner-lg: inset 0 4px 8px 0 rgba(0, 0, 0, .1);--gradient-sunrise: linear-gradient(135deg, #FF6B9D 0%, #FFD93D 100%);--gradient-lavender: linear-gradient(135deg, #C77DFF 0%, #FF6B9D 100%);--gradient-ocean: linear-gradient(135deg, #4ECDC4 0%, #556FB5 100%);--gradient-peach: linear-gradient(135deg, #FFB5A7 0%, #FFC6FF 100%);--gradient-mint: linear-gradient(135deg, #06D6A0 0%, #4ECDC4 100%);--gradient-sunset: linear-gradient(135deg, #FF6B9D 0%, #C77DFF 50%, #4ECDC4 100%);--gradient-period: linear-gradient(135deg, var(--period-1) 0%, var(--period-2) 100%);--gradient-fertile: linear-gradient(135deg, var(--fertile-peak) 0%, var(--fertile-high) 100%);--glass-light: rgba(255, 255, 255, .7);--glass-medium: rgba(255, 255, 255, .5);--glass-dark: rgba(0, 0, 0, .3);--glass-blur: blur(20px);--glass-blur-sm: blur(10px);--glass-blur-lg: blur(30px);--font-primary: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-secondary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "Courier New", monospace;--font-family: var(--font-primary);--text-xs: clamp(.7rem, .5vw + .6rem, .75rem);--text-sm: clamp(.8rem, .6vw + .7rem, .875rem);--text-base: clamp(.9rem, .8vw + .8rem, 1rem);--text-lg: clamp(1rem, 1vw + .85rem, 1.125rem);--text-xl: clamp(1.1rem, 1.2vw + .9rem, 1.25rem);--text-2xl: clamp(1.3rem, 1.5vw + 1rem, 1.5rem);--text-3xl: clamp(1.6rem, 2vw + 1.2rem, 2rem);--text-4xl: clamp(2rem, 3vw + 1.5rem, 2.5rem);--text-5xl: clamp(2.5rem, 4vw + 2rem, 3rem);--weight-light: 300;--weight-normal: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--weight-extrabold: 800;--weight-black: 900;--leading-none: 1;--leading-tight: 1.25;--leading-snug: 1.375;--leading-normal: 1.5;--leading-relaxed: 1.625;--leading-loose: 2;--tracking-tighter: -.05em;--tracking-tight: -.025em;--tracking-normal: 0;--tracking-wide: .025em;--tracking-wider: .05em;--tracking-widest: .1em;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-2xl: 24px;--radius-full: 9999px;--ease-in-expo: cubic-bezier(.95, .05, .795, .035);--ease-out-expo: cubic-bezier(.19, 1, .22, 1);--ease-in-out-expo: cubic-bezier(.87, 0, .13, 1);--ease-bounce: cubic-bezier(.68, -.55, .265, 1.55);--ease-smooth: cubic-bezier(.4, 0, .2, 1);--duration-instant: .1s;--duration-fast: .15s;--duration-normal: .25s;--duration-slow: .35s;--duration-slower: .5s;--duration-slowest: .7s;--transition-fast: var(--duration-fast) var(--ease-smooth);--transition-base: var(--duration-normal) var(--ease-smooth);--transition-slow: var(--duration-slow) var(--ease-smooth);--transition-all: all var(--duration-normal) var(--ease-smooth);--transition-colors: color var(--duration-fast) var(--ease-smooth), background-color var(--duration-fast) var(--ease-smooth), border-color var(--duration-fast) var(--ease-smooth);--transition-transform: transform var(--duration-normal) var(--ease-out-expo);--transition-opacity: opacity var(--duration-fast) var(--ease-smooth);--transition-shadow: box-shadow var(--duration-normal) var(--ease-smooth);--button-radius: var(--radius-lg);--button-padding: var(--spacing-md) var(--spacing-lg);--button-shadow: var(--shadow-sm);--button-shadow-hover: var(--shadow-md);--card-radius: var(--radius-2xl);--card-padding: var(--spacing-lg);--card-shadow: var(--shadow-md);--card-shadow-hover: var(--shadow-xl);--input-radius: var(--radius-md);--input-padding: var(--spacing-md);--input-border: 2px solid var(--border-medium);--input-border-focus: 2px solid var(--accent-primary);--modal-radius: var(--radius-3xl);--modal-shadow: var(--shadow-2xl);--modal-backdrop: rgba(0, 0, 0, .4);--calendar-day-size: 64px;--calendar-day-radius: var(--radius-lg);--calendar-gap: 6px}[data-theme=dark]{--brand-primary: #FF6B9D;--brand-secondary: #C77DFF;--brand-tertiary: #FFB5A7;--success: #06D6A0;--success-light: #1B3D34;--success-dark: #0AFFBB;--warning: #FFD60A;--warning-light: #3D3618;--warning-dark: #FFE566;--error: #EF476F;--error-light: #3D1D26;--error-dark: #FF7A9A;--info: #4ECDC4;--info-light: #1E3D3B;--info-dark: #7EDDD6;--gray-50: #1A1A1A;--gray-100: #212121;--gray-200: #2D2D2D;--gray-300: #3D3D3D;--gray-400: #525252;--gray-500: #6B6B6B;--gray-600: #8A8A8A;--gray-700: #A8A8A8;--gray-800: #C7C7C7;--gray-900: #E8E8E8;--bg-primary: #0D0D0D;--bg-secondary: #1A1A1A;--bg-tertiary: #242424;--surface: #1E1E1E;--surface-raised: #2D2D2D;--surface-overlay: rgba(30, 30, 30, .95);--period-predicted: #6B4F54;--period-confirmed: #8B5F65;--period-active: #9B6B70;--period-1: #8B3A3A;--period-2: #8B5F65;--period-3: #6B4F54;--period-4: #4A3538;--period-heavy: var(--period-1);--period-medium: var(--period-2);--period-light: var(--period-3);--ovulation-predicted: #6B5B7A;--fertile-window: #5A4F66;--fertile-peak: #6B5B7A;--fertile-high: #5A4F66;--fertile-moderate: #4A3F52;--fertile-low: #3A2F42;--fertile-peak-legacy: #6B5B7A;--fertile-moderate-legacy: #4A3F52;--fertile-light: var(--fertile-low);--cramps-severe: #8B3A3A;--cramps-moderate: #8B5F65;--cramps-mild: #6B4F54;--cramps-indicator: #7A6B5A;--mood-positive: #048A67;--mood-neutral: #B39700;--mood-negative: #C7244D;--current-day: #4A5F7A;--accent-primary: #FF6B9D;--accent-secondary: #C77DFF;--accent-tertiary: #4ECDC4;--text-primary: #FFFFFF;--text-secondary: #B3B3B3;--text-tertiary: #666666;--text-disabled: #4D4D4D;--text-inverse: #0D0D0D;--border-light: #2D2D2D;--border-medium: #3D3D3D;--border-strong: #525252;--border-accent: rgba(255, 107, 157, .3);--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .3);--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .4), 0 1px 2px -1px rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .5), 0 2px 4px -2px rgba(0, 0, 0, .4);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .6), 0 4px 6px -4px rgba(0, 0, 0, .5);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .7), 0 8px 10px -6px rgba(0, 0, 0, .6);--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .8);--shadow-soft: var(--shadow-sm);--shadow-medium: var(--shadow-md);--shadow-strong: var(--shadow-xl);--shadow-pink-sm: 0 4px 12px rgba(255, 107, 157, .25);--shadow-pink-md: 0 8px 24px rgba(255, 107, 157, .35);--shadow-pink-lg: 0 16px 48px rgba(255, 107, 157, .4);--shadow-purple-sm: 0 4px 12px rgba(199, 125, 255, .25);--shadow-purple-md: 0 8px 24px rgba(199, 125, 255, .35);--shadow-purple-lg: 0 16px 48px rgba(199, 125, 255, .4);--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, .3);--shadow-inner-lg: inset 0 4px 8px 0 rgba(0, 0, 0, .4);--gradient-sunrise: linear-gradient(135deg, #FF6B9D 0%, #FFD93D 100%);--gradient-lavender: linear-gradient(135deg, #C77DFF 0%, #FF6B9D 100%);--gradient-ocean: linear-gradient(135deg, #4ECDC4 0%, #556FB5 100%);--gradient-peach: linear-gradient(135deg, #FFB5A7 0%, #FFC6FF 100%);--gradient-mint: linear-gradient(135deg, #06D6A0 0%, #4ECDC4 100%);--gradient-sunset: linear-gradient(135deg, #FF6B9D 0%, #C77DFF 50%, #4ECDC4 100%);--gradient-period: linear-gradient(135deg, var(--period-1) 0%, var(--period-2) 100%);--gradient-fertile: linear-gradient(135deg, var(--fertile-peak) 0%, var(--fertile-high) 100%);--glass-light: rgba(30, 30, 30, .7);--glass-medium: rgba(30, 30, 30, .5);--glass-dark: rgba(0, 0, 0, .6);--glass-blur: blur(20px);--glass-blur-sm: blur(10px);--glass-blur-lg: blur(30px);--glow-pink: 0 0 20px rgba(255, 107, 157, .4);--glow-purple: 0 0 20px rgba(199, 125, 255, .4);--glow-teal: 0 0 20px rgba(78, 205, 196, .4);--glow-accent: 0 0 30px var(--brand-primary)}html{transition:background-color var(--transition-slow)}body,.app-header,.calendar-day,.prediction-card,.chart-card,.modal-content,.btn,.nav-btn,.theme-toggle{transition:background-color var(--transition-slow),color var(--transition-slow),border-color var(--transition-slow),box-shadow var(--transition-slow)}.no-transition,.no-transition *{transition:none!important}.elevation-0{box-shadow:none}.elevation-1{box-shadow:var(--shadow-sm)}.elevation-2{box-shadow:var(--shadow-md)}.elevation-3{box-shadow:var(--shadow-lg)}.elevation-4{box-shadow:var(--shadow-xl)}.elevation-5{box-shadow:var(--shadow-2xl)}.glass{background:var(--glass-light);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid rgba(255,255,255,.2)}.glass-strong{background:var(--glass-medium);-webkit-backdrop-filter:var(--glass-blur-lg);backdrop-filter:var(--glass-blur-lg)}.gradient-lavender{background:var(--gradient-lavender)}.gradient-sunrise{background:var(--gradient-sunrise)}.gradient-ocean{background:var(--gradient-ocean)}.gradient-peach{background:var(--gradient-peach)}.gradient-mint{background:var(--gradient-mint)}.gradient-sunset{background:var(--gradient-sunset)}.gradient-text{background:var(--gradient-lavender);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}[data-theme=dark] .glow-pink{box-shadow:var(--glow-pink)}[data-theme=dark] .glow-purple{box-shadow:var(--glow-purple)}[data-theme=dark] .glow-teal{box-shadow:var(--glow-teal)}[data-theme=dark] .glow-accent{box-shadow:var(--glow-accent)}.heading-1{font-size:var(--text-5xl);font-weight:var(--weight-black);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight)}.heading-2{font-size:var(--text-4xl);font-weight:var(--weight-extrabold);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight)}.heading-3{font-size:var(--text-3xl);font-weight:var(--weight-bold);line-height:var(--leading-snug)}.heading-4{font-size:var(--text-2xl);font-weight:var(--weight-semibold);line-height:var(--leading-snug)}.heading-5{font-size:var(--text-xl);font-weight:var(--weight-semibold);line-height:var(--leading-normal)}.heading-6{font-size:var(--text-lg);font-weight:var(--weight-medium);line-height:var(--leading-normal)}.body-large{font-size:var(--text-lg);line-height:var(--leading-relaxed)}.body-base{font-size:var(--text-base);line-height:var(--leading-normal)}.body-small{font-size:var(--text-sm);line-height:var(--leading-normal)}.label{font-size:var(--text-xs);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:var(--tracking-wider)}.caption{font-size:var(--text-xs);color:var(--text-tertiary);line-height:var(--leading-normal)}.mono{font-family:var(--font-mono);font-size:.9em}.text-secondary-font{font-family:var(--font-secondary)}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;font-size:16px;overflow-x:hidden;width:100%}body{font-family:var(--font-primary);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;overflow-x:hidden;width:100%;max-width:100vw;transition:background-color .3s ease,color .3s ease}.container{max-width:1200px;width:100%;margin:0 auto;padding:0 2rem;box-sizing:border-box}.nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--glass-light);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--border-light);padding:1rem 0;transition:all .3s ease}.nav-container{max-width:1200px;margin:0 auto;padding:0 2rem;display:flex;justify-content:space-between;align-items:center;position:relative}.nav-logo{display:flex;align-items:center;gap:.75rem;font-size:1.5rem;font-weight:var(--weight-bold);color:var(--brand-primary);text-decoration:none;cursor:pointer;z-index:1001}.logo-icon{width:32px;height:32px;color:var(--brand-primary)}.logo-text{background:var(--gradient-lavender);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.nav-links{display:flex;align-items:center;gap:2rem;list-style:none}.nav-links li{list-style:none}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.nav-link{color:var(--text-secondary);text-decoration:none;font-weight:var(--weight-medium);transition:color .2s ease;position:relative}.nav-links.active .nav-link{font-size:var(--text-lg);padding:.5rem 0;border-bottom:1px solid var(--border-light)}.nav-links.active .nav-link:last-child{border-bottom:none}.nav-links.active .theme-toggle{margin-top:1rem}.nav-links.active .btn{width:100%;justify-content:center;margin-top:1rem}.nav-link:hover{color:var(--brand-primary)}.nav-link:after{content:"";position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--gradient-lavender);transition:width .3s ease}.nav-link:hover:after{width:100%}.app-button{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:var(--gradient-lavender);color:#fff;border-radius:var(--radius-lg);text-decoration:none;font-weight:var(--weight-semibold);transition:all .3s ease;box-shadow:var(--shadow-pink-sm)}.app-button:hover{box-shadow:var(--shadow-pink-md);transform:translateY(-2px)}.app-subtitle{display:none}.theme-toggle{background:transparent;border:2px solid var(--border-medium);width:40px;height:40px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;color:var(--text-primary)}.theme-toggle:hover{border-color:var(--brand-primary);transform:rotate(15deg)}.theme-icon{width:20px;height:20px}.theme-icon.moon,[data-theme=dark] .theme-icon.sun{display:none}[data-theme=dark] .theme-icon.moon{display:block}.mobile-menu-toggle{display:none;flex-direction:column;gap:5px;background:transparent;border:none;cursor:pointer;padding:.5rem;z-index:1001;position:relative}.mobile-menu-toggle span{width:26px;height:3px;background:var(--text-primary);border-radius:2px;transition:all .3s cubic-bezier(.4,0,.2,1);display:block}.mobile-menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(6px,6px)}.mobile-menu-toggle.active span:nth-child(2){opacity:0;transform:scale(0)}.mobile-menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}.mobile-menu-backdrop{position:fixed;inset:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:998}.mobile-menu-backdrop.active{opacity:1;pointer-events:auto}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:var(--radius-lg);font-weight:var(--weight-semibold);text-decoration:none;border:none;cursor:pointer;transition:all .3s ease;font-family:var(--font-primary);font-size:var(--text-base);white-space:nowrap}.btn-primary{background:var(--gradient-lavender);color:#fff;box-shadow:var(--shadow-pink-sm)}.btn-primary:hover{box-shadow:var(--shadow-pink-md);transform:translateY(-2px)}.btn-secondary{background:var(--surface);color:var(--text-primary);border:2px solid var(--border-medium)}.btn-secondary:hover{border-color:var(--brand-primary);box-shadow:var(--shadow-sm)}.btn-large{padding:1rem 2rem;font-size:var(--text-lg)}.btn svg{width:20px;height:20px}.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:8rem 2rem 4rem;overflow:hidden}.hero-background{position:absolute;inset:0;background:var(--gradient-sunset);opacity:.08;animation:gradientShift 15s ease infinite}@keyframes gradientShift{0%,to{background:var(--gradient-sunset)}25%{background:var(--gradient-lavender)}50%{background:var(--gradient-ocean)}75%{background:var(--gradient-peach)}}.hero-container{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 2rem;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}.hero-content{animation:fadeInUp .8s ease}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.hero-title{font-size:clamp(2.5rem,6vw,4.5rem);font-weight:var(--weight-black);line-height:1.1;margin-bottom:1.5rem;letter-spacing:-.02em}.gradient-text{background:var(--gradient-lavender);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline-block;animation:gradientFlow 8s ease infinite;background-size:200% 200%}@keyframes gradientFlow{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.hero-subtitle{font-size:var(--text-xl);color:var(--text-secondary);margin-bottom:2.5rem;line-height:1.6}.hero-cta{display:flex;gap:1rem;margin-bottom:1.5rem;margin-top:2.5rem;flex-wrap:wrap}.hero-trust{display:flex;gap:2rem;flex-wrap:wrap;margin-top:2rem;margin-bottom:1rem}.trust-item{font-size:var(--text-sm);color:var(--text-secondary);font-weight:500}.hero-badges{display:flex;gap:1.5rem;flex-wrap:wrap}.badge{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--surface);border:1px solid var(--border-light);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-secondary)}.badge svg{width:16px;height:16px;color:var(--brand-primary)}.hero-visual{position:relative;animation:fadeInUp .8s ease .2s backwards}.phone-mockup{position:relative;max-width:350px;margin:0 auto;filter:drop-shadow(0 20px 60px rgba(255,107,157,.3))}.phone-frame{background:var(--gray-900);border-radius:3rem;padding:1rem;border:8px solid var(--gray-800);position:relative}[data-theme=dark] .phone-frame{background:var(--gray-100);border-color:var(--gray-200)}.phone-notch{position:absolute;top:1rem;left:50%;transform:translate(-50%);width:120px;height:24px;background:var(--gray-800);border-radius:0 0 1rem 1rem;z-index:10}[data-theme=dark] .phone-notch{background:var(--gray-200)}.phone-screen{background:var(--bg-primary);border-radius:2.2rem;overflow:hidden;aspect-ratio:9/19.5}.app-preview{padding:2rem 1rem 1rem;height:100%;display:flex;flex-direction:column;gap:1.5rem}.preview-header h3{text-align:center;font-size:1.25rem;color:var(--brand-primary);font-weight:var(--weight-bold)}.preview-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:1rem;background:var(--surface);border-radius:var(--radius-lg)}.preview-day{aspect-ratio:1;background:var(--gray-100);border-radius:var(--radius-sm);transition:all .3s ease}[data-theme=dark] .preview-day{background:var(--gray-200)}.preview-day.period-day{background:linear-gradient(135deg,var(--period-2),var(--period-1));animation:periodPulse 2s ease infinite}.preview-day.fertile-day{background:linear-gradient(135deg,var(--fertile-high),var(--fertile-peak));animation:fertilePulse 2s ease infinite .5s}.preview-day.today{border:2px solid var(--brand-primary);box-shadow:0 0 12px #ff6b9d66;animation:todayGlow 2s ease infinite}@keyframes periodPulse{0%,to{opacity:1}50%{opacity:.8}}@keyframes fertilePulse{0%,to{opacity:1}50%{opacity:.7}}@keyframes todayGlow{0%,to{box-shadow:0 0 12px #ff6b9d66}50%{box-shadow:0 0 20px #ff6b9d99}}.preview-stats{display:flex;justify-content:space-around;padding:1rem;background:var(--surface);border-radius:var(--radius-lg)}.stat-item{display:flex;flex-direction:column;align-items:center;gap:.25rem}.stat-value{font-size:1.5rem;font-weight:var(--weight-bold);background:var(--gradient-lavender);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.stat-label{font-size:.7rem;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em}.scroll-indicator{position:absolute;bottom:2rem;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--text-tertiary);font-size:var(--text-sm);animation:bounce 2s ease infinite}@keyframes bounce{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-10px)}}.scroll-indicator svg{width:24px;height:24px}@media(min-width:1025px){.scroll-indicator{display:none}}.section-header{text-align:center;margin-bottom:4rem}.section-title{font-size:clamp(2rem,4vw,3rem);font-weight:var(--weight-extrabold);margin-bottom:1rem;color:var(--text-primary)}.section-subtitle{font-size:var(--text-lg);color:var(--text-secondary);max-width:600px;margin:0 auto}section{padding:6rem 2rem}section h2{text-align:center;margin-bottom:3rem;font-weight:var(--weight-extrabold);font-size:clamp(2rem,4vw,3rem);background:var(--gradient-lavender);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}@media(max-width:768px){section{padding:4rem 1.5rem}section h2{margin-bottom:2rem}}.privacy-section{padding:6rem 2rem;background:var(--surface)}.privacy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2.5rem;margin-bottom:4rem;max-width:1200px;margin-left:auto;margin-right:auto}@media(max-width:768px){.privacy-section{padding:4rem 1.5rem}.privacy-grid{grid-template-columns:1fr;gap:1.5rem}}.privacy-card{padding:2rem;background:var(--bg-primary);border:2px solid var(--border-light);border-radius:var(--radius-2xl);transition:all .3s ease;display:flex;flex-direction:column;align-items:center;text-align:center}.privacy-card:hover{border-color:var(--brand-primary);box-shadow:var(--shadow-pink-sm);transform:translateY(-4px)}.privacy-icon{width:48px;height:48px;margin:0 auto 1.5rem;color:var(--brand-primary);display:flex;align-items:center;justify-content:center;font-size:2.5rem}.privacy-icon svg{width:100%;height:100%}.privacy-card h3{font-size:var(--text-xl);font-weight:var(--weight-bold);margin-bottom:.75rem;color:var(--text-primary)}.privacy-card p{color:var(--text-secondary);line-height:1.6}.privacy-visual{margin-top:4rem}.architecture-diagram{display:flex;justify-content:center;align-items:center;gap:2rem;padding:4rem 3rem;background:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 100%);border-radius:var(--radius-2xl);border:2px solid var(--border-light);box-shadow:var(--shadow-md)}.diagram-item{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2.5rem 2rem;background:var(--surface);border-radius:var(--radius-xl);border:3px solid var(--success);min-width:180px;box-shadow:var(--shadow-sm);transition:all .3s ease}.diagram-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.diagram-item.disabled{border-color:var(--error);opacity:.7;position:relative}.diagram-item.disabled:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 45%,var(--error) 48%,var(--error) 52%,transparent 55%);border-radius:var(--radius-xl);opacity:.15;pointer-events:none}.diagram-icon{font-size:4rem;line-height:1;filter:drop-shadow(0 2px 8px rgba(0,0,0,.1))}.diagram-item h4{font-size:var(--text-xl);font-weight:var(--weight-bold);color:var(--text-primary);margin:0}.diagram-item p{font-size:var(--text-sm);color:var(--text-secondary);margin:0}.data-indicator{display:flex;gap:.5rem;margin-top:.5rem}.data-dot{width:8px;height:8px;background:var(--success);border-radius:50%;animation:dataPulse 1.5s ease-in-out infinite}.data-dot:nth-child(2){animation-delay:.2s}.data-dot:nth-child(3){animation-delay:.4s}@keyframes dataPulse{0%,to{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}.diagram-barrier{display:flex;flex-direction:column;align-items:center;gap:1rem;position:relative}.barrier-line{width:3px;height:100px;background:linear-gradient(to bottom,var(--border-light),var(--error),var(--border-light));position:relative}.barrier-icon{font-size:2.5rem;background:var(--surface);padding:.75rem;border-radius:50%;border:3px solid var(--error);box-shadow:0 0 0 6px var(--surface),var(--shadow-md);line-height:1}.barrier-text{font-size:var(--text-sm);color:var(--error);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:.05em;background:var(--surface);padding:.5rem 1rem;border-radius:var(--radius-full);border:2px solid var(--error);box-shadow:var(--shadow-sm)}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2.5rem;max-width:1200px;margin:0 auto}@media(max-width:768px){.features-grid{grid-template-columns:1fr;gap:1.5rem}}.feature-card{padding:2rem;background:var(--surface);border:2px solid var(--border-light);border-radius:var(--radius-2xl);transition:all .3s ease;display:flex;flex-direction:column;gap:1rem}.feature-card:hover{border-color:var(--brand-primary);box-shadow:var(--shadow-lg);transform:translateY(-8px)}.feature-icon{width:64px;height:64px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;margin-bottom:.5rem;font-size:2.5rem;line-height:1}.feature-icon svg{width:32px;height:32px}.feature-card h3{font-size:var(--text-2xl);font-weight:var(--weight-bold);color:var(--text-primary)}.feature-card p{color:var(--text-secondary);line-height:1.6;flex-grow:1}.feature-meta{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}.meta-badge{padding:.25rem .75rem;background:var(--bg-primary);border:1px solid var(--border-light);border-radius:var(--radius-full);font-size:var(--text-xs);color:var(--text-tertiary);font-weight:var(--weight-medium)}.how-it-works-section{padding:6rem 0;background:var(--surface)}.steps-container{display:flex;flex-direction:column;gap:3rem;max-width:800px;margin:0 auto;align-items:center}.step{display:flex;flex-direction:column;gap:1.5rem;align-items:center;text-align:center;width:100%;max-width:600px}.step-number{flex-shrink:0;width:64px;height:64px;border-radius:var(--radius-full);background:var(--gradient-lavender);color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--text-2xl);font-weight:var(--weight-bold);box-shadow:var(--shadow-pink-md)}.step-content{flex-grow:1;width:100%;display:flex;flex-direction:column;align-items:center}.step-content h3{font-size:var(--text-2xl);font-weight:var(--weight-bold);margin-bottom:.75rem;color:var(--text-primary)}.step-content p{color:var(--text-secondary);line-height:1.6;margin-bottom:1.5rem}.step-visual{background:var(--bg-primary);padding:2rem;border-radius:var(--radius-lg);border:2px solid var(--border-light);box-shadow:var(--shadow-sm);transition:all .3s ease}.step-visual:hover{border-color:var(--brand-primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}.mini-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;padding:1rem;background:var(--surface);border-radius:var(--radius-md);border:1px solid var(--border-light);box-shadow:var(--shadow-sm)}.mini-day{aspect-ratio:1;background:linear-gradient(135deg,#ff6b9d40,#ff6b9d59);border:2px solid rgba(255,107,157,.4);border-radius:var(--radius-sm);transition:all .3s ease;position:relative;min-height:32px;box-shadow:inset 0 1px 3px #ff6b9d33}[data-theme=dark] .mini-day{background:linear-gradient(135deg,#ff6b9d4d,#ff6b9d66);border-color:#ff6b9d80;box-shadow:inset 0 1px 3px #ff6b9d4d}.mini-day:hover{background:linear-gradient(135deg,#ff6b9d59,#ff6b9d73);border-color:var(--brand-primary);transform:scale(1.1);box-shadow:0 3px 12px #ff6b9d80}.mini-day.period-active{background:linear-gradient(135deg,#ff6b9d,#ff8fb3);animation:periodPulse 2s ease infinite;box-shadow:0 4px 16px #ff6b9d99;transform:scale(1.1);border-color:#ff6b9d;border-width:3px}.prediction-indicator{display:flex;flex-direction:column;gap:1.25rem;width:100%}.indicator-bar{height:16px;background:var(--gray-200);border-radius:var(--radius-full);overflow:hidden;position:relative;box-shadow:inset 0 2px 4px #0000001a}[data-theme=dark] .indicator-bar{background:var(--gray-300)}.indicator-fill{height:100%;background:linear-gradient(90deg,var(--brand-secondary),var(--brand-primary));border-radius:var(--radius-full);animation:fillProgress 2s ease infinite;position:relative;overflow:hidden;box-shadow:0 0 12px #ff6b9d66}.indicator-fill:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:shimmer 2s infinite}@keyframes fillProgress{0%,to{opacity:1;transform:scaleX(1)}50%{opacity:.9;transform:scaleX(.98)}}@keyframes shimmer{0%{left:-100%}to{left:200%}}.indicator-label{font-size:var(--text-base);font-weight:var(--weight-bold);color:var(--text-primary);text-align:center;background:linear-gradient(90deg,var(--brand-secondary),var(--brand-primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:.05em}.insight-chart{display:flex;align-items:flex-end;gap:16px;height:160px;justify-content:center;padding:0 1rem;width:100%;max-width:100%}.chart-bar{flex:1;max-width:45px;border-radius:var(--radius-md) var(--radius-md) 0 0;animation:barGrow 1s ease backwards;position:relative;transition:all .3s ease;filter:saturate(1.2) brightness(1.05)}.chart-bar:hover{filter:saturate(1.3) brightness(1.1);transform:translateY(-8px)}.chart-bar:before{content:"";position:absolute;top:-8px;left:50%;transform:translate(-50%);color:#fff;padding:4px 8px;border-radius:var(--radius-sm);font-size:.7rem;font-weight:var(--weight-bold);opacity:0;transition:all .3s ease;z-index:10}.chart-bar:hover{transform:translateY(-4px)}.chart-bar:hover:before{opacity:1;transform:translate(-50%) translateY(-4px)}.chart-bar:nth-child(1){animation-delay:.1s;height:60%;background:linear-gradient(135deg,#ff6b9d,#ffd93d,#ffb5a7);box-shadow:0 -4px 16px #ff6b9d66;filter:saturate(1.4) brightness(1.1)}.chart-bar:nth-child(1):before{content:"60%";background:linear-gradient(135deg,#ff6b9d,#ffd93d)}.chart-bar:nth-child(2){animation-delay:.2s;height:75%;background:linear-gradient(135deg,#c77dff,#ff6b9d,#ffb5a7);box-shadow:0 -4px 16px #c77dff66;filter:saturate(1.4) brightness(1.1)}.chart-bar:nth-child(2):before{content:"75%";background:linear-gradient(135deg,#c77dff,#ff6b9d)}.chart-bar:nth-child(3){animation-delay:.3s;height:85%;background:linear-gradient(135deg,#06d6a0,#4ecdc4,#556fb5);box-shadow:0 -4px 16px #06d6a066;filter:saturate(1.4) brightness(1.1)}.chart-bar:nth-child(3):before{content:"85%";background:linear-gradient(135deg,#06d6a0,#4ecdc4)}.chart-bar:nth-child(4){animation-delay:.4s;height:70%;background:linear-gradient(135deg,#ff6b9d,#c77dff,#4ecdc4);box-shadow:0 -4px 16px #4ecdc466;filter:saturate(1.4) brightness(1.1)}.chart-bar:nth-child(4):before{content:"70%";background:linear-gradient(135deg,#ff6b9d,#c77dff)}.chart-bar:nth-child(5){animation-delay:.5s;height:80%;background:linear-gradient(135deg,#ffb5a7,#ffc6ff,#06d6a0);box-shadow:0 -4px 16px #ffb5a766;filter:saturate(1.4) brightness(1.1)}.chart-bar:nth-child(5):before{content:"80%";background:linear-gradient(135deg,#ffb5a7,#ffc6ff)}.chart-bar:hover:nth-child(1){box-shadow:0 -8px 24px #ff6b9d99;filter:saturate(1.6) brightness(1.2)}.chart-bar:hover:nth-child(2){box-shadow:0 -8px 24px #c77dff99;filter:saturate(1.6) brightness(1.2)}.chart-bar:hover:nth-child(3){box-shadow:0 -8px 24px #06d6a099;filter:saturate(1.6) brightness(1.2)}.chart-bar:hover:nth-child(4){box-shadow:0 -8px 24px #4ecdc499;filter:saturate(1.6) brightness(1.2)}.chart-bar:hover:nth-child(5){box-shadow:0 -8px 24px #ffb5a799;filter:saturate(1.6) brightness(1.2)}@keyframes barGrow{0%{height:0;opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}.comparison-table-wrapper{overflow-x:auto;margin-bottom:3rem;border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);width:100%;max-width:100%;-webkit-overflow-scrolling:touch}.comparison-table{width:100%;min-width:650px;border-collapse:separate;border-spacing:0;background:var(--surface);border-radius:var(--radius-2xl);overflow:hidden;table-layout:auto}.comparison-table thead{background:var(--gradient-lavender);color:#fff}.comparison-table th{padding:1.25rem 1rem;text-align:left;font-weight:var(--weight-bold);font-size:var(--text-base);white-space:nowrap}.comparison-table th:first-child{border-radius:var(--radius-2xl) 0 0 0;min-width:180px;width:auto}.comparison-table th.other-apps{text-align:center;min-width:200px;width:auto}.comparison-table th.cyclesync{text-align:center;min-width:200px;width:auto;border-radius:0 var(--radius-2xl) 0 0;background:linear-gradient(135deg,#c77dff,#ff6b9d)}.comparison-table tbody tr{border-bottom:1px solid var(--border-light);transition:background-color var(--duration-fast) var(--ease-smooth)}.comparison-table tbody tr:hover{background:var(--bg-secondary)}.comparison-table tbody tr:last-child{border-bottom:none}.comparison-table tbody tr:last-child td:first-child{border-radius:0 0 0 var(--radius-2xl)}.comparison-table tbody tr:last-child td:last-child{border-radius:0 0 var(--radius-2xl) 0}.comparison-table td{padding:1.25rem 1rem;vertical-align:middle}.feature-name{font-weight:var(--weight-semibold);color:var(--text-primary);min-width:180px}.feature-name strong{display:block;margin-bottom:.35rem;font-size:var(--text-base);line-height:1.4}.feature-desc{display:block;font-size:var(--text-sm);color:var(--text-tertiary);font-weight:var(--weight-normal);line-height:1.4}.comparison-cell{text-align:center;font-size:var(--text-sm);display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.5rem}.status-icon{font-size:1.5rem;display:block;line-height:1}.comparison-cell span:not(.status-icon){word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;max-width:180px}.comparison-cell.positive{color:var(--success-dark)}.comparison-cell.negative{color:var(--error)}.comparison-cell.warning{color:var(--warning-dark)}.comparison-cell.neutral{color:var(--text-secondary)}.comparison-table th:first-child,.comparison-table td.feature-name{min-width:140px}.install-section{padding:6rem 2rem;background:var(--bg-primary)}@media(max-width:768px){.install-section{padding:4rem 1.5rem}}.install-tabs{display:flex;justify-content:center;gap:1rem;margin-bottom:3rem;flex-wrap:wrap}.install-tabs{max-width:400px;margin:0 auto 3rem}.install-tab{padding:1rem 2rem;background:var(--surface);border:2px solid var(--border-light);border-radius:var(--radius-lg);cursor:pointer;transition:all .3s ease;font-weight:var(--weight-semibold);font-size:var(--text-base);color:var(--text-secondary);display:flex;align-items:center;gap:.75rem;font-family:var(--font-primary)}.install-tab svg{width:24px;height:24px}.install-tab.active{background:var(--gradient-lavender);color:#fff;border-color:transparent;box-shadow:var(--shadow-pink-sm)}.install-tab:hover:not(.active){border-color:var(--brand-primary)}.install-content{position:relative;min-height:400px}.install-panel{display:none;animation:fadeInUp .5s ease}.install-panel.active{display:block}.install-steps{max-width:700px;margin:0 auto;display:flex;flex-direction:column;gap:2rem}.install-step{display:flex;gap:1.5rem;padding:2rem;background:var(--surface);border-radius:var(--radius-xl);border:2px solid var(--border-light);transition:all .3s ease}.install-step:hover{border-color:var(--brand-primary);box-shadow:var(--shadow-sm)}.install-step-number{flex-shrink:0;width:48px;height:48px;background:var(--gradient-ocean);color:#fff;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:var(--text-xl);font-weight:var(--weight-bold);box-shadow:var(--shadow-sm)}.install-step-content h4{font-size:var(--text-xl);font-weight:var(--weight-bold);margin-bottom:.5rem;color:var(--text-primary)}.install-step-content p{color:var(--text-secondary);line-height:1.6}.inline-icon{width:16px;height:16px;display:inline-block;vertical-align:middle;margin:0 4px}.faq-section{padding:6rem 0;background:var(--surface)}.faq-list{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:1rem}.faq-item{background:var(--bg-primary);border:2px solid var(--border-light);border-radius:var(--radius-xl);overflow:hidden;transition:all .3s ease}.faq-item.active{border-color:var(--brand-primary)}.faq-question{width:100%;padding:1.5rem 2rem;background:transparent;border:none;text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:var(--font-primary);font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--text-primary);transition:all .2s ease}.faq-question:hover{color:var(--brand-primary)}.faq-icon{width:24px;height:24px;flex-shrink:0;transition:transform .3s ease;color:var(--text-secondary)}.faq-item.active .faq-icon{transform:rotate(180deg);color:var(--brand-primary)}.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease}.faq-item.active .faq-answer{max-height:500px;padding:0 2rem 1.5rem}.faq-answer p{color:var(--text-secondary);line-height:1.7}.cta-section{padding:6rem 0;background:var(--gradient-sunset);color:#fff;text-align:center}.cta-content h2{font-size:clamp(2rem,4vw,3rem);font-weight:var(--weight-extrabold);margin-bottom:1rem;color:#fff!important;text-shadow:0 2px 4px rgba(0,0,0,.3);background:none!important;-webkit-background-clip:unset!important;-webkit-text-fill-color:white!important;background-clip:unset!important}.cta-content p{font-size:var(--text-xl);margin-bottom:2rem;opacity:.95;color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.3);background:none!important;-webkit-background-clip:unset!important;-webkit-text-fill-color:white!important;background-clip:unset!important}.cta-content .btn{margin:0 auto 1rem}.cta-note{font-size:var(--text-sm);opacity:.85;margin-top:1rem}.footer{background:var(--surface);border-top:1px solid var(--border-light);padding:4rem 0 2rem}.footer-content{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}.footer-logo{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.footer-logo .logo-icon{width:32px;height:32px;color:var(--brand-primary)}.footer-logo span{font-size:var(--text-xl);font-weight:var(--weight-bold);background:var(--gradient-lavender);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.footer-tagline{color:var(--text-secondary);margin-bottom:.5rem}.footer-version{font-size:var(--text-sm);color:var(--text-tertiary)}.footer-section h4{font-size:var(--text-lg);font-weight:var(--weight-bold);margin-bottom:1rem;color:var(--text-primary)}.footer-links{list-style:none;display:flex;flex-direction:column;gap:.75rem}.footer-links a{color:var(--text-secondary);text-decoration:none;transition:color .2s ease}.footer-links a:hover{color:var(--brand-primary)}.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:2rem;border-top:1px solid var(--border-light);color:var(--text-tertiary);font-size:var(--text-sm)}.footer-social{display:flex;gap:1rem}.social-link{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all .3s ease}.social-link:hover{color:var(--brand-primary);transform:translateY(-2px)}.social-link svg{width:20px;height:20px}.demo-section{background:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 100%);padding:6rem 0;width:100%;overflow:hidden}.demo-container{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;margin-top:3rem;width:100%;max-width:100%;box-sizing:border-box;align-items:start}.demo-calendar-wrapper{background:var(--surface);border-radius:var(--radius-xl);padding:1.5rem;box-shadow:var(--shadow-lg);border:1px solid var(--border-light);width:100%;max-width:100%;box-sizing:border-box;min-width:0}.demo-calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}.demo-calendar-header h3{font-size:clamp(1rem,2vw,var(--text-xl));font-weight:600;color:var(--text-primary);margin:0}.demo-nav-btn{background:var(--bg-secondary);border:1px solid var(--border-light);border-radius:var(--radius-md);width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;color:var(--text-primary)}.demo-nav-btn:hover{background:var(--brand-primary);color:#fff;border-color:var(--brand-primary);transform:scale(1.05)}.demo-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem;margin-bottom:1.25rem}.demo-day-name{text-align:center;font-size:var(--text-sm);font-weight:600;color:var(--text-secondary);padding:.5rem}.demo-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;cursor:pointer;border:1px solid transparent;background:var(--bg-secondary);color:var(--text-primary);transition:all .2s ease;position:relative}.demo-day:not(.empty):hover{border-color:var(--brand-primary);transform:scale(1.05);box-shadow:var(--shadow-sm)}.demo-day.empty{background:transparent;cursor:default}.demo-day.period{background:var(--brand-primary);color:#fff;font-weight:600}.demo-day.predicted{background:linear-gradient(135deg,#ff6b9d4d,#ff6b9d1a);border:2px dashed var(--brand-primary)}.demo-day.fertile{background:linear-gradient(135deg,#c77dff33,#c77dff0d);border:1px solid var(--brand-secondary)}.demo-day.has-symptom:after{content:"";position:absolute;bottom:4px;left:50%;transform:translate(-50%);width:4px;height:4px;border-radius:50%;background:var(--warning)}.demo-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem;padding-top:1rem;border-top:1px solid var(--border-light)}.legend-item{display:flex;align-items:center;gap:.5rem;font-size:var(--text-sm);color:var(--text-secondary)}.legend-dot{width:16px;height:16px;border-radius:var(--radius-sm);flex-shrink:0}.legend-dot.period{background:var(--brand-primary)}.legend-dot.predicted{background:linear-gradient(135deg,#ff6b9d4d,#ff6b9d1a);border:2px dashed var(--brand-primary)}.legend-dot.fertile{background:linear-gradient(135deg,#c77dff33,#c77dff0d);border:1px solid var(--brand-secondary)}.legend-dot.symptom{background:var(--bg-secondary);position:relative}.legend-dot.symptom:after{content:"";position:absolute;bottom:2px;left:50%;transform:translate(-50%);width:4px;height:4px;border-radius:50%;background:var(--warning)}.demo-info-panel{background:var(--surface);border-radius:var(--radius-xl);padding:1.5rem;box-shadow:var(--shadow-lg);border:1px solid var(--border-light);min-height:300px;max-height:450px;display:flex;align-items:center;justify-content:center;overflow-y:auto;width:100%;max-width:100%;box-sizing:border-box;min-width:0;position:sticky;top:100px}.demo-placeholder{text-align:center;color:var(--text-secondary)}.demo-placeholder-icon{font-size:4rem;margin-bottom:1rem;animation:bounce 2s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.demo-placeholder h4{font-size:var(--text-xl);color:var(--text-primary);margin-bottom:.5rem}.demo-placeholder p{font-size:var(--text-md)}.demo-info-content{width:100%}.demo-info-icon{font-size:3rem;text-align:center;margin-bottom:1rem}.demo-info-content h4{font-size:var(--text-xl);font-weight:600;color:var(--text-primary);margin-bottom:.5rem;text-align:center}.demo-info-date{text-align:center;color:var(--text-secondary);font-size:var(--text-md);margin-bottom:1.5rem}.demo-info-section{margin-bottom:1.5rem}.demo-info-section:last-child{margin-bottom:0}.demo-info-section h5{font-size:var(--text-md);font-weight:600;color:var(--text-primary);margin-bottom:.75rem}.demo-info-section p{color:var(--text-secondary);line-height:1.6;font-size:var(--text-sm)}.demo-tags{display:flex;flex-wrap:wrap;gap:.5rem}.demo-tag{background:var(--bg-secondary);color:var(--text-primary);padding:.5rem 1rem;border-radius:var(--radius-full);font-size:var(--text-sm);border:1px solid var(--border-light)}.demo-actions{display:flex;gap:.75rem;flex-wrap:wrap}.demo-action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1rem;background:var(--bg-secondary);border:1px solid var(--border-light);border-radius:var(--radius-md);color:var(--text-primary);font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:all .2s ease}.demo-action-btn:hover{background:var(--brand-primary);color:#fff;border-color:var(--brand-primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.demo-stats{display:grid;grid-template-columns:1fr;gap:1rem;margin-bottom:1rem}.demo-stat-item{display:flex;flex-direction:column;gap:.25rem}.demo-stat-label{font-size:var(--text-xs);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em}.demo-stat-value{font-size:var(--text-lg);font-weight:600;color:var(--text-primary)}.confidence-bar-demo{width:100%;height:8px;background:var(--bg-secondary);border-radius:var(--radius-full);overflow:hidden}.confidence-fill-demo{height:100%;background:linear-gradient(90deg,var(--brand-primary) 0%,var(--brand-secondary) 100%);border-radius:var(--radius-full);transition:width .3s ease}.demo-cta{text-align:center;margin-top:3rem;padding-top:3rem;border-top:1px solid var(--border-light)}.demo-cta-text{font-size:clamp(1.125rem,2.5vw,var(--text-xl));font-weight:600;color:var(--text-primary);margin-bottom:1.5rem}@keyframes slideIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@media(max-width:1024px){.hero-container{grid-template-columns:1fr;gap:3rem}.hero-visual{max-width:300px;margin:0 auto}.footer-content{grid-template-columns:1fr 1fr}.demo-container{grid-template-columns:1fr 1fr;gap:1.5rem}.demo-calendar-wrapper,.demo-info-panel{padding:1.25rem}.demo-calendar-grid{gap:.3rem}.demo-day{font-size:clamp(.75rem,1.2vw,var(--text-sm))}.demo-info-panel{min-height:300px;max-height:450px;position:relative;top:auto}}@media(max-width:768px){.nav-links{display:none}.nav-links.active{display:flex;flex-direction:column;position:fixed;top:72px;left:0;right:0;background:var(--surface);border-bottom:2px solid var(--border-medium);padding:1.5rem 2rem 2rem;gap:1rem;box-shadow:var(--shadow-xl);z-index:999;animation:slideDown .3s cubic-bezier(.4,0,.2,1);max-height:calc(100vh - 72px);overflow-y:auto}.nav-links.active li{width:100%}.nav-links.active .nav-link{display:block;font-size:var(--text-lg);padding:.75rem 0;border-bottom:1px solid var(--border-light);width:100%}.nav-links.active li:last-child .nav-link,.nav-links.active .app-link .app-button{border-bottom:none}.nav-links.active .app-button{width:100%;justify-content:center;margin-top:.5rem;padding:1rem 1.5rem}.mobile-menu-toggle{display:flex}.hero{padding:6rem 1rem 2rem;min-height:auto}.hero-title{font-size:2.5rem}.hero-cta{flex-direction:column}.hero-cta .btn{width:100%;justify-content:center}.privacy-grid,.features-grid{grid-template-columns:1fr}.architecture-diagram{flex-direction:column;gap:1.5rem;padding:2.5rem 1.5rem}.diagram-item{min-width:100%;max-width:320px}.barrier-line{height:60px}.step{flex-direction:column;gap:1.25rem}.step-visual{padding:1.5rem;width:100%;max-width:320px}.mini-calendar{gap:8px;padding:.75rem}.mini-day{min-height:28px;background:linear-gradient(135deg,#ff6b9d4d,#ff6b9d66);border:2px solid rgba(255,107,157,.5)}.mini-day.period-active{background:linear-gradient(135deg,#ff6b9d,#ff8fb3);border-color:#ff6b9d;border-width:3px}.prediction-indicator{gap:1rem}.indicator-bar{height:14px}.indicator-label{font-size:var(--text-sm)}.insight-chart{height:140px;gap:12px;padding:0 .5rem}.chart-bar{max-width:32px}.chart-bar:before{font-size:.6rem;padding:3px 6px;top:-6px}.install-tabs{flex-direction:column}.install-tab{width:100%;justify-content:center}.footer-content{grid-template-columns:1fr;gap:2rem}.footer-bottom{flex-direction:column;gap:1rem;text-align:center}.container{padding:0 1rem}section{padding:4rem 0}.demo-container{grid-template-columns:1fr;gap:1.5rem}.demo-calendar-wrapper{padding:1rem}.demo-info-panel{padding:1rem;min-height:250px;max-height:400px;position:relative;top:auto}.demo-legend{grid-template-columns:1fr 1fr}.demo-day{font-size:var(--text-xs)}.demo-calendar-grid{gap:.25rem}}@media(max-width:480px){.hero-title{font-size:2rem}.section-title{font-size:1.75rem}.phone-mockup{max-width:280px}.badge{font-size:.75rem;padding:.4rem .8rem}section{padding:3rem 0}.demo-legend{grid-template-columns:1fr 1fr;gap:.5rem}.legend-item{font-size:var(--text-xs)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.8}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.comparison-feature-card{animation:fadeInScale .6s ease backwards}.comparison-feature-card:nth-child(1){animation-delay:.1s}.comparison-feature-card:nth-child(2){animation-delay:.2s}.comparison-feature-card:nth-child(3){animation-delay:.3s}.comparison-feature-card:nth-child(4){animation-delay:.4s}.comparison-feature-card:nth-child(5){animation-delay:.5s}.comparison-feature-card:nth-child(6){animation-delay:.6s}.comparison-feature-card:nth-child(7){animation-delay:.7s}.comparison-feature-card:nth-child(8){animation-delay:.8s}.comparison-card{animation:slideInRight .5s ease backwards}.comparison-card:nth-child(1){animation-delay:.1s}.comparison-card:nth-child(2){animation-delay:.2s}.comparison-card:nth-child(3){animation-delay:.3s}.comparison-card:nth-child(4){animation-delay:.4s}.comparison-card:nth-child(5){animation-delay:.5s}.comparison-card:nth-child(6){animation-delay:.6s}.comparison-card:nth-child(7){animation-delay:.7s}.comparison-card:nth-child(8){animation-delay:.8s}.step{animation:slideInLeft .6s ease backwards}.step:nth-child(1){animation-delay:.1s}.step:nth-child(2){animation-delay:.3s}.step:nth-child(3){animation-delay:.5s}.comparison-feature-card .feature-icon{transition:all .3s ease}.comparison-feature-card:hover .feature-icon{background:var(--gradient-lavender);color:#fff;transform:scale(1.1);box-shadow:var(--shadow-pink-sm)}.comparison-header.cyclesync .header-icon{animation:pulse 2s ease infinite}@media(max-width:768px){.comparison-feature-card:nth-child(1){animation-delay:.05s}.comparison-feature-card:nth-child(2){animation-delay:.1s}.comparison-feature-card:nth-child(3){animation-delay:.15s}.comparison-feature-card:nth-child(4){animation-delay:.2s}.comparison-feature-card:nth-child(5){animation-delay:.25s}.comparison-feature-card:nth-child(6){animation-delay:.3s}.comparison-feature-card:nth-child(7){animation-delay:.35s}.comparison-feature-card:nth-child(8){animation-delay:.4s}.comparison-card:nth-child(1){animation-delay:.05s}.comparison-card:nth-child(2){animation-delay:.1s}.comparison-card:nth-child(3){animation-delay:.15s}.comparison-card:nth-child(4){animation-delay:.2s}.comparison-card:nth-child(5){animation-delay:.25s}.comparison-card:nth-child(6){animation-delay:.3s}.comparison-card:nth-child(7){animation-delay:.35s}.comparison-card:nth-child(8){animation-delay:.4s}}