/* TeamsXD Landing — Apple-inspired, dark/light mode */
:root {
    --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
    --max-width: 1200px;
    --nav-height: 56px;
    --bg-primary: #fbfbfd; --bg-secondary: #f5f5f7; --bg-card: #ffffff;
    --bg-nav: rgba(251,251,253,0.72);
    --text-primary: #1d1d1f; --text-secondary: #6e6e73; --text-tertiary: #86868b;
    --accent: #007AFF; --accent-hover: #0056CC;
    --border: rgba(0,0,0,0.08);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.12);
    --badge-bg: rgba(0,122,255,0.08); --badge-text: #007AFF;
    --highlight-bg: #f5f5f7; --highlight-alt-bg: #ffffff;
    --card-hover-shadow: 0 8px 30px rgba(0,0,0,0.1);
    --progress-bg: #007AFF;
    --step-number-bg: #1d1d1f; --step-number-text: #ffffff;
}
[data-theme="dark"] {
    --bg-primary: #000; --bg-secondary: #111; --bg-card: #1c1c1e;
    --bg-nav: rgba(0,0,0,0.72);
    --text-primary: #f5f5f7; --text-secondary: #a1a1a6; --text-tertiary: #6e6e73;
    --accent: #0A84FF; --accent-hover: #409CFF;
    --border: rgba(255,255,255,0.08);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.4);
    --badge-bg: rgba(10,132,255,0.12); --badge-text: #0A84FF;
    --highlight-bg: #111; --highlight-alt-bg: #1c1c1e;
    --card-hover-shadow: 0 8px 30px rgba(0,0,0,0.4);
    --progress-bg: #0A84FF;
    --step-number-bg: #f5f5f7; --step-number-text: #000;
}
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { font-family:var(--font-family); background:var(--bg-primary); color:var(--text-primary); line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background-color .3s,color .3s; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
button { border:none; background:none; cursor:pointer; font-family:inherit; color:inherit; }
.container { max-width:var(--max-width); margin:0 auto; padding:0 24px; }

.scroll-progress { position:fixed; top:0; left:0; width:0%; height:2px; background:var(--progress-bg); z-index:1001; transition:width .1s linear; }

.nav { position:fixed; top:0; left:0; right:0; height:var(--nav-height); background:var(--bg-nav); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--border); z-index:1000; }
.nav-container { max-width:var(--max-width); margin:0 auto; padding:0 24px; height:100%; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { display:flex; align-items:center; gap:10px; font-size:18px; font-weight:700; letter-spacing:-0.02em; }
.nav-logo-mark { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:7px; background:var(--accent); color:#fff; font-size:16px; font-weight:800; }
.nav-links { display:flex; align-items:center; gap:32px; }
.nav-links a:not(.btn) { font-size:14px; font-weight:500; color:var(--text-secondary); transition:color .2s; }
.nav-links a:not(.btn):hover { color:var(--text-primary); }
.btn-nav { font-size:14px; font-weight:600; padding:8px 18px; border-radius:980px; background:var(--accent); color:#fff!important; transition:background .2s,transform .15s; }
.btn-nav:hover { background:var(--accent-hover); transform:scale(1.02); }
.theme-toggle { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; color:var(--text-secondary); transition:background .2s,color .2s; }
.theme-toggle:hover { background:var(--bg-secondary); color:var(--text-primary); }
.icon-moon { display:none; }
[data-theme="dark"] .icon-sun { display:none; }
[data-theme="dark"] .icon-moon { display:block; }
.nav-mobile-toggle { display:none; flex-direction:column; gap:5px; padding:8px; }
.nav-mobile-toggle span { display:block; width:20px; height:2px; background:var(--text-primary); border-radius:2px; transition:transform .3s,opacity .3s; }
.nav-mobile-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.nav-mobile-toggle.active span:nth-child(2) { opacity:0; }
.nav-mobile-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

.btn { display:inline-flex; align-items:center; gap:8px; font-weight:600; border-radius:980px; transition:all .2s; white-space:nowrap; }
.btn-primary { background:var(--accent); color:#fff; padding:14px 28px; font-size:16px; }
.btn-primary:hover { background:var(--accent-hover); transform:scale(1.03); box-shadow:0 4px 20px rgba(0,122,255,0.3); }
.btn-secondary { background:transparent; color:var(--accent); padding:14px 28px; font-size:16px; border:1.5px solid var(--border); }
.btn-secondary:hover { border-color:var(--accent); background:var(--badge-bg); }
.btn-large { padding:16px 32px; font-size:17px; }

.hero { padding-top:calc(var(--nav-height) + 80px); padding-bottom:40px; text-align:center; overflow:hidden; }
.hero .container { display:flex; flex-direction:column; align-items:center; }
.hero-content { max-width:720px; margin:0 auto; }
.hero-badge { display:inline-block; font-size:15px; font-weight:600; color:var(--badge-text); background:var(--badge-bg); padding:8px 20px; border-radius:980px; margin-bottom:24px; }
.hero-title { font-size:clamp(40px,7vw,72px); font-weight:800; line-height:1.1; letter-spacing:-0.04em; margin-bottom:20px; min-height:3.3em; }
.hero-title-text { background:linear-gradient(135deg,var(--text-primary) 0%,var(--text-secondary) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
[data-theme="dark"] .hero-title-text { background:none; -webkit-background-clip:unset; background-clip:unset; -webkit-text-fill-color:#f5f5f7; }
.hero-cursor { display:inline-block; width:3px; height:0.75em; background:var(--accent); margin-left:3px; border-radius:2px; position:relative; top:0.05em; animation:cursorBlink .75s step-end infinite; }
@keyframes cursorBlink { 0%,100%{opacity:1} 50%{opacity:0} }
.hero-subtitle { font-size:clamp(17px,2.5vw,21px); line-height:1.5; color:var(--text-secondary); max-width:580px; margin:0 auto 36px; }
.hero-actions { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.hero-image { margin-top:60px; width:100%; max-width:1000px; }
.hero-image-wrapper { border-radius:16px; overflow:hidden; box-shadow:var(--shadow-lg); transition:transform .4s; animation:heroImageReveal .8s cubic-bezier(0.25,0.46,0.45,0.94) backwards; }
@keyframes heroImageReveal { from{opacity:0;transform:translateY(40px) scale(0.95)} to{opacity:1;transform:translateY(0) scale(1)} }
.hero-image-wrapper:hover { transform:translateY(-4px); }
@media (prefers-reduced-motion:reduce) { .hero-image-wrapper { animation:none; } }
.hero-image img { width:100%; height:auto; }

.section-title { font-size:clamp(28px,4vw,48px); font-weight:700; letter-spacing:-0.03em; text-align:center; margin-bottom:56px; line-height:1.15; }

.quick-features { padding:100px 0; background:var(--bg-secondary); }
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feature-card { background:var(--bg-card); border-radius:16px; padding:32px 28px; border:1px solid var(--border); transition:transform .3s,box-shadow .3s; }
.feature-card:hover { transform:translateY(-4px); box-shadow:var(--card-hover-shadow); }
.feature-card-icon { width:52px; height:52px; display:flex; align-items:center; justify-content:center; background:var(--badge-bg); border-radius:14px; margin-bottom:20px; color:var(--accent); }
.feature-card h3 { font-size:18px; font-weight:700; margin-bottom:8px; }
.feature-card p { font-size:15px; color:var(--text-secondary); line-height:1.5; }

.how-it-works { padding:100px 0; }
.steps { display:flex; align-items:flex-start; justify-content:center; }
.step { text-align:center; max-width:280px; padding:0 20px; }
.step-number { width:56px; height:56px; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; background:var(--step-number-bg); color:var(--step-number-text); border-radius:50%; margin:0 auto 20px; }
.step h3 { font-size:20px; font-weight:700; margin-bottom:10px; }
.step p { font-size:15px; color:var(--text-secondary); line-height:1.5; }
.step-connector { display:flex; align-items:center; padding-top:28px; color:var(--text-tertiary); flex-shrink:0; }

.feature-highlight { padding:120px 0; background:var(--highlight-bg); }
.feature-highlight-alt { background:var(--highlight-alt-bg); }
.highlight-content { max-width:640px; margin:0 auto; text-align:center; }
.highlight-icon { width:80px; height:80px; display:flex; align-items:center; justify-content:center; background:var(--badge-bg); border-radius:24px; margin:0 auto 28px; color:var(--accent); }
.highlight-content h2 { font-size:clamp(28px,4vw,44px); font-weight:800; letter-spacing:-0.03em; line-height:1.1; margin-bottom:18px; }
.highlight-content p { font-size:17px; color:var(--text-secondary); line-height:1.6; max-width:520px; margin:0 auto; }
.privacy-badges { display:flex; justify-content:center; gap:24px; margin-top:40px; flex-wrap:wrap; }
.privacy-badge { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--text-secondary); background:var(--bg-secondary); padding:10px 18px; border-radius:980px; border:1px solid var(--border); }
[data-theme="dark"] .privacy-badge { background:var(--bg-card); }

.cta-section { padding:140px 0; text-align:center; background:var(--bg-primary); position:relative; overflow:hidden; }
.cta-section::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:800px; height:800px; background:radial-gradient(circle,var(--badge-bg) 0%,transparent 70%); pointer-events:none; opacity:0.8; }
.cta-content { position:relative; z-index:1; }
.cta-content h2 { font-size:clamp(32px,5vw,56px); font-weight:800; letter-spacing:-0.04em; line-height:1.1; margin-bottom:16px; }
.cta-content p { font-size:18px; color:var(--text-secondary); margin-bottom:36px; }

.footer { padding:60px 0 30px; border-top:1px solid var(--border); background:var(--bg-secondary); }
.footer-content { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:48px; }
.footer-brand .nav-logo { margin-bottom:12px; }
.footer-brand p { font-size:14px; color:var(--text-tertiary); }
.footer-links { display:flex; gap:80px; }
.footer-col { display:flex; flex-direction:column; gap:10px; }
.footer-col h4 { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-tertiary); margin-bottom:4px; }
.footer-col a { font-size:14px; color:var(--text-secondary); transition:color .2s; }
.footer-col a:hover { color:var(--text-primary); }
.footer-bottom { border-top:1px solid var(--border); padding-top:24px; text-align:center; }
.footer-bottom p { font-size:13px; color:var(--text-tertiary); }

.animate-on-scroll { opacity:0; transform:translateY(30px); transition:opacity .8s cubic-bezier(0.25,0.46,0.45,0.94),transform .8s cubic-bezier(0.25,0.46,0.45,0.94); }
.animate-on-scroll.visible { opacity:1; transform:translateY(0); }
.features-grid .feature-card:nth-child(1){transition-delay:0s} .features-grid .feature-card:nth-child(2){transition-delay:.08s} .features-grid .feature-card:nth-child(3){transition-delay:.16s} .features-grid .feature-card:nth-child(4){transition-delay:.24s} .features-grid .feature-card:nth-child(5){transition-delay:.32s} .features-grid .feature-card:nth-child(6){transition-delay:.4s}
.steps .step:nth-child(1){transition-delay:0s} .steps .step:nth-child(3){transition-delay:.25s} .steps .step:nth-child(5){transition-delay:.45s}
.privacy-badges .privacy-badge:nth-child(1){transition-delay:0s} .privacy-badges .privacy-badge:nth-child(2){transition-delay:.1s} .privacy-badges .privacy-badge:nth-child(3){transition-delay:.2s}

@media (max-width:1024px){ .features-grid{grid-template-columns:repeat(2,1fr)} .footer-links{gap:40px} }
@media (max-width:768px){
    .nav-links{position:absolute;top:100%;left:0;right:0;height:calc(100dvh - var(--nav-height));background:var(--bg-primary);flex-direction:column;align-items:center;justify-content:center;gap:28px;z-index:999;display:flex;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-12px);transition:opacity .25s,transform .25s,visibility .25s;}
    .nav-links.active{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);}
    .nav-links a:not(.btn){font-size:28px;font-weight:700;color:var(--text-primary);}
    .nav-links .btn-nav{font-size:17px;padding:14px 32px;}
    .nav-mobile-toggle{display:flex;}
    .hero{padding-top:calc(var(--nav-height) + 48px);}
    .hero-title{font-size:clamp(32px,9vw,48px);}
    .hero-actions{flex-direction:column;align-items:center;}
    .quick-features,.how-it-works,.feature-highlight{padding:64px 0;}
    .features-grid{grid-template-columns:1fr;gap:16px;}
    .steps{flex-direction:column;align-items:center;gap:24px;}
    .step-connector{transform:rotate(90deg);padding-top:0;}
    .privacy-badges{flex-direction:column;align-items:center;}
    .cta-section{padding:80px 0;}
    .footer-content{flex-direction:column;gap:36px;}
    .footer-links{gap:32px;}
}
@media print { .nav,.scroll-progress,.theme-toggle,.nav-mobile-toggle{display:none} .hero{padding-top:40px} .animate-on-scroll{opacity:1;transform:none} }