/* Base variables and reset */
:root{
  --bg:#0A0F14;
  --panel:#0F1824;
  --text:#EAF4FF;
  --muted:#9FB0C6;
  --line:rgba(255,255,255,0.08);
  --accent-1:#4FF0C5;
  --accent-2:#6C7BFF;
  --accent-3:#14D1FF;
  --card-glass:rgba(16,24,36,.55);
  --shadow:0 10px 30px rgba(0,0,0,.35), inset 0 0 1px rgba(255,255,255,.06);
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  background: radial-gradient(1200px 600px at 10% 0%, #0D1521 0%, var(--bg) 60%) fixed;
  color:var(--text);
  font: 400 16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{display:block; max-width:100%; height:auto; object-fit:cover; aspect-ratio: 16/9;}
a{color:inherit; text-decoration:none}
.container{width:min(1120px, 92%); margin-inline:auto}

/* Typography */
.h1{font:800 44px/1.1 Manrope, Inter, sans-serif; letter-spacing:-.02em}
.h2{font:800 32px/1.2 Manrope, Inter, sans-serif; letter-spacing:-.01em; margin:0 0 .25rem}
.h5{font:700 18px/1.35 Manrope, Inter, sans-serif; margin:0 0 .25rem}
.lead{font-size:18px; color:var(--muted); margin:.5rem 0 1rem}
.muted{color:var(--muted)}

/* Header */
.site-header{position:sticky; top:0; z-index:40; backdrop-filter:saturate(140%) blur(12px); background:linear-gradient(180deg, rgba(10,15,20,.75), rgba(10,15,20,.5)); border-bottom:1px solid var(--line)}
.header-inner{display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:16px; padding:12px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.brand-mark{width:14px; height:14px; border-radius:50%; background: radial-gradient(90% 90% at 30% 30%, var(--accent-1), var(--accent-2)); box-shadow:0 0 16px var(--accent-2)}
.brand-text{letter-spacing:.2px}
.main-nav{position:relative}
.nav-toggle{display:none; background:transparent; color:var(--text); border:1px solid var(--line); padding:8px 10px; border-radius:10px}
.nav-list{display:flex; gap:18px; list-style:none; margin:0; padding:0}
.nav-list .nav-link{padding:8px 10px; border-radius:10px; transition:background .25s, color .25s}
.nav-list .nav-link:hover{background:rgba(255,255,255,.06)}
.header-cta{display:flex; align-items:center; gap:16px}
.lang-switch{display:flex; gap:8px; padding-left:8px; border-left:1px solid var(--line)}
.lang{opacity:.7; font-weight:600}
.lang.is-active{opacity:1; color:var(--accent-1)}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 18px; border-radius:14px; font-weight:700; letter-spacing:.2px; transition: transform .15s ease, box-shadow .3s ease, background .25s ease; border:1px solid transparent; white-space:nowrap}
.btn-primary{color:#001018; background: linear-gradient(135deg, var(--accent-1), var(--accent-3)); box-shadow:0 6px 24px rgba(79,240,197,.35)}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 10px 28px rgba(79,240,197,.45)}
.btn-ghost{color:var(--text); border-color:var(--line); background:rgba(255,255,255,.04)}
.btn-ghost:hover{background:rgba(255,255,255,.08)}

/* Glass and glow */
.glass{background:var(--card-glass); border:1px solid rgba(255,255,255,.08); border-radius:18px; box-shadow:var(--shadow); backdrop-filter: blur(8px) saturate(120%)}
.glow{position:relative}
.glow::after{content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none; background: radial-gradient(500px 120px at 20% 0%, rgba(108,123,255,.15), transparent 60%), radial-gradient(400px 120px at 80% 100%, rgba(79,240,197,.18), transparent 60%)}

/* Hero */
.hero{position:relative; padding:120px 0 60px; overflow:hidden}
.hero-gradient{position:absolute; inset:0; background: radial-gradient(1000px 400px at 10% -10%, rgba(108,123,255,.25), transparent 50%), radial-gradient(900px 500px at 110% 110%, rgba(79,240,197,.18), transparent 60%); pointer-events:none}
.hero-inner{display:grid; grid-template-columns: 1.1fr .9fr; align-items:center; gap:32px}
.hero-content{animation: fade-up .8s ease both}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:.75rem}
.hero-media{border-radius:22px; overflow:hidden}
.services-line{margin:10px 0 16px; font-weight:600; color:#D6E7FF; background:linear-gradient(90deg, rgba(108,123,255,.18), rgba(20,209,255,.18)); border:1px solid var(--line); padding:10px 14px; border-radius:12px}

/* Services */
.services{padding:72px 0}
.section-top{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px}
.service-grid{list-style:none; margin:24px 0 8px; padding:0; display:grid; grid-template-columns: repeat(4, 1fr); gap:16px}
.service-card{padding:18px; min-height:140px; border:1px solid rgba(255,255,255,.07)}
.service-icon{color:var(--accent-1); opacity:.9; margin-bottom:10px}
.strip-repeat{margin-top:18px; color:#CFE7FF; opacity:.85; padding:10px 14px; border:1px dashed rgba(255,255,255,.14); border-radius:12px}
.strip-repeat.small{opacity:.7; margin-top:10px}
.services-media{margin-top:22px; border-radius:18px; overflow:hidden}

/* Why */
.why{padding:72px 0}
.features-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:18px}
.feature{padding:18px; border:1px solid rgba(255,255,255,.07)}

/* How */
.how{padding:72px 0}
.steps{margin:6px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(4, 1fr); gap:16px}
.step{display:flex; gap:14px; align-items:flex-start; background:var(--card-glass); border:1px solid rgba(255,255,255,.07); border-radius:16px; padding:16px}
.step-num{width:28px; height:28px; min-width:28px; display:grid; place-items:center; border-radius:8px; background:linear-gradient(135deg, var(--accent-2), var(--accent-3)); color:#001018; font-weight:800}

/* Testimonials */
.testimonials{padding:72px 0}
.testimonial-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:18px}
.t-card{padding:18px; border:1px solid rgba(255,255,255,.07)}
.t-card p{margin:0 0 .75rem}
.t-card footer{color:var(--muted); font-weight:600}

/* About */
.about{padding:72px 0}
.about-inner{display:grid; grid-template-columns:1.05fr .95fr; gap:24px; align-items:center}
.about-copy .about-bullets{margin:12px 0; padding-left:18px}
.about-copy .about-bullets li{margin:4px 0}
.about-strip{margin-top:12px; color:#D6E7FF; opacity:.85; padding:10px 14px; border:1px dashed rgba(255,255,255,.14); border-radius:12px}
.about-media{border-radius:18px; overflow:hidden}

/* CTA */
.cta{padding:80px 0; background: linear-gradient(0deg, rgba(108,123,255,.08), rgba(108,123,255,0) 40%)}
.cta-panel{padding:28px; border:1px solid rgba(255,255,255,.08); text-align:center}
.cta-actions{display:flex; justify-content:center; gap:12px; margin-top:12px}

/* CONTACT */
.contact{padding:80px 0; background: linear-gradient(180deg, rgba(20,209,255,.08), rgba(79,240,197,0) 50%)}
/* Form visual system (applies when the real form is injected at step 10) */
.contact-form{max-width:760px; margin:0 auto; padding:24px; background:var(--card-glass); border:1px solid rgba(255,255,255,.08); border-radius:18px; box-shadow:var(--shadow)}
.form-field{display:flex; flex-direction:column; gap:8px; margin:10px 0}
.form-field label{font-weight:600}
.form-field input, .form-field textarea{width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:var(--text); outline:none; transition:border-color .2s, background .2s}
.form-field input::placeholder, .form-field textarea::placeholder{color:#ABC3DA}
.form-field input:focus, .form-field textarea:focus{border-color:var(--accent-1); background:rgba(255,255,255,.06)}
.form-field.consent{flex-direction:row; align-items:center; gap:10px}
.contact-submit{display:flex; justify-content:flex-end; margin-top:12px}
.contact-submit .btn{min-width:180px}

/* Footer */
.site-footer{border-top:1px solid var(--line); background:linear-gradient(180deg, rgba(10,15,20,.65), rgba(10,15,20,.9))}
.footer-inner{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; padding:20px 0}
.footer-nav{display:flex; flex-wrap:wrap; gap:14px; justify-content:center}
.footer-nav a{opacity:.9}
.footer-nav a:hover{opacity:1}
.footer-brand{display:flex; align-items:center; gap:10px}
.footer-copy{color:var(--muted); text-align:right}

/* Motion */
@keyframes fade-up{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)}}
.fade-up{opacity:0; animation: fade-up .8s ease both; animation-delay: var(--delay, 0s)}
.parallax img{transform: translateY(0); transition: transform .6s ease}
.parallax:hover img{transform: translateY(-6px)}

/* Media queries */
@media (max-width:1024px){
  .hero-inner{grid-template-columns: 1fr; gap:22px}
  .service-grid{grid-template-columns:repeat(2, 1fr)}
  .features-grid{grid-template-columns:repeat(2, 1fr)}
  .steps{grid-template-columns:repeat(2, 1fr)}
  .testimonial-grid{grid-template-columns:1fr 1fr}
  .about-inner{grid-template-columns:1fr;}
}
@media (max-width:480px){
  .h1{font-size:30px}
  .h2{font-size:24px}
  .header-inner{grid-template-columns:auto 1fr auto}
  .nav-toggle{display:inline-flex}
  .nav-list{position:absolute; right:0; top:calc(100% + 10px); background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:10px; display:none; flex-direction:column; min-width:220px}
  .nav-list.open{display:flex}
  .service-grid{grid-template-columns:1fr}
  .features-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .testimonial-grid{grid-template-columns:1fr}
  .cta-actions{flex-direction:column}
}

/* Contrast assurance */
.hero, .services, .why, .how, .testimonials, .about, .cta, .contact, .site-header, .site-footer{color:var(--text)}

/* contact-details:start */
.contact-details {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.92));
  border: 1px solid var(--border, rgba(148, 163, 184, 0.35));
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  display: grid;
  gap: 0.65rem;
  color: var(--text, #0f172a);
}

.contact-details strong {
  letter-spacing: 0.05em;
  font-size: 0.95rem;
  text-transform: uppercase;
  color: var(--muted, #475569);
}

.contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.contact-row .label {
  color: var(--muted, #475569);
  font-size: 0.95rem;
}

.contact-link {
  color: var(--text, #0f172a);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.contact-link:hover {
  color: var(--color-accent, #2563eb);
}

@media (max-width: 540px) {
  .contact-row {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* contact-details:end */

/* contrast-guard:start */
body {
  color: var(--text, #0f172a);
  background-color: var(--bg, #ffffff);
}

header, section, footer, .contact-panel, .cta-box, .feature-card, .contact-details {
  color: var(--text, #0f172a);
}

.dark, .dark-section, footer.dark, header.dark {
  background-color: var(--color-surface, #0f172a);
  color: var(--color-contrast, #f8fafc);
}

.contact-form input,
.contact-form textarea {
  color: var(--text, #0f172a);
  background: #ffffff;
}

.cta-btn, .contact-submit {
  color: #ffffff;
}
/* contrast-guard:end */

/* contact-wrapper-styles:start */
.contact-shell {
  position: relative;
  isolation: isolate;
}

.contact-panel {
  width: min(640px, 100%);
  margin-inline: auto;
  backdrop-filter: blur(18px);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.9));
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 24px;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-soft, 0 12px 24px rgba(15, 23, 42, 0.12));
}

.contact-form-card {
  width: 100%;
  max-width: 720px;
}

.contact-heading {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.contact-kicker {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.85rem;
  opacity: 0.65;
  color: var(--color-accent, #2563eb);
}

.contact-title {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2rem);
}

.contact-lead {
  margin: 0;
  color: var(--muted, #475569);
  max-width: 640px;
}

.contact-form-shell {
  margin-top: 1.25rem;
}

.contact-form {
  display: grid;
  gap: 1rem;
}

.form-field {
  display: grid;
  gap: 0.5rem;
  color: var(--text, #0f172a);
}

.form-field.consent {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.75rem;
}

.form-field.consent span {
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.85;
}

.form-field span {
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  opacity: 0.65;
}

.form-field input,
.form-field textarea {
  padding: 0.9rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.45));
  background: #fff;
  color: inherit;
  resize: vertical;
  min-height: 54px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--muted, #6b7280);
}

.contact-form input[type="checkbox"] {
  width: auto;
  min-height: auto;
  accent-color: var(--color-accent, #2563eb);
}

.form-field textarea {
  min-height: 140px;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: rgba(56, 189, 248, 0.85);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
  transform: translateY(-2px);
}

.contact-submit {
  justify-self: start;
  padding: 1rem 2.6rem;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, var(--color-accent, #2563eb) 0%, var(--color-accent-strong, #22d3ee) 100%);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease;
}

.contact-submit:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 18px 45px rgba(244, 114, 182, 0.32);
  filter: brightness(1.05);
}

@media (max-width: 640px) {
  .contact-panel {
    padding: 1.25rem;
  }
}
/* contact-wrapper-styles:end */