/* ============================================================
   SEO GURKHA — Premium Dark Glassmorphism Design System
   Palette: Black / Red / White  ·  Fonts: Poppins + Open Sans
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap');

/* ----- Tokens ----- */
:root {
  --red: #FF1A14;
  --red-deep: #E10600;
  --red-hover: #FF3D38;
  --red-ink: #FF5A52;          /* red text on black (AA) */
  --red-tint: rgba(225,6,0,.14);
  --black: #000000;
  --ink: #F3F3F5;              /* primary text (light on black) */
  --ink-soft: #C9C9D2;
  --muted: #8E8E99;            /* secondary text */
  --white: #FFFFFF;

  --bg: #000000;
  --surface: #0B0B0E;
  --surface-2: #121217;
  --border: rgba(255,255,255,.10);
  --border-dark: rgba(255,255,255,.08);

  /* dark glassmorphism */
  --glass: rgba(255,255,255,.045);
  --glass-strong: rgba(255,255,255,.07);
  --glass-border: rgba(255,255,255,.12);
  --glass-line: rgba(255,255,255,.08);
  --glass-shadow: 0 18px 44px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  --glass-shadow-hover: 0 28px 64px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.12);
  --glow-red: 0 0 0 1px rgba(255,26,20,.45), 0 24px 60px rgba(225,6,0,.22);
  --blur: blur(18px) saturate(135%);
  --blur-sm: blur(10px) saturate(130%);

  --maxw: 1180px;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 8px 22px rgba(0,0,0,.4);
  --shadow-md: 0 24px 56px rgba(0,0,0,.6);
  --shadow-red: 0 16px 40px rgba(225,6,0,.45);
  --t: 240ms cubic-bezier(.4,0,.2,1);

  --h-font: 'Poppins', system-ui, sans-serif;
  --b-font: 'Open Sans', system-ui, sans-serif;
}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--b-font);
  color: var(--ink);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background-color: #000;
  background-image:
    radial-gradient(760px 480px at 6% -8%, rgba(225,6,0,.20), transparent 60%),
    radial-gradient(660px 520px at 110% 2%, rgba(225,6,0,.12), transparent 55%),
    radial-gradient(820px 760px at 50% 122%, rgba(225,6,0,.12), transparent 62%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-family: var(--h-font); line-height: 1.16; color: #fff; font-weight: 700; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: 4px; }
::selection { background: rgba(225,6,0,.45); color: #fff; }

/* ----- Layout helpers ----- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 92px 0; position: relative; }
.section--soft {
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.section--black {
  background:
    radial-gradient(720px 380px at 12% 0%, rgba(225,6,0,.26), transparent 60%),
    radial-gradient(640px 420px at 100% 100%, rgba(225,6,0,.14), transparent 60%),
    #050506;
  color: #EDEDF0;
}
.center { text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--h-font); font-weight: 600; font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--red-ink);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--red); border-radius: 2px; box-shadow: 0 0 12px rgba(225,6,0,.8); }

.section-head { max-width: 740px; margin: 0 auto 56px; text-align: center; }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.85rem); font-weight: 800; letter-spacing: -.022em; margin: 14px 0; }
.section-head p { color: var(--muted); font-size: 1.06rem; }

/* ----- Buttons ----- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--h-font); font-weight: 600; font-size: .98rem;
  padding: 14px 26px; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent; transition: var(--t); white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: linear-gradient(135deg, #FF3D38, var(--red-deep)); color: #fff; box-shadow: var(--shadow-red); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 22px 52px rgba(225,6,0,.6); }
.btn--dark { background: #fff; color: #111; }
.btn--dark:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.5); }
.btn--ghost { background: var(--glass-strong); -webkit-backdrop-filter: var(--blur-sm); backdrop-filter: var(--blur-sm); color: #fff; border-color: var(--glass-border); }
.btn--ghost:hover { border-color: var(--red); color: #fff; box-shadow: 0 0 0 1px rgba(225,6,0,.4); }
.btn--light { background: #fff; color: #141416; }
.btn--light:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.5); }
.btn--outline-light { background: rgba(255,255,255,.06); -webkit-backdrop-filter: var(--blur-sm); backdrop-filter: var(--blur-sm); color: #fff; border-color: rgba(255,255,255,.45); }
.btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,.14); }

/* ============================================================
   HEADER / NAV  (dark frosted glass)
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(7,7,9,.62);
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 74px; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand__logo { width: 40px; height: 40px; }
.brand__name { font-family: var(--h-font); font-weight: 800; color: #fff; font-size: 1.18rem; letter-spacing: .01em; }
.brand__name b { color: var(--red); }

.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__links a {
  font-family: var(--h-font); font-weight: 500; font-size: .96rem; color: #C7C7CE;
  padding: 9px 15px; border-radius: 10px; transition: var(--t);
}
.nav__links a:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav__links a.active { background: rgba(225,6,0,.18); color: #fff; }

.nav__right { display: flex; align-items: center; gap: 16px; }
.nav__social { display: flex; gap: 8px; }
.nav__social a { color: #9A9AA3; transition: var(--t); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; }
.nav__social a:hover { color: #fff; background: rgba(225,6,0,.2); }
.nav__social svg { width: 18px; height: 18px; }

.nav__toggle {
  display: none; background: transparent; border: 0; cursor: pointer;
  width: 44px; height: 44px; color: #fff; align-items: center; justify-content: center;
}
.nav__toggle svg { width: 26px; height: 26px; }

/* mobile menu */
.mobile-menu {
  position: fixed; inset: 74px 0 auto 0; z-index: 99;
  background: rgba(8,8,11,.9); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: var(--shadow-md);
  transform: translateY(-120%); transition: transform .3s ease; padding: 14px 24px 26px;
}
.mobile-menu.open { transform: translateY(0); }
.mobile-menu a { display: block; font-family: var(--h-font); font-weight: 500; color: #E4E4E8; padding: 14px 6px; border-bottom: 1px solid var(--glass-line); }
.mobile-menu a:last-of-type { border-bottom: 0; }
.mobile-menu .btn { width: 100%; justify-content: center; margin-top: 16px; }

/* ============================================================
   HERO  (premium black + glass)
   ============================================================ */
.hero { position: relative; overflow: hidden; padding: 104px 0 110px; isolation: isolate; }
.hero__orbs { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__orbs span {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: .8;
  animation: floatOrb 13s ease-in-out infinite;
}
.hero__orbs span:nth-child(1) { width: 460px; height: 460px; top: -110px; left: -70px; background: radial-gradient(closest-side, rgba(225,6,0,.55), transparent 70%); }
.hero__orbs span:nth-child(2) { width: 400px; height: 400px; top: 30px; right: -90px; background: radial-gradient(closest-side, rgba(255,40,30,.4), transparent 70%); animation-delay: -4s; }
.hero__orbs span:nth-child(3) { width: 320px; height: 320px; bottom: -100px; left: 38%; background: radial-gradient(closest-side, rgba(225,6,0,.32), transparent 70%); animation-delay: -8s; }
@keyframes floatOrb { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(26px,-30px) scale(1.1); } }

.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .6;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(circle at 50% 38%, #000 26%, transparent 76%);
          mask-image: radial-gradient(circle at 50% 38%, #000 26%, transparent 76%);
}
.hero .container { position: relative; z-index: 1; max-width: 1320px; }
.hero__inner { max-width: 1120px; margin: 0 auto; text-align: center; }
.hero__panel {
  position: relative; overflow: hidden;
  background: rgba(255,255,255,.04); -webkit-backdrop-filter: blur(26px) saturate(140%); backdrop-filter: blur(26px) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 40px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.1);
  border-radius: 32px; padding: 56px 64px 52px;
}
.hero__panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); }
.hero__tag {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 26px;
  background: rgba(225,6,0,.16); -webkit-backdrop-filter: var(--blur-sm); backdrop-filter: var(--blur-sm);
  border: 1px solid rgba(225,6,0,.45); box-shadow: 0 0 30px rgba(225,6,0,.25);
  color: #FF8780; font-family: var(--h-font); font-weight: 600; font-size: .82rem;
  letter-spacing: .04em; padding: 9px 18px; border-radius: 999px;
}
.hero__tag span { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(225,6,0,.3); }
.hero h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 800; letter-spacing: -.028em; line-height: 1.05; color: #fff; }
.hero h1 .hl { position: relative; color: var(--red); text-shadow: 0 0 40px rgba(225,6,0,.5); }
.hero__lead { color: var(--ink-soft); font-size: 1.16rem; max-width: 860px; margin: 24px auto 0; }
.hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 38px; }
.hero__stats { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 42px; }
.hero__stat {
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
  border-radius: var(--radius); padding: 22px 28px; min-width: 158px; transition: var(--t);
}
.hero__stat:hover { transform: translateY(-4px); box-shadow: var(--glass-shadow-hover); border-color: rgba(225,6,0,.4); }
.hero__stat b { display: block; font-family: var(--h-font); font-weight: 800; font-size: 2.1rem; color: #fff; }
.hero__stat b .u { color: var(--red); }
.hero__stat span { color: var(--muted); font-size: .86rem; }

/* page hero (sub pages) */
.page-hero { padding: 84px 0 76px; position: relative; overflow: hidden; isolation: isolate; }
.page-hero::before {
  content: ""; position: absolute; top: -42%; left: 50%; transform: translateX(-50%); z-index: -1;
  width: 780px; height: 470px;
  background: radial-gradient(closest-side, rgba(225,6,0,.36), transparent 70%); filter: blur(16px);
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 22%, transparent 72%);
          mask-image: radial-gradient(circle at 50% 30%, #000 22%, transparent 72%);
}
.page-hero .container { position: relative; z-index: 1; text-align: center; }
.page-hero h1 { font-size: clamp(2rem, 5vw, 3.3rem); font-weight: 800; letter-spacing: -.02em; }
.page-hero p { color: var(--ink-soft); max-width: 660px; margin: 16px auto 0; font-size: 1.06rem; }
.breadcrumb {
  display: inline-flex; gap: 8px; align-items: center; color: var(--muted); font-size: .84rem; margin-bottom: 18px;
  font-family: var(--h-font); background: var(--glass-strong); -webkit-backdrop-filter: var(--blur-sm); backdrop-filter: var(--blur-sm);
  border: 1px solid var(--glass-border); padding: 7px 16px; border-radius: 999px;
}
.breadcrumb a:hover { color: #fff; }
.breadcrumb span { color: var(--red); }

/* ============================================================
   GLASS CARD BASE + GRIDS
   ============================================================ */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
  border-radius: var(--radius); padding: 30px; transition: var(--t); position: relative; overflow: hidden;
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--glow-red); border-color: rgba(255,26,20,.5); }
.card__icon {
  width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center;
  background: rgba(225,6,0,.16); color: #FF6A60;
  border: 1px solid rgba(225,6,0,.32); margin-bottom: 18px; transition: var(--t);
}
.card:hover .card__icon { background: linear-gradient(135deg, #FF3D38, var(--red-deep)); color: #fff; border-color: transparent; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(225,6,0,.5); }
.card__icon svg { width: 26px; height: 26px; }
.card h3 { font-size: 1.22rem; font-weight: 700; margin-bottom: 10px; color: #fff; }
.card p { color: var(--muted); font-size: .97rem; }
.card__num { position: absolute; top: 18px; right: 22px; font-family: var(--h-font); font-weight: 800; font-size: 2.4rem; color: rgba(255,255,255,.05); line-height: 1; }

/* service cards (glass) */
.svc-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.svc {
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
  border-radius: var(--radius); padding: 30px; transition: var(--t);
  position: relative; overflow: hidden;
}
.svc::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--red), #FF6A60);
  transform: scaleX(0); transform-origin: left; transition: var(--t);
}
.svc:hover { box-shadow: var(--glow-red); transform: translateY(-6px); border-color: rgba(255,26,20,.5); }
.svc:hover::before { transform: scaleX(1); }
.svc__ic { width: 56px; height: 56px; border-radius: 15px; background: rgba(225,6,0,.16); border: 1px solid rgba(225,6,0,.3); color: #FF6A60; display: grid; place-items: center; margin-bottom: 20px; transition: var(--t); }
.svc:hover .svc__ic { background: linear-gradient(160deg, #FF3D38, var(--red-deep)); color: #fff; border-color: transparent; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(225,6,0,.5); }
.svc__ic svg { width: 26px; height: 26px; }
.svc h3 { font-size: 1.22rem; margin-bottom: 10px; color: #fff; }
.svc h3 a { color: inherit; }
.svc h3 a::after { content: " \2192"; color: var(--red-ink); opacity: 0; transition: var(--t); }
.svc:hover h3 a { color: var(--red-ink); }
.svc:hover h3 a::after { opacity: 1; }
.svc p { color: var(--muted); font-size: .96rem; }
.svc--ai::before { transform: scaleX(1); }
.svc--ai .svc__ic { background: linear-gradient(160deg, #FF3D38, var(--red-deep)); color: #fff; border-color: transparent; }

/* approach / chips */
.chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--glass-strong); -webkit-backdrop-filter: var(--blur-sm); backdrop-filter: var(--blur-sm);
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-sm); border-radius: 999px; padding: 11px 20px;
  font-family: var(--h-font); font-weight: 500; font-size: .95rem; color: #E4E4E8; transition: var(--t);
}
.chip:hover { border-color: var(--red); color: #fff; transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(225,6,0,.4); }
.chip svg { width: 17px; height: 17px; color: var(--red-ink); }

/* why-us grid */
.why { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.why__item { display: flex; gap: 14px; align-items: flex-start; background: var(--glass); -webkit-backdrop-filter: var(--blur-sm); backdrop-filter: var(--blur-sm); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 22px; transition: var(--t); }
.why__item:hover { border-color: rgba(255,26,20,.5); transform: translateY(-4px); box-shadow: var(--glow-red); }
.why__item .tick { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; background: rgba(225,6,0,.2); color: #FF6A60; display: grid; place-items: center; }
.why__item .tick svg { width: 20px; height: 20px; }
.why__item h4 { font-size: 1.04rem; color: #fff; font-weight: 600; }

/* deliverables columns */
.deliver { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.deliver__col { background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); border-radius: var(--radius); padding: 28px; transition: var(--t); }
.deliver__col:hover { transform: translateY(-5px); box-shadow: var(--glow-red); border-color: rgba(255,26,20,.4); }
.deliver__col h3 { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; color: #fff; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 2px solid var(--red); }
.deliver__col h3 svg { width: 20px; height: 20px; color: var(--red-ink); }
.deliver__col li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-soft); font-size: .95rem; padding: 6px 0; }
.deliver__col li svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--red-ink); margin-top: 3px; }

/* tools strip */
.tools { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; }
.tools__item {
  font-family: var(--h-font); font-weight: 700; letter-spacing: .02em; font-size: 1.05rem;
  color: #fff; background: var(--glass-strong); -webkit-backdrop-filter: var(--blur-sm); backdrop-filter: var(--blur-sm);
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-sm); border-radius: 14px;
  padding: 16px 30px; transition: var(--t); display: inline-flex; align-items: center; gap: 10px;
}
.tools__item:hover { border-color: var(--red); color: #fff; transform: translateY(-4px); box-shadow: var(--glow-red); }
.tools__item i { width: 9px; height: 9px; border-radius: 50%; background: var(--red); display: inline-block; box-shadow: 0 0 10px rgba(225,6,0,.8); }

/* AI-era highlight cards */
.aiera { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.aiera__card {
  position: relative; overflow: hidden;
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
  border-radius: var(--radius); padding: 32px 30px; transition: var(--t);
}
.aiera__card::after { content: ""; position: absolute; top: -50px; right: -50px; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(closest-side, rgba(225,6,0,.3), transparent 70%); transition: var(--t); }
.aiera__card:hover { transform: translateY(-6px); box-shadow: var(--glow-red); border-color: rgba(255,26,20,.5); }
.aiera__card:hover::after { transform: scale(1.35); }
.aiera__badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--h-font); font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #FF6A60; background: rgba(225,6,0,.16); border: 1px solid rgba(225,6,0,.35); padding: 5px 12px; border-radius: 999px; margin-bottom: 16px; position: relative; }
.aiera__ic { position: relative; width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; background: rgba(225,6,0,.16); border: 1px solid rgba(225,6,0,.3); color: #FF6A60; margin-bottom: 18px; }
.aiera__card:hover .aiera__ic { background: linear-gradient(160deg, #FF3D38, var(--red-deep)); color: #fff; border-color: transparent; box-shadow: 0 10px 24px rgba(225,6,0,.5); }
.aiera__ic svg { width: 28px; height: 28px; }
.aiera__card h3 { position: relative; font-size: 1.3rem; margin-bottom: 10px; color: #fff; }
.aiera__card p { position: relative; color: var(--muted); font-size: .97rem; }

/* ============================================================
   PRICING
   ============================================================ */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.plan {
  position: relative; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); border-radius: 22px;
  padding: 34px 28px; transition: var(--t);
}
.plan:hover { box-shadow: var(--glass-shadow-hover); transform: translateY(-5px); border-color: rgba(255,255,255,.2); }
.plan--featured { border: 1px solid rgba(255,26,20,.6); box-shadow: var(--glow-red); background: rgba(225,6,0,.06); }
.plan__badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #FF3D38, var(--red-deep)); color: #fff; font-family: var(--h-font); font-weight: 600;
  font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; padding: 7px 16px; border-radius: 999px; box-shadow: var(--shadow-red);
}
.plan__ic { width: 52px; height: 52px; border-radius: 15px; background: rgba(225,6,0,.16); border: 1px solid rgba(225,6,0,.3); color: #FF6A60; display: grid; place-items: center; margin-bottom: 16px; }
.plan__ic svg { width: 24px; height: 24px; }
.plan--featured .plan__ic { background: linear-gradient(160deg, #FF3D38, var(--red-deep)); color: #fff; border-color: transparent; }
.plan h3 { font-size: 1.5rem; font-weight: 800; color: #fff; }
.plan__desc { color: var(--muted); font-size: .92rem; min-height: 42px; margin: 6px 0 18px; }
.plan__price { font-family: var(--h-font); font-weight: 800; font-size: 2.3rem; color: #fff; }
.plan__price .per { font-size: .92rem; font-weight: 500; color: var(--muted); }
.plan__kw { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 22px; background: rgba(225,6,0,.16); color: #FF6A60; font-family: var(--h-font); font-weight: 600; font-size: .9rem; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(225,6,0,.3); }
.plan__kw svg { width: 16px; height: 16px; }
.plan .btn { width: 100%; justify-content: center; margin-bottom: 22px; }
.plan__group { font-family: var(--h-font); font-weight: 700; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
.plan__feat { display: flex; gap: 10px; align-items: flex-start; font-size: .93rem; padding: 5px 0; color: var(--ink-soft); }
.plan__feat svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 3px; }
.plan__feat .yes { color: var(--red-ink); }
.plan__feat .no { color: #54545C; }
.plan__feat.off { color: #6A6A72; }

/* comparison table */
.table-wrap { overflow-x: auto; border: 1px solid var(--glass-border); border-radius: var(--radius); -webkit-overflow-scrolling: touch; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--glass-shadow); }
table.compare { width: 100%; border-collapse: collapse; min-width: 640px; }
table.compare th, table.compare td { padding: 15px 18px; text-align: center; border-bottom: 1px solid var(--glass-line); font-size: .94rem; color: var(--ink-soft); }
table.compare thead th { background: #000; color: #fff; font-family: var(--h-font); position: sticky; top: 0; }
table.compare thead th .price { display: block; color: #FF6A60; font-size: .82rem; font-weight: 600; }
table.compare tbody th { text-align: left; font-family: var(--b-font); font-weight: 600; color: #fff; }
table.compare td:first-child, table.compare th:first-child { text-align: left; }
table.compare tr.group td { background: rgba(225,6,0,.1); font-family: var(--h-font); font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .04em; font-size: .8rem; text-align: left; }
table.compare .featured-col { background: rgba(225,6,0,.1); }
table.compare svg { width: 18px; height: 18px; }
.tick-y { color: var(--red-ink); }
.tick-n { color: #54545C; }
.scroll-hint { text-align: center; color: var(--muted); font-size: .82rem; margin-bottom: 10px; font-family: var(--h-font); }

/* process steps */
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.step { background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); border-radius: var(--radius); padding: 26px; position: relative; transition: var(--t); }
.step:hover { box-shadow: var(--glow-red); transform: translateY(-5px); border-color: rgba(255,26,20,.4); }
.step__n { font-family: var(--h-font); font-weight: 800; font-size: .9rem; color: var(--red-ink); letter-spacing: .1em; }
.step__ic { width: 50px; height: 50px; border-radius: 14px; background: rgba(225,6,0,.16); color: #FF6A60; border: 1px solid rgba(225,6,0,.3); display: grid; place-items: center; margin: 12px 0 14px; transition: var(--t); }
.step:hover .step__ic { background: linear-gradient(135deg, #FF3D38, var(--red-deep)); color: #fff; border-color: transparent; }
.step__ic svg { width: 23px; height: 23px; }
.step h4 { font-size: 1.06rem; margin-bottom: 7px; color: #fff; }
.step p { color: var(--muted); font-size: .92rem; }

/* FAQ accordion */
.faq { max-width: 820px; margin: 0 auto; }
.faq__item { border: 1px solid var(--glass-border); border-radius: var(--radius-sm); margin-bottom: 14px; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--shadow-sm); overflow: hidden; transition: var(--t); }
.faq__item.open { box-shadow: var(--glow-red); border-color: rgba(255,26,20,.45); }
.faq__q {
  width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer;
  font-family: var(--h-font); font-weight: 600; font-size: 1.04rem; color: #fff;
  padding: 20px 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq__q:hover { color: var(--red-ink); }
.faq__q .ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; background: rgba(225,6,0,.18); color: #FF6A60; display: grid; place-items: center; transition: var(--t); }
.faq__q .ic svg { width: 18px; height: 18px; }
.faq__item.open .faq__q .ic { background: var(--red); color: #fff; transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .32s ease; }
.faq__a p { padding: 0 22px 22px; color: var(--muted); font-size: .97rem; }
.faq__a a { color: var(--red-ink); font-weight: 600; }

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 54px; align-items: center; }
.about-grid p { color: var(--ink-soft); margin-bottom: 16px; font-size: 1.04rem; }
.about-panel {
  background:
    radial-gradient(closest-side at 80% 0%, rgba(225,6,0,.42), transparent 70%),
    linear-gradient(160deg, #141418, #050506);
  border: 1px solid var(--glass-border);
  border-radius: 22px; padding: 40px; color: #fff;
  position: relative; overflow: hidden; box-shadow: var(--shadow-md);
}
.about-panel h3 { color: #fff; position: relative; font-size: 1.3rem; margin-bottom: 22px; }
.about-panel .chips { justify-content: flex-start; position: relative; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: start; }
.info-card { display: flex; gap: 16px; align-items: flex-start; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); border-radius: var(--radius); padding: 22px; margin-bottom: 16px; transition: var(--t); }
.info-card:hover { border-color: rgba(255,26,20,.5); transform: translateX(4px); box-shadow: var(--glow-red); }
.info-card .ic { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 13px; background: rgba(225,6,0,.16); border: 1px solid rgba(225,6,0,.3); color: #FF6A60; display: grid; place-items: center; }
.info-card .ic svg { width: 22px; height: 22px; }
.info-card h4 { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.info-card p, .info-card a { font-size: 1.02rem; color: #fff; font-weight: 600; }
.info-card a:hover { color: var(--red-ink); }

.form-card { background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-border); border-radius: 22px; padding: 36px; box-shadow: var(--glass-shadow); }
.field { margin-bottom: 18px; }
.field label { display: block; font-family: var(--h-font); font-weight: 600; font-size: .9rem; margin-bottom: 7px; color: #fff; }
.field label .req { color: var(--red); }
.field input, .field textarea, .field select {
  width: 100%; font-family: var(--b-font); font-size: 1rem; color: #fff;
  padding: 13px 15px; border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
  background: rgba(255,255,255,.05); transition: var(--t);
}
.field input::placeholder, .field textarea::placeholder { color: #6A6A72; }
.field select option { color: #111; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(225,6,0,.22); background: rgba(255,255,255,.08); }
.field textarea { resize: vertical; min-height: 130px; }
.field .help { font-size: .82rem; color: var(--muted); margin-top: 6px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-note { font-size: .84rem; color: var(--muted); margin-top: 14px; }
.form-success { display: none; align-items: center; gap: 10px; background: rgba(225,6,0,.16); border: 1px solid rgba(225,6,0,.4); color: #FF8780; border-radius: var(--radius-sm); padding: 14px 16px; font-weight: 600; font-family: var(--h-font); margin-top: 16px; }
.form-success.show { display: flex; }
.form-success svg { width: 20px; height: 20px; }

/* ============================================================
   PROSE (privacy)
   ============================================================ */
.prose { max-width: 820px; margin: 0 auto; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); border-radius: var(--radius); padding: 44px 48px; }
.prose h2 { font-size: 1.4rem; margin: 34px 0 12px; padding-top: 8px; color: #fff; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink-soft); margin-bottom: 14px; }
.prose a { color: var(--red-ink); font-weight: 600; }
.prose a:hover { text-decoration: underline; }

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner {
  background:
    radial-gradient(closest-side at 84% 118%, rgba(0,0,0,.38), transparent 70%),
    linear-gradient(135deg, #C20009, #9E0400 55%, #6B0200);
  color: #fff; border: 1px solid rgba(255,255,255,.16); border-radius: 26px;
  padding: 58px 48px; text-align: center; position: relative; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(225,6,0,.25);
}
.cta-banner::before { content:""; position:absolute; inset:0; opacity:.10; background-image: radial-gradient(circle at 20% 20%, #fff 1.5px, transparent 1.5px); background-size: 26px 26px; }
.cta-banner > * { position: relative; }
.cta-banner h2 { color: #fff; font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 800; }
.cta-banner p { color: #FFEDEC; max-width: 600px; margin: 14px auto 28px; font-size: 1.08rem; }
.cta-banner .btn-group { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-banner .btn--outline-light { background: rgba(0,0,0,.18); border-color: rgba(255,255,255,.7); color: #fff; }
.cta-banner .btn--outline-light:hover { background: rgba(0,0,0,.3); border-color: #fff; }
.cta-banner .btn--light { color: #9E0400; }

/* modern CTA (split + glass contact pills) */
.cta-modern {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: center;
  background:
    radial-gradient(closest-side at 10% 16%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, #FF3D38, var(--red-deep) 55%, #8E0400);
  color: #fff; border-radius: 28px; padding: 54px 52px; box-shadow: var(--shadow-red);
}
.cta-modern::before { content:""; position:absolute; inset:0; opacity:.14; background-image: radial-gradient(circle at 18% 22%, #fff 1.5px, transparent 1.5px); background-size: 26px 26px; pointer-events:none; }
.cta-modern__glow { position:absolute; width:360px; height:360px; right:-90px; bottom:-130px; border-radius:50%; background: radial-gradient(closest-side, rgba(255,255,255,.26), transparent 70%); filter: blur(8px); pointer-events:none; }
.cta-modern__content { position: relative; z-index: 1; }
.cta-modern__badge { display:inline-flex; align-items:center; gap:8px; background: rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.4); -webkit-backdrop-filter: var(--blur-sm); backdrop-filter: var(--blur-sm); color:#fff; font-family:var(--h-font); font-weight:600; font-size:.8rem; letter-spacing:.03em; padding:7px 16px; border-radius:999px; margin-bottom:18px; }
.cta-modern__badge svg { width:15px; height:15px; }
.cta-modern h2 { color:#fff; font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight:800; letter-spacing:-.02em; line-height:1.12; }
.cta-modern p { color: rgba(255,255,255,.95); font-size:1.06rem; margin:14px 0 26px; max-width:520px; }
.cta-modern__actions { display:flex; gap:14px; flex-wrap:wrap; }
.cta-modern__panel { position: relative; z-index: 1; display:grid; gap:12px; }
.cta__pill { display:flex; align-items:center; gap:14px; background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); -webkit-backdrop-filter: var(--blur-sm); backdrop-filter: var(--blur-sm); border-radius:16px; padding:15px 18px; transition: var(--t); }
.cta__pill:hover { background: rgba(255,255,255,.24); transform: translateY(-3px); }
.cta__pill .ic { flex:0 0 auto; width:44px; height:44px; border-radius:13px; background:#fff; color:var(--red-deep); display:grid; place-items:center; box-shadow: 0 6px 16px rgba(0,0,0,.3); }
.cta__pill .ic svg { width:21px; height:21px; }
.cta__pill .tx { display:flex; flex-direction:column; line-height:1.35; min-width:0; }
.cta__pill .tx b { font-family:var(--h-font); font-weight:700; font-size:1rem; color:#fff; }
.cta__pill .tx span { font-size:.85rem; color: rgba(255,255,255,.86); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background:
    radial-gradient(640px 360px at 6% 0%, rgba(225,6,0,.18), transparent 60%),
    #000;
  color: #C2C2CA; padding: 72px 0 28px; border-top: 1px solid rgba(255,255,255,.08);
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 40px; }
.footer-brand .brand { margin-bottom: 16px; }
.footer-brand .brand__name { color: #fff; }
.footer-brand p { color: #8E8E97; font-size: .95rem; max-width: 300px; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a { width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: #C2C2CA; display: grid; place-items: center; transition: var(--t); }
.footer-social a:hover { background: var(--red); color: #fff; border-color: var(--red); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(225,6,0,.5); }
.footer-social svg { width: 18px; height: 18px; }
.footer-col h4 { color: #fff; font-size: .92rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 18px; }
.footer-col li { margin-bottom: 11px; }
.footer-col a, .footer-col p { color: #8E8E97; font-size: .95rem; transition: var(--t); }
.footer-col a:hover { color: var(--red-ink); }
.footer-contact li { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 14px; }
.footer-contact svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--red-ink); margin-top: 3px; }
.footer-newsletter { display: flex; gap: 8px; margin-top: 14px; }
.footer-newsletter input { flex: 1; min-width: 0; padding: 11px 14px; border-radius: 11px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #fff; font-family: var(--b-font); }
.footer-newsletter input::placeholder { color: #6A6A72; }
.footer-newsletter input:focus { outline: none; border-color: var(--red); }
.footer-newsletter button { background: linear-gradient(135deg, #FF3D38, var(--red-deep)); color: #fff; border: 0; border-radius: 11px; padding: 0 16px; cursor: pointer; display: grid; place-items: center; transition: var(--t); }
.footer-newsletter button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(225,6,0,.5); }
.footer-newsletter button svg { width: 18px; height: 18px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: 50px; padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: #6E6E77; font-size: .9rem; }
.footer-bottom a:hover { color: var(--red-ink); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .why, .steps, .aiera, .svc-list { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
}
@media (max-width: 860px) {
  .nav__links, .nav__social { display: none; }
  .nav__toggle { display: flex; }
  .plans { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .plan--featured { order: -1; }
  .deliver, .aiera { grid-template-columns: 1fr; }
  .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 34px; }
  .cta-modern { grid-template-columns: 1fr; gap: 30px; padding: 42px 30px; }
}
@media (max-width: 640px) {
  .section { padding: 64px 0; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .why, .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .svc-list { grid-template-columns: 1fr; }
  .hero__panel { padding: 32px 22px 28px; border-radius: 22px; }
  .cta-banner { padding: 42px 24px; }
  .cta-modern { padding: 34px 22px; border-radius: 22px; }
  .prose { padding: 30px 22px; }
  .hero { padding: 76px 0 80px; }
  .container { padding: 0 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .hero__orbs span { animation: none !important; }
}

/* fallback when backdrop-filter unsupported */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .card, .svc, .deliver__col, .plan, .step, .faq__item, .info-card, .form-card,
  .hero__stat, .aiera__card, .tools__item, .chip, .breadcrumb, .prose, .table-wrap,
  .hero__panel { background: #111114; }
  .site-header { background: rgba(7,7,9,.96); }
  .mobile-menu { background: #0A0A0D; }
}

/* reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   FINAL SITE-WIDE DESIGN REFINEMENT — cleaner, sharper, consistent
   Applies across every HTML page through the shared design system.
   ============================================================ */
:root {
  --red: #FF241F;
  --red-deep: #C90803;
  --red-hover: #FF4B45;
  --red-ink: #FF746D;
  --red-tint: rgba(255,36,31,.13);
  --ink: #FAFAFB;
  --ink-soft: #D8D8E0;
  --muted: #A5A5B0;
  --surface: #0A0A0D;
  --surface-2: #121218;
  --glass: rgba(255,255,255,.058);
  --glass-strong: rgba(255,255,255,.085);
  --glass-border: rgba(255,255,255,.145);
  --glass-line: rgba(255,255,255,.09);
  --glass-shadow: 0 20px 58px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.08);
  --glass-shadow-hover: 0 28px 76px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.16);
  --glow-red: 0 0 0 1px rgba(255,36,31,.42), 0 24px 62px rgba(201,8,3,.24);
  --maxw: 1200px;
  --radius: 22px;
  --radius-sm: 14px;
  --t: 210ms cubic-bezier(.22,.61,.36,1);
}

html { color-scheme: dark; }
body {
  color: var(--ink-soft);
  background-color: #020203;
  background-image:
    radial-gradient(900px 560px at -8% -10%, rgba(255,36,31,.20), transparent 62%),
    radial-gradient(760px 520px at 108% 0%, rgba(255,36,31,.13), transparent 60%),
    radial-gradient(820px 680px at 52% 114%, rgba(255,36,31,.11), transparent 64%),
    linear-gradient(180deg, #020203 0%, #07070A 42%, #020203 100%);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .16;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 68%);
          mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 68%);
}
body > * { position: relative; z-index: 1; }

.container { max-width: var(--maxw); padding-inline: clamp(18px, 3vw, 32px); }
.section { padding: clamp(72px, 8vw, 112px) 0; }
.section + .section { border-top: 1px solid rgba(255,255,255,.045); }
.section--soft {
  background:
    radial-gradient(760px 420px at 14% 0%, rgba(255,36,31,.12), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
}
.section--black {
  background:
    radial-gradient(780px 420px at 12% 0%, rgba(255,36,31,.22), transparent 62%),
    radial-gradient(720px 420px at 100% 100%, rgba(255,36,31,.12), transparent 62%),
    linear-gradient(180deg, #050506, #020203);
}

.section-head { max-width: 790px; margin-bottom: clamp(38px, 5vw, 60px); }
.section-head h2,
.about-grid h2,
.cta-banner h2,
.cta-modern h2 { letter-spacing: -.035em; }
.section-head p { color: var(--ink-soft); }
.eyebrow { color: var(--red-ink); }
.eyebrow::before { width: 30px; box-shadow: 0 0 18px rgba(255,36,31,.8); }

/* Header polish */
.site-header {
  background: rgba(5,5,7,.76);
  border-bottom: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
  z-index: 1000;
}
.nav { height: 78px; }
.brand__logo { width: 42px; height: 42px; filter: drop-shadow(0 10px 18px rgba(255,36,31,.22)); }
.brand__name { letter-spacing: -.01em; }
.nav__links { gap: 6px; }
.nav__links a {
  position: relative;
  color: #D2D2D9;
  padding: 10px 16px;
  border: 1px solid transparent;
}
.nav__links a:hover {
  color: #fff;
  background: rgba(255,255,255,.075);
  border-color: rgba(255,255,255,.08);
}
.nav__links a.active {
  background: rgba(255,36,31,.14);
  border-color: rgba(255,36,31,.28);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.nav__links a.active::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 6px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
}
.nav__social a { border: 1px solid transparent; }
.nav__social a:hover { border-color: rgba(255,36,31,.25); }
.mobile-menu { z-index: 999; background: rgba(5,5,8,.96); }
body.menu-open { overflow: hidden; }

/* Buttons */
.btn {
  min-height: 48px;
  letter-spacing: -.005em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
.btn--primary {
  background: linear-gradient(135deg, #FF514C 0%, #FF241F 42%, #B80602 100%);
  border-color: rgba(255,255,255,.10);
}
.btn--primary:hover { background: linear-gradient(135deg, #FF625D 0%, #FF302B 42%, #C90803 100%); }
.btn--ghost,
.btn--outline-light {
  background: rgba(255,255,255,.075);
  border-color: rgba(255,255,255,.16);
}
.btn--ghost:hover,
.btn--outline-light:hover { background: rgba(255,255,255,.12); border-color: rgba(255,36,31,.55); }
.btn--light,
.btn--dark { color: #08080A; }

/* Home hero */
.hero { padding: clamp(78px, 9vw, 124px) 0 clamp(82px, 9vw, 118px); }
.hero__panel {
  border-radius: 34px;
  padding: clamp(34px, 5.4vw, 68px) clamp(22px, 5.6vw, 76px) clamp(32px, 5vw, 58px);
  background:
    radial-gradient(600px 260px at 50% 0%, rgba(255,255,255,.10), transparent 70%),
    radial-gradient(460px 300px at 86% 18%, rgba(255,36,31,.18), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.086), rgba(255,255,255,.036));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 46px 110px rgba(0,0,0,.62), 0 0 0 1px rgba(255,36,31,.08) inset;
}
.hero__panel::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 26px;
  pointer-events: none;
}
.hero__tag {
  color: #FFD4D1;
  background: rgba(255,36,31,.14);
  border-color: rgba(255,36,31,.38);
}
.hero h1 { max-width: 960px; margin: 0 auto; letter-spacing: -.045em; }
.hero__lead { color: #DDDEE6; font-size: clamp(1.03rem, 1.65vw, 1.18rem); }
.hero__stats { gap: 18px; }
.hero__stat {
  flex: 1 1 170px;
  max-width: 230px;
  min-width: 164px;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  border-color: rgba(255,255,255,.15);
}
.hero__stat span { color: var(--ink-soft); }

/* Subpage hero */
.page-hero { padding: clamp(72px, 8vw, 108px) 0 clamp(54px, 7vw, 86px); }
.page-hero .container {
  max-width: 980px;
  padding-block: clamp(32px, 5vw, 52px);
  border-radius: 30px;
  background:
    radial-gradient(520px 260px at 50% -10%, rgba(255,255,255,.095), transparent 72%),
    radial-gradient(480px 300px at 88% 10%, rgba(255,36,31,.14), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.076), rgba(255,255,255,.032));
  border: 1px solid rgba(255,255,255,.145);
  box-shadow: 0 34px 86px rgba(0,0,0,.54), inset 0 1px 0 rgba(255,255,255,.08);
}
.page-hero h1 { max-width: 820px; margin-inline: auto; letter-spacing: -.04em; }
.page-hero p { color: #D9D9E2; max-width: 720px; }
.breadcrumb {
  color: #CFCFD7;
  background: rgba(255,255,255,.075);
  border-color: rgba(255,255,255,.14);
}

/* Shared cards */
.card,
.svc,
.aiera__card,
.deliver__col,
.plan,
.step,
.why__item,
.info-card,
.form-card,
.prose,
.table-wrap,
.faq__item {
  background:
    linear-gradient(180deg, rgba(255,255,255,.078), rgba(255,255,255,.036));
  border-color: rgba(255,255,255,.14);
  box-shadow: var(--glass-shadow);
}
.card,
.svc,
.aiera__card,
.plan,
.step,
.deliver__col { min-height: 100%; }
.card:hover,
.svc:hover,
.aiera__card:hover,
.deliver__col:hover,
.plan:hover,
.step:hover,
.why__item:hover,
.info-card:hover,
.faq__item.open {
  border-color: rgba(255,36,31,.46);
  box-shadow: var(--glow-red);
}
.card h3,
.svc h3,
.aiera__card h3,
.plan h3,
.deliver__col h3,
.step h4 { letter-spacing: -.018em; }
.card p,
.svc p,
.aiera__card p,
.step p,
.plan__desc,
.plan__feat,
.deliver__col li,
.faq__a p { color: var(--ink-soft); }
.card__icon,
.svc__ic,
.aiera__ic,
.plan__ic,
.step__ic,
.info-card .ic,
.why__item .tick {
  background: rgba(255,36,31,.13);
  border-color: rgba(255,36,31,.30);
  color: var(--red-ink);
}
.card:hover .card__icon,
.svc:hover .svc__ic,
.aiera__card:hover .aiera__ic,
.step:hover .step__ic,
.plan--featured .plan__ic {
  background: linear-gradient(145deg, #FF514C, #C90803);
}
.card h3 a,
.svc h3 a,
.aiera__card h3 a {
  background-image: linear-gradient(currentColor,currentColor);
  background-size: 0 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: color var(--t), background-size var(--t);
}
.card h3 a:hover,
.svc h3 a:hover,
.aiera__card h3 a:hover { color: var(--red-ink); background-size: 100% 2px; }

/* Service cards and grids */
.grid { gap: clamp(18px, 2.2vw, 26px); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.svc-list { grid-template-columns: repeat(auto-fit, minmax(278px, 1fr)); gap: clamp(18px, 2.4vw, 28px); }
.svc { padding: clamp(24px, 2.6vw, 34px); }
.svc::before { height: 2px; }
.svc p { font-size: .98rem; }
.chip,
.tools__item {
  background: linear-gradient(180deg, rgba(255,255,255,.078), rgba(255,255,255,.038));
  border-color: rgba(255,255,255,.14);
}
.chip { color: #E7E7ED; }
.tools__item { padding: 15px 24px; }

/* Pricing, comparison and FAQ */
.plans { gap: clamp(18px, 2.5vw, 30px); }
.plan { padding: clamp(28px, 3vw, 38px) clamp(22px, 2.7vw, 32px); }
.plan--featured {
  background:
    radial-gradient(360px 220px at 50% 0%, rgba(255,36,31,.16), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.038));
}
.plan__price { letter-spacing: -.045em; }
table.compare thead th { background: rgba(0,0,0,.68); }
table.compare th,
table.compare td { vertical-align: middle; }
.scroll-hint { color: #B9B9C2; }
.faq { max-width: 880px; }
.faq__item { border-radius: 16px; }
.faq__q { padding: 22px 24px; }
.faq__q .ic { background: rgba(255,36,31,.13); color: var(--red-ink); }

/* About, contact, forms */
.about-panel {
  background:
    radial-gradient(closest-side at 82% 4%, rgba(255,36,31,.30), transparent 72%),
    linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.034));
  box-shadow: var(--glass-shadow);
}
.info-card:hover { transform: translateY(-3px); }
.form-card { padding: clamp(26px, 3.2vw, 42px); }
.field input,
.field textarea,
.field select {
  min-height: 48px;
  background: rgba(0,0,0,.26);
  border-color: rgba(255,255,255,.14);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: rgba(255,36,31,.78);
  box-shadow: 0 0 0 4px rgba(255,36,31,.16);
}
.prose { max-width: 880px; }
.prose h2 { letter-spacing: -.02em; }
.prose p { color: #D8D8E0; }

/* CTA and footer */
.cta-banner,
.cta-modern {
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 30px 80px rgba(0,0,0,.54), 0 0 0 1px rgba(255,36,31,.18) inset;
}
.cta-banner {
  background:
    radial-gradient(closest-side at 88% 112%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(closest-side at 6% 2%, rgba(255,255,255,.13), transparent 62%),
    linear-gradient(135deg, #D90B05, #9D0702 58%, #520200);
}
.cta-banner p { color: #FFF1F0; }
.cta-modern {
  background:
    radial-gradient(closest-side at 8% 8%, rgba(255,255,255,.18), transparent 62%),
    radial-gradient(closest-side at 94% 100%, rgba(0,0,0,.28), transparent 68%),
    linear-gradient(135deg, #FF4C47, #C90803 58%, #750300);
}
.site-footer {
  background:
    radial-gradient(760px 420px at 6% 0%, rgba(255,36,31,.16), transparent 62%),
    linear-gradient(180deg, #050506, #010101);
}
.footer-grid { gap: clamp(28px, 4vw, 48px); }
.footer-brand p,
.footer-col a,
.footer-col p { color: #B1B1BB; }
.footer-col a:hover { color: #fff; }
.footer-newsletter input { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); }
.footer-bottom { color: #8B8B96; }

@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.1fr 1fr; }
}
@media (max-width: 860px) {
  .nav { height: 70px; }
  .mobile-menu { inset: 70px 0 auto 0; max-height: calc(100vh - 70px); overflow-y: auto; }
  .nav__right > .btn { display: none; }
  .page-hero .container { border-radius: 24px; }
  .plans { max-width: 540px; }
}
@media (max-width: 640px) {
  body::before { background-size: 46px 46px; opacity: .12; }
  .section { padding: 64px 0; }
  .hero h1 { font-size: clamp(2.15rem, 11vw, 3rem); }
  .hero__tag { align-items: flex-start; text-align: left; }
  .hero__cta .btn,
  .cta-banner .btn,
  .cta-modern__actions .btn { width: 100%; justify-content: center; }
  .hero__stats { display: grid; grid-template-columns: 1fr 1fr; }
  .hero__stat { max-width: none; width: 100%; padding: 18px 16px; }
  .hero__stat b { font-size: 1.75rem; }
  .page-hero { padding-top: 58px; }
  .page-hero .container { padding-block: 30px; }
  .page-hero h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .grid-3,
  .grid-4,
  .svc-list,
  .aiera,
  .why,
  .steps,
  .deliver { grid-template-columns: 1fr; }
  .card,
  .svc,
  .aiera__card,
  .deliver__col,
  .plan,
  .step { padding: 24px; }
  .faq__q { padding: 18px 18px; font-size: .98rem; }
  .faq__a p { padding-inline: 18px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { display: grid; }
}
@media (max-width: 420px) {
  .hero__stats { grid-template-columns: 1fr; }
  .brand__name { font-size: 1.04rem; }
  .brand__logo { width: 38px; height: 38px; }
}