*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#050510;--card:rgba(20,20,40,0.85);--border:rgba(255,255,255,0.06);--accent:#f59e0b;--acc2:#8b5cf6;--text:#f1f5f9;--muted:#64748b;--blue:#3b82f6}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;line-height:1.6}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--muted);border-radius:3px}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:14px 24px;display:flex;justify-content:space-between;align-items:center;background:rgba(5,5,16,0.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav-l{display:flex;align-items:center;gap:16px}
.nav-logo{font-size:1.15rem;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--acc2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-lang{display:flex;gap:4px}
.nav-lang button{background:none;border:1px solid var(--border);color:var(--muted);padding:5px 11px;border-radius:16px;cursor:pointer;font-size:0.72rem;transition:all 0.3s;letter-spacing:0.3px}
.nav-lang button:hover,.nav-lang button.active{border-color:var(--accent);color:var(--text)}
.nav-lang button.active{background:linear-gradient(135deg,var(--accent),var(--acc2));color:#fff;border-color:transparent;font-weight:600}
.nav-btn{padding:9px 24px;background:linear-gradient(135deg,var(--accent),var(--acc2));border:none;color:#fff;border-radius:24px;cursor:pointer;font-weight:600;font-size:0.88rem;transition:all 0.3s;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.nav-btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(245,158,11,0.3)}

/* HERO WITH MAP BACKGROUND */
.hero{min-height:85vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:90px 24px 40px;position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-bg .orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:0.25}
.hero-bg .orb:nth-child(1){width:700px;height:700px;background:radial-gradient(circle,#f59e0b,transparent);top:-200px;right:-200px;animation:orbDrift 25s ease-in-out infinite}
.hero-bg .orb:nth-child(2){width:600px;height:600px;background:radial-gradient(circle,#8b5cf6,transparent);bottom:-200px;left:-200px;animation:orbDrift 30s ease-in-out infinite reverse}
.hero-bg .orb:nth-child(3){width:500px;height:500px;background:radial-gradient(circle,#3b82f6,transparent);top:30%;left:60%;opacity:0.15;animation:orbDrift 35s ease-in-out infinite}
@keyframes orbDrift{0%,100%{transform:translate(0,0)scale(1)}25%{transform:translate(40px,-50px)scale(1.1)}50%{transform:translate(-30px,30px)scale(0.95)}75%{transform:translate(20px,40px)scale(1.05)}}.hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(5,5,16,0.4) 0%,transparent 30%,transparent 60%,rgba(5,5,16,0.5) 100%)}.hero-mmap{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero-mmap .dot{position:absolute;width:6px;height:6px;border-radius:50%;animation:pulseDot 3s ease-in-out infinite}
@keyframes pulseDot{0%,100%{opacity:0.2;transform:scale(1)}50%{opacity:0.8;transform:scale(1.5)}}
.hero-content{position:relative;z-index:2;max-width:850px}
.hero-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 18px;background:rgba(139,92,246,0.12);border:1px solid rgba(139,92,246,0.2);border-radius:24px;font-size:0.78rem;color:var(--acc2);margin-bottom:28px}
.hero h1{font-size:clamp(2.4rem,6vw,4rem);font-weight:800;line-height:1.08;margin-bottom:16px;letter-spacing:-2px;text-shadow:0 4px 40px rgba(0,0,0,0.6)}
.hero h1 .gradient{background:linear-gradient(135deg,#f59e0b,#8b5cf6,#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero p{font-size:clamp(0.95rem,1.8vw,1.2rem);color:var(--muted);max-width:650px;margin:0 auto 28px;line-height:1.6;text-shadow:0 2px 20px rgba(0,0,0,0.5)}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero-cta .btn{padding:14px 30px;border-radius:12px;font-size:0.95rem;font-weight:600;text-decoration:none;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);display:inline-flex;align-items:center;gap:8px}
.hero-cta .btn-primary{background:linear-gradient(135deg,var(--accent),var(--acc2));color:#fff;border:none}
.hero-cta .btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(245,158,11,0.35)}
.hero-cta .btn-secondary{background:rgba(255,255,255,0.06);border:1px solid var(--border);color:var(--text)}
.hero-cta .btn-secondary:hover{background:rgba(255,255,255,0.12);transform:translateY(-3px)}
.hero-stats{display:flex;justify-content:center;gap:clamp(20px,3vw,48px);margin-top:40px;flex-wrap:wrap}
.hero-stat{text-align:center}
.hero-stat-icon{font-size:1.5rem;margin-bottom:2px;display:block}
.hero-stat-n{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;background:linear-gradient(135deg,var(--accent),var(--acc2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-stat-l{font-size:0.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:2px}
.hero-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;background:rgba(139,92,246,0.12);border:1px solid rgba(139,92,246,0.2);border-radius:24px;font-size:0.75rem;color:var(--acc2);margin-bottom:20px}
/* SECTIONS */
.section{padding:90px 24px;position:relative}
.section-dark{background:linear-gradient(180deg,transparent,rgba(20,20,40,0.3))}
.section-wide{max-width:1200px;margin:0 auto}
.section-title{text-align:center;font-size:clamp(1.6rem,3.5vw,2.6rem);font-weight:700;margin-bottom:14px;letter-spacing:-0.5px}
.section-title .grad{background:linear-gradient(135deg,var(--accent),var(--acc2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.section-sub{text-align:center;color:var(--muted);font-size:clamp(0.95rem,1.2vw,1.15rem);max-width:650px;margin:0 auto 56px}

/* FEATURES — 3 cols */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1100px;margin:0 auto}
.feature-card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:36px 28px;transition:all 0.5s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden}
.feature-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--acc2));transform:scaleX(0);transform-origin:left;transition:transform 0.5s}
.feature-card:hover::before{transform:scaleX(1)}
.feature-card:hover{transform:translateY(-6px);border-color:rgba(245,158,11,0.2);box-shadow:0 24px 70px rgba(139,92,246,0.12)}
.feature-icon{font-size:2.5rem;margin-bottom:18px}
.feature-card h3{font-size:1.15rem;font-weight:700;margin-bottom:10px}
.feature-card p{font-size:0.88rem;color:var(--muted);line-height:1.65}

/* SHOWCASE — 2 cols */
.showcase{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.showcase-item{background:var(--card);border:1px solid var(--border);border-radius:18px;overflow:hidden;transition:all 0.4s}
.showcase-item:hover{border-color:rgba(245,158,11,0.2);transform:translateY(-4px)}
.showcase-item.preview{grid-column:1/-1;padding:0;background:linear-gradient(135deg,rgba(245,158,11,0.06),rgba(139,92,246,0.06))}
.showcase-preview{padding:36px;text-align:center}
.showcase-preview .mini-stats{display:flex;justify-content:center;gap:32px;flex-wrap:wrap}
.showcase-preview .mini-stat{text-align:center}
.showcase-preview .mini-stat-n{font-size:1.5rem;font-weight:700;color:var(--accent)}
.showcase-preview .mini-stat-l{font-size:0.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px}
.showcase-body{padding:24px}
.showcase-body h4{font-size:1rem;margin-bottom:8px}
.showcase-body p{font-size:0.84rem;color:var(--muted);line-height:1.55}

/* LANG — clickable cards */
.lang-table{max-width:700px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.lang-item{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:22px 14px;text-align:center;transition:all 0.3s;cursor:pointer}
.lang-item:hover{background:rgba(139,92,246,0.1);border-color:rgba(139,92,246,0.3);transform:translateY(-4px);box-shadow:0 12px 40px rgba(139,92,246,0.1)}
.lang-item.active{background:linear-gradient(135deg,rgba(245,158,11,0.12),rgba(139,92,246,0.12));border-color:var(--accent);box-shadow:0 0 30px rgba(245,158,11,0.1)}
.lang-flag{font-size:2.2rem;margin-bottom:8px}
.lang-name{font-size:0.9rem;font-weight:600}
.lang-native{font-size:0.72rem;color:var(--muted);margin-top:3px}

/* CTA */
.cta-section{text-align:center;padding:90px 24px}
.cta-section h2{font-size:clamp(1.6rem,3vw,2.6rem);font-weight:700;margin-bottom:16px;letter-spacing:-0.5px}
.cta-section p{color:var(--muted);max-width:550px;margin:0 auto 32px;font-size:1.05rem}

/* ===== SIGNUP FORM WITH ANIMATIONS ===== */
.signup-section{position:relative;padding:80px 24px 100px;overflow:hidden;background:linear-gradient(180deg,var(--bg),#0a0a2e 50%,var(--bg))}
.signup-section::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 30% 40%,rgba(245,158,11,0.05) 0%,transparent 60%),radial-gradient(ellipse at 70% 60%,rgba(139,92,246,0.05) 0%,transparent 60%)}
.signup-wrap{max-width:500px;margin:0 auto;position:relative;z-index:2}
.signup-card{background:var(--card);border:1px solid var(--border);border-radius:24px;padding:44px 36px;backdrop-filter:blur(10px);position:relative;overflow:hidden}
.signup-card::before{content:'';position:absolute;top:0;left:-100%;width:200%;height:3px;background:linear-gradient(90deg,transparent,#f59e0b,#8b5cf6,#3b82f6,transparent);animation:borderScan 4s linear infinite}
@keyframes borderScan{0%{transform:translateX(0)}100%{transform:translateX(50%)}}
.signup-card h3{font-size:1.3rem;font-weight:700;text-align:center;margin-bottom:6px}
.signup-card .sub{text-align:center;color:var(--muted);font-size:0.85rem;margin-bottom:28px}

/* Flying travel elements */
.travel-fly{position:absolute;pointer-events:none;z-index:3;font-size:2.4rem;animation-duration:7s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(0.4,0,0.2,1);filter:drop-shadow(0 0 10px rgba(245,158,11,0.4));text-shadow:0 0 20px rgba(245,158,11,0.2)}
.travel-fly.plane{bottom:40%;left:35%;font-size:3rem;animation-name:flyPlaneOut}
.travel-fly.suitcase{bottom:25%;left:45%;font-size:2.6rem;animation-name:bounceSuitcaseOut}
.travel-fly.palm{top:35%;left:40%;font-size:2.8rem;animation-name:driftPalmOut;animation-duration:9s}
.travel-fly.globe{top:40%;right:40%;font-size:2.4rem;animation-name:driftGlobeOut;animation-duration:8s;animation-delay:-2s}
@keyframes flyPlaneOut{0%{transform:translate(0,0)rotate(0deg);opacity:0.9}15%{transform:translate(15px,-20px)rotate(-3deg);opacity:1}40%{transform:translate(60px,-80px)rotate(-8deg);opacity:0.8}70%{transform:translate(130px,-170px)rotate(-12deg);opacity:0.4}100%{transform:translate(220px,-280px)rotate(-15deg);opacity:0}}
@keyframes bounceSuitcaseOut{0%{transform:translate(0,0)rotate(0deg);opacity:0.9}20%{transform:translate(-30px,-40px)rotate(8deg);opacity:1}45%{transform:translate(-80px,-110px)rotate(-5deg);opacity:0.7}75%{transform:translate(-150px,-200px)rotate(10deg);opacity:0.3}100%{transform:translate(-240px,-300px)rotate(-8deg);opacity:0}}
@keyframes driftPalmOut{0%{transform:translate(0,0)scale(1);opacity:0.8}20%{transform:translate(-30px,-20px)scale(1.05);opacity:0.9}50%{transform:translate(-80px,-60px)scale(0.9);opacity:0.5}80%{transform:translate(-150px,-110px)scale(0.8);opacity:0.2}100%{transform:translate(-220px,-170px)scale(0.6);opacity:0}}
@keyframes driftGlobeOut{0%{transform:translate(0,0)scale(1);opacity:0.8}20%{transform:translate(30px,-20px)scale(1.05);opacity:0.9}50%{transform:translate(80px,-60px)scale(0.9);opacity:0.5}80%{transform:translate(150px,-110px)scale(0.8);opacity:0.2}100%{transform:translate(220px,-170px)scale(0.6);opacity:0}}

/* Animated form fields */
.sg{opacity:0;transform:translateY(20px);animation:sgIn 0.6s cubic-bezier(0.4,0,0.2,1) forwards}
.sg:nth-child(1){animation-delay:0.2s}.sg:nth-child(2){animation-delay:0.35s}.sg:nth-child(3){animation-delay:0.5s}
@keyframes sgIn{to{opacity:1;transform:translateY(0)}}
.sg label{display:block;font-size:0.72rem;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:0.5px}
.sg input,.sg textarea{width:100%;padding:13px 16px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);border-radius:12px;color:var(--text);font-size:0.9rem;outline:none;transition:all 0.3s}
.sg input:focus,.sg textarea:focus{border-color:var(--acc2);background:rgba(139,92,246,0.05);box-shadow:0 0 0 3px rgba(139,92,246,0.08)}
.sg .sg-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:1rem;color:var(--muted)}
.sg .sg-input-wrap{position:relative}
.sg .sg-input-wrap input{padding-left:40px}
.gdpr-row{display:flex;align-items:flex-start;gap:10px;margin:6px 0 18px;opacity:0;animation:sgIn 0.6s 0.65s cubic-bezier(0.4,0,0.2,1) forwards}
.gdpr-row input[type=checkbox]{width:18px;height:18px;margin-top:3px;accent-color:var(--acc2);cursor:pointer;flex-shrink:0}
.gdpr-row label{font-size:0.78rem;color:var(--muted);cursor:pointer;line-height:1.4}
.gdpr-row label a{color:var(--acc2);text-decoration:none}

/* FOOTER */
.footer{border-top:1px solid var(--border);padding:36px 24px;text-align:center;font-size:0.82rem;color:var(--muted)}
.footer a{color:var(--acc2);text-decoration:none}

/* LOGIN MODAL (ANIMATED) */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.85);backdrop-filter:blur(12px);z-index:1000;display:none;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal{background:#14142a;border:1px solid var(--border);border-radius:24px;padding:44px 36px;max-width:420px;width:100%;animation:modalIn 0.5s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden}
.modal::before{content:'';position:absolute;top:0;left:-100%;width:200%;height:2px;background:linear-gradient(90deg,transparent,#f59e0b,#8b5cf6,transparent);animation:borderScan 5s linear infinite;opacity:0.6}
@keyframes modalIn{from{opacity:0;transform:scale(0.92)translateY(24px)}to{opacity:1;transform:scale(1)translateY(0)}}
.modal-close{position:absolute;top:14px;right:18px;background:none;border:none;color:var(--muted);font-size:1.5rem;cursor:pointer;padding:4px 8px;border-radius:8px;z-index:5}
.modal-close:hover{background:rgba(255,255,255,0.1);color:#fff}

/* Modal travel icons */
.modal-travel{position:absolute;pointer-events:none;font-size:2rem;animation:modTravel 8s cubic-bezier(0.4,0,0.2,1) infinite;z-index:1;filter:drop-shadow(0 0 6px rgba(245,158,11,0.3))}
.modal-travel{top:-15px;right:10%;animation-name:modPlane}
.modal-travel-2{bottom:-15px;left:10%;font-size:1.4rem;animation-name:modSuitcase;animation-delay:-2s}
.modal-travel-3{top:40%;left:-20px;font-size:1.6rem;animation-name:modPalm;animation-delay:-4s}
@keyframes modPlane{0%{transform:translate(0,0)rotate(-10deg);opacity:0}15%{opacity:0.5;transform:translate(-10px,15px)rotate(0deg)}40%{transform:translate(-30px,40px)rotate(5deg);opacity:0.5}70%{transform:translate(-60px,80px)rotate(-3deg);opacity:0.3}100%{transform:translate(-100px,130px)rotate(-10deg);opacity:0}}
@keyframes modSuitcase{0%{transform:translate(0,0)rotate(10deg);opacity:0}20%{transform:translate(20px,-30px)rotate(-5deg);opacity:0.4}50%{transform:translate(50px,-70px)rotate(3deg);opacity:0.5}80%{transform:translate(80px,-120px)rotate(-5deg);opacity:0.2}100%{transform:translate(120px,-180px)rotate(8deg);opacity:0}}
@keyframes modPalm{0%{transform:translate(0,0)scale(1);opacity:0}15%{opacity:0.4;transform:translate(15px,-20px)scale(1.1)}40%{transform:translate(30px,-50px)scale(0.9);opacity:0.4}70%{transform:translate(50px,-90px)scale(1.05);opacity:0.2}100%{transform:translate(80px,-140px)scale(0.7);opacity:0}}

.modal-header-anim{opacity:0;animation:sgIn 0.5s 0.1s cubic-bezier(0.4,0,0.2,1) forwards;text-align:center}
.modal-header-anim h2{margin-bottom:8px;font-size:1.5rem}
.modal-header-anim p{color:var(--muted);font-size:0.88rem;margin-bottom:28px}
.form-anim{opacity:0;transform:translateY(20px);animation:sgIn 0.5s calc(var(--i)*0.15s + 0.2s) cubic-bezier(0.4,0,0.2,1) forwards}
.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:0.75rem;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:0.5px}
.form-group input{width:100%;padding:13px 16px;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:12px;color:var(--text);font-size:0.92rem;outline:none;transition:border 0.3s}
.form-group input:focus{border-color:var(--acc2);box-shadow:0 0 0 3px rgba(139,92,246,0.08)}
.form-submit{width:100%;padding:13px;background:linear-gradient(135deg,var(--accent),var(--acc2));border:none;color:#fff;border-radius:12px;font-weight:600;font-size:1rem;cursor:pointer;transition:all 0.3s}
.form-submit:hover{transform:translateY(-2px);box-shadow:0 10px 35px rgba(245,158,11,0.3)}
.form-submit:disabled{opacity:0.5;cursor:wait}
.form-error{text-align:center;color:#ef4444;font-size:0.82rem;margin-top:14px;display:none}
.form-success{text-align:center;color:#22c55e;font-size:0.82rem;margin-top:14px;display:none}
.demo-note{text-align:center;margin-top:18px;font-size:0.75rem;color:var(--muted)}
.demo-note a{color:var(--acc2);cursor:pointer;text-decoration:underline}

@media(max-width:768px){
  .features{grid-template-columns:1fr}
  .showcase{grid-template-columns:1fr}
  .lang-table{grid-template-columns:repeat(3,1fr)}
  .hero h1{font-size:clamp(2rem,8vw,2.8rem)}
  .nav{padding:12px 16px}
  .nav-lang button{padding:4px 8px;font-size:0.65rem}
}
@media(max-width:480px){
  .lang-table{grid-template-columns:repeat(2,1fr)}
  .section{padding:60px 16px}
  .hero{min-height:auto;padding:80px 16px 24px}
  .hero-stats{gap:10px;margin-top:24px}
  .hero-stat-n{font-size:1.2rem}
  .hero-stat-icon{font-size:1.2rem;margin-bottom:0}
  .hero-stat-l{font-size:0.65rem}
  .feature-card{padding:24px 20px}
  .signup-card{padding:32px 20px}
  .travel-fly{display:none}
  .hero-cta .btn{padding:12px 20px;font-size:0.85rem}
  .hero p{margin-bottom:20px;font-size:0.88rem}
}