/* ============================================================ */
/* DUAL THEME SYSTEM (CSS Custom Properties)                    */
/* :root = Premium Light Mode, .dark = Soft Tech Gray Dark Mode */
/* ============================================================ */
:root {
    --bg-body: #F8FAFC;
    --bg-card: #FFFFFF;
    --bg-hero: linear-gradient(180deg, #F0F9FF, #F8FAFC);
    --bg-services: #F8FAFC;
    --bg-pricing: #F9FAFB;
    --bg-portfolio: #FFFFFF;
    --bg-faq: #F9FAFB;
    --bg-contact: #FFFFFF;
    --bg-footer: #F8FAFC;
    --text-heading: #0F172A;
    --text-body: #475569;
    --text-muted: #64748B;
    --text-muted-light: #94A3B8;
    --border-color: #E2E8F0;
    --border-hover: #BFDBFE;
    --shadow-card: 0 4px 30px rgba(0, 0, 0, 0.03);
    --shadow-hover: 0 12px 40px rgba(59, 130, 246, 0.08);
    --accent-gradient: linear-gradient(135deg, #3B82F6, #6366F1);
    --accent-color: #3B82F6;
    --button-text: white;
    --nav-link-color: #475569;
    --nav-link-active: #0F172A;
    --logo-gradient: linear-gradient(135deg, #0F172A, #3B82F6);
    --header-bg: rgba(255, 255, 255, 0.8);
    --header-border: rgba(226, 232, 240, 0.5);
    --form-bg: #F8FAFC;
    --form-border: #E2E8F0;
    --form-focus: #3B82F6;
    --label-color: #94A3B8;
    --tag-bg: #FFFFFF;
    --tag-border: #E2E8F0;
    --tag-text: #475569;
    --hero-ambient: radial-gradient(circle at 30% 40%, rgba(59,130,246,0.04) 0%, transparent 70%);
    --badge-bg: rgba(59,130,246,0.08);
    --badge-text: #2563EB;
    --badge-border: rgba(59,130,246,0.12);
    --toggle-track: #E2E8F0;
    --toggle-thumb: #FFFFFF;
    --toggle-shadow: rgba(0,0,0,0.08);
    --footer-border: #E2E8F0;
    --icon-bg: linear-gradient(135deg, #EFF6FF, #DBEAFE);
    --faq-bg-item: #FFFFFF;
    --faq-border: #F1F5F9;
    --faq-active-border: #BFDBFE;
    --pricing-bg-item: #FFFFFF;
    --pricing-border: #F1F5F9;
    --portfolio-bg-card: #FFFFFF;
    --portfolio-border: #F1F5F9;
    --portfolio-placeholder-opacity: 0.7;
}

.dark {
    --bg-body: #1C1C1E;
    --bg-card: #2C2C2E;
    --bg-hero: linear-gradient(180deg, #202024, #1C1C1E);
    --bg-services: #202024;
    --bg-pricing: #1C1C1E;
    --bg-portfolio: #202024;
    --bg-faq: #1C1C1E;
    --bg-contact: #202024;
    --bg-footer: #1C1C1E;
    --text-heading: #FFFFFF;
    --text-body: #D1D1D6;
    --text-muted: #A1A1AA;
    --text-muted-light: #A1A1AA;
    --border-color: #3A3A3C;
    --border-hover: #D1D1D6;
    --shadow-card: 0 4px 30px rgba(0, 0, 0, 0.15);
    --shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.2);
    --accent-gradient: linear-gradient(135deg, #FFFFFF, #6366F1);
    --accent-color: #A78BFA;
    --button-text: #0F172A;
    --nav-link-color: #A1A1AA;
    --nav-link-active: #FFFFFF;
    --logo-gradient: linear-gradient(135deg, #FFFFFF, #A78BFA);
    --header-bg: rgba(28, 28, 30, 0.8);
    --header-border: rgba(255, 255, 255, 0.06);
    --form-bg: rgba(44, 44, 46, 0.8);
    --form-border: #3A3A3C;
    --form-focus: #A78BFA;
    --label-color: #A1A1AA;
    --tag-bg: rgba(255,255,255,0.04);
    --tag-border: #3A3A3C;
    --tag-text: #D1D1D6;
    --hero-ambient: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.03) 0%, transparent 70%);
    --badge-bg: rgba(255,255,255,0.06);
    --badge-text: #E5E5EA;
    --badge-border: rgba(255,255,255,0.08);
    --toggle-track: #3A3A3C;
    --toggle-thumb: #FFFFFF;
    --toggle-shadow: rgba(255,255,255,0.05);
    --footer-border: #3A3A3C;
    --icon-bg: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(167,139,250,0.08));
    --faq-bg-item: #2C2C2E;
    --faq-border: #3A3A3C;
    --faq-active-border: #A78BFA;
    --pricing-bg-item: #2C2C2E;
    --pricing-border: #3A3A3C;
    --portfolio-bg-card: #2C2C2E;
    --portfolio-border: #3A3A3C;
    --portfolio-placeholder-opacity: 0.7;
}

/* ---------- RESET & BASE ---------- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { font-family:'Inter',sans-serif; background:var(--bg-body); color:var(--text-body); line-height:1.65; overflow-x:hidden; transition:background .3s,color .3s; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

/* ---------- CONTAINER ---------- */
.container { max-width:1280px; margin:0 auto; padding:0 2rem; }

/* ---------- TYPOGRAPHY ---------- */
.section-label { display:inline-block; background:var(--badge-bg); color:var(--badge-text); padding:.35rem 1.2rem; border-radius:9999px; font-size:.8rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; margin-bottom:1.25rem; border:1px solid var(--badge-border); transition:background .3s,color .3s,border-color .3s; }
.section-title { font-size:2.6rem; font-weight:800; color:var(--text-heading); margin-bottom:.75rem; line-height:1.15; letter-spacing:-.02em; transition:color .3s; }
.section-desc { font-size:1.1rem; color:var(--text-body); max-width:700px; margin-bottom:3rem; transition:color .3s; }

/* ---------- BUTTONS ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; font-weight:600; border:none; border-radius:14px; cursor:pointer; transition:all .25s cubic-bezier(.25,.1,.25,1); font-size:.9rem; padding:.8rem 2rem; text-align:center; }
.btn-primary { background:var(--accent-gradient); color:var(--button-text); box-shadow:0 2px 12px rgba(59,130,246,.2); }
.btn-primary:hover { transform:scale(1.04); box-shadow:0 6px 24px rgba(59,130,246,.35); }
.btn-outline { background:transparent; border:1.5px solid var(--border-color); color:var(--text-body); }
.btn-outline:hover { background:rgba(255,255,255,.04); border-color:var(--border-hover); box-shadow:0 0 0 2px rgba(255,255,255,.05); }
.btn-gradient { background:linear-gradient(135deg,#3B82F6,#6366F1,#8B5CF6); background-size:200% 200%; color:white; animation:gradientShift 5s ease infinite; box-shadow:0 2px 12px rgba(99,102,241,.2); }
.btn-gradient:hover { transform:scale(1.04); box-shadow:0 8px 32px rgba(99,102,241,.4); }
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.btn-lg { padding:1rem 2.8rem; font-size:1rem; }
.btn-sm { padding:.5rem 1.4rem; font-size:.8rem; }

/* ---------- HEADER ---------- */
.site-header { position:fixed; top:0; left:0; width:100%; z-index:1000; background:var(--header-bg); backdrop-filter:blur(16px) saturate(180%); -webkit-backdrop-filter:blur(16px) saturate(180%); border-bottom:1px solid var(--header-border); transition:background .3s,border-color .3s; }
.header-inner { max-width:1280px; margin:0 auto; padding:0 2rem; display:flex; align-items:center; justify-content:space-between; height:70px; }
.logo { font-size:1.5rem; font-weight:800; background:var(--logo-gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; letter-spacing:-.5px; transition:background .3s; }
.main-nav { display:flex; gap:2.2rem; }
.nav-link { font-size:.9rem; font-weight:500; color:var(--nav-link-color); transition:color .2s,border-bottom .2s; padding-bottom:4px; border-bottom:2px solid transparent; }
.nav-link:hover, .nav-link.active { color:var(--nav-link-active); border-bottom-color:var(--accent-color); }
.header-actions { display:flex; align-items:center; gap:1.2rem; }
.lang-switch { display:flex; gap:.5rem; }
.lang-item { cursor:pointer; font-size:.75rem; font-weight:600; padding:.25rem .6rem; border-radius:6px; color:var(--text-muted); transition:.2s; }
.lang-item.active { color:var(--text-heading); background:rgba(59,130,246,.1); }

/* THEME TOGGLE */
.theme-toggle { cursor:pointer; user-select:none; display:flex; align-items:center; }
.toggle-track { position:relative; width:56px; height:28px; background:var(--toggle-track); border-radius:9999px; display:flex; align-items:center; justify-content:space-between; padding:0 6px; box-shadow:inset 0 1px 3px rgba(0,0,0,.1); transition:background .3s; }
.toggle-icon { font-size:14px; line-height:1; z-index:2; pointer-events:none; }
.toggle-thumb { position:absolute; top:2px; left:2px; width:24px; height:24px; background:var(--toggle-thumb); border-radius:50%; box-shadow:0 1px 4px var(--toggle-shadow); transition:all .3s cubic-bezier(.4,0,.2,1); z-index:1; }
.dark .toggle-thumb { left:30px; }
.dark .toggle-track { background:#3A3A3C; }

.mobile-toggle { display:none; flex-direction:column; gap:4px; background:transparent; border:none; cursor:pointer; padding:6px; }
.mobile-toggle span { width:22px; height:2px; background:var(--text-heading); border-radius:2px; transition:.3s; }
@media (max-width:768px) { .main-nav { display:none; position:absolute; top:70px; left:0; width:100%; background:var(--header-bg); flex-direction:column; padding:1.5rem 2rem; gap:1.2rem; box-shadow:0 12px 30px rgba(0,0,0,.05); } .main-nav.open { display:flex; } .mobile-toggle { display:flex; } .header-cta { font-size:.75rem; padding:.4rem 1rem; } }

/* ---------- HERO ---------- */
.hero { padding:12rem 0 8rem; position:relative; overflow:hidden; background:var(--bg-hero); transition:background .3s; }
.hero-bg-glow { position:absolute; top:-30%; left:-10%; width:80%; height:80%; background:var(--hero-ambient); pointer-events:none; }
.hero-inner { position:relative; text-align:center; }
.hero-badge { display:inline-block; background:var(--badge-bg); color:var(--badge-text); padding:.3rem 1.4rem; border-radius:999px; font-size:.8rem; font-weight:600; margin-bottom:1.5rem; border:1px solid var(--badge-border); transition:background .3s,color .3s,border-color .3s; }
.hero-title { font-size:clamp(2rem,5vw,4rem); font-weight:900; color:var(--text-heading); line-height:1.12; max-width:1000px; margin:0 auto 1.2rem; letter-spacing:-.02em; transition:color .3s; }
.hero-sub { font-size:1.15rem; color:var(--text-body); max-width:720px; margin:0 auto 2.5rem; transition:color .3s; }
.hero-ctas { display:flex; justify-content:center; gap:1.2rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.hero-tags { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-bottom:2.5rem; }
.hero-tags span { background:var(--tag-bg); border:1px solid var(--tag-border); padding:.35rem 1.2rem; border-radius:9999px; font-size:.8rem; color:var(--tag-text); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); transition:background .3s,border-color .3s,color .3s; }
.hero-note { max-width:700px; margin:0 auto; padding:1rem 1.5rem; background:var(--bg-card); border-left:4px solid var(--accent-color); border-radius:12px; font-size:.85rem; color:var(--text-body); box-shadow:var(--shadow-card); transition:background .3s,color .3s,box-shadow .3s; }
@media (max-width:600px) { .hero { padding:8rem 0 4rem; } .hero-title { font-size:1.8rem; } }

/* ---------- SERVICES ---------- */
.services { padding:7rem 0; background:var(--bg-services); transition:background .3s; }
.bento-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.2rem; }
.bento-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:20px; padding:2rem; transition:all .3s cubic-bezier(.25,.1,.25,1); box-shadow:var(--shadow-card); cursor:default; }
.bento-card:hover { transform:translateY(-4px); border-color:var(--border-hover); box-shadow:var(--shadow-hover); }
.bento-icon { width:52px; height:52px; margin-bottom:1rem; display:flex; align-items:center; justify-content:center; background:var(--icon-bg); border-radius:14px; padding:8px; border:1px solid var(--border-color); transition:background .3s,border-color .3s; }
.bento-icon svg { width:100%; height:100%; filter:drop-shadow(0 1px 3px rgba(0,0,0,.1)); }
.bento-card h3 { font-size:1.1rem; font-weight:700; color:var(--text-heading); margin-bottom:.5rem; transition:color .3s; }
.bento-card p { font-size:.85rem; color:var(--text-body); line-height:1.5; transition:color .3s; }

/* ---------- PRICING ---------- */
.pricing { padding:7rem 0; background:var(--bg-pricing); transition:background .3s; }
.pricing-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1rem; }
.pricing-item { background:var(--pricing-bg-item); border:1px solid var(--pricing-border); border-radius:16px; padding:1.2rem 1.8rem; display:flex; justify-content:space-between; align-items:center; transition:border-color .3s,box-shadow .3s,background .3s; box-shadow:0 2px 8px rgba(0,0,0,.02); }
.pricing-item:hover { border-color:var(--border-hover); box-shadow:0 6px 20px rgba(0,0,0,.05); }
.pricing-name { font-weight:600; color:var(--text-heading); font-size:.95rem; transition:color .3s; }
.pricing-price { font-weight:700; color:var(--accent-color); font-size:1.1rem; white-space:nowrap; transition:color .3s; }
.pricing-footer { text-align:center; margin-top:3rem; }
.pricing-note { font-size:.85rem; color:var(--text-muted); margin-bottom:1.5rem; transition:color .3s; }

/* ---------- PORTFOLIO ---------- */
.portfolio { padding:7rem 0; background:var(--bg-portfolio); transition:background .3s; }
.portfolio-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1.5rem; }
.portfolio-card { background:var(--portfolio-bg-card); border:1px solid var(--portfolio-border); border-radius:20px; padding:2.5rem 1.5rem; text-align:center; transition:all .3s; min-height:180px; display:flex; flex-direction:column; justify-content:center; align-items:center; box-shadow:var(--shadow-card); }
.portfolio-card:hover { border-color:var(--border-hover); box-shadow:var(--shadow-hover); transform:translateY(-4px); }
.portfolio-domain { font-size:1.4rem; font-weight:700; color:var(--text-heading); margin-bottom:.4rem; transition:color .3s; }
.portfolio-desc { font-size:.85rem; color:var(--text-body); transition:color .3s; }
.portfolio-placeholder { opacity:var(--portfolio-placeholder-opacity); font-style:italic; }

/* ---------- FAQ ---------- */
.faq { padding:7rem 0; background:var(--bg-faq); transition:background .3s; }
.faq-list { max-width:800px; margin:0 auto; }
.faq-item { background:var(--faq-bg-item); border:1px solid var(--faq-border); border-radius:16px; margin-bottom:.8rem; overflow:hidden; transition:border-color .3s,box-shadow .3s,background .3s; box-shadow:0 2px 6px rgba(0,0,0,.02); }
.faq-item.active { border-color:var(--faq-active-border); box-shadow:0 4px 16px rgba(59,130,246,.04); }
.faq-question { padding:1.2rem 1.8rem; font-weight:600; color:var(--text-heading); cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-size:1rem; transition:color .3s; }
.faq-question::after { content:'+'; font-size:1.4rem; color:var(--accent-color); transition:transform .3s,color .3s; }
.faq-item.active .faq-question::after { content:'−'; transform:rotate(180deg); }
.faq-answer { padding:0 1.8rem; max-height:0; overflow:hidden; transition:max-height .3s ease,padding .3s ease; color:var(--text-body); font-size:.9rem; line-height:1.7; }
.faq-item.active .faq-answer { max-height:500px; padding:0 1.8rem 1.5rem; }

/* ---------- CONTACT ---------- */
.contact { padding:7rem 0; background:var(--bg-contact); transition:background .3s; }
.contact-form-wrap { max-width:680px; margin:0 auto; }
.contact-form { display:flex; flex-direction:column; gap:1.2rem; }
.form-row { display:flex; gap:1.2rem; flex-wrap:wrap; }
.form-row .form-group { flex:1; min-width:200px; }
.form-group { position:relative; }
.form-group input,.form-group select,.form-group textarea { width:100%; padding:.9rem 1.2rem; background:var(--form-bg); border:1px solid var(--form-border); border-radius:14px; font-size:.95rem; color:var(--text-heading); transition:border-color .3s,box-shadow .3s,background .3s; font-family:inherit; outline:none; }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { border-color:var(--form-focus); box-shadow:0 0 0 3px rgba(59,130,246,.15); }
.form-group label { position:absolute; left:1.2rem; top:.9rem; font-size:.95rem; color:var(--label-color); transition:.2s ease; pointer-events:none; background:transparent; padding:0 .2rem; }
.form-group input:focus+label,.form-group input:not(:placeholder-shown)+label,.form-group textarea:focus+label,.form-group textarea:not(:placeholder-shown)+label { top:-.6rem; font-size:.75rem; color:var(--form-focus); background:var(--bg-contact); }
.form-group select+label { top:-.6rem; font-size:.75rem; color:var(--form-focus); background:var(--bg-contact); }
.form-row-language { align-items:center; gap:1rem; padding:.5rem 0; }
.form-label-inline { color:var(--text-body); font-size:.9rem; font-weight:500; transition:color .3s; }
.radio-inline { display:inline-flex; align-items:center; gap:.3rem; color:var(--text-muted); font-size:.9rem; cursor:pointer; transition:color .3s; }
.radio-inline input[type="radio"] { accent-color:var(--accent-color); width:auto; }

/* ---------- NEW CONSENT & BUTTON STYLES ---------- */
/* Hide old conflicting classes */
.form-group-checkbox,
.btn-submit {
    display: none !important;
}

/* Flex utility classes for new layout */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.gap-6 { gap: 1.5rem; }
.w-full { width: 100%; }
.items-start { align-items: flex-start; }
.gap-3 { gap: 0.75rem; }
.text-left { text-align: left; }
.mt-1 { margin-top: 0.25rem; }
.h-4 { height: 1rem; }
.w-4 { width: 1rem; }
.rounded { border-radius: 0.25rem; }
.text-sm { font-size: 0.875rem; }
.select-none { user-select: none; }
.text-red-500 { color: #ef4444; }
.pt-2 { padding-top: 0.5rem; }

/* Checkbox styling */
#consent {
    appearance: auto; /* fallback */
    accent-color: var(--accent-color);
}

/* Submit button styling */
#submit-btn {
    cursor: pointer;
    display: block;
    text-align: center;
    background: linear-gradient(135deg, #3B82F6, #6366F1);
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 600;
    padding: 1rem 2.8rem;
    box-shadow: 0 2px 12px rgba(99,102,241,0.2);
    transition: all 0.3s cubic-bezier(0.25,0.1,0.25,1);
    width: 100%;
    max-width: 400px;
    margin: 0 auto; /* center if needed */
}

#submit-btn:hover {
    transform: scale(1.04);
    box-shadow: 0 8px 32px rgba(99,102,241,0.4);
}

#submit-btn:active {
    transform: scale(0.98);
}

/* Dark mode overrides for new classes */
.dark .text-slate-600 { color: #A1A1AA; }
.dark .border-gray-300 { border-color: #3A3A3C; }
.dark #submit-btn {
    background: linear-gradient(135deg, #FFFFFF, #6366F1);
    color: #0F172A;
}

/* ---------- FOOTER ---------- */
.site-footer { background:var(--bg-footer); border-top:1px solid var(--footer-border); padding:4rem 0 1.5rem; transition:background .3s,border-color .3s; }
.footer-inner { display:grid; grid-template-columns:2fr 1fr 1fr; gap:2.5rem; }
.footer-brand .logo { font-size:1.8rem; margin-bottom:.6rem; }
.footer-desc { color:var(--text-muted); font-size:.85rem; line-height:1.7; max-width:300px; transition:color .3s; }
.footer-links h4,.footer-contact h4 { color:var(--text-heading); font-size:.9rem; font-weight:700; margin-bottom:1rem; transition:color .3s; }
.footer-links a,.footer-contact a { display:block; color:var(--text-muted); font-size:.85rem; margin-bottom:.4rem; transition:color .2s; }
.footer-links a:hover,.footer-contact a:hover { color:var(--text-heading); }
.footer-bottom { grid-column:1/-1; border-top:1px solid var(--footer-border); padding-top:1.8rem; margin-top:2.5rem; display:flex; justify-content:space-between; font-size:.8rem; color:var(--text-muted-light); transition:color .3s,border-color .3s; }
@media (max-width:768px) { .footer-inner { grid-template-columns:1fr; text-align:center; } .footer-desc { max-width:100%; } .footer-bottom { flex-direction:column; gap:.3rem; } }