:root{
  --blue:#2563eb;
  --blue-2:#38bdf8;
  --purple:#7c3aed;
  --orange:#f97316;
  --yellow:#fde047;
  --green:#22c55e;
  --red:#ef4444;

  --dark:#0f172a;
  --black:#020617;
  --muted:#64748b;
  --soft:#f8fafc;
  --card:#ffffff;
  --border:#e2e8f0;

  --radius:26px;
  --radius-lg:36px;

  --shadow:0 24px 80px rgba(15,23,42,.12);
  --shadow-soft:0 18px 50px rgba(15,23,42,.08);
  --shadow-dark:0 30px 100px rgba(2,6,23,.45);

  --gradient:linear-gradient(135deg,#2563eb 0%,#7c3aed 52%,#f97316 100%);
  --gradient-soft:linear-gradient(135deg,rgba(37,99,235,.12),rgba(124,58,237,.12),rgba(249,115,22,.12));
  --glass:rgba(255,255,255,.72);
}

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

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Inter',sans-serif;
  color:var(--dark);
  background:#ffffff;
  line-height:1.7;
  overflow-x:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  max-width:100%;
  display:block;
}

button,
input,
select,
textarea{
  font-family:inherit;
}

.container{
  width:min(1320px,92%);
  margin:auto;
}

.section{
  padding:110px 0;
  position:relative;
}

.site-header{
  position:fixed;
  top:14px;
  left:0;
  width:100%;
  z-index:1000;
  pointer-events:none;
}

.nav-wrap{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:0 18px;
  border:1px solid rgba(226,232,240,.85);
  border-radius:999px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(22px);
  box-shadow:0 18px 60px rgba(15,23,42,.12);
  pointer-events:auto;
}

.brand-logo{
  display:flex;
  align-items:center;
  flex-shrink:0;
}

.brand-logo img{
  width:210px;
  height:auto;
}

.main-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:24px;
  font-weight:850;
  color:#334155;
  font-size:.95rem;
}

.main-nav a{
  position:relative;
  transition:.25s ease;
}

.main-nav a:not(.nav-cta)::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width:0;
  height:2px;
  background:var(--gradient);
  border-radius:999px;
  transition:.25s ease;
}

.main-nav a:not(.nav-cta):hover{
  color:var(--blue);
}

.main-nav a:not(.nav-cta):hover::after{
  width:100%;
}

.nav-cta{
  color:#fff!important;
  padding:13px 20px;
  border-radius:999px;
  background:var(--gradient);
  box-shadow:
    0 12px 34px rgba(37,99,235,.32),
    0 0 28px rgba(124,58,237,.18);
}

.nav-cta:hover{
  transform:translateY(-2px);
}

.menu-toggle{
  display:none;
  border:0;
  background:var(--gradient);
  color:#fff;
  width:46px;
  height:46px;
  border-radius:16px;
  font-size:1.2rem;
  cursor:pointer;
  box-shadow:0 12px 35px rgba(37,99,235,.28);
}

.hero{
  position:relative;
  overflow:hidden;
  padding:165px 0 105px;
  min-height:100vh;
  display:flex;
  align-items:center;
  background:
    radial-gradient(circle at 14% 18%,rgba(253,224,71,.35),transparent 28%),
    radial-gradient(circle at 80% 12%,rgba(124,58,237,.28),transparent 32%),
    radial-gradient(circle at 70% 86%,rgba(249,115,22,.25),transparent 32%),
    linear-gradient(135deg,#eff6ff 0%,#fff7ed 46%,#faf5ff 100%);
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(15,23,42,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.045) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 85%);
  pointer-events:none;
}

.hero::after{
  content:"";
  position:absolute;
  inset:auto -12% -28% -12%;
  height:310px;
  background:linear-gradient(90deg,rgba(37,99,235,.16),rgba(124,58,237,.13),rgba(249,115,22,.15));
  filter:blur(70px);
}

.hero-orb{
  position:absolute;
  width:360px;
  height:360px;
  border-radius:50%;
  filter:blur(70px);
  opacity:.35;
  pointer-events:none;
}

.hero-orb-one{
  top:15%;
  left:-120px;
  background:#38bdf8;
}

.hero-orb-two{
  right:-120px;
  bottom:12%;
  background:#f97316;
}

.hero-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(420px,.94fr);
  gap:72px;
  align-items:center;
}

.hero-content{
  max-width:820px;
}

.eyebrow,
.section-head span,
.section-pill,
.cv-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 17px;
  border-radius:999px;
  background:rgba(37,99,235,.1);
  color:var(--blue);
  font-weight:900;
  font-size:.84rem;
  line-height:1.2;
  margin-bottom:20px;
  border:1px solid rgba(37,99,235,.14);
}

.hero h1{
  font-size:clamp(3.2rem,5.4vw,6.25rem);
  line-height:.96;
  letter-spacing:-.075em;
  max-width:940px;
  margin-bottom:26px;
  color:#07111f;
}

.hero-text{
  font-size:1.17rem;
  color:#475569;
  max-width:770px;
  margin-bottom:28px;
}

.hero-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:34px;
}

.hero-badges span{
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  color:#334155;
  font-weight:850;
  font-size:.9rem;
  box-shadow:0 12px 30px rgba(15,23,42,.08);
  border:1px solid rgba(226,232,240,.8);
  backdrop-filter:blur(12px);
}

.hero-actions,
.contact-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:36px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 24px;
  min-height:54px;
  border-radius:999px;
  font-weight:900;
  transition:.25s ease;
  border:0;
  cursor:pointer;
  white-space:nowrap;
}

.btn:hover{
  transform:translateY(-3px);
}

.btn-primary{
  color:#fff;
  background:var(--gradient);
  box-shadow:0 18px 45px rgba(37,99,235,.28);
}

.btn-light{
  color:#0f172a;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 16px 40px rgba(15,23,42,.08);
}

.btn-outline-dark{
  color:#0f172a;
  background:rgba(255,255,255,.45);
  border:1px solid rgba(15,23,42,.12);
  backdrop-filter:blur(14px);
}

.btn-dark{
  color:#fff;
  background:#0f172a;
  box-shadow:0 18px 40px rgba(15,23,42,.18);
}

.btn-white{
  background:#fff;
  color:var(--blue);
  box-shadow:0 18px 45px rgba(15,23,42,.18);
}

.btn-outline-white{
  border:1px solid rgba(255,255,255,.55);
  color:#fff;
  background:rgba(255,255,255,.08);
}

.hero-proof{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  max-width:700px;
}

.hero-proof div{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(226,232,240,.9);
  border-radius:22px;
  padding:20px;
  box-shadow:0 16px 40px rgba(15,23,42,.08);
  backdrop-filter:blur(16px);
}

.hero-proof strong{
  display:block;
  color:var(--purple);
  font-size:2rem;
  line-height:1;
  letter-spacing:-.04em;
}

.hero-proof span{
  color:#475569;
  font-weight:850;
  font-size:.9rem;
}

.hero-dashboard{
  position:relative;
}

.hero-dashboard::before{
  content:"";
  position:absolute;
  inset:18px -10px -18px 34px;
  background:var(--gradient);
  border-radius:42px;
  filter:blur(22px);
  opacity:.24;
}

.dashboard-shell{
  position:relative;
  z-index:2;
  background:rgba(2,6,23,.92);
  color:#fff;
  border-radius:38px;
  padding:24px;
  box-shadow:var(--shadow-dark);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
}

.dashboard-shell::before{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  background:var(--gradient);
  top:-90px;
  right:-90px;
  filter:blur(16px);
  opacity:.7;
  border-radius:50%;
}

.dashboard-shell::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:34px 34px;
  pointer-events:none;
}

.dashboard-header,
.dashboard-main-card,
.dashboard-grid,
.console-timeline{
  position:relative;
  z-index:2;
}

.dashboard-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:22px;
}

.window-dots{
  display:flex;
  gap:7px;
}

.window-dots span{
  width:11px;
  height:11px;
  border-radius:50%;
  background:rgba(255,255,255,.34);
}

.dashboard-header small{
  color:#cbd5e1;
  font-weight:800;
}

.status-pill{
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(34,197,94,.14);
  color:#bbf7d0;
  font-size:.78rem;
  font-weight:900;
}

.status-pill span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 7px rgba(34,197,94,.15);
}

.dashboard-main-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:24px;
  border-radius:28px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.12);
  margin-bottom:16px;
}

.console-label{
  display:block;
  color:#93c5fd;
  font-weight:900;
  font-size:.8rem;
  margin-bottom:8px;
}

.dashboard-main-card h3{
  font-size:1.35rem;
  line-height:1.2;
  letter-spacing:-.03em;
}

.dashboard-main-card strong{
  font-size:2.6rem;
  letter-spacing:-.06em;
  color:var(--yellow);
}

.dashboard-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}

.dash-card{
  padding:18px;
  border-radius:22px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.1);
}

.dash-card i{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:rgba(255,255,255,.12);
  color:var(--yellow);
  margin-bottom:14px;
}

.dash-card span{
  display:block;
  color:#cbd5e1;
  font-weight:800;
  font-size:.82rem;
}

.dash-card strong{
  display:block;
  margin-top:3px;
  font-size:1.05rem;
}

.console-timeline{
  display:grid;
  gap:11px;
  margin-top:18px;
}

.console-timeline div{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.08);
  color:#e2e8f0;
  font-weight:800;
  font-size:.92rem;
}

.console-timeline i{
  color:var(--green);
}

.trust-strip{
  background:#020617;
  color:#fff;
  padding:24px 0;
  position:relative;
  overflow:hidden;
}

.trust-strip::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(37,99,235,.16),transparent,rgba(249,115,22,.16));
  pointer-events:none;
}

.trust-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
}

.trust-grid div{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:900;
  color:#e2e8f0;
  text-align:center;
}

.trust-grid i{
  color:var(--yellow);
}

.section-head{
  text-align:center;
  margin-bottom:58px;
}

.section-head h2{
  font-size:clamp(2.2rem,4.2vw,4.1rem);
  line-height:1.02;
  letter-spacing:-.065em;
  margin-bottom:16px;
  color:#07111f;
}

.section-head p{
  color:var(--muted);
  max-width:820px;
  margin:auto;
  font-size:1.08rem;
}

.problems{
  background:#fff;
}

.problem-grid,
.service-grid,
.project-grid{
  display:grid;
  gap:24px;
}

.problem-grid{
  grid-template-columns:repeat(4,1fr);
}

.service-grid{
  grid-template-columns:repeat(4,1fr);
}

.problem-card,
.service-card,
.step,
.faq-item{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  padding:28px;
  transition:.28s ease;
}

.problem-card:hover,
.service-card:hover,
.step:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow);
  border-color:rgba(37,99,235,.25);
}

.problem-card i,
.service-card i{
  width:62px;
  height:62px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:20px;
  color:#fff;
  background:var(--gradient);
  font-size:1.42rem;
  margin-bottom:20px;
  box-shadow:0 14px 34px rgba(37,99,235,.22);
}

.problem-card h3,
.service-card h3,
.step h3{
  font-size:1.25rem;
  line-height:1.22;
  margin-bottom:9px;
  letter-spacing:-.03em;
}

.problem-card p,
.service-card p,
.step p,
.faq-item p{
  color:var(--muted);
}

.services{
  background:
    radial-gradient(circle at 12% 20%,rgba(37,99,235,.08),transparent 25%),
    linear-gradient(180deg,#f8fafc,#ffffff);
}

.service-card{
  position:relative;
  overflow:hidden;
}

.service-card::before{
  content:"";
  position:absolute;
  inset:auto 20px 0 20px;
  height:4px;
  border-radius:999px 999px 0 0;
  background:var(--gradient);
  opacity:0;
  transition:.28s ease;
}

.service-card:hover::before{
  opacity:1;
}

.service-tags,
.project-features{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}

.service-tags span{
  padding:7px 10px;
  border-radius:999px;
  background:#f1f5f9;
  color:#334155;
  font-size:.78rem;
  font-weight:900;
}

.systems{
  background:#020617;
  color:#fff;
  overflow:hidden;
}

.systems::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 16% 20%,rgba(37,99,235,.28),transparent 32%),
    radial-gradient(circle at 82% 70%,rgba(249,115,22,.22),transparent 30%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:auto,auto,48px 48px,48px 48px;
  pointer-events:none;
}

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

.systems .section-head h2{
  color:#fff;
}

.systems .section-head p{
  color:#cbd5e1;
}

.systems .section-head span{
  color:var(--yellow);
  background:rgba(253,224,71,.12);
  border-color:rgba(253,224,71,.18);
}

.systems-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr;
  gap:22px;
}

.system-card{
  min-height:240px;
  padding:28px;
  border-radius:32px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 20px 60px rgba(0,0,0,.24);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:.28s ease;
  overflow:hidden;
  position:relative;
}

.system-card::before{
  content:"";
  position:absolute;
  width:190px;
  height:190px;
  border-radius:50%;
  right:-80px;
  top:-80px;
  background:var(--gradient);
  opacity:.25;
  filter:blur(8px);
}

.system-card.large{
  grid-row:span 2;
  min-height:502px;
  background:
    linear-gradient(135deg,rgba(37,99,235,.3),rgba(124,58,237,.2)),
    rgba(255,255,255,.08);
}

.system-card:hover{
  transform:translateY(-8px);
  background:rgba(255,255,255,.1);
}

.system-card span{
  position:relative;
  z-index:2;
  display:inline-flex;
  width:52px;
  height:52px;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  background:rgba(255,255,255,.12);
  color:var(--yellow);
  font-weight:900;
  margin-bottom:18px;
}

.system-card h3,
.system-card p{
  position:relative;
  z-index:2;
}

.system-card h3{
  font-size:1.45rem;
  line-height:1.16;
  letter-spacing:-.04em;
  margin-bottom:10px;
}

.system-card.large h3{
  font-size:2.25rem;
}

.system-card p{
  color:#cbd5e1;
}

.stack-section{
  background:
    radial-gradient(circle at 50% 0%,rgba(37,99,235,.12),transparent 30%),
    #fff;
}

.stack-cloud{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  max-width:1100px;
  margin:auto;
}

.stack-cloud span{
  padding:13px 18px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 14px 38px rgba(15,23,42,.08);
  font-weight:900;
  color:#334155;
  transition:.25s ease;
}

.stack-cloud span:hover{
  transform:translateY(-4px);
  color:var(--blue);
  border-color:rgba(37,99,235,.3);
}

.projects{
  background:#0f172a;
  color:#fff;
  overflow:hidden;
}

.projects::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 12%,rgba(37,99,235,.24),transparent 30%),
    radial-gradient(circle at 82% 18%,rgba(124,58,237,.24),transparent 28%),
    radial-gradient(circle at 50% 90%,rgba(249,115,22,.18),transparent 30%),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:auto,auto,auto,48px 48px,48px 48px;
  pointer-events:none;
}

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

.projects .section-head h2{
  color:#fff;
}

.projects .section-head p{
  color:#cbd5e1;
}

.projects .section-head span{
  background:rgba(253,224,71,.14);
  color:var(--yellow);
  border-color:rgba(253,224,71,.18);
}

.project-grid{
  grid-template-columns:repeat(4,1fr);
}

.project-card{
  position:relative;
  min-height:430px;
  padding:24px;
  border-radius:30px;
  background:rgba(255,255,255,.065);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 20px 65px rgba(0,0,0,.22);
  color:#fff;
  overflow:hidden;
  transition:.28s ease;
}

.project-card::before{
  content:"";
  position:absolute;
  width:210px;
  height:210px;
  right:-90px;
  top:-90px;
  border-radius:50%;
  background:var(--project-glow,rgba(37,99,235,.35));
  filter:blur(12px);
  opacity:.55;
  pointer-events:none;
}

.project-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.045),transparent 55%);
  pointer-events:none;
}

.project-card:hover{
  transform:translateY(-9px);
  border-color:rgba(255,255,255,.22);
  box-shadow:0 28px 85px rgba(0,0,0,.32);
}

.project-top,
.project-meta,
.project-card h3,
.project-card p,
.project-features,
.project-card a{
  position:relative;
  z-index:2;
}

.project-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
}

.project-logo{
  width:76px;
  height:76px;
  border-radius:24px;
  padding:12px;
  background:#fff;
  box-shadow:0 18px 42px rgba(0,0,0,.2);
}

.project-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.project-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 11px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.project-badge.live{
  background:rgba(34,197,94,.14);
  color:#bbf7d0;
}

.project-badge.demo{
  background:rgba(56,189,248,.14);
  color:#bae6fd;
}

.project-badge.concept,
.project-badge.system{
  background:rgba(253,224,71,.15);
  color:#fef08a;
}

.project-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:14px;
}

.project-meta span{
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.1);
  color:#dbeafe;
  font-size:.78rem;
  font-weight:850;
}

.project-card h3{
  font-size:1.45rem;
  line-height:1.15;
  letter-spacing:-.04em;
  margin-bottom:10px;
}

.project-card p{
  color:#dbeafe;
  font-size:.95rem;
}

.project-features span{
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  color:#f8fafc;
  font-size:.75rem;
  font-weight:850;
  border:1px solid rgba(255,255,255,.08);
}

.project-card a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:22px;
  padding:12px 17px;
  border-radius:999px;
  background:#fff;
  color:#0f172a;
  font-weight:950;
  transition:.25s ease;
}

.project-card a:hover{
  transform:translateY(-2px);
}

.project-card.fintech{--project-glow:rgba(37,99,235,.55);}
.project-card.sports{--project-glow:rgba(34,197,94,.5);}
.project-card.finance{--project-glow:rgba(14,165,233,.5);}
.project-card.crypto{--project-glow:rgba(253,224,71,.42);}
.project-card.automation{--project-glow:rgba(249,115,22,.5);}
.project-card.ecommerce{--project-glow:rgba(236,72,153,.42);}
.project-card.marketplace{--project-glow:rgba(124,58,237,.5);}
.project-card.realestate{--project-glow:rgba(245,158,11,.5);}
.project-card.freelance{--project-glow:rgba(20,184,166,.5);}
.project-card.school{--project-glow:rgba(59,130,246,.5);}
.project-card.travel{--project-glow:rgba(6,182,212,.5);}
.project-card.pos{--project-glow:rgba(248,113,113,.46);}

.process{
  background:
    radial-gradient(circle at 20% 20%,rgba(249,115,22,.1),transparent 28%),
    #fff7ed;
}

.timeline{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}

.step{
  position:relative;
  overflow:hidden;
}

.step::before{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  right:-80px;
  top:-80px;
  background:var(--gradient);
  opacity:.12;
  border-radius:50%;
}

.step span{
  position:relative;
  z-index:2;
  display:inline-flex;
  width:58px;
  height:58px;
  align-items:center;
  justify-content:center;
  border-radius:20px;
  background:var(--gradient);
  color:#fff;
  font-weight:950;
  margin-bottom:18px;
}

.cv-section{
  background:#fff;
}

.cv-card{
  display:grid;
  grid-template-columns:1fr auto;
  gap:34px;
  align-items:center;
  padding:52px;
  border-radius:38px;
  color:#fff;
  background:
    radial-gradient(circle at 15% 20%,rgba(253,224,71,.2),transparent 28%),
    var(--gradient);
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
}

.cv-card::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:42px 42px;
  opacity:.35;
}

.cv-card > *{
  position:relative;
  z-index:2;
}

.cv-label{
  background:rgba(255,255,255,.17);
  color:#fff;
  border-color:rgba(255,255,255,.2);
}

.cv-card h2{
  font-size:clamp(2rem,4vw,3.2rem);
  line-height:1.04;
  letter-spacing:-.055em;
  margin-bottom:14px;
}

.cv-card p{
  color:rgba(255,255,255,.9);
  max-width:820px;
}

.why{
  background:
    radial-gradient(circle at 80% 20%,rgba(37,99,235,.08),transparent 28%),
    #f8fafc;
}

.why-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:60px;
  align-items:center;
}

.why h2{
  font-size:clamp(2.2rem,4vw,3.5rem);
  line-height:1.05;
  letter-spacing:-.06em;
  margin-bottom:18px;
}

.why p{
  color:var(--muted);
  margin-bottom:26px;
}

.why-list{
  display:grid;
  gap:15px;
}

.why-list div{
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;
  padding:20px;
  font-weight:900;
  box-shadow:0 12px 30px rgba(15,23,42,.06);
  transition:.25s ease;
}

.why-list div:hover{
  transform:translateX(6px);
  border-color:rgba(37,99,235,.22);
}

.why-list i{
  color:var(--green);
  margin-right:10px;
}

.faq{
  background:#fff;
}

.faq-list{
  max-width:940px;
  margin:auto;
  display:grid;
  gap:16px;
}

.faq-item{
  padding:0;
  overflow:hidden;
}

.faq-item button{
  width:100%;
  border:0;
  background:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:24px;
  font-weight:950;
  font-size:1rem;
  text-align:left;
  cursor:pointer;
  color:#0f172a;
}

.faq-item p{
  display:none;
  padding:0 24px 24px;
}

.faq-item.active p{
  display:block;
}

.contact-section{
  padding:110px 0;
  color:#fff;
  background:
    radial-gradient(circle at 15% 20%,rgba(253,224,71,.2),transparent 28%),
    radial-gradient(circle at 80% 80%,rgba(56,189,248,.18),transparent 30%),
    linear-gradient(135deg,#2563eb,#7c3aed 55%,#f97316);
  position:relative;
  overflow:hidden;
}

.contact-section::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:48px 48px;
  opacity:.35;
}

.contact-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:58px;
  align-items:center;
}

.contact-grid h2{
  font-size:clamp(2.5rem,4.5vw,4.2rem);
  line-height:1;
  letter-spacing:-.065em;
  margin-bottom:20px;
}

.contact-grid p{
  color:rgba(255,255,255,.88);
  max-width:650px;
  margin-bottom:28px;
  font-size:1.08rem;
}

.light{
  background:rgba(255,255,255,.16);
  color:#fff;
  border-color:rgba(255,255,255,.18);
}

.lead-form{
  background:rgba(255,255,255,.95);
  border-radius:34px;
  padding:32px;
  display:grid;
  gap:16px;
  box-shadow:0 30px 90px rgba(15,23,42,.28);
  border:1px solid rgba(255,255,255,.5);
}

.lead-form input,
.lead-form select,
.lead-form textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px;
  font:inherit;
  color:#0f172a;
  outline:none;
  background:#fff;
  transition:.2s ease;
}

.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus{
  border-color:rgba(37,99,235,.55);
  box-shadow:0 0 0 4px rgba(37,99,235,.1);
}

.lead-form textarea{
  min-height:135px;
  resize:vertical;
}

.lead-form button{
  border:0;
  border-radius:999px;
  padding:17px;
  color:#fff;
  background:var(--gradient);
  font-weight:950;
  font-size:1rem;
  cursor:pointer;
  box-shadow:0 18px 45px rgba(37,99,235,.25);
}

.footer{
  background:#020617;
  color:#94a3b8;
  padding:76px 0 26px;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.3fr .8fr 1fr;
  gap:44px;
}

.footer-logo{
  width:220px;
  background:#fff;
  padding:8px;
  border-radius:18px;
  margin-bottom:18px;
}

.footer h3{
  color:#fff;
  margin-bottom:15px;
}

.footer a,
.footer p{
  display:block;
  color:#cbd5e1;
  margin-bottom:10px;
}

.footer a:hover{
  color:#fff;
}

.footer-bottom{
  text-align:center;
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:48px;
  padding-top:24px;
  color:#64748b;
}

.float-whatsapp,
.scroll-top{
  position:fixed;
  right:22px;
  width:58px;
  height:58px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  z-index:999;
  box-shadow:0 18px 45px rgba(15,23,42,.24);
}

.float-whatsapp{
  bottom:22px;
  background:#25d366;
  font-size:1.65rem;
}

.scroll-top{
  bottom:92px;
  background:#0f172a;
  opacity:0;
  pointer-events:none;
  transition:.25s;
}

.scroll-top.show{
  opacity:1;
  pointer-events:auto;
}

@media(max-width:1200px){
  .hero-grid{
    grid-template-columns:1fr;
  }

  .hero-content{
    max-width:980px;
  }

  .hero-dashboard{
    max-width:720px;
  }

  .problem-grid,
  .service-grid,
  .project-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .systems-grid{
    grid-template-columns:1fr 1fr;
  }

  .system-card.large{
    grid-column:span 2;
    grid-row:auto;
    min-height:320px;
  }

  .trust-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

@media(max-width:980px){
  .site-header{
    top:10px;
  }

  .nav-wrap{
    min-height:72px;
    border-radius:24px;
  }

  .menu-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .brand-logo img{
    width:178px;
  }

  .main-nav{
    position:fixed;
    top:92px;
    left:4%;
    right:4%;
    width:92%;
    max-height:calc(100vh - 112px);
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(20px);
    border:1px solid var(--border);
    border-radius:28px;
    flex-direction:column;
    align-items:stretch;
    padding:18px;
    gap:0;
    transform:translateY(-16px);
    opacity:0;
    pointer-events:none;
    transition:.3s ease;
    overflow-y:auto;
    box-shadow:0 24px 80px rgba(15,23,42,.18);
  }

  .main-nav.active{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  .main-nav a{
    padding:15px;
    border-bottom:1px solid var(--border);
  }

  .main-nav a::after{
    display:none;
  }

  .nav-cta{
    margin-top:14px;
    text-align:center;
    border-bottom:0!important;
  }

  .hero{
    min-height:auto;
    padding:140px 0 80px;
  }

  .hero h1{
    font-size:clamp(2.75rem,9vw,4.2rem);
  }

  .hero-content{
    text-align:center;
    margin:auto;
  }

  .eyebrow{
    justify-content:center;
  }

  .hero-badges,
  .hero-actions{
    justify-content:center;
  }

  .hero-proof{
    margin:auto;
  }

  .dashboard-shell{
    border-radius:32px;
  }

  .timeline{
    grid-template-columns:repeat(2,1fr);
  }

  .why-grid,
  .contact-grid{
    grid-template-columns:1fr;
  }

  .cv-card{
    grid-template-columns:1fr;
    text-align:center;
  }

  .footer-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:720px){
  .container{
    width:min(100% - 32px,1320px);
  }

  .section{
    padding:78px 0;
  }

  .hero{
    padding:128px 0 70px;
  }

  .hero h1{
    font-size:2.65rem;
    letter-spacing:-.06em;
  }

  .hero-text{
    font-size:1rem;
  }

  .hero-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .btn{
    width:100%;
  }

  .hero-proof{
    grid-template-columns:1fr;
  }

  .dashboard-grid,
  .problem-grid,
  .service-grid,
  .project-grid,
  .timeline,
  .systems-grid,
  .trust-grid{
    grid-template-columns:1fr;
  }

  .system-card.large{
    grid-column:auto;
    min-height:280px;
  }

  .dashboard-main-card{
    align-items:flex-start;
    flex-direction:column;
  }

  .dashboard-main-card strong{
    font-size:2.2rem;
  }

  .project-card{
    min-height:auto;
  }

  .cv-card{
    padding:34px 22px;
    border-radius:30px;
  }

  .contact-section{
    padding:82px 0;
  }

  .lead-form{
    padding:24px;
    border-radius:28px;
  }

  .float-whatsapp,
  .scroll-top{
    right:16px;
    width:54px;
    height:54px;
  }
}

@media(max-width:480px){
  .brand-logo img{
    width:156px;
  }

  .nav-wrap{
    min-height:68px;
    padding:0 12px;
  }

  .menu-toggle{
    width:43px;
    height:43px;
  }

  .hero h1{
    font-size:2.35rem;
  }

  .section-head h2,
  .why h2,
  .contact-grid h2{
    font-size:2.1rem;
  }

  .dashboard-shell{
    padding:18px;
    border-radius:28px;
  }

  .project-top{
    align-items:flex-start;
  }

  .project-logo{
    width:68px;
    height:68px;
    border-radius:22px;
  }

  .problem-card,
  .service-card,
  .step,
  .system-card,
  .project-card{
    padding:23px;
  }

  .trust-grid div{
    justify-content:flex-start;
  }
}