/* ============================================
   Solution On Click — Dubai Digital Marketing
   Design tokens
   ============================================ */
:root{
  --bg:        #0A0E1A;
  --bg-alt:    #10182B;
  --card:      #131C31;
  --card-hi:   #182238;
  --line:      rgba(244,241,232,0.09);
  --ink:       #F4F1E8;
  --muted:     #8891A8;
  --gold:      #C9962E;
  --gold-hi:   #E3B655;
  --teal:      #29D3C1;

  --display: "Space Grotesk", "Segoe UI", sans-serif;
  --body:    "Inter", "Segoe UI", sans-serif;
  --mono:    "JetBrains Mono", monospace;

  --container: 1180px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}

.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
}

h1,h2,h3{
  font-family:var(--display);
  font-weight:600;
  letter-spacing:-0.01em;
  line-height:1.08;
}

.eyebrow{
  font-family:var(--mono);
  font-size:0.75rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--teal);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}
.eyebrow::before{
  content:"";
  width:26px; height:1px;
  background:var(--teal);
  display:inline-block;
}

/* background texture: faint grid + radial glow */
.bg-fx{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60% 50% at 82% 8%, rgba(201,150,46,0.16), transparent 60%),
    radial-gradient(45% 45% at 8% 85%, rgba(41,211,193,0.10), transparent 60%),
    var(--bg);
}
.bg-grid{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(60% 60% at 50% 20%, #000 20%, transparent 85%);
}

/* ============ NAV ============ */
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(14px);
  background:rgba(10,14,26,0.72);
  border-bottom:1px solid var(--line);
}
nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px;
  max-width:var(--container); margin:0 auto;
}
.logo{
  font-family:var(--display); font-weight:700; font-size:1.15rem;
  letter-spacing:-0.02em;
}
.logo span{color:var(--gold);}
.nav-links{display:flex; gap:34px; font-size:0.92rem; color:var(--muted);}
.nav-links a:hover{color:var(--ink);}
.nav-cta{
  font-family:var(--mono); font-size:0.78rem;
  border:1px solid var(--gold); color:var(--gold);
  padding:9px 18px; border-radius:2px;
  letter-spacing:0.04em;
  transition:all .25s ease;
}
.nav-cta:hover{background:var(--gold); color:var(--bg);}
.nav-toggle{display:none;}

/* ============ HERO ============ */
.hero{
  padding:96px 0 60px;
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px;
  align-items:center;
  min-height:82vh;
}
.hero h1{
  font-size:clamp(2.4rem, 4.6vw, 3.85rem);
  margin-bottom:22px;
}
.hero h1 em{
  font-style:normal; color:var(--gold);
  position:relative;
}
.hero-sub{
  color:var(--muted); font-size:1.08rem; max-width:520px; margin-bottom:34px;
}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:38px;}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border-radius:3px;
  font-family:var(--mono); font-size:0.85rem; letter-spacing:0.03em;
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn-primary{
  background:var(--gold); color:#0A0E1A; font-weight:700;
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(201,150,46,0.25);}
.btn-ghost{
  border:1px solid var(--line); color:var(--ink);
}
.btn-ghost:hover{border-color:var(--teal); color:var(--teal);}

.hero-tags{
  display:flex; flex-wrap:wrap; gap:10px 22px;
  font-family:var(--mono); font-size:0.78rem; color:var(--muted);
}
.hero-tags b{color:var(--ink); font-weight:600;}

/* --- 3D floating service card stack (signature element) --- */
.hero-stage{
  position:relative; height:460px;
  perspective:1200px;
}
.stage-inner{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .2s ease-out;
}
.float-card{
  position:absolute; width:210px;
  background:linear-gradient(155deg, var(--card-hi), var(--card));
  border:1px solid var(--line);
  border-radius:10px;
  padding:20px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.6);
  transform-style:preserve-3d;
  animation:drift 7s ease-in-out infinite;
}
.float-card .fc-icon{
  width:34px; height:34px; margin-bottom:14px;
  color:var(--teal);
}
.float-card .fc-title{font-family:var(--display); font-size:0.95rem; font-weight:600;}
.float-card .fc-tag{font-family:var(--mono); font-size:0.68rem; color:var(--muted); margin-top:6px;}

.fc-1{ top:0;    left:10%;  transform:translateZ(60px) rotateY(-6deg) rotateX(4deg); animation-delay:0s;}
.fc-2{ top:120px; left:46%; transform:translateZ(120px) rotateY(4deg) rotateX(-3deg); animation-delay:1.4s; z-index:3;}
.fc-3{ top:270px; left:6%;  transform:translateZ(20px) rotateY(-3deg); animation-delay:2.6s;}
.fc-4{ top:250px; left:56%; transform:translateZ(0px) rotateY(8deg) rotateX(2deg); animation-delay:.8s; opacity:.85;}

@keyframes drift{
  0%,100%{ margin-top:0px; }
  50%{ margin-top:-16px; }
}

@media (prefers-reduced-motion: reduce){
  .float-card{animation:none;}
  .stage-inner{transition:none; transform:none !important;}
  html{scroll-behavior:auto;}
}

/* ============ MARQUEE ============ */
.marquee-wrap{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--bg-alt);
  overflow:hidden; padding:14px 0;
}
.marquee{
  display:flex; gap:44px; white-space:nowrap;
  animation:scroll-left 42s linear infinite;
  font-family:var(--mono); font-size:0.78rem; color:var(--muted);
  width:max-content;
}
.marquee span{opacity:0.85;}
.marquee span::after{content:"/"; margin-left:44px; color:var(--gold);}
@keyframes scroll-left{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){ .marquee{animation:none;} }

/* ============ STATS ============ */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--line);
  border:1px solid var(--line);
  margin:80px 0;
}
.stat{
  background:var(--bg); padding:34px 26px;
}
.stat b{
  display:block; font-family:var(--display); font-size:2.2rem; color:var(--gold);
}
.stat span{font-family:var(--mono); font-size:0.78rem; color:var(--muted);}

/* ============ SECTION HEADER ============ */
.section{padding:90px 0;}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:30px; margin-bottom:52px; flex-wrap:wrap;
}
.section-head h2{font-size:clamp(1.8rem,3vw,2.5rem); max-width:560px;}
.section-head p{color:var(--muted); max-width:340px; font-size:0.95rem;}

/* ============ SERVICES ============ */
.services-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.service{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  padding:32px 28px;
  position:relative;
  overflow:hidden;
  transition:transform .3s ease, border-color .3s ease;
}
.service:hover{transform:translateY(-6px); border-color:var(--gold);}
.service .num{
  font-family:var(--mono); font-size:0.75rem; color:var(--teal); margin-bottom:22px; display:block;
}
.service h3{font-size:1.18rem; margin-bottom:10px;}
.service p{color:var(--muted); font-size:0.92rem;}
.service .level{
  margin-top:18px; display:inline-block;
  font-family:var(--mono); font-size:0.68rem; letter-spacing:0.06em;
  color:var(--gold); border:1px solid rgba(201,150,46,0.35);
  padding:4px 10px; border-radius:20px;
}

/* ============ ABOUT / WHY ============ */
.about{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:center;
}
.about-visual{
  aspect-ratio:1/1; border-radius:14px;
  background:
    radial-gradient(circle at 30% 20%, rgba(41,211,193,0.25), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(201,150,46,0.25), transparent 55%),
    var(--card);
  border:1px solid var(--line);
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.about-visual .globe-ring{
  width:70%; aspect-ratio:1/1; border-radius:50%;
  border:1px dashed rgba(244,241,232,0.25);
  position:relative;
  animation:spin 22s linear infinite;
}
.about-visual .globe-ring::before,
.about-visual .globe-ring::after{
  content:""; position:absolute; border-radius:50%;
  border:1px solid rgba(41,211,193,0.35);
}
.about-visual .globe-ring::before{ inset:14%; }
.about-visual .globe-ring::after{ inset:28%; border-color:rgba(201,150,46,0.4); }
.about-visual .dot{
  position:absolute; width:8px; height:8px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 14px 3px rgba(201,150,46,0.6);
}
.about-visual .dot.d1{top:2%; left:48%;}
.about-visual .dot.d2{top:50%; right:0%;}
.about-visual .dot.d3{bottom:6%; left:20%;}
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .about-visual .globe-ring{animation:none;} }

.about-copy p{color:var(--muted); margin-bottom:18px;}
.about-list{margin-top:24px; display:grid; gap:14px;}
.about-list li{
  display:flex; gap:12px; align-items:flex-start;
  font-size:0.95rem; color:var(--ink);
}
.about-list li::before{
  content:"→"; color:var(--teal); font-family:var(--mono); flex:none; margin-top:1px;
}

/* ============ PROCESS ============ */
.process{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.step{border-top:2px solid var(--gold); padding-top:18px;}
.step .step-n{font-family:var(--mono); color:var(--muted); font-size:0.78rem;}
.step h3{font-size:1.05rem; margin:10px 0 8px;}
.step p{color:var(--muted); font-size:0.9rem;}

/* ============ QUOTE FORM ============ */
.quote{
  background:linear-gradient(180deg, var(--bg-alt), var(--bg));
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.quote-grid{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:start;
}
.quote h2{font-size:clamp(1.8rem,3vw,2.4rem); margin-bottom:16px;}
.quote p.lead{color:var(--muted); margin-bottom:28px; max-width:420px;}
.quote-perks{display:grid; gap:14px;}
.quote-perks li{display:flex; gap:12px; font-size:0.92rem; color:var(--muted);}
.quote-perks li b{color:var(--ink); font-weight:600;}

form.quote-form{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:34px; display:grid; gap:16px;
}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
label{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--muted); margin-bottom:7px; display:block;
}
input, select, textarea{
  width:100%; background:var(--bg); border:1px solid var(--line); color:var(--ink);
  padding:12px 14px; border-radius:6px; font-family:var(--body); font-size:0.95rem;
  transition:border-color .2s ease;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--teal);
}
textarea{resize:vertical; min-height:100px;}
.form-submit{
  margin-top:6px; border:none; cursor:pointer;
  background:var(--gold); color:#0A0E1A; font-weight:700;
  font-family:var(--mono); font-size:0.9rem; letter-spacing:0.03em;
  padding:15px 22px; border-radius:6px;
  transition:transform .2s ease;
}
.form-submit:hover{transform:translateY(-2px);}
.form-note{font-size:0.75rem; color:var(--muted);}
.form-status{font-size:0.85rem; font-family:var(--mono); min-height:18px;}
.form-status.ok{color:var(--teal);}
.form-status.err{color:#e08a8a;}

/* ============ FOOTER ============ */
footer{
  padding:56px 0 34px; border-top:1px solid var(--line);
}
.footer-grid{
  display:grid; grid-template-columns:1.3fr 0.7fr 0.7fr 0.9fr; gap:36px;
  margin-bottom:44px;
}
.footer-grid h4{
  font-family:var(--mono); font-size:0.75rem; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--muted); margin-bottom:16px;
}
.footer-grid p{color:var(--muted); font-size:0.9rem; max-width:280px;}
.footer-grid ul{display:grid; gap:10px;}
.footer-grid a{color:var(--ink); font-size:0.9rem;}
.footer-grid a:hover{color:var(--gold);}
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:0.78rem; color:var(--muted); font-family:var(--mono);
  border-top:1px solid var(--line); padding-top:24px;
}

/* ============ WHATSAPP FLOAT ============ */
.wa-float{
  position:fixed; right:24px; bottom:24px; z-index:60;
  width:60px; height:60px; border-radius:50%;
  background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.4);
}
.wa-float::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:#25D366; opacity:.55;
  animation:pulse 2.4s ease-out infinite;
  z-index:-1;
}
@keyframes pulse{
  0%{transform:scale(1); opacity:.55;}
  100%{transform:scale(1.9); opacity:0;}
}
.wa-float svg{width:30px; height:30px;}

@media (prefers-reduced-motion: reduce){ .wa-float::before{animation:none;} }

/* ============ REVEAL ON SCROLL ============ */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ============ RESPONSIVE ============ */
@media (max-width:960px){
  .hero{grid-template-columns:1fr; min-height:auto; padding-top:60px;}
  .hero-stage{height:340px; margin-top:20px;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .about{grid-template-columns:1fr;}
  .process{grid-template-columns:repeat(2,1fr);}
  .quote-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .nav-links{display:none;}
  .services-grid{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr 1fr;}
  .process{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .fc-4{display:none;}
}