:root {
  --warm-ink: #101b33;
  --warm-muted: #4c5970;
  --warm-paper: #f7f1e7;
  --warm-cream: #fffaf2;
  --warm-blue: #315fe8;
  --warm-cyan: #4ccfc2;
  --warm-coral: #f08c70;
  --warm-gold: #e7b45e;
  --warm-line: rgba(16,27,51,.12);
}

body {
  color: var(--warm-ink);
  background:
    radial-gradient(circle at 100% 0%, rgba(76,207,194,.11), transparent 30rem),
    var(--warm-paper);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .45;
  background-image: radial-gradient(rgba(49,95,232,.13) .7px, transparent .7px);
  background-size: 22px 22px;
  mask-image: linear-gradient(to bottom, black, transparent 76%);
}

.site-header {
  background: rgba(255,250,242,.84);
  border-color: rgba(16,27,51,.09);
  box-shadow: 0 10px 38px rgba(31,43,73,.06);
}
.nav-wrap { min-height: 84px; }
.nav a { color: var(--warm-ink); }
.nav a:not(.button):hover,
.nav a[aria-current="page"] { color: var(--warm-blue); }
.nav a:not(.button)::after { background: linear-gradient(90deg, var(--warm-blue), var(--warm-cyan)); }
.menu-toggle { color: var(--warm-ink); }

.button {
  position: relative;
  overflow: hidden;
  background: linear-gradient(105deg, var(--warm-blue), #5a70ef);
  box-shadow: 0 15px 34px rgba(49,95,232,.24);
}
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 28%, rgba(255,255,255,.36) 48%, transparent 68%);
  transform: translateX(-120%);
  transition: transform .5s ease;
}
.button:hover::before { transform: translateX(120%); }
.button:hover { background: linear-gradient(105deg, #244dc9, #765ce6); box-shadow: 0 20px 44px rgba(49,95,232,.32); }
.button-secondary { color: var(--warm-ink); border-color: rgba(16,27,51,.14); background: rgba(255,255,255,.54); backdrop-filter: blur(12px); }

.hero {
  min-height: calc(100vh - 84px);
  display: grid;
  align-items: center;
  padding: 100px 0 92px;
  background:
    radial-gradient(circle at 12% 18%, rgba(240,140,112,.13), transparent 23rem),
    radial-gradient(circle at 69% 80%, rgba(76,207,194,.15), transparent 28rem),
    linear-gradient(135deg, #fffaf2, #f4eee4 58%, #eef6f4);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 48%;
  opacity: .88;
  background:
    linear-gradient(90deg, #f8f2e9 0%, transparent 23%),
    linear-gradient(0deg, rgba(16,27,51,.18), transparent 55%),
    url("../images/studio-workspace.jpg") center/cover;
  mask-image: linear-gradient(90deg, transparent, black 22%);
  animation: image-breathe 16s ease-in-out infinite alternate;
}
.hero::after {
  width: 560px;
  height: 560px;
  right: -210px;
  top: -270px;
  border-color: rgba(49,95,232,.19);
  box-shadow: 0 0 0 78px rgba(49,95,232,.035), 0 0 0 156px rgba(76,207,194,.025);
}
.hero-grid { position: relative; z-index: 1; align-items: center; }
.hero h1 { max-width: 790px; color: var(--warm-ink); text-shadow: 0 12px 50px rgba(255,255,255,.5); }
.hero h1 em {
  color: transparent;
  background: linear-gradient(90deg, var(--warm-blue), #7361df 55%, var(--warm-coral));
  -webkit-background-clip: text;
  background-clip: text;
}
.hero .lede { max-width: 660px; color: var(--warm-muted); }
.hero-card {
  margin-top: 210px;
  color: var(--warm-ink);
  border: 1px solid rgba(255,255,255,.72);
  background: rgba(255,250,242,.88);
  backdrop-filter: blur(18px);
  box-shadow: 0 30px 90px rgba(16,27,51,.2), inset 0 1px 0 #fff;
}
.hero-card .mini-label { color: #16786f; }
.hero-card li { border-color: rgba(16,27,51,.1); }

.trust-strip {
  padding: 36px 0;
  border-color: var(--warm-line);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
}
.trust-item {
  color: var(--warm-ink);
  border-color: rgba(16,27,51,.1);
  background: linear-gradient(145deg, #fff, #faf4eb);
  box-shadow: 0 18px 48px rgba(40,50,78,.08);
}
.trust-item::before { border-color: var(--warm-blue); box-shadow: 0 0 0 7px rgba(49,95,232,.08), 0 0 28px rgba(76,207,194,.18); }
.trust-item::after { background: rgba(240,140,112,.12); }
.trust-item span { color: var(--warm-muted); }
.trust-item:hover { border-color: rgba(49,95,232,.26); box-shadow: 0 24px 58px rgba(40,50,78,.13); }

.section {
  color: var(--warm-ink);
  background:
    radial-gradient(circle at 92% 8%, rgba(76,207,194,.08), transparent 24rem),
    var(--warm-paper);
}
.section:nth-of-type(even):not(.section-dark):not(.section-white):not(.concepts-section) {
  background:
    radial-gradient(circle at 8% 88%, rgba(240,140,112,.09), transparent 22rem),
    #fff9f0;
}
.section-white {
  color: var(--warm-ink);
  background:
    radial-gradient(circle at 95% 5%, rgba(49,95,232,.08), transparent 25rem),
    #fff;
}
.section-dark,
.concepts-section {
  color: #fff;
  background:
    radial-gradient(circle at 88% 14%, rgba(76,207,194,.17), transparent 24rem),
    radial-gradient(circle at 8% 88%, rgba(49,95,232,.17), transparent 22rem),
    #101b33;
}
.section .lede { color: var(--warm-muted); }
.section-dark .lede,
.concepts-section .lede { color: #c8d1e3; }
.eyebrow { color: var(--warm-blue); }
.section-dark .eyebrow,
.concepts-section .eyebrow { color: #69e0d4; }

.card,
.price-card {
  color: var(--warm-ink);
  border-color: rgba(16,27,51,.1);
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,250,242,.9));
  box-shadow: 0 22px 62px rgba(40,50,78,.09);
}
.card h3,
.price-card h2,
.price-card h3 { color: var(--warm-ink); }
.card p,
.price-card p { color: var(--warm-muted); }
.card::after { background: rgba(76,207,194,.11); box-shadow: 0 0 50px rgba(49,95,232,.1); }
.card:hover,
.price-card:hover { border-color: rgba(49,95,232,.23); box-shadow: 0 28px 76px rgba(40,50,78,.15); }
.icon-tile {
  color: var(--warm-blue);
  border: 1px solid rgba(49,95,232,.14);
  background: linear-gradient(145deg, rgba(49,95,232,.1), rgba(76,207,194,.13));
}

.offer-box {
  border: 1px solid rgba(255,255,255,.24);
  background:
    radial-gradient(circle at 90% 18%, rgba(76,207,194,.27), transparent 18rem),
    radial-gradient(circle at 8% 85%, rgba(240,140,112,.23), transparent 20rem),
    linear-gradient(135deg, #315fe8, #5f4bd2);
  box-shadow: 0 34px 96px rgba(49,95,232,.25);
}

.page-hero {
  min-height: 70vh;
  display: grid;
  align-items: center;
  padding: 116px 0 96px;
  color: var(--warm-ink);
  border-color: var(--warm-line);
  background:
    radial-gradient(circle at 12% 20%, rgba(240,140,112,.12), transparent 23rem),
    radial-gradient(circle at 64% 82%, rgba(76,207,194,.13), transparent 25rem),
    linear-gradient(135deg, #fffaf2, #f4eee4 65%, #edf5f3);
}
.page-hero::before {
  inset: 0 0 0 auto;
  width: 42%;
  opacity: .32;
  background: linear-gradient(90deg, #f7f1e7, transparent 28%), url("../images/studio-workspace.jpg") center/cover;
  mask-image: linear-gradient(90deg, transparent, black 28%);
  animation: image-breathe 18s ease-in-out infinite alternate;
}
.page-hero::after { border-color: rgba(49,95,232,.16); box-shadow: 0 0 0 75px rgba(49,95,232,.025), 0 0 0 150px rgba(76,207,194,.02); }
.page-hero h1 { max-width: 980px; color: var(--warm-ink); font-size: clamp(4rem, 8vw, 7.2rem); }
.page-hero .lede { max-width: 720px; color: var(--warm-muted); }
.breadcrumb { color: var(--warm-muted); border-color: rgba(16,27,51,.11); background: rgba(255,255,255,.6); }

.price-card.featured {
  color: #fff;
  border-color: rgba(76,207,194,.3);
  background:
    radial-gradient(circle at 85% 10%, rgba(76,207,194,.23), transparent 15rem),
    linear-gradient(145deg, #101b33, #1d3f7e);
}
.price-card.featured h2,
.price-card.featured h3,
.price-card.featured p { color: #fff; }
.price-card.featured .muted { color: #c8d1e3; }
.price-card.featured .price { color: #fff; }

.process-step {
  margin: 8px 0;
  padding: 30px 22px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background: rgba(255,255,255,.04);
}
.process-step:hover { padding-left: 36px; border-color: rgba(76,207,194,.35); background: rgba(76,207,194,.06); }
.founder-photo::before { background: linear-gradient(140deg, var(--warm-cyan), var(--warm-blue), var(--warm-coral)); box-shadow: 0 24px 70px rgba(49,95,232,.19); }

input,
select,
textarea { color: var(--warm-ink); border-color: rgba(16,27,51,.12); background: rgba(255,255,255,.88); }
input::placeholder,
textarea::placeholder { color: #7a8498; }
input:focus,
select:focus,
textarea:focus { border-color: var(--warm-blue); box-shadow: 0 0 0 5px rgba(49,95,232,.08), 0 16px 38px rgba(49,95,232,.1); }
.contact-aside {
  border: 1px solid rgba(76,207,194,.24);
  background:
    radial-gradient(circle at 90% 12%, rgba(76,207,194,.2), transparent 13rem),
    linear-gradient(145deg, #101b33, #24457f);
}
.concept-browser { box-shadow: 0 25px 65px rgba(0,0,0,.28); }
.site-footer { background: radial-gradient(circle at 90% 20%, rgba(49,95,232,.16), transparent 20rem), #0b1428; }

@keyframes image-breathe {
  from { transform: scale(1); filter: saturate(.92); }
  to { transform: scale(1.035); filter: saturate(1.08); }
}

@media (max-width: 1120px) {
  .nav { border: 1px solid rgba(16,27,51,.1); background: rgba(255,250,242,.98); }
  .hero::before { width: 100%; opacity: .18; mask-image: linear-gradient(to bottom, black, transparent 82%); }
  .hero-card { margin-top: 24px; }
}
@media (max-width: 620px) {
  .hero { min-height: auto; padding: 76px 0; }
  .page-hero { min-height: 62vh; padding: 90px 0 72px; }
  .page-hero h1 { font-size: clamp(3.15rem, 14vw, 5rem); }
  .page-hero::before { width: 100%; opacity: .13; mask-image: linear-gradient(to bottom, black, transparent 80%); }
}
@media (prefers-reduced-motion: reduce) {
  body::before { display: none; }
}