/* ==========================================================================
   Cloud Support Experts — 2026 Premium Dark Theme
   3D Animations · Glassmorphism · Futuristic · SEO-Optimized
   ========================================================================== */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg:          #04060c;
  --bg-alt:      #0a0f1c;
  --bg-card:     rgba(255,255,255,.03);
  --bg-glass:    rgba(10,15,28,.78);
  --border:      rgba(255,255,255,.07);
  --border-hover:rgba(59,130,246,.3);
  --text:        #f0f2f5;
  --text-muted:  #8896ab;
  --accent:      #3b82f6;
  --accent-lt:   #60a5fa;
  --accent-glow: rgba(59,130,246,.3);
  --purple:      #8b5cf6;
  --cyan:        #22d3ee;
  --grad:        linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #22d3ee 100%);
  --grad-text:   linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  --grad-card:   linear-gradient(135deg, rgba(59,130,246,.08) 0%, rgba(139,92,246,.05) 100%);
  --grad-glow:   radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);

  --fs-display: clamp(2.6rem, 5.5vw, 4.5rem);
  --fs-h2:      clamp(1.8rem, 3.5vw, 2.8rem);
  --fs-h3:      clamp(1.1rem, 2vw, 1.4rem);
  --fs-body:    1rem;
  --fs-sm:      .875rem;
  --fs-xs:      .8rem;

  --section-py: clamp(5rem, 10vw, 8rem);
  --max-w:      1200px;
  --ease:       cubic-bezier(.16,1,.3,1);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
}

html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body { font-family:'Inter',system-ui,-apple-system,sans-serif; font-size:var(--fs-body); line-height:1.6; color:var(--text); background:var(--bg); overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
ul { list-style:none; }
button,input,textarea,select { font:inherit; }

.container { width:90%; max-width:var(--max-w); margin:0 auto; }
.section   { padding:var(--section-py) 0; position:relative; z-index:1; }

/* ---------- Typography ---------- */
.section-label {
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:var(--fs-sm); font-weight:600; text-transform:uppercase;
  letter-spacing:.14em; color:var(--accent-lt); margin-bottom:1.25rem;
}
.section-label::before { content:''; width:2rem; height:2px; background:var(--grad); border-radius:1px; }
.section-title { font-size:var(--fs-h2); font-weight:800; line-height:1.15; margin-bottom:1rem; letter-spacing:-.02em; }
.section-sub   { font-size:clamp(1rem,1.5vw,1.12rem); color:var(--text-muted); max-width:600px; line-height:1.75; }
.gradient-text { background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ---------- Scroll Progress ---------- */
#scroll-progress { position:fixed; top:0; left:0; height:3px; width:0%; background:var(--grad); z-index:9999; }

/* ---------- 3D Canvas Backgrounds ---------- */
#hero-3d, #inner-3d { position:absolute; inset:0; z-index:0; pointer-events:none; }
#particle-bg { position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5; }

/* Reduced motion: disable all animations */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:0s!important; transition-duration:0s!important; }
  .reveal,.reveal-left,.reveal-right,.reveal-scale,.stagger>* { opacity:1!important; transform:none!important; }
}

/* ---------- Reveal Animations ---------- */
.reveal {
  opacity:0; transform:translateY(32px) rotateX(4deg);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transform-origin:center bottom;
}
.reveal.visible { opacity:1; transform:translateY(0) rotateX(0deg); }

.reveal-left  { opacity:0; transform:translateX(-40px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-right { opacity:0; transform:translateX(40px);  transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-scale  { opacity:0; transform:scale(.92);       transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-left.visible, .reveal-right.visible, .reveal-scale.visible { opacity:1; transform:none; }

/* Staggered children */
.stagger > * { opacity:0; transform:translateY(20px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.stagger.visible > *:nth-child(1) { transition-delay:.05s; }
.stagger.visible > *:nth-child(2) { transition-delay:.1s; }
.stagger.visible > *:nth-child(3) { transition-delay:.15s; }
.stagger.visible > *:nth-child(4) { transition-delay:.2s; }
.stagger.visible > *:nth-child(5) { transition-delay:.25s; }
.stagger.visible > *:nth-child(6) { transition-delay:.3s; }
.stagger.visible > * { opacity:1; transform:translateY(0); }

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar {
  position:fixed; top:1rem; left:50%; transform:translateX(-50%);
  width:92%; max-width:var(--max-w); z-index:1000;
  padding:.75rem 1.5rem; border-radius:1rem;
  background:var(--bg-glass); backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  transition:width .5s var(--ease), max-width .5s var(--ease),
             padding .4s var(--ease), border-radius .4s var(--ease);
}
.navbar.scrolled { width:min(620px,92%); padding:.6rem 1.25rem; border-radius:3rem; }
.nav-brand { display:flex; align-items:center; gap:.6rem; font-weight:700; font-size:1.05rem; white-space:nowrap; }
.nav-brand img { height:32px; width:auto; }
.nav-brand span { transition:opacity .3s,width .3s,margin .3s; }
.navbar.scrolled .nav-brand span { opacity:0; width:0; overflow:hidden; margin:0; }

.nav-links { display:flex; gap:1.75rem; align-items:center; }
.nav-links a { font-size:var(--fs-sm); font-weight:500; color:var(--text-muted); transition:color .25s; position:relative; }
.nav-links a::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:var(--grad); border-radius:1px; transition:width .3s var(--ease); }
.nav-links a:hover,.nav-links a.active { color:var(--text); }
.nav-links a:hover::after,.nav-links a.active::after { width:100%; }

.nav-cta { padding:.5rem 1.25rem!important; background:var(--accent)!important; color:#fff!important; border-radius:2rem; font-weight:600; transition:background .25s,transform .25s,box-shadow .25s; }
.nav-cta:hover { background:var(--accent-lt)!important; transform:scale(1.04); box-shadow:0 4px 20px var(--accent-glow); }
.nav-cta::after { display:none!important; }

.nav-toggle { display:none; background:none; border:none; color:var(--text); font-size:1.5rem; cursor:pointer; padding:.5rem; min-width:44px; min-height:44px; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position:relative; z-index:1; min-height:100vh; display:flex; align-items:center;
  padding:8rem 0 4rem; overflow:hidden;
}
.hero::before { content:''; position:absolute; width:800px; height:800px; top:-300px; right:-200px; background:radial-gradient(circle,rgba(59,130,246,.12) 0%,transparent 60%); border-radius:50%; pointer-events:none; animation:float-glow 8s ease-in-out infinite; }
.hero::after  { content:''; position:absolute; width:600px; height:600px; bottom:-200px; left:-150px; background:radial-gradient(circle,rgba(139,92,246,.1) 0%,transparent 60%); border-radius:50%; pointer-events:none; animation:float-glow 10s ease-in-out infinite reverse; }
@keyframes float-glow { 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,20px)} }

.hero .container { position:relative; z-index:2; }

.hero-badge {
  display:inline-flex; align-items:center; gap:.5rem; padding:.45rem 1.1rem;
  background:rgba(59,130,246,.08); border:1px solid rgba(59,130,246,.2);
  border-radius:2rem; font-size:var(--fs-sm); font-weight:500; color:var(--accent-lt);
  margin-bottom:1.75rem; backdrop-filter:blur(8px);
}
.hero-badge .pulse { width:8px; height:8px; background:var(--accent); border-radius:50%; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 var(--accent-glow)} 50%{box-shadow:0 0 0 10px transparent} }

.hero h1 { font-size:var(--fs-display); font-weight:800; line-height:1.06; max-width:820px; margin-bottom:1.5rem; letter-spacing:-.03em; }
.hero-sub { font-size:clamp(1.05rem,1.8vw,1.2rem); color:var(--text-muted); max-width:560px; line-height:1.75; margin-bottom:2.5rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }

/* ---------- Buttons ---------- */
.btn-primary {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.9rem 2.2rem; background:var(--accent); color:#fff;
  font-weight:600; border-radius:2rem; border:none; cursor:pointer; font-size:1rem;
  transition:all .3s var(--ease); position:relative; overflow:hidden;
}
.btn-primary::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,transparent 30%,rgba(255,255,255,.15) 50%,transparent 70%);
  transform:translateX(-100%); transition:transform .6s;
}
.btn-primary:hover::before { transform:translateX(100%); }
.btn-primary:hover { background:var(--accent-lt); transform:translateY(-2px); box-shadow:0 8px 32px var(--accent-glow); }

.btn-secondary {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.9rem 2.2rem; background:transparent; color:var(--text);
  font-weight:600; border-radius:2rem; border:1px solid var(--border); cursor:pointer; font-size:1rem;
  transition:all .3s var(--ease);
}
.btn-secondary:hover { border-color:var(--accent); background:rgba(59,130,246,.06); transform:translateY(-2px); }

/* ==========================================================================
   STATS BAR
   ========================================================================== */
.stats-bar { position:relative; z-index:1; padding:3.5rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg-alt); }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; text-align:center; }
.stat-number { font-size:clamp(2rem,4vw,3.2rem); font-weight:800; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.stat-label  { font-size:var(--fs-sm); color:var(--text-muted); margin-top:.3rem; }

/* ==========================================================================
   3D TILT CARDS
   ========================================================================== */
.tilt-card {
  position:relative; padding:2rem;
  background:var(--bg-card); border:1px solid var(--border); border-radius:1rem;
  backdrop-filter:blur(8px); overflow:hidden;
  transform-style:preserve-3d;
  transition:border-color .4s, box-shadow .4s;
}
.tilt-card::before {
  content:''; position:absolute; inset:0;
  background:var(--grad-card); opacity:0; transition:opacity .4s; border-radius:1rem;
}
.tilt-card .card-glow {
  position:absolute; width:250px; height:250px; border-radius:50%;
  background:var(--grad-glow); opacity:0; filter:blur(40px);
  pointer-events:none; transition:opacity .3s; z-index:0;
}
.tilt-card:hover { border-color:var(--border-hover); box-shadow:0 16px 48px rgba(59,130,246,.08); }
.tilt-card:hover::before { opacity:1; }
.tilt-card:hover .card-glow { opacity:.35; }
.tilt-card > *:not(.card-glow) { position:relative; z-index:1; }

.service-icon {
  width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  border-radius:.75rem; background:rgba(59,130,246,.1); color:var(--accent-lt); font-size:1.4rem;
  margin-bottom:1.25rem; transition:transform .4s var(--ease-bounce);
}
.tilt-card:hover .service-icon { transform:translateZ(20px) scale(1.1); }
.tilt-card h3 { font-size:var(--fs-h3); font-weight:700; margin-bottom:.5rem; }
.tilt-card p { font-size:var(--fs-sm); color:var(--text-muted); line-height:1.7; }

.card-arrow { display:inline-flex; align-items:center; gap:.35rem; margin-top:1rem; font-size:var(--fs-sm); font-weight:600; color:var(--accent-lt); opacity:0; transform:translateX(-8px); transition:opacity .3s,transform .3s; }
.tilt-card:hover .card-arrow { opacity:1; transform:translateX(0); }

.services-grid      { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; }
.services-full-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; }

/* Service full card (services page) */
.service-full-card {
  position:relative; padding:2.5rem 2rem; background:var(--bg-card); border:1px solid var(--border);
  border-radius:1rem; overflow:hidden; transform-style:preserve-3d;
  transition:transform .35s var(--ease),border-color .4s,box-shadow .4s;
}
.service-full-card::before { content:''; position:absolute; inset:0; background:var(--grad-card); opacity:0; transition:opacity .4s; }
.service-full-card .card-glow { position:absolute; width:250px; height:250px; border-radius:50%; background:var(--grad-glow); opacity:0; filter:blur(40px); pointer-events:none; transition:opacity .3s; z-index:0; }
.service-full-card:hover { transform:translateY(-6px); border-color:var(--border-hover); box-shadow:0 16px 48px rgba(59,130,246,.08); }
.service-full-card:hover::before { opacity:1; }
.service-full-card:hover .card-glow { opacity:.35; }
.service-full-card > *:not(.card-glow) { position:relative; z-index:1; }
.service-full-card .service-icon { margin-bottom:1.5rem; }
.service-full-card h3 { font-size:var(--fs-h3); font-weight:700; margin-bottom:.75rem; }
.service-full-card p  { font-size:var(--fs-sm); color:var(--text-muted); line-height:1.7; }
.service-full-card ul { margin-top:.75rem; }
.service-full-card ul li { position:relative; padding-left:1.25rem; font-size:var(--fs-sm); color:var(--text-muted); line-height:1.8; }
.service-full-card ul li::before { content:''; position:absolute; left:0; top:.65rem; width:6px; height:6px; border-radius:50%; background:var(--accent); }

/* ==========================================================================
   WHY US
   ========================================================================== */
.why-us { background:var(--bg-alt); }
.why-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; margin-top:3rem; }
.why-card { display:flex; gap:1.25rem; padding:2rem; background:var(--bg-card); border:1px solid var(--border); border-radius:1rem; transition:border-color .3s,transform .4s var(--ease); }
.why-card:hover { border-color:var(--border-hover); transform:translateY(-4px); }
.why-icon { flex-shrink:0; width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:.75rem; background:rgba(59,130,246,.1); color:var(--accent-lt); font-size:1.2rem; }
.why-card h3 { font-size:1.1rem; font-weight:700; margin-bottom:.4rem; }
.why-card p  { font-size:var(--fs-sm); color:var(--text-muted); line-height:1.7; }

/* ==========================================================================
   PROCESS
   ========================================================================== */
.process-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:3rem; counter-reset:step; }
.process-step {
  position:relative; text-align:center; padding:2.5rem 1.5rem;
  counter-increment:step; border-radius:1rem;
  background:var(--bg-card); border:1px solid var(--border);
  transition:transform .4s var(--ease), border-color .3s, box-shadow .3s;
}
.process-step:hover { transform:translateY(-6px) rotateY(3deg); border-color:var(--border-hover); box-shadow:0 12px 40px rgba(59,130,246,.06); }
.process-step::before { content:counter(step,decimal-leading-zero); display:block; font-size:3.5rem; font-weight:800; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:1rem; line-height:1; }
.process-step:not(:last-child)::after { content:''; position:absolute; top:3.8rem; right:-1rem; width:2rem; height:2px; background:linear-gradient(90deg,var(--accent) 0%,transparent 100%); }
.process-step h3 { font-size:var(--fs-h3); font-weight:700; margin-bottom:.5rem; }
.process-step p  { font-size:var(--fs-sm); color:var(--text-muted); line-height:1.7; max-width:280px; margin:0 auto; }

/* ==========================================================================
   CTA BANNER
   ========================================================================== */
.cta-banner { text-align:center; }
.cta-inner {
  position:relative; padding:4.5rem 2rem; border-radius:1.5rem;
  background:var(--grad-card); border:1px solid var(--border);
  backdrop-filter:blur(12px); overflow:hidden;
}
.cta-inner::before {
  content:''; position:absolute; inset:-1px; border-radius:1.5rem; padding:1px;
  background:linear-gradient(135deg,rgba(59,130,246,.35),transparent 50%,rgba(34,211,238,.2));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.cta-inner::after {
  content:''; position:absolute; width:400px; height:400px; top:50%; left:50%;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle,rgba(59,130,246,.08) 0%,transparent 70%);
  animation:cta-pulse 4s ease-in-out infinite;
}
@keyframes cta-pulse { 0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-50%,-50%) scale(1.3)} }
.cta-inner > * { position:relative; z-index:1; }
.cta-inner h2 { font-size:var(--fs-h2); font-weight:700; margin-bottom:.75rem; }
.cta-inner p  { color:var(--text-muted); max-width:500px; margin:0 auto 2rem; line-height:1.75; }
.cta-inner .btn-primary { font-size:1.05rem; padding:1rem 2.5rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { position:relative; z-index:1; padding:4rem 0 2rem; border-top:1px solid var(--border); background:var(--bg-alt); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
.footer-brand p { color:var(--text-muted); font-size:var(--fs-sm); margin-top:.75rem; max-width:300px; line-height:1.75; }
.footer-brand .nav-brand { margin-bottom:.25rem; }
.footer-socials { display:flex; gap:.75rem; margin-top:1.25rem; }
.footer-socials a { width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:.5rem; background:var(--bg-card); border:1px solid var(--border); color:var(--text-muted); font-size:.9rem; transition:all .25s; }
.footer-socials a:hover { color:var(--accent-lt); border-color:var(--accent); transform:translateY(-2px); }
.footer-col h4 { font-size:var(--fs-sm); font-weight:700; text-transform:uppercase; letter-spacing:.1em; margin-bottom:1rem; color:var(--text); }
.footer-col a { display:block; font-size:var(--fs-sm); color:var(--text-muted); padding:.3rem 0; transition:color .2s; }
.footer-col a:hover { color:var(--text); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:2rem; border-top:1px solid var(--border); font-size:var(--fs-xs); color:var(--text-muted); }

/* ==========================================================================
   INNER PAGE HERO
   ========================================================================== */
.page-hero { position:relative; z-index:1; padding:10rem 0 4rem; text-align:center; overflow:hidden; }
.page-hero::before { content:''; position:absolute; width:600px; height:600px; top:-100px; left:50%; transform:translateX(-50%); background:radial-gradient(circle,rgba(59,130,246,.1) 0%,transparent 60%); border-radius:50%; pointer-events:none; }
.page-hero h1 { font-size:var(--fs-display); font-weight:800; letter-spacing:-.03em; margin-bottom:1rem; }
.page-hero p  { font-size:clamp(1.05rem,1.8vw,1.18rem); color:var(--text-muted); max-width:600px; margin:0 auto; line-height:1.75; }

/* ---------- About ---------- */
.about-intro { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.about-intro-text h2 { font-size:var(--fs-h2); font-weight:700; margin-bottom:1rem; }
.about-intro-text p { color:var(--text-muted); line-height:1.8; margin-bottom:1rem; }
.about-visual { position:relative; padding:2rem; border-radius:1rem; background:var(--grad-card); border:1px solid var(--border); }
.about-visual-inner { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.about-stat-card { text-align:center; padding:1.5rem 1rem; border-radius:.75rem; background:var(--bg-card); border:1px solid var(--border); transition:transform .3s var(--ease),border-color .3s; }
.about-stat-card:hover { transform:translateY(-4px) scale(1.02); border-color:var(--border-hover); }
.about-stat-card .num { font-size:2.2rem; font-weight:800; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.about-stat-card .label { font-size:var(--fs-xs); color:var(--text-muted); margin-top:.25rem; }

.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; }
.value-card { padding:2rem; background:var(--bg-card); border:1px solid var(--border); border-radius:1rem; text-align:center; transition:all .3s var(--ease); }
.value-card:hover { border-color:var(--border-hover); transform:translateY(-4px); }
.value-card .value-icon { font-size:2rem; margin-bottom:1rem; }
.value-card h3 { font-size:1.1rem; font-weight:700; margin-bottom:.5rem; }
.value-card p  { font-size:var(--fs-sm); color:var(--text-muted); line-height:1.7; }

/* ---------- Contact ---------- */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; position:relative; z-index:1; }
.contact-info h2 { font-size:var(--fs-h2); font-weight:700; margin-bottom:1rem; }
.contact-info > p { color:var(--text-muted); line-height:1.75; margin-bottom:2rem; }
.contact-methods { display:flex; flex-direction:column; gap:1.25rem; }
.contact-method { display:flex; align-items:center; gap:1rem; padding:1.25rem; background:var(--bg-card); border:1px solid var(--border); border-radius:.75rem; transition:all .3s; }
.contact-method:hover { border-color:var(--border-hover); transform:translateX(4px); }
.contact-method-icon { flex-shrink:0; width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:.625rem; background:rgba(59,130,246,.1); color:var(--accent-lt); font-size:1.1rem; }
.contact-method-text h4 { font-size:.95rem; font-weight:600; margin-bottom:.15rem; }
.contact-method-text a,.contact-method-text p { font-size:var(--fs-sm); color:var(--text-muted); }
.contact-method-text a:hover { color:var(--accent-lt); }

.contact-form-wrap { padding:2.5rem; background:var(--bg-card); border:1px solid var(--border); border-radius:1rem; backdrop-filter:blur(8px); }
.contact-form-wrap h3 { font-size:var(--fs-h3); font-weight:700; margin-bottom:.5rem; }
.contact-form-wrap > p { font-size:var(--fs-sm); color:var(--text-muted); margin-bottom:2rem; }
.form-group { margin-bottom:1.25rem; }
.form-group label { display:block; font-size:var(--fs-sm); font-weight:600; margin-bottom:.4rem; color:var(--text); }
.form-group input,.form-group textarea,.form-group select { width:100%; padding:.8rem 1rem; background:var(--bg-alt); border:1px solid var(--border); border-radius:.5rem; color:var(--text); font-size:var(--fs-body); transition:border-color .25s,box-shadow .25s; outline:none; }
.form-group input:focus,.form-group textarea:focus,.form-group select:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.form-group textarea { min-height:120px; resize:vertical; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-submit { width:100%; padding:.9rem; background:var(--accent); color:#fff; font-weight:600; font-size:1rem; border:none; border-radius:.5rem; cursor:pointer; transition:all .25s; position:relative; overflow:hidden; }
.form-submit::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,transparent 30%,rgba(255,255,255,.15) 50%,transparent 70%); transform:translateX(-100%); transition:transform .6s; }
.form-submit:hover::before { transform:translateX(100%); }
.form-submit:hover { background:var(--accent-lt); transform:translateY(-2px); }
.lang-badge { display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 1rem; background:rgba(59,130,246,.08); border:1px solid rgba(59,130,246,.15); border-radius:2rem; font-size:var(--fs-sm); color:var(--accent-lt); margin-top:1.5rem; }

/* ==========================================================================
   FLOATING 3D SHAPES (CSS decorative)
   ========================================================================== */
.floating-shapes { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.floating-shapes .shape {
  position:absolute; border:1px solid rgba(59,130,246,.12); border-radius:4px;
  animation:float-shape 20s linear infinite;
}
.shape-1 { width:60px; height:60px; top:20%; left:80%; transform:rotate(45deg); animation-duration:18s; }
.shape-2 { width:40px; height:40px; top:60%; left:10%; border-radius:50%!important; animation-duration:22s; animation-delay:-5s; border-color:rgba(139,92,246,.12)!important; }
.shape-3 { width:80px; height:80px; top:40%; left:70%; animation-duration:25s; animation-delay:-10s; border-color:rgba(34,211,238,.08)!important; }
.shape-4 { width:30px; height:30px; top:80%; left:30%; transform:rotate(30deg); animation-duration:15s; animation-delay:-3s; }
.shape-5 { width:50px; height:50px; top:10%; left:40%; border-radius:50%!important; animation-duration:20s; animation-delay:-8s; border-color:rgba(139,92,246,.1)!important; }
@keyframes float-shape { 0%{transform:translateY(0) rotate(0deg);opacity:.3} 25%{transform:translateY(-30px) rotate(90deg);opacity:.6} 50%{transform:translateY(-10px) rotate(180deg);opacity:.3} 75%{transform:translateY(-40px) rotate(270deg);opacity:.5} 100%{transform:translateY(0) rotate(360deg);opacity:.3} }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px) {
  .services-grid,.services-full-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; }
  .about-intro { grid-template-columns:1fr; gap:2rem; }
  .values-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .nav-links { display:none; }
  .nav-links.open { display:flex; flex-direction:column; position:absolute; top:calc(100% + .75rem); left:0; right:0; background:var(--bg-glass); backdrop-filter:blur(24px); border:1px solid var(--border); border-radius:1rem; padding:1.5rem; gap:1rem; align-items:flex-start; }
  .nav-links.open a { padding:.5rem 0; min-height:44px; display:flex; align-items:center; }
  .nav-toggle { display:block; }
  .navbar.scrolled { width:92%; border-radius:1rem; }
  .navbar.scrolled .nav-brand span { opacity:1; width:auto; }

  /* Hero: fit mobile viewport better */
  .hero { min-height:calc(100svh - 2rem); padding:6rem 0 2.5rem; }
  .hero h1 { font-size:clamp(1.8rem,7.5vw,2.6rem); }
  .hero-sub { font-size:1rem; margin-bottom:2rem; }
  .hero-badge { font-size:.78rem; margin-bottom:1.25rem; }

  /* Page hero for inner pages */
  .page-hero { padding:7rem 0 3rem; }
  .page-hero h1 { font-size:clamp(1.8rem,7.5vw,2.6rem); }

  .stats-grid { grid-template-columns:repeat(2,1fr); gap:1.25rem; }
  .stat-number { font-size:clamp(1.6rem,6vw,2.2rem); }
  .services-grid,.services-full-grid { grid-template-columns:1fr; }
  .why-grid { grid-template-columns:1fr; }
  .process-steps { grid-template-columns:1fr; gap:1rem; }
  .process-step::after { display:none; }
  .process-step { text-align:left; padding:1.5rem; }
  .process-step::before { font-size:2rem; }
  .contact-grid { grid-template-columns:1fr; gap:2rem; }
  .form-row { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:2rem; }
  .footer-bottom { flex-direction:column; gap:.5rem; text-align:center; }
  .values-grid { grid-template-columns:1fr; }

  /* Better touch targets */
  .btn-primary, .btn-secondary { padding:1rem 2rem; min-height:48px; }
  .contact-method { padding:1rem; min-height:48px; }
  .form-submit { padding:1rem; min-height:48px; }
  .form-group input,.form-group textarea,.form-group select { padding:.9rem 1rem; min-height:48px; }

  /* Floating shapes smaller on mobile */
  .shape-1 { width:40px; height:40px; }
  .shape-3 { width:50px; height:50px; }

  /* CTA banner tighter on mobile */
  .cta-inner { padding:3rem 1.5rem; }
  .cta-inner h2 { font-size:clamp(1.4rem,5vw,1.8rem); }
}

@media (max-width:480px) {
  .stats-grid { grid-template-columns:1fr 1fr; }
  .hero-actions { flex-direction:column; width:100%; }
  .hero-actions .btn-primary,.hero-actions .btn-secondary { width:100%; justify-content:center; }
  .hero h1 { font-size:clamp(1.7rem,7vw,2.2rem); }
  .section { padding:clamp(3rem,8vw,5rem) 0; }
  .tilt-card, .service-full-card { padding:1.5rem; }
  .why-card { padding:1.5rem; }
  .container { width:92%; }
}

@media (max-width:360px) {
  .hero h1 { font-size:1.6rem; }
  .navbar { padding:.6rem 1rem; }
  .nav-brand span { font-size:.9rem; }
}