:root{
	--bg-0: #f6f9fc;
	--bg-1: #ffffff;
	--card: #ffffff;
	--muted: #667085;
	--accent-1: #0f1724;
	--accent: #4f46e5;
	--accent-2: #6b46ff;
	--glass: rgba(15,23,36,0.04);
	--max-width:1100px;
}

/* ===== Site-wide header: enforce identical navbar across all pages ===== */
/* High specificity + !important to override page-level CSS conflicts */
body .nav {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	top: 0 !important;
	z-index: 1000 !important;
	backdrop-filter: blur(6px) !important;
	background: linear-gradient(180deg, rgba(246,249,252,0.9), rgba(255,255,255,0.6)) !important;
}
body .nav-inner {
	max-width: var(--max-width) !important;
	margin: 0 auto !important;
	padding: 18px 28px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
}
body .brand {
	font-weight: 700 !important;
	color: var(--accent-1) !important;
	font-size: 20px !important;
	letter-spacing: -0.02em !important;
}
body .brand .dot { color: var(--accent-2) !important; margin-left: 6px !important; }
body .nav-links { margin: 0 auto !important; display: flex !important; gap: 18px !important; align-items: center !important; }
body .nav-links a { color: var(--muted) !important; text-decoration: none !important; font-weight: 600 !important; }
body .nav-links a.cta { background: linear-gradient(90deg,var(--accent),var(--accent-2)) !important; color: #fff !important; padding: 10px 14px !important; border-radius: 10px !important; box-shadow: 0 6px 18px rgba(99,102,241,0.12) !important; }
body .header-actions { margin-left: auto !important; display: flex !important; gap: 12px !important; align-items: center !important; }

/* Ensure nav links animate on landing header */
body .nav-links a { transition: transform 160ms cubic-bezier(.2,.9,.2,1) !important; }
body .nav-links a:hover { transform: translateY(-3px) !important; }
body .nav-links a.cta { transition: transform 160ms cubic-bezier(.2,.9,.2,1), box-shadow 180ms ease !important; }
body .nav-links a.cta:hover { transform: translateY(-4px) scale(1.02) !important; box-shadow: 0 12px 30px rgba(99,102,241,0.16) !important; animation: pulse 2s ease-in-out infinite; }

/* Align nav-tabs under the same centered container as .nav-inner */
body .nav-tabs { background: transparent !important; border-bottom: none !important; padding: 0 28px !important; margin: 8px auto 0 auto !important; max-width: var(--max-width) !important; }
body .nav-tabs .nav-tab { background: transparent !important; }

/* Ensure main content respects header height across pages */
html{ scroll-padding-top: 86px !important; }

/* Landing-specific: ensure buttons have hover animations even when landing.css overrides other rules */
body .btn, body .btn.primary, body .btn.ghost, body .btn-secondary, body .btn-primary, body .btn-ghost {
	transition: transform 180ms cubic-bezier(.2,.9,.2,1) !important;
	will-change: transform, box-shadow !important;
}
body .btn:hover, body .btn.primary:hover, body .btn-secondary:hover, body .btn.ghost:hover, body .btn-primary:hover {
	transform: translateY(-4px) scale(1.02) !important;
}
body .btn:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important; }
body .btn.primary:hover, body .btn-primary:hover { box-shadow: 0 14px 40px rgba(79,70,229,0.12) !important; }
body .btn.ghost:hover, body .btn-ghost:hover { background: rgba(15,23,36,0.04) !important; box-shadow: 0 8px 22px rgba(2,6,23,0.06) !important; }


/* When on app pages, allow easy repositioning of nav items: place nav-links centered by default */
.app-frontend .nav-links { margin: 0 auto !important; }

/* Enforce exact horizontal positioning: brand left, nav-links perfectly centered, actions right */
body .nav-inner { position: relative !important; }
body .nav-links { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; z-index: 1 !important; }
body .brand { position: relative !important; z-index: 2 !important; }
body .header-actions { position: absolute !important; right: 28px !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 2 !important; }

/* Small screens: revert to stacked flow so nothing overlaps */
@media (max-width:900px){
	body .nav-inner{padding:12px !important}
	body .nav-links{position:static !important;transform:none !important;margin:12px 0 0 0 !important;}
	body .header-actions{position:static !important;right:auto !important;transform:none !important;margin-left:0 !important}
}

/* Make the brand/logo flush with the viewport left edge on wide screens */
body .brand {
	position: fixed !important;
	left: calc(12px + 5vw) !important; /* moved right by ~5% of viewport */
	top: 18px !important;
	transform: none !important;
	z-index: 2001 !important;
}

/* Revert brand positioning on small screens to avoid overlap */
@media (max-width:900px){
	body .brand { position: static !important; left: auto !important; top: auto !important; transform: none !important; z-index: auto !important; }
}

/* Pin the nav links (including Login CTA) to the viewport right on wide screens */
body .nav-links {
	position: fixed !important;
	right: calc(12px + 10vw) !important; /* shifted right by 10vw */
	top: 18px !important;
	left: auto !important;
	transform: none !important;
	z-index: 2001 !important;
	display: flex !important;
	gap: 18px !important;
}

/* Revert nav-links positioning on small screens to avoid overlap */
@media (max-width:900px){
	body .nav-links { position: static !important; right: auto !important; top: auto !important; left: auto !important; transform: none !important; margin: 12px 0 0 0 !important; }
}

/* end site-wide header block */

*{box-sizing:border-box;font-family:Poppins, Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial}
html{scroll-behavior:smooth;scroll-padding-top:86px}
html,body{height:100%;margin:0;background:linear-gradient(180deg,var(--bg-0), var(--bg-1));color:var(--accent-1);-webkit-font-smoothing:antialiased}

@keyframes float {
	0%, 100% { transform: translateY(0px); }
	50% { transform: translateY(-8px); }
}

@keyframes fadeInUp {
	from { opacity: 0; transform: translateY(30px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
	0%, 100% { box-shadow: 0 18px 44px rgba(79,70,229,0.18); }
	50% { box-shadow: 0 24px 60px rgba(79,70,229,0.28); }
}

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

.nav{position:fixed;left:0;right:0;top:0;backdrop-filter:blur(6px);z-index:40}
.nav-inner{max-width:var(--max-width);margin:0 auto;padding:18px 28px;display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700;color:var(--accent-1);font-size:20px;letter-spacing:-0.02em}
.brand .dot{color:var(--accent-2);margin-left:6px}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:18px}
.nav-links a{color:var(--muted);text-decoration:none;font-weight:600}
.nav-links a.cta{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;padding:10px 14px;border-radius:10px;box-shadow:0 6px 18px rgba(99,102,241,0.12)}

.landing-root{padding-top:86px}
.hero{min-height:calc(100vh - 86px);display:flex;align-items:center;justify-content:center;padding:64px 18px}
.hero-inner{max-width:var(--max-width);margin:0 auto;display:flex;gap:48px;align-items:center;animation: fadeInUp 0.8s ease-out;}
.hero-copy{flex:1;min-width:280px}
.hero-copy h1{font-size:52px;margin:0 0 14px;line-height:1.02;color:var(--accent-1);font-weight:700}

.rotor{
	display:inline-flex;
	align-items:center;
	gap:14px;
	padding:12px 26px;
	border-radius:999px;
	background:linear-gradient(90deg,var(--accent),var(--accent-2));
	color:#fff;
	font-weight:800;
	margin-left:12px;
	transition:opacity .18s ease,transform .18s ease,box-shadow .18s ease;
	white-space:nowrap;
	font-size:1.35rem;
	box-shadow:0 18px 44px rgba(79,70,229,0.18);
	animation: float 3s ease-in-out infinite;
	transform-origin:center;
}
.rotor.hidden{opacity:0;transform:translateY(-6px) scale(.98)}
.rotor:focus{outline:3px solid rgba(99,102,241,0.18);outline-offset:3px}
.sub{color:var(--muted);margin:0 0 20px;font-size:18px}
.hero-actions{display:flex;gap:14px;margin-bottom:18px}
.hero-features{display:flex;gap:12px;list-style:none;padding:0;margin:16px 0 0;color:var(--muted);flex-wrap:wrap}
.hero-visual{width:460px;flex:0 0 460px;transform:translateY(-6px);animation: fadeInUp 1s ease-out 0.2s backwards;}
.hero-visual svg { filter: drop-shadow(0 8px 24px rgba(79,70,229,0.08)); transition: transform 0.6s ease; }
.hero-visual:hover svg { transform: scale(1.05) translateY(-4px); }

.btn{display:inline-block;padding:10px 18px;border-radius:12px;text-decoration:none;font-weight:600;transition:all .18s ease}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 10px 30px rgba(99,102,241,0.12);border:none}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(99,102,241,0.14)}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid rgba(15,23,36,0.06)}
.btn.large{padding:14px 22px}

/* Mode toggle visual */
.mode-area{margin-top:12px}
.mode-toggle{display:inline-flex;align-items:center;gap:12px;background:transparent;border-radius:999px;padding:6px;transition:transform 0.3s ease, box-shadow 0.3s ease;}
.mode-toggle:hover { transform: scale(1.03); }
.mode-toggle { cursor: pointer; }
.mode-toggle .toggle-option{background:transparent;border:0;padding:8px 14px;border-radius:999px;font-weight:700;color:var(--accent-1);cursor:pointer;text-align:center;transition:background 200ms ease,color 200ms ease,transform 160ms ease}
.mode-toggle .toggle-option .toggle-sub{display:block;font-weight:600;font-size:12px;color:var(--muted);opacity:0.9}
/* Active option gets a visible pill background */
.mode-toggle .toggle-option.active{color:#fff;background:linear-gradient(90deg,#18a6d8,#36d6ff);box-shadow:0 8px 20px rgba(24,166,216,0.12);padding:8px 16px}
.mode-toggle .toggle-switch{width:72px;height:36px;background:linear-gradient(90deg,#eaf8ff,#e6f6ff);border-radius:999px;position:relative;flex-shrink:0;box-shadow:inset 0 1px 0 rgba(255,255,255,0.6)}
.mode-toggle .toggle-thumb{position:absolute;left:6px;top:6px;width:24px;height:24px;border-radius:8px;background:linear-gradient(180deg,#18a6d8,#36d6ff);transition:left 220ms cubic-bezier(.2,.9,.2,1);box-shadow:0 6px 18px rgba(24,166,216,0.18)}
.mode-toggle[data-mode="internal"] .toggle-thumb{left:42px}
.mode-desc{margin-top:10px;color:#445e64;font-size:15px;max-width:640px}

/* Ensure visual contrast for active option when switch is on internal mode */
.mode-toggle[data-mode="internal"] .toggle-option.active{color:#05262e}

/* Attention animation to hint interactivity */
.mode-toggle.attention { animation: pulse-atten 1.6s ease-in-out 1; }
@keyframes shine {
	0% { left: -100%; }
	100% { left: 100%; }
}

@keyframes pulse-atten {
	0% { transform: translateY(0); }
	30% { transform: translateY(-4px); }
	60% { transform: translateY(0); }
	100% { transform: translateY(0); }
}

@media (max-width:700px){
	.mode-toggle{gap:8px}
	.mode-toggle .toggle-switch{width:60px;height:32px}
	.mode-toggle .toggle-thumb{width:20px;height:20px}
}

/* informal hint next to Internal Mode */
.click-hint{margin-left:8px;font-size:13px;color:#18a6d8;font-weight:600;align-self:center;pointer-events:none;opacity:0.95}
.click-hint{animation:hint-bounce 1.8s ease-in-out infinite;display:inline-block}
.click-hint .hint-arrow{display:inline-block;vertical-align:middle;margin-right:8px;color:inherit}
@keyframes hint-bounce{0%{transform:translateY(0)}50%{transform:translateY(-4px)}100%{transform:translateY(0)}}
@media (max-width:700px){.click-hint{display:none}}

.section{padding:72px 18px}
.section.pale{background: var(--bg-1)}
.container{max-width:var(--max-width);margin:0 auto}
.container h2, .container h3{color:var(--accent-1)}
.lead{color:var(--muted);max-width:920px}

/* About section refresh */
.about-section { padding:64px 18px; background: var(--bg-1); }
.about-inner { max-width:1100px; margin:0 auto; padding-top:4px; }
/* Left copy removed; make cards larger and occupy the space */
.about-grid { display:grid; grid-template-columns: repeat(2, minmax(320px, 1fr)); gap:28px; width:100%; }
.about-section { padding:64px 18px; background: var(--bg-1); }
.about-card { background: var(--card); border-radius:14px; padding:28px; box-shadow:0 14px 36px rgba(2,16,40,0.06); transition:transform 320ms cubic-bezier(.2,.9,.2,1),box-shadow 320ms ease,filter 320ms ease,opacity 320ms ease; transform:translateY(16px); opacity:0; will-change:transform,opacity; min-height:160px; border-left:6px solid rgba(15,23,36,0.03); }
.about-card:nth-child(1) { transition-delay: 0.1s; }
.about-card:nth-child(2) { transition-delay: 0.2s; }
.about-card:nth-child(3) { transition-delay: 0.3s; }
.about-card:nth-child(4) { transition-delay: 0.4s; }
.about-card.reveal { transform:translateY(0); opacity:1 }
.card-icon{display:none}
.card-icon-visual { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 12px; box-shadow: 0 4px 12px rgba(79,70,229,0.15); }
.about-card h4 { margin:6px 0 10px; font-size:18px; color:var(--accent-1); font-weight: 600; }
.about-card p { margin:0; color:var(--muted); font-size:15px; line-height: 1.6; }
.about-card:hover { transform:translateY(-8px) scale(1.02); box-shadow:0 20px 50px rgba(2,16,40,0.12); }
.about-card:hover .card-icon-visual { transform: scale(1.1) rotate(5deg); transition: transform 0.3s ease; }

@media (max-width:900px){
	.about-inner{flex-direction:column;align-items:center;text-align:center}
	.about-grid{grid-template-columns:1fr; width:100%}
	.about-hero{order:1}
	.about-grid{order:2}
}

/* Removed previous 'How it works' and 'Benefits' sections - styles cleaned up.
	Add styles for Security section and tighten contact spacing. */

.security-section { padding: 48px 18px; background: var(--bg-1); }
.security-section .container { max-width: var(--max-width); margin: 0 auto; }
.security-section h3 { margin-top: 0; color: var(--accent-1); font-size: 2rem; margin-bottom: 1rem; }
.security-section p.lead { color: var(--muted); margin-bottom: 32px; font-size:1.05rem; line-height: 1.6; }

.security-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-bottom:32px }
.security-item { background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%); border-radius:16px; padding:24px; box-shadow:0 4px 16px rgba(2,6,23,0.06); border: 1px solid rgba(79,70,229,0.08); transition: all 0.3s ease; position: relative; overflow: hidden; }
.security-item::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(180deg, #4F46E5 0%, #18a6d8 100%); opacity: 0; transition: opacity 0.3s ease; }
.security-item:hover { transform: translateY(-4px); box-shadow:0 12px 32px rgba(79,70,229,0.12); }
.security-item:hover::before { opacity: 1; }
.security-item h4{margin:0 0 8px 0;font-size:17px;color:var(--accent-1); font-weight: 600;}
.security-item p{margin:0;color:#445e64; line-height: 1.6;}

.security-badges{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0}
.security-badges .badge{background:linear-gradient(135deg, rgba(79,70,229,0.1) 0%, rgba(24,166,216,0.1) 100%);color:#063046;padding:10px 18px;border-radius:999px;font-weight:600;font-size:0.9rem;border:1px solid rgba(79,70,229,0.15);transition:all 0.3s ease;}
.security-badges .badge:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(79,70,229,0.15);}

.btn.ghost{border:1px solid rgba(15,23,36,0.06);background:transparent}
.tech-details{margin-top:12px;display:none;padding:12px 16px;border-radius:10px;background:#f8fafb;border:1px solid rgba(2,6,23,0.04)}
.tech-details .security-list{list-style:none;padding:0;margin:0;color:#445e64}
.tech-details .security-list li{padding:8px 0;border-top:1px solid rgba(15,23,36,0.04)}
.tech-details .security-list li:first-child{border-top:none}

.muted{color:var(--muted);margin-top:12px}

.contact-section { padding: 56px 18px; }
.contact-inner { max-width: var(--max-width); margin: 0 auto; }


.footer{padding:28px 18px;background:transparent;color:var(--muted)}
.footer .container{display:flex;justify-content:space-between;align-items:center}
.small{opacity:0.9}

@media (max-width:900px){
    .hero-inner{flex-direction:column-reverse;text-align:center;gap:28px}
    .hero-visual{width:320px}
    .hero-copy h1{font-size:34px}
	.rotor{display:block;margin-left:0;margin-top:12px;font-size:1.1rem;padding:12px 18px}
	/* removed grid-2 styles for deleted section */
    .nav-inner{padding:12px}
}

/* Modal styles for landing login (kept local to landing.css) */
.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background:linear-gradient(180deg,rgba(2,6,23,0.35), rgba(2,6,23,0.25));backdrop-filter:blur(6px)}
.modal-content{background-color:var(--card);margin:8% auto;padding:0;border:1px solid rgba(15,23,36,0.04);width:90%;max-width:460px;border-radius:12px;box-shadow:0 20px 50px rgba(2,6,23,0.12);overflow:hidden}
.modal-header{padding:18px;border-bottom:1px solid rgba(15,23,36,0.04);display:flex;justify-content:space-between;align-items:center}
.modal-header h2{margin:0;color:var(--accent-1);font-weight:700}
.modal-close{background:transparent;border:none;font-size:24px;cursor:pointer}
.modal-body{padding:20px}
.form-group{margin-bottom:14px}
.form-group label{display:block;margin-bottom:8px;color:var(--muted);font-size:14px}
.form-group input{width:100%;padding:12px;border:1px solid rgba(15,23,36,0.06);border-radius:10px}

/* App-specific overrides: make dashboard blend with landing look */
#main-container, #main-container.container {
	background: transparent !important;
	box-shadow: none !important;
	max-width: var(--max-width);
	margin: 0 auto;
	padding-top: 12px;
}

/* Show the landing 'Login' CTA on the app page so header matches exactly */
.app-frontend #landing-login-link { display: inline-block !important; }

/* Hide the duplicate internal logout button to avoid two CTAs */
.app-frontend #logout-btn { display: none !important; }

/* Ensure the landing CTA looks correct on app pages */
.app-frontend .nav-links a.cta { background: linear-gradient(90deg,var(--accent),var(--accent-2)) !important; color: #fff !important; padding: 10px 14px !important; border-radius: 10px !important; box-shadow: 0 6px 18px rgba(99,102,241,0.12) !important; }

/* Make page content sit on the landing gradient */
.app-frontend .main-content { background: transparent !important; }

/* Force exact landing header layout when on the app page */
.app-frontend .nav-inner { justify-content: flex-start !important; }
.app-frontend .brand { margin-right: 18px !important; }
.app-frontend .nav-links { margin-left: 0 !important; display:flex; align-items:center; gap:18px; }
.app-frontend .header-actions { margin-left: auto !important; display:flex; align-items:center; gap:12px; }

/* Make nav-links centered between brand and header-actions like landing */
.app-frontend .nav-inner { justify-content: space-between !important; }
.app-frontend .nav-links { margin: 0 auto !important; }


/* Override: ensure brand text and accent color/size take precedence */
body.app-frontend .nav-inner .brand .brand-text {
	font-size: 32px !important;
	color: #063046 !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em !important;
}
body.app-frontend .nav-inner .brand .brand-text .brand-accent {
	color: #20c7ff !important;
	margin-left: 6px !important;
}

/* Ensure hover/transition effects apply despite other overrides */
body.app-frontend .nav-inner .brand > .brand-link {
	display: inline-block !important;
	transition: transform 160ms cubic-bezier(.2,.9,.2,1) !important;
	-webkit-transform-origin: center !important;
	transform-origin: center !important;
}
body.app-frontend .nav-inner .brand > .brand-link .brand-text {
	display: inline-block !important;
	transition: transform 160ms cubic-bezier(.2,.9,.2,1) !important;
}
body.app-frontend .nav-inner .brand > .brand-link .brand-accent {
	transition: color 160ms ease, filter 160ms ease !important;
}
body.app-frontend .nav-inner .brand > .brand-link:hover .brand-text {
	transform: translateY(-3px) scale(1.04) !important;
}
body.app-frontend .nav-inner .brand > .brand-link:hover .brand-accent {
	filter: brightness(1.06) !important;
	color: #20c7ff !important;
}
body.app-frontend .nav-inner .brand > .brand-link:active .brand-text {
	transform: translateY(0) scale(0.995) !important;
}
body.app-frontend .nav-inner .brand > .brand-link:focus {
	box-shadow: 0 6px 20px rgba(32,199,255,0.12) !important;
	border-radius: 6px !important;
}
/* Underline animation for brand text (high specificity) */
body.app-frontend .nav-inner .brand > .brand-link .brand-text { position: relative !important; }
body.app-frontend .nav-inner .brand > .brand-link .brand-text::after { content: '' !important; position: absolute !important; left: 0 !important; bottom: -6px !important; height: 3px !important; width: 0 !important; background: linear-gradient(90deg,#20c7ff,#00c6ff) !important; border-radius: 3px !important; opacity: 0 !important; }
body.app-frontend .nav-inner .brand > .brand-link .brand-text::after {
	transition-property: width, opacity !important;
	transition-duration: 240ms, 180ms !important;
	transition-timing-function: cubic-bezier(.2,.9,.2,1), ease !important;
	transition-delay: 0ms, 0ms !important;
}
body.app-frontend .nav-inner .brand > .brand-link:hover .brand-text::after, body.app-frontend .nav-inner .brand > .brand-link:focus .brand-text::after { width: 100% !important; opacity: 1 !important; }


/* Stronger hover: more visible lift, subtle glow and brighter accent */
body.app-frontend .nav-inner .brand:hover > .brand-link,
body.app-frontend .nav-inner .brand > .brand-link:hover {
	cursor: pointer !important;
}
body.app-frontend .nav-inner .brand > .brand-link:hover .brand-text,
body.app-frontend .nav-inner .brand:hover .brand-text {
	transform: translateY(-6px) scale(1.08) !important;
	text-shadow: 0 6px 18px rgba(2,132,199,0.10) !important;
}
body.app-frontend .nav-inner .brand > .brand-link:hover .brand-accent,
body.app-frontend .nav-inner .brand:hover .brand-accent {
	color: #00c6ff !important;
	filter: drop-shadow(0 4px 10px rgba(0,198,255,0.12)) !important;
}

/* Keep the interaction obvious on touch/active */
body.app-frontend .nav-inner .brand > .brand-link:active .brand-text,
body.app-frontend .nav-inner .brand:active .brand-text {
	transform: translateY(0) scale(0.995) !important;
}

/* Debug-visible hover: add subtle background and padding so hover is obvious */
body.app-frontend .nav-inner .brand > .brand-link:hover,
body.app-frontend .nav-inner .brand:hover > .brand-link {
	transform: translateY(-4px) !important;
	background: rgba(0,198,255,0.06) !important;
	padding: 2px 6px !important;
	border-radius: 6px !important;
}

/* Underline animation for landing header (non-app pages) */
body .nav-inner .brand > .brand-link .brand-text { position: relative !important; }
body .nav-inner .brand > .brand-link .brand-text::after { content: '' !important; position: absolute !important; left: 0 !important; bottom: -6px !important; height: 3px !important; width: 0 !important; background: linear-gradient(90deg,#20c7ff,#00c6ff) !important; border-radius: 3px !important; opacity: 0 !important; }
body .nav-inner .brand > .brand-link .brand-text::after {
	transition-property: width, opacity !important;
	transition-duration: 240ms, 180ms !important;
	transition-timing-function: cubic-bezier(.2,.9,.2,1), ease !important;
	transition-delay: 0ms, 0ms !important;
}
body .nav-inner .brand > .brand-link:hover .brand-text::after, body .nav-inner .brand > .brand-link:focus .brand-text::after { width: 100% !important; opacity: 1 !important; }

/* Contact section styles */
.contact-section {
	padding: 72px 18px;
	background: linear-gradient(180deg, var(--bg-0), var(--bg-1));
}

.contact-inner {
	max-width: var(--max-width);
	margin: 0 auto;
}

.contact-header {
	text-align: center;
	margin-bottom: 48px;
}

.contact-header h3 {
	font-size: 40px;
	margin: 0 0 16px;
	color: var(--accent-1);
	font-weight: 700;
}

.contact-header p {
	color: var(--muted);
	font-size: 16px;
	max-width: 600px;
	margin: 0 auto;
}

.contact-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
}

.contact-form-wrapper {
	background: var(--card);
	border-radius: 14px;
	padding: 32px;
	box-shadow: 0 14px 36px rgba(2,16,40,0.06);
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.contact-form .form-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

.contact-form label {
	color: var(--accent-1);
	font-weight: 600;
	font-size: 14px;
}

.contact-form input,
.contact-form textarea {
	padding: 12px 14px;
	border: 1px solid rgba(15,23,36,0.08);
	border-radius: 10px;
	font-family: inherit;
	font-size: 14px;
	color: var(--accent-1);
	transition: border-color 200ms ease, box-shadow 200ms ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
}

.contact-form textarea {
	resize: vertical;
	min-height: 140px;
	line-height: 1.5;
}

.contact-form button {
	margin-top: 8px;
	align-self: flex-start;
}

.contact-info {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.contact-card {
	background: var(--card);
	border-radius: 14px;
	padding: 24px;
	box-shadow: 0 14px 36px rgba(2,16,40,0.06);
	transition: transform 240ms ease, box-shadow 240ms ease;
}

.contact-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 50px rgba(2,16,40,0.08);
}

.contact-card h4 {
	margin: 0 0 12px;
	font-size: 16px;
	color: var(--accent-1);
	font-weight: 700;
}

.contact-card p {
	margin: 0;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.6;
}

.contact-card a {
	color: var(--accent);
	text-decoration: none;
	font-weight: 600;
	transition: color 200ms ease;
}

.contact-card a:hover {
	color: var(--accent-2);
}

@media (max-width: 900px) {
	.contact-content {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.contact-header h3 {
		font-size: 28px;
	}

	.contact-form-wrapper {
		padding: 24px;
	}

	.contact-card {
		padding: 20px;
	}
}