:root{
  --bg:#07080B;
  --panel:rgba(255,255,255,.03);
  --panel2:rgba(255,255,255,.02);
  --border:rgba(255,255,255,.10);
  --border12:rgba(255,255,255,.12);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.65);
  --muted55:rgba(255,255,255,.55);
  --muted50:rgba(255,255,255,.50);
  --muted45:rgba(255,255,255,.45);

  --shadow: 0 20px 80px rgba(0,0,0,.55);
  --shadow2: 0 10px 40px rgba(0,0,0,.35);
  --r2xl: 2.5rem;
  --r3xl: 1.5rem;

  /* Accent defaults: Crimson */
  --a1:#ef4444;
  --a2:#f43f5e;
  --ring: rgba(239,68,68,.30);
  --glow: rgba(239,68,68,.25);
  --accentText: rgba(239,68,68,.90);
  --accentSoft: rgba(239,68,68,.10);
  --accentBorder: rgba(239,68,68,.25);
}

body[data-accent="blue"]{
  --a1:#38bdf8;
  --a2:#3b82f6;
  --ring: rgba(59,130,246,.30);
  --glow: rgba(59,130,246,.25);
  --accentText: rgba(56,189,248,.92);
  --accentSoft: rgba(59,130,246,.10);
  --accentBorder: rgba(59,130,246,.25);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg);
  color:var(--text);
}
a{color:inherit; text-decoration:none}
button{font:inherit}
.page{min-height:100vh}
.container{max-width:80rem; margin:0 auto; padding:0 16px}

/* breakpoints: sm 640, md 768, lg 1024 */
@media (min-width:640px){ .container{padding:0 24px} }

/* ---------- Header ---------- */
.header{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--border);
  background:rgba(7,8,11,.70);
  backdrop-filter: blur(18px);
}
.header__row{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0; gap:12px;
}
.brand{display:flex; align-items:center; gap:12px}
.brand__mark{
  height:36px; width:36px;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  display:grid; place-items:center;
  box-shadow: 0 0 60px var(--glow);
}
.brand__title{font-size:14px; font-weight:700; letter-spacing:.04em}
.brand__sub{font-size:12px; color:var(--muted55)}

.nav{display:none; align-items:center; gap:4px}
.nav a{
  padding:8px 12px;
  border-radius:999px;
  font-size:14px;
  color:rgba(255,255,255,.70);
  transition: background .2s ease, color .2s ease;
}
.nav a:hover{color:#fff; background:rgba(255,255,255,.04)}
.nav a[aria-current="true"]{color:#fff; background:rgba(255,255,255,.06)}

.header__actions{display:flex; align-items:center; gap:8px}
.accentToggle{display:none; gap:8px}
.pill{
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.85);
  border-radius:999px;
  font-size:12px;
  padding:8px 12px;
  cursor:pointer;
  transition: background .2s ease, box-shadow .2s ease;
}
.pill:hover{background:rgba(255,255,255,.05)}
.pill.isActive{box-shadow:0 0 0 1px var(--ring) inset}

.cta{
  display:inline-flex; align-items:center; gap:10px;
  border-radius:999px;
  padding:8px 16px;
  font-weight:700;
  background:linear-gradient(90deg,var(--a1),var(--a2));
  box-shadow: 0 14px 50px rgba(0,0,0,.45);
}
.cta__arrow{font-size:14px; opacity:.9}

@media (min-width:640px){ .accentToggle{display:flex} }
@media (min-width:768px){ .nav{display:flex} }

/* ---------- Common bits ---------- */
.section{position:relative}
.label{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  color:rgba(255,255,255,.70);
}
.label__dot{
  width:6px; height:6px; border-radius:999px;
  background:linear-gradient(90deg,var(--a1),var(--a2));
}

.grad{
  background:linear-gradient(90deg,var(--a1),var(--a2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.h1{
  margin:18px 0 0;
  font-size:clamp(2.25rem, 3vw + 1.6rem, 3.75rem);
  line-height:1.05;
  letter-spacing:-.03em;
  font-weight:650;
}
.h1__sub{
  display:block;
  margin-top:10px;
  color:rgba(255,255,255,.70);
  font-weight:600;
  font-size:clamp(1rem, .6vw + 1rem, 1.25rem);
}
.h2{
  margin:14px 0 0;
  font-size:clamp(1.9rem, 1.2vw + 1.5rem, 2.4rem);
  line-height:1.15;
  letter-spacing:-.02em;
}
.lead{margin:18px 0 0; max-width:40rem; color:var(--muted); line-height:1.7}
.p{margin:12px 0 0; max-width:42rem; color:var(--muted); line-height:1.7}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius:16px;
  padding:12px 16px;
  font-weight:700;
  font-size:14px;
  border:1px solid transparent;
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
.btn--primary{
  background:linear-gradient(90deg,var(--a1),var(--a2));
  box-shadow: 0 0 60px var(--glow);
}
.btn--primary:hover{transform:translateY(-1px)}
.btn--ghost{
  border-color:var(--border12);
  background:rgba(255,255,255,.02);
  color:rgba(255,255,255,.82);
}
.btn--ghost:hover{background:rgba(255,255,255,.04); color:#fff}
.btn--full{width:100%}

/* hover lift cards */
.card--hover{transition:transform .18s ease}
.card--hover:hover{transform:translateY(-4px)}

/* ---------- Hero ---------- */
.hero{overflow:hidden}
.hero__bg{position:absolute; inset:0}
.hero__radials{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at top, rgba(255,255,255,0.06), transparent 52%),
    radial-gradient(ellipse at bottom, rgba(255,255,255,0.04), transparent 55%);
}
.hero__glow{
  position:absolute;
  left:50%; top:-224px;
  transform:translateX(-50%);
  width:min(720px, 88vw);
  height:min(720px, 88vw);
  border-radius:999px;
  filter: blur(60px);
  opacity:.25;
  background: radial-gradient(circle at 30% 30%, var(--a1), var(--a2));
}
.hero__fade{
  position:absolute; inset:0;
  background: linear-gradient(to bottom, transparent, rgba(7,8,11,0.9), #07080B);
}
.hero__grid{
  position:relative;
  min-height:92vh;
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  align-items:center;
  padding:64px 0;
}
.hero__buttons{margin-top:18px; display:flex; flex-direction:column; gap:12px}
.stats{margin-top:22px; display:grid; grid-template-columns:1fr; gap:12px}
.stat{border:1px solid var(--border); background:rgba(255,255,255,.03); border-radius:16px; padding:14px}
.stat__k{font-size:14px; color:rgba(255,255,255,.60)}
.stat__v{margin-top:4px; font-size:22px; font-weight:700}

@media (min-width:640px){
  .hero__buttons{flex-direction:row; align-items:center}
  .stats{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1024px){
  .hero__grid{
    grid-template-columns: repeat(12, 1fr);
    gap:40px;
    padding:64px 0;
  }
  .hero__left{grid-column: span 7}
  .hero__right{grid-column: span 5}
}

/* Device panel */
.panel{
  position:relative;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  border-radius:var(--r2xl);
  padding:20px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.panel__bg{position:absolute; inset:0}
.panel__glow{
  position:absolute; right:-112px; top:-112px;
  width:320px; height:320px; border-radius:999px;
  filter: blur(60px);
  opacity:.25;
  background: radial-gradient(circle at 30% 30%, var(--a1), var(--a2));
}
.panel__radial{
  position:absolute; inset:0;
  background: radial-gradient(circle at 20% 10%, rgba(255,255,255,0.06), transparent 55%);
}
.panel__inner{position:relative}
.panel__head{display:flex; align-items:center; justify-content:space-between}
.panel__title{font-size:14px; font-weight:700; color:rgba(255,255,255,.90)}
.panel__live{font-size:12px; color:rgba(255,255,255,.50)}

.miniGrid{margin-top:16px; display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.miniCard{border:1px solid var(--border); background:rgba(0,0,0,.20); border-radius:16px; padding:16px}
.miniCard__k{font-size:12px; color:rgba(255,255,255,.55)}
.miniCard__v{margin-top:6px; font-size:18px; font-weight:700}

.signal{margin-top:16px; border:1px solid var(--border); background:rgba(0,0,0,.20); border-radius:16px; padding:16px}
.signal__row{display:flex; align-items:center; justify-content:space-between}
.signal__k{font-size:12px; color:rgba(255,255,255,.55)}
.signal__v{font-size:12px; color:var(--accentText)}
.signal__bar{
  margin-top:12px;
  height:80px;
  border-radius:12px;
  border:1px solid var(--border);
  background:linear-gradient(to bottom, rgba(255,255,255,.05), transparent);
  padding:12px;
}
.signal__fill{
  height:100%;
  border-radius:10px;
  background:linear-gradient(90deg,var(--a1),var(--a2));
  opacity:.80;
  animation: clipPulse 3.6s ease-in-out infinite;
}
@keyframes clipPulse{
  0%{clip-path: inset(0 80% 0 0 round 12px)}
  50%{clip-path: inset(0 0% 0 0 round 12px)}
  100%{clip-path: inset(0 65% 0 0 round 12px)}
}
.next{
  margin-top:16px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.20);
  border-radius:16px;
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.next__k{font-size:12px; color:rgba(255,255,255,.55)}
.next__v{margin-top:6px; font-size:14px; font-weight:700}
.badge{
  border-radius:12px;
  padding:6px 10px;
  font-size:12px;
  border:1px solid var(--accentBorder);
  background:var(--accentSoft);
  color:var(--accentText);
}

/* ---------- Services ---------- */
.services{padding:80px 0}
.services__bg{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(7,8,11,1), rgba(7,8,11,.92), rgba(7,8,11,1));
}
.services .container{position:relative}
.services__top{display:flex; flex-direction:column; gap:24px}
.services__chips{display:flex; gap:12px; flex-wrap:wrap}
.chip{
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  border-radius:16px;
  padding:12px 16px;
  font-size:14px;
  color:rgba(255,255,255,.70);
}
.chip__strong{color:#fff}

.grid4{margin-top:40px; display:grid; grid-template-columns:1fr; gap:16px}
.card{
  position:relative;
  border:1px solid var(--border);
  background:linear-gradient(to bottom, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border-radius:24px;
  padding:24px;
  box-shadow:var(--shadow2);
  overflow:hidden;
}
.card__glow{
  position:absolute; right:-64px; top:-64px;
  width:224px; height:224px; border-radius:999px;
  filter: blur(55px);
  opacity:0;
  transition: opacity .45s ease;
  background: radial-gradient(circle at 30% 30%, var(--a1), var(--a2));
}
.card:hover .card__glow{opacity:.25}
.card__top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.iconBox{
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:18px;
  border:1px solid var(--accentBorder);
  background:var(--accentSoft);
}
.tiny{font-size:12px; color:var(--muted45)}
.card__title{margin-top:16px; font-size:18px; font-weight:700}
.card__desc{margin-top:6px; font-size:14px; color:var(--muted); line-height:1.6}

.bullets{margin-top:16px; display:grid; gap:10px}
.bullets--tight{margin-top:18px}
.bullet{display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.70); font-size:14px}
.check{width:20px; height:20px; display:grid; place-items:center; border-radius:999px; background:var(--accentSoft); color:var(--accentText); font-weight:900}

@media (min-width:1024px){
  .services__top{flex-direction:row; align-items:flex-end; justify-content:space-between}
  .grid4{grid-template-columns:repeat(4,1fr)}
}

/* ---------- Reviews ---------- */
.reviews{padding:80px 0; overflow:hidden}
.reviews__bg{position:absolute; inset:0}
.reviews__base{position:absolute; inset:0; background:#07080B}
.reviews__fade{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(7,8,11,1), rgba(7,8,11,.35), rgba(7,8,11,1));
}
.reviews .container{position:relative}
.reviews__top{display:flex; flex-direction:column; gap:24px}
.grid3{margin-top:40px; display:grid; grid-template-columns:1fr; gap:16px}

.review{
  position:relative;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  border-radius:24px;
  padding:24px;
  box-shadow:var(--shadow2);
  overflow:hidden;
  transition:transform .18s ease;
}
.review:hover{transform:translateY(-4px)}
.review__glow{
  position:absolute; left:-80px; top:-80px;
  width:224px; height:224px;
  border-radius:999px;
  filter: blur(55px);
  opacity:.20;
  background: radial-gradient(circle at 30% 30%, var(--a1), var(--a2));
}
.review__head{position:relative; display:flex; justify-content:space-between; gap:12px}
.review__name{font-weight:700}
.review__role{font-size:14px; color:rgba(255,255,255,.60); margin-top:2px}
.spark{color:var(--accentText)}
.review__quote{position:relative; margin-top:16px; font-size:14px; color:rgba(255,255,255,.70); line-height:1.7}

.ctaPanel{
  margin-top:40px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  border-radius:24px;
  padding:24px;
}
.ctaPanel__row{display:flex; flex-direction:column; gap:18px}
.ctaPanel__title{font-size:14px; font-weight:700}
.ctaPanel__sub{margin-top:6px; font-size:14px; color:var(--muted)}

@media (min-width:1024px){
  .reviews__top{flex-direction:row; align-items:flex-end; justify-content:space-between}
  .grid3{grid-template-columns:repeat(3,1fr)}
  .ctaPanel__row{flex-direction:row; align-items:center; justify-content:space-between}
}

/* BlobGrid (procedural boxes) */
.blobGrid{
  position:absolute; inset:0;
  pointer-events:none;
  overflow:hidden;
}
.blobGrid::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at top, rgba(255,255,255,0.06), transparent 55%),
    radial-gradient(ellipse at bottom, rgba(255,255,255,0.04), transparent 55%);
}
.blobBox{
  position:absolute;
  transform: translate(-50%, -50%);
  border-radius:24px;
  border:1px solid var(--accentBorder);
  background:rgba(255,255,255,.035);
  backdrop-filter: blur(10px);
  opacity:.60;
  animation: floaty var(--dur, 14s) ease-in-out infinite;
}
@keyframes floaty{
  0%{transform: translate(-50%,-50%) translate(0,0) rotate(0deg)}
  25%{transform: translate(-50%,-50%) translate(8px,-10px) rotate(1.2deg)}
  50%{transform: translate(-50%,-50%) translate(0,12px) rotate(0deg)}
  75%{transform: translate(-50%,-50%) translate(-10px,0) rotate(-1.6deg)}
  100%{transform: translate(-50%,-50%) translate(0,0) rotate(0deg)}
}

/* Accent glow orb like canvas */
.blobOrb{
  position:absolute;
  left:50%; top:-128px;
  transform:translateX(-50%);
  width:520px; height:520px;
  border-radius:999px;
  filter: blur(60px);
  opacity:.25;
  background: radial-gradient(circle at 30% 30%, var(--a1), var(--a2));
}

/* ---------- Pricing ---------- */
.pricing{padding:80px 0}
.pricing__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.06), transparent 55%),
    linear-gradient(to bottom, rgba(7,8,11,1), rgba(7,8,11,.92), rgba(7,8,11,1));
}
.pricing .container{position:relative}
.priceGrid{margin-top:40px; display:grid; grid-template-columns:1fr; gap:16px}
.priceCard{
  position:relative;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  border-radius:24px;
  padding:24px;
  box-shadow:var(--shadow2);
  overflow:hidden;
}
.priceCard--featured{
  box-shadow: 0 0 0 1px var(--ring) inset, 0 0 60px var(--glow), var(--shadow2);
}
.tag{
  position:absolute; right:16px; top:16px;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  border:1px solid var(--accentBorder);
  background:var(--accentSoft);
  color:var(--accentText);
}
.priceCard__name{font-size:18px; font-weight:700}
.priceCard__price{margin-top:8px; font-size:30px; font-weight:800}
.priceCard__note{margin-top:8px; font-size:14px; color:rgba(255,255,255,.60)}
.fineprint{margin-top:28px; font-size:14px; color:rgba(255,255,255,.55)}

@media (min-width:1024px){
  .priceGrid{grid-template-columns:repeat(3,1fr)}
}

/* ---------- FAQ ---------- */
.faq{padding:80px 0}
.faq__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,0.06), transparent 55%),
    linear-gradient(to bottom, rgba(7,8,11,1), rgba(7,8,11,.95), rgba(7,8,11,1));
}
.faq .container{position:relative}
.faqGrid{margin-top:40px; display:grid; grid-template-columns:1fr; gap:16px}
.faqItem{
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  border-radius:24px;
  padding:24px;
}
.faqItem__q{font-weight:700}
.faqItem__a{margin-top:10px; font-size:14px; color:var(--muted); line-height:1.7}

@media (min-width:1024px){
  .faqGrid{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Contact ---------- */
.contact{padding:80px 0}
.contact__bg{position:absolute; inset:0}
.contact__grad{
  position:absolute; inset:0;
  opacity:.25;
  background:linear-gradient(135deg, var(--a1), var(--a2));
}
.contact__overlay{position:absolute; inset:0; background:rgba(7,8,11,.80)}
.contact__radial{
  position:absolute; inset:0;
  background: radial-gradient(circle at 50% 15%, rgba(255,255,255,0.08), transparent 55%);
}
.contact .container{position:relative}

.contactGrid{margin-top:0; display:grid; grid-template-columns:1fr; gap:24px}
.infoGrid{margin-top:32px; display:grid; grid-template-columns:1fr; gap:12px}
.infoCard{
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  border-radius:24px;
  padding:20px;
}
.infoCard__t{font-weight:700; font-size:14px}
.infoCard__b{margin-top:6px; font-size:14px; color:var(--muted)}

.form{
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  border-radius:var(--r2xl);
  padding:24px;
  box-shadow:var(--shadow);
}
.form__t{font-weight:700; font-size:14px}
.form__s{margin-top:6px; font-size:14px; color:rgba(255,255,255,.60)}
.fieldGrid{margin-top:20px; display:grid; grid-template-columns:1fr; gap:12px}
.field{
  border:1px solid var(--border);
  background:rgba(0,0,0,.20);
  border-radius:16px;
  padding:12px 16px;
  color:rgba(255,255,255,.60);
  font-size:14px;
}
.field.wide{grid-column:auto}
.field.big{padding:24px 16px}
.privacy{margin-top:14px; font-size:12px; color:rgba(255,255,255,.50)}

.footer{margin-top:48px; border-top:1px solid var(--border); padding-top:32px}
.footer__row{display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:12px}
.footer__copy{font-size:14px; color:rgba(255,255,255,.55)}
.footer__links{display:flex; align-items:center; gap:10px; font-size:14px; color:rgba(255,255,255,.55)}
.footer__links a:hover{color:#fff}
.sep{color:rgba(255,255,255,.30)}

@media (min-width:640px){
  .infoGrid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1024px){
  .contactGrid{grid-template-columns:repeat(12,1fr)}
  .contactLeft{grid-column: span 6}
  .contactRight{grid-column: span 6}
  .fieldGrid{grid-template-columns:repeat(2,1fr)}
  .field.wide{grid-column: span 2}
  .footer__row{flex-direction:row}
}

/* ---------- SVG logo animation (Framer Motion equivalent) ---------- */
.wave{height:40px; width:40px}
.wave__p1, .wave__p2{
  stroke-dasharray: 140;
  stroke-dashoffset: 120;
  animation: dash 3.2s ease-in-out infinite;
}
.wave__p2{opacity:.35; animation-delay:.15s}
@keyframes dash{
  0%{stroke-dashoffset:120; opacity:.4}
  50%{stroke-dashoffset:0; opacity:1}
  100%{stroke-dashoffset:120; opacity:.4}
}
.wave__c{
  transform-origin: 32px 18px;
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{
  0%{transform:scale(.9); opacity:.8}
  50%{transform:scale(1.15); opacity:1}
  100%{transform:scale(.9); opacity:.8}
}

/* ---------- Reveal animation (Framer Motion whileInView equivalent) ---------- */
[data-reveal]{
  opacity:0;
  transform: translateY(16px);
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}
[data-reveal].is-in{
  opacity:1;
  transform: translateY(0);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important}
}