:root{
  --text:#0b0f1a;
  --muted:#64748b;
  --brand:#7c3aed;
  --brand2:#d946ef;
  --shadow:0 22px 60px rgba(0,0,0,.14);
  --radius:26px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:#fff;
}
.container{
  max-width:1120px;
  margin:0 auto;
  padding:0 20px;
  text-align:center;
}

/* NAV */
.nav-wrap{
  position:sticky; top:0; z-index:99;
  background:rgba(255,255,255,.78);
  backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(15,23,42,.08);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  height:74px; position:relative;
}
.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:inherit;
}
.brand-logo{width:34px;height:34px}
.brand-name{font-weight:800; letter-spacing:-.02em}
.nav-links{display:flex; gap:22px; align-items:center;}
.nav-links a{
  text-decoration:none; color:#0f172a; font-weight:700; opacity:.82;
}
.nav-links a:hover{opacity:1}
.nav-toggle{
  display:none; width:44px;height:44px; border:0; background:transparent; cursor:pointer;
}
.nav-toggle span{display:block;height:2px;background:#0f172a;margin:7px 0;border-radius:2px}

/* HERO */
.hero{
  position:relative; min-height:94vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.hero-dark{
  color:#fff;
  background:
    radial-gradient(1000px 500px at 20% 15%, rgba(124,58,237,.55), transparent 60%),
    radial-gradient(900px 420px at 80% 65%, rgba(217,70,239,.35), transparent 55%),
    linear-gradient(180deg, #020617 0%, #0b1220 100%);
}
.hero-bg{
  position:absolute; inset:-40%;
  background: conic-gradient(from 180deg, rgba(124,58,237,.08), rgba(217,70,239,.08), rgba(124,58,237,.08));
  filter: blur(50px);
  animation: drift 18s ease-in-out infinite;
}
@keyframes drift{
  0%{transform:translate3d(-2%,-2%,0) rotate(0deg)}
  50%{transform:translate3d(2%,1%,0) rotate(12deg)}
  100%{transform:translate3d(-2%,-2%,0) rotate(0deg)}
}
.hero-inner{position:relative; z-index:2; max-width:980px;}
.kicker{
  display:inline-block; padding:8px 14px;
  border-radius:999px; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.9); font-weight:800; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px;
}
.hero h1{
  font-size:clamp(42px, 5.3vw, 78px);
  line-height:1.03; letter-spacing:-.03em;
  margin:10px 0 18px;
}
.subhead{
  font-size:16.5px; line-height:1.75;
  color:rgba(226,232,240,.88);
  max-width:880px; margin:0 auto 26px;
}
.hero-ctas{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 22px; border-radius:999px;
  background:linear-gradient(135deg, var(--brand2), var(--brand));
  color:#fff; text-decoration:none; font-weight:900;
  box-shadow:0 18px 44px rgba(124,58,237,.28);
  transition: transform .25s ease, box-shadow .25s ease;
  cursor:pointer; border:0;
}
.cta:hover{transform: translateY(-2px); box-shadow:0 26px 54px rgba(124,58,237,.34);}
.cta.ghost{background:transparent; border:1px solid rgba(255,255,255,.24); box-shadow:none;}
.cta.ghost:hover{border-color:rgba(255,255,255,.42);}
.cta.full{width:100%; margin-top:14px;}
.hero-badges{margin-top:22px; display:flex; justify-content:center; gap:10px; flex-wrap:wrap;}
.hero-badges span{
  padding:10px 14px; border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(226,232,240,.88); font-size:13px;
}

/* SECTIONS */
.section{padding:130px 0;}
.section.light{background:#fff;}
.section.dark{
  background:linear-gradient(180deg, #020617 0%, #0b1220 100%);
  color:#fff;
}
.section.method{
  background:
    radial-gradient(900px 440px at 50% -10%, rgba(124,58,237,.14), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}
h2{font-size:clamp(30px, 3.2vw, 48px); margin:0; letter-spacing:-.02em;}
.lead{
  color:var(--muted); max-width:860px; margin:14px auto 0; line-height:1.75;
}
.section.dark .lead{color:rgba(226,232,240,.82);}

/* SERVICES */
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:28px; margin-top:60px;
}
.service-card{
  background:#fff; border-radius:var(--radius);
  padding:38px 34px; box-shadow:var(--shadow);
  text-align:center; position:relative; overflow:hidden;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.service-card::after{
  content:""; position:absolute; inset:-45%;
  background:linear-gradient(120deg, transparent, rgba(124,58,237,.18), transparent);
  transform: translateX(-120%); pointer-events:none;
}
.service-card:hover{transform:translateY(-10px); box-shadow:0 34px 78px rgba(0,0,0,.16);}
.service-card:hover::after{animation: shine 1.1s forwards;}
@keyframes shine{to{transform: translateX(120%);}}
.icon-square{
  width:52px;height:52px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 18px; color:#fff;
  background:linear-gradient(135deg, var(--brand2), var(--brand));
  box-shadow:0 12px 26px rgba(124,58,237,.28);
  font-size:22px; transition: transform .35s ease;
}
.service-card:hover .icon-square{transform: scale(1.12) rotate(6deg);}
.check{list-style:none; padding:0; margin:22px 0 0; color:#334155; line-height:1.8; font-size:14px; text-align:left; display:inline-block;}
.section.dark .check{color:rgba(226,232,240,.88);}
.check li{position:relative; padding-left:24px; margin:6px 0;}
.check li::before{content:"✓"; position:absolute; left:0; color:var(--brand); font-weight:900;}
.check.compact{margin-top:12px;}

/* PORTFOLIO */
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:26px; margin-top:60px;
}
.port-card{
  display:block; text-decoration:none; color:inherit;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius); overflow:hidden;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease;
}
.port-card:hover{transform:translateY(-10px); border-color:rgba(255,255,255,.22);}
.port-media{height:160px; background-size:cover; background-position:center; filter:saturate(1.1);}
.port-body{padding:20px 22px 24px;}
.port-body p{margin:0; color:rgba(226,232,240,.80); line-height:1.6;}
.proof-row{margin-top:46px; display:flex; justify-content:center; gap:44px; flex-wrap:wrap;}
.proof{
  min-width:210px; padding:18px 20px;
  border-radius:22px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.proof .num{font-size:44px; font-weight:900; letter-spacing:-.03em;}
.proof .unit{font-size:18px; opacity:.9; margin-left:4px;}
.proof p{margin:8px 0 0; color:rgba(226,232,240,.78);}
.brands{margin-top:28px; opacity:.78;}

/* VISION */
.two-col{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:60px; align-items:center; margin-top:58px;
  text-align:center;
}
.img-frame{
  background: radial-gradient(600px 320px at 50% 0%, rgba(124,58,237,.18), transparent 70%);
  border-radius:30px; padding:16px;
  border:1px solid rgba(15,23,42,.10);
  box-shadow:var(--shadow);
}
.img-frame img{width:100%; border-radius:24px; display:block;}
.parallax{will-change:transform;}

/* FLOW + MATRIX */
.flow{display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-top:44px;}
.flow-step{
  width:min(220px, 100%);
  padding:18px 18px 16px;
  border-radius:24px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 14px 40px rgba(0,0,0,.08);
}
.flow-step p{margin:8px 0 0; color:var(--muted); line-height:1.55;}
.matrix{margin-top:54px; display:grid; grid-template-columns:1fr 1.4fr; gap:22px; align-items:stretch;}
.matrix-left{display:flex; flex-direction:column; gap:12px;}
.tab{
  width:100%;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  font-weight:900;
  cursor:pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tab:hover{transform: translateY(-1px);}
.tab.active{
  border-color: rgba(124,58,237,.35);
  box-shadow:0 16px 40px rgba(124,58,237,.12);
}
.matrix-right{
  background:#fff;
  border-radius:var(--radius);
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 22px 60px rgba(0,0,0,.10);
  padding:26px 26px 22px;
  text-align:left;
}
.panel{display:none;}
.panel.active{display:block;}
.panel p{color:var(--muted); line-height:1.7;}

/* CONTACT */
.cta-section{
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(124,58,237,.18), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}
.lead-form{
  max-width:860px;
  margin:40px auto 0;
  padding:26px;
  border-radius:28px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 22px 60px rgba(0,0,0,.10);
  text-align:left;
}
.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
.lead-form input, .lead-form textarea{
  width:100%; padding:14px 14px;
  border-radius:14px; border:1px solid rgba(15,23,42,.12);
  font-size:14px; outline:none;
}
.lead-form textarea{margin-top:12px; resize:vertical;}
.fine{color:var(--muted); font-size:13px; margin-top:16px;}

/* REVEAL */
.reveal{opacity:0; transform: translateY(18px); transition: .85s cubic-bezier(.2,.8,.2,1);}
.reveal.active{opacity:1; transform:none;}

/* FOOTER */
.footer{padding:34px 0; border-top:1px solid rgba(15,23,42,.08); background:#fff;}
.footer p{margin:6px 0;}

/* MOBILE */
@media (max-width: 900px){
  .nav-links{
    position:absolute; top:74px; left:0; right:0;
    background:rgba(255,255,255,.95);
    border-bottom:1px solid rgba(15,23,42,.08);
    display:none; flex-direction:column; padding:16px 20px 20px; gap:12px;
  }
  .nav-links.open{display:flex;}
  .nav-toggle{display:block;}
  .two-col{grid-template-columns:1fr;}
  .matrix{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
}

/* FAQ */
.faq{
  max-width:920px;
  margin:46px auto 0;
  text-align:left;
}
.faq-item{
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  padding:14px 16px;
  background:#fff;
  box-shadow:0 12px 34px rgba(0,0,0,.06);
  margin-bottom:14px;
}
.faq-item summary{
  cursor:pointer;
  font-weight:900;
  letter-spacing:-.01em;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item p{
  margin:10px 0 0;
  color:var(--muted);
  line-height:1.7;
}

/* SEO Footer Block */
.seo-block{
  padding:56px 0;
  background:#0b1220;
  color:#fff;
  text-align:center;
}
.seo-block h3{
  margin:0 0 10px;
  font-size:20px;
  letter-spacing:-.01em;
}
.seo-block p{
  margin:10px auto 0;
  max-width:980px;
  line-height:1.8;
  color:rgba(226,232,240,.86);
}
.seo-block .fine{
  color:rgba(226,232,240,.70);
  font-size:13px;
}