/* NovaSites v2: warm paper, ink and cobalt. Loaded after base.css and the page's own styles. */
:root {
  --bg: #f4f1ea; --bg-soft: #ece8de; --bg-sunk: #e4dfd2; --surface: #fffdf8;
  --ink: #14161a; --text: #2b2f36; --muted: #61666f; --line: #dcd5c6; --line-strong: #c6bdab;
  --brand: #1d4ed8; --brand-hover: #1e40af; --brand-soft: #e7edfb; --brand-tint: #c9d6f6; --brand-glow: rgba(29, 78, 216, 0.18);
  --panel: #14161a; --panel-deep: #101215; --solid: #1d4ed8; --solid-hover: #1e40af; --on-solid: #ffffff; --on-brand: #ffffff;
  --header-bg: rgba(244, 241, 234, 0.86);
  --display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 14px; --radius-sm: 10px;
}
:root[data-theme="dark"] {
  --bg: #101215; --bg-soft: #15181c; --bg-sunk: #1b1f24; --surface: #181b20;
  --ink: #f3f1ec; --text: #c9ccd2; --muted: #8e939b; --line: #272b31; --line-strong: #3a3f47;
  --brand: #6b93f2; --brand-hover: #8eaef6; --brand-soft: rgba(107, 147, 242, 0.12); --brand-tint: rgba(107, 147, 242, 0.25);
  --panel: #1b1f25; --panel-deep: #0b0c0e; --solid: #6b93f2; --solid-hover: #8eaef6; --on-solid: #0b1020; --on-brand: #0b1020;
  --header-bg: rgba(16, 18, 21, 0.85);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101215; --bg-soft: #15181c; --bg-sunk: #1b1f24; --surface: #181b20;
    --ink: #f3f1ec; --text: #c9ccd2; --muted: #8e939b; --line: #272b31; --line-strong: #3a3f47;
    --brand: #6b93f2; --brand-hover: #8eaef6; --brand-soft: rgba(107, 147, 242, 0.12); --brand-tint: rgba(107, 147, 242, 0.25);
    --panel: #1b1f25; --panel-deep: #0b0c0e; --solid: #6b93f2; --solid-hover: #8eaef6; --on-solid: #0b1020; --on-brand: #0b1020;
    --header-bg: rgba(16, 18, 21, 0.85);
  }
}

body { font-size: 16px; }
h1, h2, h3, .section-head h2, .h2, .logo, .price, .cta-box h2 { font-family: var(--display); }
.section-head { text-align: left; margin: 0 0 48px; max-width: 720px; }
.section-head h2, .h2 { font-size: clamp(2.1rem, 4vw, 3.3rem); letter-spacing: -0.035em; line-height: 1.04; font-weight: 700; }
.kicker { color: var(--brand); }
.section-soft { background: var(--bg-soft); }
.logo-mark { color: #8eaef6; }

/* One idea per screen: sections fill the viewport on desktop */
@media (min-width: 900px) and (min-height: 700px) {
  .home main > section:not(.statement-wrap) { min-height: calc(100svh - 68px); display: flex; flex-direction: column; justify-content: center; }
  .home main > section > .wrap { width: 100%; }
}

/* Buttons: one pair, they step on hover and press on click */
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand-hover); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn-outline { background: transparent; }

/* Hero */
.hero2 { padding: 40px 0 56px; }
.hero2-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 64px; align-items: center; }
.hero2 h1 { margin-top: 18px; font-size: clamp(2.7rem, 5.6vw, 5.2rem); line-height: 0.98; letter-spacing: -0.045em; font-weight: 800; color: var(--ink); }
.hero2 h1 em { font-style: normal; color: var(--brand); }
.hero2 .lede { margin-top: 22px; max-width: 520px; font-size: 1.15rem; color: var(--muted); }
.hero2 .hero-cta { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero2-facts { margin-top: 40px; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; border-top: 1px solid var(--line); }
.hero2-facts li { padding: 16px 28px 0 0; margin-right: 28px; border-right: 1px solid var(--line); font-size: 0.85rem; color: var(--muted); }
.hero2-facts li:last-child { border-right: 0; margin-right: 0; }
.hero2-facts b { display: block; font-family: var(--display); font-size: 1.45rem; letter-spacing: -0.02em; color: var(--ink); }
.hero2-work { position: relative; padding-bottom: 56px; }
.hw-browser { display: block; width: 86%; border-radius: 14px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 2px 4px rgba(20, 22, 26, 0.05), 0 40px 80px -30px rgba(20, 22, 26, 0.35); transition: transform 0.3s var(--ease); }
.hw-browser .bar { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.hw-browser .bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.hw-browser .shot, .hw-phone .shot { overflow: hidden; }
.hw-browser img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform 0.5s var(--ease); }
.hw-phone { position: absolute; right: 0; bottom: 0; width: 31%; border-radius: 28px; overflow: hidden; border: 7px solid var(--ink); background: var(--ink); box-shadow: 0 30px 60px -24px rgba(20, 22, 26, 0.5); transition: transform 0.3s var(--ease); }
.hw-phone img { width: 100%; height: auto; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; border-radius: 21px; transition: transform 0.5s var(--ease); }
.hw-browser:hover, .hw-phone:hover { transform: translateY(-2px); }
.hw-browser:hover img, .hw-phone:hover img { transform: scale(1.025); }

/* Hero entrance, once on load */
[data-enter] .enter { animation: rise 0.8s var(--ease) both; animation-delay: var(--e, 0ms); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

/* Work */
.work2 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.w-card { grid-column: span 2; display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); transition: transform 0.25s var(--ease), box-shadow 0.25s, border-color 0.25s; }
.w-card.big { grid-column: span 3; }
.w-card:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.w-top { display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.w-top small { display: block; font-size: 0.8rem; font-weight: 600; color: var(--brand); }
.w-top h3 { font-size: 1.2rem; letter-spacing: -0.02em; color: var(--ink); margin-top: 2px; }
.w-go { font-size: 0.85rem; font-weight: 600; color: var(--ink); white-space: nowrap; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1.5px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.25s var(--ease); }
.w-card:hover .w-go { background-size: 100% 1.5px; }
.w-frame { border-radius: 10px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 10; }
.w-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.5s var(--ease); }
.w-card:hover .w-frame img { transform: scale(1.03); }

/* Who we build for */
.trades { display: grid; grid-template-columns: 1.6fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; height: min(60vh, 560px); }
.trades a { position: relative; overflow: hidden; border-radius: var(--radius); display: block; }
.trades a:first-child { grid-row: span 2; }
.trades img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.trades a:hover img { transform: scale(1.03); }
.trade-list { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.trade-list li { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 0.9rem; color: var(--ink); }

/* Process with the live order tracker */
.process2 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.steps2 { counter-reset: s; border-top: 1px solid var(--line); }
.steps2 li { display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.steps2 .n { font-family: var(--mono); font-size: 0.85rem; color: var(--brand); }
.steps2 h3 { font-size: 1.25rem; letter-spacing: -0.02em; color: var(--ink); }
.steps2 p { margin-top: 4px; color: var(--muted); font-size: 0.97rem; }
.steps2 .when { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.process2 .tracker-wrap { position: relative; }

/* Type moment: words light up as the section scrolls */
.statement-wrap { position: relative; height: 200svh; }
.statement-pin { position: sticky; top: 68px; height: calc(100svh - 68px); display: flex; align-items: center; }
.statement { font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 5.2vw, 4.6rem); line-height: 1.06; letter-spacing: -0.04em; color: var(--ink); max-width: 20ch; }
.js .statement .w { color: var(--line-strong); transition: color 0.25s; }
.js .statement .w.lit { color: var(--ink); }
.js .statement .w.hl.lit { color: var(--brand); }
@media (prefers-reduced-motion: reduce) {
  .statement-wrap { height: auto; }
  .statement-pin { position: static; height: auto; padding: 104px 0; }
  .js .statement .w { color: var(--ink); }
  [data-enter] .enter { animation: none; }
}

/* Real tool icons */
.tools { margin: -16px 0 40px; display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; font-size: 0.9rem; color: var(--muted); }
.tools span { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; }
.tools img { width: 20px; height: 20px; }
.tools b { font-weight: 600; color: var(--muted); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* Close: the offer set large */
.close2 { text-align: left; }
.close2 h2 { font-family: var(--display); font-weight: 800; font-size: clamp(3rem, 9vw, 8.4rem); line-height: 0.92; letter-spacing: -0.055em; color: var(--ink); }
.close2 h2 em { font-style: normal; color: var(--brand); }
.close2 p { margin-top: 24px; max-width: 560px; font-size: 1.1rem; color: var(--muted); }
.close2 .hero-cta { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }

/* No scroll fades in this design: content is simply there */
.js .reveal { opacity: 1; transform: none; transition: none; }

@media (max-width: 960px) {
  .hero2-grid, .process2 { grid-template-columns: 1fr; gap: 48px; }
  .work2 { grid-template-columns: 1fr 1fr; }
  .w-card, .w-card.big { grid-column: span 1; }
  .trades { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 160px 160px; height: auto; }
  .trades a:first-child { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 600px) {
  .hero2 { padding-top: 24px; }
  .hero2-facts { grid-template-columns: 1fr 1fr 1fr; }
  .hero2-facts li { padding-right: 10px; margin-right: 10px; }
  .hero2-facts b { font-size: 1.1rem; }
  .hero2 .hero-cta .btn { width: 100%; }
  .work2 { grid-template-columns: 1fr; }
  .steps2 li { grid-template-columns: 40px 1fr; }
  .steps2 .when { grid-column: 2; }
  .close2 .hero-cta .btn { width: 100%; }
}

/* Equal edges: blocks start on the same left line as their headings */
.estimator, .plans, .ticket-cta, .rev-empty, .faq { margin-left: 0; margin-right: 0; }
.estimator { max-width: none; }
.plans { max-width: none; }
.ticket-cta { max-width: none; }
.rev-empty { max-width: 720px; text-align: left; }
.faq { max-width: none; }
.support-switch { text-align: left !important; justify-content: flex-start !important; }
.includes { justify-content: flex-start; }
.quality-intro .tools { margin: 28px 0; }
.quality-intro .tools b { width: 100%; margin-top: 4px; }
#reviews .wrap > *:not(.section-head) { text-align: left; margin-left: 0; margin-right: 0; justify-content: flex-start; }

#support .fine, #visibility .fine, #essentials .fine, #bundles .fine { text-align: left; margin-left: 0; margin-right: 0; max-width: 760px; }

/* Smallest phones: keep the header on one line */
@media (max-width: 360px) {
  .header-actions .btn-sm { display: none; }
  .compare-mobile th, .compare-mobile td { padding: 8px 4px; }
}
@media (max-width: 420px) {
  body:not(.home) main table { display: block; overflow-x: auto; max-width: 100%; }
}