/* =============================================================
   AD DESIGN — Premium Agency Website
   Design system: CSS variables map to future Elementor Global Styles
   ============================================================= */

:root{
  /* Colors */
  --bg-primary:#050816;
  --bg-secondary:#0B1120;
  --surface:#111827;
  --surface-2:#161f30;
  --accent:#4F46E5;
  --accent-2:#06B6D4;
  --white:#FFFFFF;
  --text-soft:#9CA3AF;
  --text-body:#C5CAD4;
  --border-soft:rgba(255,255,255,0.08);
  --border-strong:rgba(255,255,255,0.16);

  --gradient-accent:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);
  --gradient-text:linear-gradient(135deg,#818CF8 0%,#22D3EE 100%);

  /* Typography */
  --font-heading:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;

  /* 8px spacing grid */
  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:32px;
  --space-5:40px;
  --space-6:48px;
  --space-8:64px;
  --space-10:80px;
  --space-12:96px;
  --space-16:128px;

  --radius-sm:8px;
  --radius-md:16px;
  --radius-lg:24px;
  --radius-full:999px;

  --shadow-glow:0 0 60px rgba(79,70,229,0.35);
  --shadow-card:0 20px 40px rgba(0,0,0,0.35);

  --transition-fast:0.2s ease;
  --transition-med:0.4s cubic-bezier(0.16,1,0.3,1);
  --transition-slow:0.8s cubic-bezier(0.16,1,0.3,1);

  --container-w:1240px;
}

/* ============ Reset ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg-primary);
  color:var(--text-body);
  font-family:var(--font-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;}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit;}
input,select,textarea{font-family:inherit;}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  color:var(--white);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-0.02em;
}

.container{
  width:100%;
  max-width:var(--container-w);
  margin-inline:auto;
  padding-inline:var(--space-3);
}
.section{
  position:relative;
  padding-block:var(--space-12);
}
@media (min-width:1600px){
  .container{max-width:1440px;}
}

/* ============ Utility ============ */
.text-gradient{
  background:var(--gradient-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent-2);
  margin-bottom:var(--space-2);
}
.section-title{
  font-size:clamp(1.9rem,3.4vw,2.9rem);
  max-width:720px;
  margin-bottom:var(--space-2);
}
.section-lead{
  font-size:1.05rem;
  color:var(--text-soft);
  max-width:600px;
}
.section-head{
  margin-bottom:var(--space-8);
}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 28px;
  border-radius:var(--radius-full);
  font-weight:600;
  font-size:0.95rem;
  font-family:var(--font-body);
  transition:var(--transition-fast);
  white-space:nowrap;
  cursor:pointer;
}
.btn-primary{
  background:var(--gradient-accent);
  color:var(--white);
  box-shadow:0 8px 24px rgba(79,70,229,0.4);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(79,70,229,0.55);
}
.btn-glass{
  background:rgba(255,255,255,0.06);
  color:var(--white);
  border:1px solid var(--border-strong);
  backdrop-filter:blur(12px);
}
.btn-glass:hover{
  background:rgba(255,255,255,0.1);
  transform:translateY(-2px);
}
.btn-outline{
  background:transparent;
  color:var(--white);
  border:1px solid var(--border-strong);
}
.btn-outline:hover{
  border-color:var(--accent-2);
  color:var(--accent-2);
}
.btn-lg{padding:16px 34px;font-size:1rem;}
.btn-sm{padding:10px 20px;font-size:0.85rem;}
.btn-block{width:100%;}

/* ============ Loader ============ */
.loader{
  position:fixed;inset:0;
  background:var(--bg-primary);
  display:flex;align-items:center;justify-content:center;
  z-index:9999;
  transition:opacity 0.6s ease, visibility 0.6s ease;
}
.loader.hidden{opacity:0;visibility:hidden;}
.loader-mark{
  font-family:var(--font-heading);
  font-size:2.5rem;
  font-weight:700;
  color:var(--white);
  letter-spacing:0.05em;
  animation:pulseScale 1.2s ease-in-out infinite;
}
@keyframes pulseScale{
  0%,100%{opacity:0.4;transform:scale(0.92);}
  50%{opacity:1;transform:scale(1);}
}

/* ============ Scroll Progress ============ */
.scroll-progress{
  position:fixed;top:0;left:0;
  height:3px;width:0%;
  background:var(--gradient-accent);
  z-index:9998;
  transition:width 0.1s linear;
}

/* ============ Custom Cursor ============ */
.cursor-dot,.cursor-ring{
  position:fixed;
  top:0;left:0;
  pointer-events:none;
  z-index:9997;
  border-radius:50%;
  transform:translate(-50%,-50%);
  will-change:transform;
}
.cursor-dot{
  width:6px;height:6px;
  background:var(--accent-2);
}
.cursor-ring{
  width:32px;height:32px;
  border:1px solid var(--border-strong);
  transition:width 0.2s ease,height 0.2s ease,border-color 0.2s ease;
}
@media (hover:none), (pointer:coarse){
  .cursor-dot,.cursor-ring{display:none;}
}

/* ============ Header ============ */
.site-header{
  position:fixed;top:0;left:0;right:0;
  z-index:100;
  padding-block:var(--space-2);
  transition:var(--transition-med);
  background:transparent;
}
.site-header.scrolled{
  background:rgba(5,8,22,0.75);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border-soft);
  padding-block:12px;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
}
.logo{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:1.2rem;
  color:var(--white);
}
.logo-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;
  border-radius:10px;
  background:var(--gradient-accent);
  font-size:0.9rem;
}
.main-nav .nav-list{
  display:flex;
  gap:var(--space-4);
}
.main-nav a{
  font-size:0.92rem;
  font-weight:500;
  color:var(--text-body);
  transition:var(--transition-fast);
  position:relative;
}
.main-nav a:hover{color:var(--white);}
.header-actions{display:flex;align-items:center;gap:var(--space-2);}
.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  width:32px;
  padding:6px;
}
.nav-toggle span{
  height:2px;width:100%;
  background:var(--white);
  border-radius:2px;
  transition:var(--transition-fast);
}

/* ============ Hero ============ */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  padding-top:120px;
  overflow:hidden;
}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.hero-grid{
  position:absolute;inset:-10%;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.04) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at center,black 30%,transparent 75%);
}
.glow-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  opacity:0.5;
}
.glow-orb-1{
  width:480px;height:480px;
  background:var(--accent);
  top:-10%;left:-8%;
  animation:floatOrb 12s ease-in-out infinite;
}
.glow-orb-2{
  width:420px;height:420px;
  background:var(--accent-2);
  bottom:-15%;right:-5%;
  animation:floatOrb 14s ease-in-out infinite reverse;
}
@keyframes floatOrb{
  0%,100%{transform:translate(0,0);}
  50%{transform:translate(30px,-30px);}
}
.floating-shape{
  position:absolute;
  border:1px solid var(--border-soft);
  border-radius:var(--radius-md);
  background:rgba(255,255,255,0.02);
  backdrop-filter:blur(4px);
  animation:floatShape 8s ease-in-out infinite;
}
.shape-1{width:60px;height:60px;top:18%;right:30%;animation-delay:0s;}
.shape-2{width:40px;height:40px;top:65%;left:8%;border-radius:50%;animation-delay:2s;}
.shape-3{width:80px;height:80px;bottom:10%;right:12%;animation-delay:4s;transform:rotate(20deg);}
@keyframes floatShape{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-24px) rotate(6deg);}
}

.hero-inner{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:var(--space-8);
  align-items:center;
}
.hero-title{
  font-size:clamp(2.4rem,5vw,4.2rem);
  margin-bottom:var(--space-3);
}
.hero-subtitle{
  font-size:1.1rem;
  color:var(--text-soft);
  max-width:520px;
  margin-bottom:var(--space-4);
}
.hero-actions{
  display:flex;
  gap:var(--space-2);
  flex-wrap:wrap;
  margin-bottom:var(--space-6);
}
.hero-stats{
  display:flex;
  gap:var(--space-6);
  flex-wrap:wrap;
}
.hero-stat{position:relative;display:flex;flex-direction:column;}
.hero-stat-number{
  font-family:var(--font-heading);
  font-size:2rem;
  font-weight:700;
  color:var(--white);
  display:inline;
}
.hero-stat-suffix{
  font-family:var(--font-heading);
  font-size:2rem;
  font-weight:700;
  color:var(--accent-2);
}
.hero-stat-label{
  display:block;
  font-size:0.82rem;
  color:var(--text-soft);
  margin-top:4px;
}

/* ---- Hero dashboard illustration ---- */
.hero-visual{position:relative;}
.dashboard{position:relative;}
.dashboard-glow{
  position:absolute;inset:-40px;
  background:var(--gradient-accent);
  filter:blur(80px);
  opacity:0.25;
  border-radius:50%;
}
.dashboard-window{
  position:relative;
  background:rgba(17,24,39,0.6);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(20px);
  box-shadow:var(--shadow-card);
  overflow:hidden;
}
.dashboard-topbar{
  display:flex;align-items:center;gap:8px;
  padding:14px 18px;
  border-bottom:1px solid var(--border-soft);
}
.dot{width:9px;height:9px;border-radius:50%;}
.dot-red{background:#EF4444;}
.dot-yellow{background:#F59E0B;}
.dot-green{background:#10B981;}
.dashboard-title{
  margin-left:8px;
  font-size:0.78rem;
  color:var(--text-soft);
}
.dashboard-body{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--border-soft);
}
.dashboard-card{
  background:var(--surface);
  padding:var(--space-3);
  position:relative;
}
.dashboard-card-label{
  font-size:0.75rem;
  color:var(--text-soft);
  margin-bottom:8px;
}
.dashboard-value{
  font-family:var(--font-heading);
  font-size:1.4rem;
  font-weight:700;
  color:var(--white);
  margin-top:8px;
}
.dashboard-bars{
  display:flex;
  align-items:flex-end;
  gap:6px;
  height:60px;
}
.dashboard-bars span{
  flex:1;
  height:var(--h);
  background:var(--gradient-accent);
  border-radius:4px 4px 0 0;
  animation:growBar 1.2s ease-out both;
}
@keyframes growBar{from{transform:scaleY(0);transform-origin:bottom;}to{transform:scaleY(1);}}
.dashboard-card-ring{display:flex;flex-direction:column;align-items:center;text-align:center;}
.ring{
  width:64px;height:64px;
  border-radius:50%;
  background:conic-gradient(var(--accent-2) 0% 99%, var(--border-soft) 99% 100%);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:6px;
}
.ring::after{
  content:'';
  width:44px;height:44px;
  border-radius:50%;
  background:var(--surface);
}
.line-chart{width:100%;height:50px;}
.line-chart polyline{
  fill:none;
  stroke:var(--accent-2);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.dashboard-list-row{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.8rem;
  padding:6px 0;
  color:var(--text-soft);
}
.dashboard-list-row b{color:var(--white);margin-left:auto;}
.pulse-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent-2);
  box-shadow:0 0 0 rgba(6,182,212,0.6);
  animation:pulseDot 2s infinite;
}
@keyframes pulseDot{
  0%{box-shadow:0 0 0 0 rgba(6,182,212,0.5);}
  70%{box-shadow:0 0 0 8px rgba(6,182,212,0);}
  100%{box-shadow:0 0 0 0 rgba(6,182,212,0);}
}
.dashboard-float{
  position:absolute;
  display:flex;align-items:center;gap:8px;
  padding:10px 16px;
  background:rgba(17,24,39,0.7);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-full);
  backdrop-filter:blur(16px);
  font-size:0.82rem;
  font-weight:500;
  color:var(--white);
  box-shadow:var(--shadow-card);
  animation:floatShape 6s ease-in-out infinite;
}
.dashboard-float i{color:var(--accent-2);}
.dashboard-float-1{top:-6%;right:-8%;animation-delay:1s;}
.dashboard-float-2{bottom:-6%;left:-8%;animation-delay:3s;}

.scroll-cue{
  position:absolute;
  bottom:var(--space-3);
  left:50%;
  transform:translateX(-50%);
  z-index:1;
}
.scroll-cue span{
  display:block;
  width:24px;height:38px;
  border:2px solid var(--border-strong);
  border-radius:var(--radius-full);
  position:relative;
}
.scroll-cue span::before{
  content:'';
  position:absolute;
  top:6px;left:50%;
  width:4px;height:8px;
  background:var(--accent-2);
  border-radius:2px;
  transform:translateX(-50%);
  animation:scrollCue 1.8s infinite;
}
@keyframes scrollCue{
  0%{opacity:1;top:6px;}
  100%{opacity:0;top:18px;}
}

/* ============ Trusted By ============ */
.trusted-by{padding-block:var(--space-6);}
.trusted-by-label{
  text-align:center;
  font-size:0.85rem;
  color:var(--text-soft);
  margin-bottom:var(--space-4);
  letter-spacing:0.04em;
}
.logo-marquee{overflow:hidden;position:relative;}
.logo-marquee::before,.logo-marquee::after{
  content:'';
  position:absolute;top:0;bottom:0;width:80px;z-index:1;
}
.logo-marquee::before{left:0;background:linear-gradient(90deg,var(--bg-primary),transparent);}
.logo-marquee::after{right:0;background:linear-gradient(-90deg,var(--bg-primary),transparent);}
.logo-track{
  display:flex;
  gap:var(--space-10);
  width:max-content;
  animation:marquee 28s linear infinite;
}
@keyframes marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.logo-item{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:1.2rem;
  color:var(--text-soft);
  opacity:0.6;
  white-space:nowrap;
}

/* ============ About ============ */
.about-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-8);
  align-items:center;
}
.about-points{margin-block:var(--space-4);display:flex;flex-direction:column;gap:12px;}
.about-points li{
  display:flex;align-items:center;gap:10px;
  font-size:0.95rem;
  color:var(--text-body);
}
.about-points i{color:var(--accent-2);}
.about-visual{
  position:relative;
  display:grid;
  gap:var(--space-2);
}
.about-card{
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-md);
  padding:var(--space-3);
  transition:var(--transition-fast);
}
.about-card:hover{
  transform:translateY(-4px);
  border-color:var(--accent-2);
  box-shadow:var(--shadow-glow);
}
.about-card i{
  font-size:1.4rem;
  color:var(--accent-2);
  margin-bottom:10px;
}
.about-card h3{font-size:1.05rem;margin-bottom:4px;}
.about-card p{font-size:0.88rem;color:var(--text-soft);}
.about-card-2{margin-left:var(--space-6);}

/* ============ Services ============ */
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--space-3);
}
.service-card{
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-md);
  padding:var(--space-4);
  transition:var(--transition-med);
  position:relative;
  overflow:hidden;
}
.service-card::before{
  content:'';
  position:absolute;inset:0;
  background:var(--gradient-accent);
  opacity:0;
  transition:var(--transition-fast);
  z-index:0;
}
.service-card:hover{
  transform:translateY(-6px);
  border-color:transparent;
  box-shadow:var(--shadow-glow);
}
.service-card:hover::before{opacity:0.08;}
.service-icon{
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);
  background:rgba(79,70,229,0.12);
  color:var(--accent-2);
  font-size:1.3rem;
  margin-bottom:var(--space-2);
  position:relative;z-index:1;
}
.service-card h3{font-size:1.15rem;margin-bottom:8px;position:relative;z-index:1;}
.service-card p{font-size:0.9rem;color:var(--text-soft);position:relative;z-index:1;}

/* ============ Why Us ============ */
.why-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--space-3);
}
.why-card{
  padding:var(--space-4);
  border-radius:var(--radius-md);
  border:1px solid var(--border-soft);
  background:linear-gradient(180deg,var(--surface) 0%,var(--bg-secondary) 100%);
  transition:var(--transition-fast);
}
.why-card:hover{border-color:var(--accent);transform:translateY(-4px);}
.why-number{
  font-family:var(--font-heading);
  font-size:1.6rem;
  font-weight:700;
  color:transparent;
  -webkit-text-stroke:1px var(--accent-2);
  display:block;
  margin-bottom:var(--space-2);
}
.why-card h3{font-size:1.1rem;margin-bottom:8px;}
.why-card p{font-size:0.9rem;color:var(--text-soft);}

/* ============ Process Timeline ============ */
.timeline{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
}
.timeline::before{
  content:'';
  position:absolute;
  left:27px;top:8px;bottom:8px;
  width:1px;
  background:linear-gradient(var(--accent),var(--accent-2));
  opacity:0.4;
}
.timeline-step{
  display:flex;
  gap:var(--space-3);
  align-items:flex-start;
  position:relative;
}
.timeline-marker{
  flex-shrink:0;
  width:56px;height:56px;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);
  font-weight:700;
  color:var(--accent-2);
  z-index:1;
}
.timeline-content h3{font-size:1.15rem;margin-bottom:6px;}
.timeline-content p{font-size:0.92rem;color:var(--text-soft);max-width:560px;}

/* ============ Projects ============ */
.projects-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:var(--space-3);
}
.project-card{
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--border-soft);
  background:var(--surface);
  transition:var(--transition-med);
}
.project-card:hover{transform:translateY(-6px);border-color:var(--accent-2);}
.project-media{overflow:hidden;aspect-ratio:16/10;}
.project-media img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease;}
.project-card:hover .project-media img{transform:scale(1.06);}
.project-info{padding:var(--space-3);}
.project-tag{
  font-size:0.75rem;
  color:var(--accent-2);
  text-transform:uppercase;
  letter-spacing:0.05em;
  font-weight:600;
}
.project-info h3{font-size:1.15rem;margin-block:8px;}
.project-info p{font-size:0.9rem;color:var(--text-soft);}
.projects-cta{text-align:center;margin-top:var(--space-6);}

/* ============ Tech Stack ============ */
.tech-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--space-2);
}
.tech-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:var(--space-3);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-md);
  background:var(--surface);
  transition:var(--transition-fast);
  text-align:center;
}
.tech-item:hover{border-color:var(--accent-2);transform:translateY(-4px);}
.tech-item i{font-size:1.8rem;color:var(--accent-2);}
.tech-item span{font-size:0.85rem;color:var(--text-body);}

/* ============ Testimonials ============ */
.testimonials-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--space-3);
}
.testimonial-card{
  padding:var(--space-4);
  border-radius:var(--radius-md);
  border:1px solid var(--border-soft);
  background:var(--surface);
}
.stars{color:#F59E0B;margin-bottom:var(--space-2);font-size:0.9rem;display:flex;gap:4px;}
.testimonial-card p{font-size:0.98rem;color:var(--text-body);margin-bottom:var(--space-3);}
.testimonial-author{display:flex;align-items:center;gap:12px;}
.testimonial-author img{width:44px;height:44px;border-radius:50%;object-fit:cover;}
.testimonial-author strong{display:block;color:var(--white);font-size:0.92rem;}
.testimonial-author span{font-size:0.82rem;color:var(--text-soft);}

/* ============ Pricing ============ */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--space-3);
  align-items:stretch;
}
.pricing-card{
  padding:var(--space-4);
  border-radius:var(--radius-lg);
  border:1px solid var(--border-soft);
  background:var(--surface);
  display:flex;
  flex-direction:column;
  position:relative;
  transition:var(--transition-fast);
}
.pricing-card:hover{transform:translateY(-4px);}
.pricing-card-featured{
  border-color:var(--accent-2);
  background:linear-gradient(180deg,rgba(79,70,229,0.12),var(--surface) 40%);
  box-shadow:var(--shadow-glow);
}
.pricing-badge{
  position:absolute;
  top:-14px;left:50%;
  transform:translateX(-50%);
  background:var(--gradient-accent);
  color:var(--white);
  font-size:0.75rem;
  font-weight:600;
  padding:6px 16px;
  border-radius:var(--radius-full);
}
.pricing-card h3{font-size:1.3rem;margin-bottom:6px;}
.pricing-desc{font-size:0.88rem;color:var(--text-soft);margin-bottom:var(--space-3);}
.pricing-price{
  font-family:var(--font-heading);
  font-size:2.4rem;
  font-weight:700;
  color:var(--white);
  margin-bottom:var(--space-3);
}
.pricing-price .currency{font-size:1.3rem;vertical-align:top;color:var(--accent-2);}
.pricing-features{display:flex;flex-direction:column;gap:10px;margin-bottom:var(--space-4);flex:1;}
.pricing-features li{display:flex;align-items:center;gap:8px;font-size:0.9rem;color:var(--text-body);}
.pricing-features i{color:var(--accent-2);}

/* ============ FAQ ============ */
.faq-inner{max-width:820px;}
.faq-list{display:flex;flex-direction:column;gap:var(--space-2);}
.faq-item{
  border:1px solid var(--border-soft);
  border-radius:var(--radius-md);
  background:var(--surface);
  overflow:hidden;
}
.faq-question{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--space-3);
  font-weight:600;
  color:var(--white);
  font-size:1rem;
  text-align:left;
}
.faq-question i{color:var(--accent-2);transition:transform 0.3s ease;}
.faq-item.active .faq-question i{transform:rotate(45deg);}
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.35s ease;
}
.faq-answer p{padding:0 var(--space-3) var(--space-3);font-size:0.92rem;color:var(--text-soft);}

/* ============ Contact ============ */
.contact-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-8);
  align-items:start;
}
.contact-details{
  display:flex;flex-direction:column;gap:var(--space-2);
  margin-block:var(--space-4);
}
.contact-detail{display:flex;align-items:center;gap:10px;font-size:0.95rem;}
.contact-detail i{color:var(--accent-2);width:18px;}
.contact-socials{display:flex;gap:10px;}
.contact-socials a{
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border-soft);
  border-radius:50%;
  transition:var(--transition-fast);
}
.contact-socials a:hover{border-color:var(--accent-2);color:var(--accent-2);transform:translateY(-3px);}

.contact-form{
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);
  padding:var(--space-4);
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.form-row{display:flex;flex-direction:column;gap:6px;}
.form-row label{font-size:0.85rem;color:var(--text-soft);}
.form-row input,.form-row select,.form-row textarea{
  background:var(--bg-secondary);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  color:var(--white);
  font-size:0.92rem;
  transition:var(--transition-fast);
  resize:vertical;
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
  outline:none;
  border-color:var(--accent-2);
}
.form-status{font-size:0.85rem;color:var(--accent-2);min-height:18px;}

/* ============ Footer ============ */
.site-footer{
  background:var(--bg-secondary);
  border-top:1px solid var(--border-soft);
  padding-top:var(--space-10);
}
.footer-top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:var(--space-6);
  padding-bottom:var(--space-8);
}
.footer-brand p{font-size:0.9rem;color:var(--text-soft);margin-block:var(--space-2) var(--space-3);max-width:320px;}
.footer-links h4{font-size:0.95rem;margin-bottom:var(--space-2);}
.footer-links ul{display:flex;flex-direction:column;gap:10px;}
.footer-links a{font-size:0.88rem;color:var(--text-soft);transition:var(--transition-fast);}
.footer-links a:hover{color:var(--accent-2);}
.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:var(--space-3);
  border-top:1px solid var(--border-soft);
  font-size:0.85rem;
  color:var(--text-soft);
  flex-wrap:wrap;
  gap:var(--space-2);
}
.footer-legal{display:flex;gap:var(--space-3);}
.footer-legal a:hover{color:var(--accent-2);}

.back-to-top{
  position:fixed;
  bottom:var(--space-3);
  right:var(--space-3);
  width:46px;height:46px;
  border-radius:50%;
  background:var(--gradient-accent);
  color:var(--white);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-card);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:var(--transition-fast);
  z-index:90;
}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0);}

/* ============ Scroll Reveal ============ */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  filter:blur(6px);
  transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1),
              transform 0.8s cubic-bezier(0.16,1,0.3,1),
              filter 0.8s cubic-bezier(0.16,1,0.3,1);
}
[data-reveal].revealed{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

/* ============ Responsive ============ */
@media (max-width:1024px){
  .hero-inner{grid-template-columns:1fr;}
  .hero-visual{order:-1;max-width:520px;margin-inline:auto;}
  .about-inner,.contact-inner{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr 1fr;}
}

@media (max-width:860px){
  .main-nav{
    position:fixed;
    top:0;right:0;
    height:100vh;
    width:min(320px,80%);
    background:var(--bg-secondary);
    border-left:1px solid var(--border-soft);
    padding:100px var(--space-3) var(--space-3);
    transform:translateX(100%);
    transition:var(--transition-med);
    z-index:99;
  }
  .main-nav.open{transform:translateX(0);}
  .main-nav .nav-list{flex-direction:column;gap:var(--space-3);}
  .nav-toggle{display:flex;}
  .header-actions .btn-sm{display:none;}
  .footer-top{grid-template-columns:1fr;}
}

@media (max-width:640px){
  .section{padding-block:var(--space-8);}
  .hero{padding-top:110px;}
  .hero-stats{gap:var(--space-4);}
  .about-card-2{margin-left:0;}
  .dashboard-body{grid-template-columns:1fr 1fr;}
  .footer-bottom{flex-direction:column;text-align:center;}
}