/* ============================================================
   SITESMEDERIJ V2
   Static, dependency-free, responsive portfolio/leadgen site.
   Main brand tokens live here.
   ============================================================ */

:root {
  --paper: #f4f0e9;
  --paper-2: #ebe5dc;
  --ink: #121417;
  --ink-soft: #656b73;
  --ink-faint: #92979e;
  --dark: #0a0c0f;
  --dark-2: #101319;
  --dark-3: #171b22;
  --white: #f7f7f5;
  --accent: #ff7a1a;
  --accent-2: #ffb06b;
  --accent-soft: rgba(255,122,26,.11);
  --line-light: rgba(18,20,23,.12);
  --line-dark: rgba(255,255,255,.11);
  --shadow-light: 0 30px 90px rgba(31,25,19,.14);
  --shadow-dark: 0 35px 100px rgba(0,0,0,.42);
  --radius: 26px;
  --radius-sm: 15px;
  --container: 1260px;
  --header-h: 82px;
}

html[data-theme="dark"] {
  --paper: #0b0d10;
  --paper-2: #11151a;
  --ink: #f4f5f6;
  --ink-soft: #a2a8b0;
  --ink-faint: #777e88;
  --line-light: rgba(255,255,255,.11);
  --shadow-light: 0 30px 90px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
  transition: background .3s ease, color .3s ease;
}
body.modal-open { overflow: hidden; }

::selection { background: var(--accent); color: #111; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
img { max-width: 100%; display: block; }

.container { width: min(calc(100% - 42px), var(--container)); margin: 0 auto; }
.section { position: relative; padding: 118px 0; }
.dark-zone { color: var(--white); background: var(--dark); }

.skip-link {
  position: fixed; left: 12px; top: -100px; z-index: 1001;
  padding: 10px 14px; border-radius: 10px; background: var(--accent); color: #111; font-weight: 800;
}
.skip-link:focus { top: 12px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.page-progress {
  position: fixed; left: 0; top: 0; width: 100%; height: 2px; z-index: 1000; pointer-events: none;
}
.page-progress span { display: block; width: 0; height: 100%; background: var(--accent); }

/* HEADER */
.site-header {
  position: sticky; top: 0; z-index: 100; height: var(--header-h);
  border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter: blur(20px);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.scrolled { border-color: var(--line-light); box-shadow: 0 8px 30px rgba(0,0,0,.035); }

.nav-wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px; }

.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 900; letter-spacing: -.035em; }
.brand-word { font-size: 1rem; }
.brand-symbol {
  position: relative; width: 36px; height: 36px; display: inline-grid; place-items: center;
  border: 1px solid var(--line-light); border-radius: 12px; background: color-mix(in srgb, var(--paper) 80%, transparent);
  overflow: hidden;
}
.brand-symbol i {
  position: absolute; width: 6px; height: 6px; right: 4px; top: 4px; border-radius: 50%; background: var(--accent);
  box-shadow: -7px 4px 0 -2px var(--accent-2);
}
.brand-s { position: relative; z-index: 2; font-size: .78rem; font-weight: 950; }
.brand-bracket {
  position: absolute; top: 10px; bottom: 10px; width: 7px; border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent);
}
.brand-bracket.left { left: 6px; border-left: 1px solid var(--accent); }
.brand-bracket.right { right: 6px; border-right: 1px solid var(--accent); }

.desktop-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.desktop-nav a { color: var(--ink-soft); font-size: .88rem; transition: color .2s ease; }
.desktop-nav a:hover { color: var(--ink); }

.nav-actions { display: flex; align-items: center; gap: 9px; }
.icon-btn, .menu-btn {
  width: 42px; height: 42px; border: 1px solid var(--line-light); border-radius: 12px;
  background: color-mix(in srgb, var(--paper) 82%, transparent); cursor: pointer;
}
.icon-btn { position: relative; overflow: hidden; }
.icon-btn span { position: absolute; inset: 0; display: grid; place-items: center; transition: transform .25s ease, opacity .25s ease; }
.icon-btn .moon { opacity: 0; transform: translateY(18px); }
html[data-theme="dark"] .icon-btn .sun { opacity: 0; transform: translateY(-18px); }
html[data-theme="dark"] .icon-btn .moon { opacity: 1; transform: translateY(0); }

.menu-btn { display: none; position: relative; }
.menu-btn > span:not(.sr-only) {
  position: absolute; left: 12px; right: 12px; height: 1px; background: var(--ink); transition: .2s ease;
}
.menu-btn > span:first-child { top: 16px; }
.menu-btn > span:nth-child(2) { top: 24px; }
.menu-btn[aria-expanded="true"] > span:first-child { top: 20px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] > span:nth-child(2) { top: 20px; transform: rotate(-45deg); }

.mobile-menu {
  display: none; position: absolute; top: calc(100% + 1px); left: 20px; right: 20px;
  padding: 18px; background: var(--paper); border: 1px solid var(--line-light); border-radius: 18px;
  box-shadow: var(--shadow-light);
}
.mobile-menu.is-open { display: grid; gap: 10px; }
.mobile-menu > a:not(.btn) { padding: 12px 10px; color: var(--ink-soft); }

/* BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid transparent; border-radius: 13px; padding: 13px 18px;
  font-weight: 800; font-size: .9rem; cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  color: #16100b; background: var(--accent); box-shadow: 0 14px 34px rgba(255,122,26,.18);
}
.btn-primary:hover { background: #ff8b38; box-shadow: 0 18px 42px rgba(255,122,26,.25); }
.btn-ghost { border-color: var(--line-light); background: transparent; }
.btn-light { background: #fff; color: #111; }
.btn-small { padding: 11px 14px; font-size: .82rem; }
.btn-lg { padding: 16px 20px; }

/* HERO */
.hero {
  min-height: calc(100vh - var(--header-h));
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 66px; overflow: hidden;
}
.hero-grid-bg {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(var(--line-light) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-light) 1px, transparent 1px);
  background-size: 86px 86px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.38), transparent 75%);
}
.hero-grid {
  position: relative; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 70px;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 11px;
  border: 1px solid var(--line-light); border-radius: 999px; color: var(--ink-soft);
  font-size: .77rem; background: color-mix(in srgb, var(--paper) 72%, transparent);
}
.status-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #63df83;
  box-shadow: 0 0 0 6px rgba(99,223,131,.1);
}
.hero h1 {
  margin: 25px 0 24px; max-width: 690px;
  font-size: clamp(4rem, 6.5vw, 7.2rem); line-height: .91; letter-spacing: -.073em; font-weight: 900;
}
.hero h1 span { color: var(--accent); }
.hero-lead { max-width: 650px; color: var(--ink-soft); font-size: clamp(1rem,1.35vw,1.16rem); line-height: 1.72; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.proof-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line-light);
}
.proof-row > div { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.proof-icon {
  flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 9px; background: var(--accent-soft); color: var(--accent); font-weight: 900;
}
.proof-row p { margin: 1px 0 0; }
.proof-row strong { display: block; font-size: .75rem; }
.proof-row small { display: block; color: var(--ink-faint); font-size: .62rem; margin-top: 2px; }

.hero-stage { min-height: 630px; position: relative; display: grid; place-items: center; perspective: 1200px; }
.hero-orbit { position: absolute; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); }
.orbit-one { width: 480px; height: 480px; right: -55px; top: 40px; }
.orbit-two { width: 260px; height: 260px; left: 15px; bottom: 45px; border-style: dashed; animation: spin 28s linear infinite; }

.interaction-label {
  position: absolute; top: 62px; left: 24px; z-index: 3;
  display: flex; align-items: center; gap: 8px; color: var(--ink-faint);
  font-size: .61rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 850;
}
.interaction-label span { width: 28px; height: 1px; background: var(--accent); }

.browser-card {
  position: relative; width: min(108%, 745px); min-height: 500px;
  border: 1px solid var(--line-light); border-radius: 24px;
  background: color-mix(in srgb, var(--paper) 88%, white 12%);
  box-shadow: 0 55px 120px rgba(33,26,20,.18), 0 0 110px rgba(255,122,26,.08);
  overflow: hidden; transform-style: preserve-3d; transition: transform .12s ease-out;
}
html[data-theme="dark"] .browser-card { background: #11151a; box-shadow: var(--shadow-dark); }

.browser-bar {
  height: 52px; display: grid; grid-template-columns: 90px 1fr 44px; align-items: center;
  border-bottom: 1px solid var(--line-light); padding: 0 14px;
}
.browser-dots { display: flex; gap: 6px; }
.browser-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--line-light); }
.browser-dots span:first-child { background: var(--accent); }
.browser-address {
  justify-self: center; color: var(--ink-faint); border: 1px solid var(--line-light);
  border-radius: 8px; padding: 5px 18px; font-size: .62rem;
}
.browser-spark { justify-self: end; color: var(--accent); }

.preview-shell { padding: 19px; }
.preview-nav { display: flex; align-items: center; gap: 14px; padding: 6px 3px 17px; }
.mini-brand {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: var(--ink); color: var(--paper); font-size: .68rem; font-weight: 950;
}
.preview-links { display: flex; gap: 10px; margin-left: auto; }
.preview-links span { width: 35px; height: 5px; border-radius: 999px; background: var(--line-light); }
.preview-pill {
  margin-left: 5px; padding: 6px 13px; border-radius: 999px; background: var(--accent); color: #16100b;
  font-size: .53rem; font-weight: 900;
}

.preview-body {
  min-height: 318px; position: relative; padding: 42px 38px; border: 1px solid var(--line-light);
  border-radius: 17px; overflow: hidden;
  background:
    radial-gradient(circle at 78% 30%, rgba(255,122,26,.12), transparent 34%),
    color-mix(in srgb, var(--paper) 82%, white 18%);
}
html[data-theme="dark"] .preview-body {
  background:
    radial-gradient(circle at 78% 30%, rgba(255,122,26,.14), transparent 35%),
    #101319;
}
.preview-copy-area { position: relative; z-index: 2; width: 56%; }
.preview-kicker { color: var(--accent); font-size: .55rem; letter-spacing: .2em; font-weight: 900; }
.preview-title { margin-top: 16px; }
.preview-title span { display: block; height: 23px; margin-bottom: 8px; border-radius: 4px; background: var(--ink); }
.preview-title span:nth-child(2) { width: 86%; }
.preview-title span:nth-child(3) { width: 58%; background: var(--accent); }
.preview-copy { width: 78%; margin-top: 20px; }
.preview-copy span { display: block; height: 6px; margin-bottom: 8px; border-radius: 8px; background: var(--line-light); }
.preview-copy span:last-child { width: 72%; }
.preview-buttons { display: flex; gap: 8px; margin-top: 23px; }
.preview-buttons span { width: 82px; height: 27px; border-radius: 8px; background: var(--accent); }
.preview-buttons span:last-child { width: 68px; background: transparent; border: 1px solid var(--line-light); }

.preview-art { position: absolute; width: 225px; height: 225px; right: 27px; top: 40px; transition: transform .15s ease-out; }
.art-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--line-light) 1px, transparent 1px), linear-gradient(90deg,var(--line-light) 1px,transparent 1px);
  background-size: 28px 28px; mask-image: radial-gradient(circle,#000,transparent 72%);
}
.art-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255,122,26,.34); }
.ring-1 { inset: 22px; animation: spin 18s linear infinite; }
.ring-1::after { content:""; position:absolute; width:7px; height:7px; border-radius:50%; background:var(--accent); left:50%; top:-4px; }
.ring-2 { inset: 58px; border-style: dashed; animation: spin 12s linear infinite reverse; }
.art-core {
  position:absolute; inset:75px; border-radius:26px; display:grid; place-items:center;
  background:var(--accent); color:#17110d; font-size:2rem; font-weight:950; transform:rotate(12deg);
  box-shadow:0 22px 52px rgba(255,122,26,.24);
}
.floating-chip {
  position:absolute; padding:6px 8px; border:1px solid var(--line-light); border-radius:7px;
  background:var(--paper); color:var(--ink); font-size:.52rem; font-weight:900; box-shadow:0 8px 22px rgba(0,0,0,.06);
}
html[data-theme="dark"] .floating-chip { background:#171b22; }
.chip-1 { left:-3px; top:58px; animation:float 4s ease-in-out infinite; }
.chip-2 { right:3px; top:31px; animation:float 4s .7s ease-in-out infinite; }
.chip-3 { right:-3px; bottom:34px; animation:float 4s 1.3s ease-in-out infinite; }

.preview-stats { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line-light); margin-top:15px; }
.preview-stats div { padding:15px 12px 1px; border-right:1px solid var(--line-light); }
.preview-stats div:last-child { border-right:0; }
.preview-stats strong { display:block; font-size:.7rem; }
.preview-stats span { color:var(--ink-faint); font-size:.55rem; }

.float-note {
  position:absolute; z-index:3; display:flex; align-items:center; gap:7px; padding:10px 13px;
  background:var(--paper); border:1px solid var(--line-light); border-radius:11px;
  box-shadow:var(--shadow-light); color:var(--ink-soft); font-size:.68rem;
}
.float-note span { color:var(--accent); }
.note-a { left:-12px; top:130px; animation:float 5s ease-in-out infinite; }
.note-b { right:-12px; bottom:115px; animation:float 5s .8s ease-in-out infinite; }
.note-c { left:24px; bottom:62px; animation:float 5s 1.4s ease-in-out infinite; }

.capability-line {
  position:relative; margin-top:48px; padding:22px 0; border-top:1px solid var(--line-light); border-bottom:1px solid var(--line-light);
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  color:var(--ink-faint); font-size:.7rem; text-transform:uppercase; letter-spacing:.15em;
}
.capability-line i { width:4px;height:4px;border-radius:50%;background:var(--accent); }

/* SHARED */
.section-label { display:flex; align-items:center; gap:10px; color:var(--ink-faint); font-size:.7rem; font-weight:850; text-transform:uppercase; letter-spacing:.16em; }
.section-label span { color:var(--accent); }
.section-label-dark { color:#7d848d; }

.section-heading {
  display:grid; grid-template-columns:1fr 390px; align-items:end; gap:50px; margin-bottom:54px;
}
.section-heading h2, .position-copy h2, .compare-copy h2, .lab-heading h2, .scope-copy h2, .faq-grid h2, .featured-copy h2, .contact-copy h2 {
  margin:16px 0 0; font-size:clamp(2.9rem,5.1vw,5.5rem); line-height:.97; letter-spacing:-.058em;
}
.section-heading p, .compare-copy > p, .lab-heading > p, .scope-copy > p { margin:0; color:var(--ink-soft); line-height:1.78; }
.dark-zone .section-heading p, .dark-zone .lab-heading > p { color:#9198a3; }

/* POSITION */
.position-grid { display:grid; grid-template-columns:.58fr 1.42fr; gap:70px; border-top:1px solid var(--line-light); padding-top:40px; }
.position-kicker { margin:0 0 14px; color:var(--accent); font:700 italic 1.1rem/1 Georgia,serif; }
.position-copy h2 { font-size:clamp(2.9rem,4.6vw,4.9rem); }
.large-copy { max-width:800px; color:var(--ink-soft); font-size:1.08rem; line-height:1.8; }
.principles { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:45px; border-top:1px solid var(--line-light); }
.principles article { padding:24px 22px 0 0; border-right:1px solid var(--line-light); }
.principles article:nth-child(2), .principles article:nth-child(3) { padding-left:22px; }
.principles article:last-child { border-right:0; }
.principles span { color:var(--accent); font:700 .66rem/1 ui-monospace,monospace; }
.principles h3 { margin:12px 0 8px; font-size:1rem; }
.principles p { margin:0; color:var(--ink-soft); font-size:.78rem; line-height:1.65; }

/* WORK */
.work-section { background:
  radial-gradient(circle at 15% 8%, rgba(255,122,26,.07), transparent 26rem),
  var(--dark);
}
.work-section .section-heading h2 { color:var(--white); }
.concept-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:-20px 0 28px; }
.concept-tab {
  border:1px solid var(--line-dark); border-radius:999px; background:transparent; color:#8e959e;
  padding:8px 12px; font-size:.7rem; cursor:pointer; transition:.2s ease;
}
.concept-tab:hover, .concept-tab.is-active { background:var(--white); color:#111; border-color:var(--white); }

.project-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:24px; }
.project {
  padding:12px; border:1px solid var(--line-dark); border-radius:var(--radius); background:rgba(255,255,255,.02);
  transition:opacity .25s ease, transform .25s ease;
}
.project.is-hidden { display:none; }
.project-wide { grid-column:span 2; }
.project-visual { position:relative; min-height:390px; overflow:hidden; border-radius:18px; transform:translateZ(0); }
.project-large .project-visual { min-height:530px; }
.project-wide .project-visual { min-height:405px; }
.concept-label {
  position:absolute; left:18px; top:18px; z-index:3; padding:7px 9px; border-radius:999px;
  background:rgba(0,0,0,.48); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(10px);
  color:#eee; font-size:.55rem; font-weight:850; letter-spacing:.12em;
}
.project-info { min-height:106px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:17px 8px 5px; }
.project-info h3 { margin:3px 0 5px; font-size:1.2rem; color:var(--white); }
.project-info p { margin:0; color:#8f969f; font-size:.8rem; }
.project-meta { color:#646c76; font-size:.58rem; text-transform:uppercase; letter-spacing:.13em; }
.round-link {
  flex:0 0 auto; width:45px; height:45px; border:1px solid var(--line-dark); border-radius:50%;
  background:transparent; color:#eee; cursor:pointer; transition:.22s ease;
}
.round-link:hover { transform:rotate(45deg); background:var(--accent); color:#111; border-color:var(--accent); }

/* luxury */
.luxury-visual { padding:35px; display:grid; place-items:center; background:radial-gradient(circle at 76% 46%,rgba(216,174,97,.17),transparent 34%),linear-gradient(145deg,#080808,#17130e); }
.project-browser { width:91%;height:84%;border:1px solid rgba(255,255,255,.12);border-radius:13px;background:#0b0b0a;overflow:hidden;box-shadow:0 35px 80px rgba(0,0,0,.35); }
.project-topbar { height:27px;display:flex;gap:5px;align-items:center;padding:0 10px;border-bottom:1px solid rgba(255,255,255,.08); }
.project-topbar span { width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.26); }
.project-topbar span:first-child { background:#d8ae61; }
.luxury-screen { height:calc(100% - 27px);position:relative;padding:30px;overflow:hidden; }
.luxury-logo { color:#d8ae61;font-family:Georgia,serif;letter-spacing:.22em;font-size:.72rem; }
.luxury-copy { margin-top:75px;color:#f7e8cb;font-family:Georgia,serif;font-size:clamp(1.6rem,3vw,2.9rem);line-height:.95; }
.luxury-sub { margin-top:13px;color:#7c7060;font:500 .57rem/1.5 ui-monospace,monospace;max-width:120px; }
.luxury-watch { position:absolute;width:190px;height:290px;right:35px;top:35px; }
.watch-face {
  position:absolute;width:155px;height:155px;left:17px;top:68px;border-radius:50%;
  border:9px solid #b38d4a;background:radial-gradient(circle,#18130c,#060606 70%);
  box-shadow:inset 0 0 0 2px #e2c184,0 0 35px rgba(216,174,97,.16);
}
.watch-face::before,.watch-face::after{content:"";position:absolute;left:50%;top:50%;background:#d8ae61;transform-origin:bottom;}
.watch-face::before{width:2px;height:49px;transform:translate(-50%,-100%) rotate(28deg);}
.watch-face::after{width:2px;height:35px;transform:translate(-50%,-100%) rotate(120deg);}
.watch-band{position:absolute;width:66px;height:90px;left:62px;background:linear-gradient(90deg,#8f6c34,#dab66e,#8f6c34);}
.watch-band.top{top:0;border-radius:12px 12px 4px 4px}.watch-band.bottom{bottom:0;border-radius:4px 4px 12px 12px}

/* bold */
.bold-visual { min-height:530px;padding:30px;background:#e9ff45;color:#111; }
.bold-number{font-size:.65rem;font-weight:900;letter-spacing:.2em}
.bold-title{position:absolute;left:30px;bottom:82px;font-size:clamp(2.6rem,4.5vw,4.8rem);font-weight:950;line-height:.82;letter-spacing:-.07em;z-index:2}
.bold-orbit{position:absolute;width:230px;height:230px;border:2px solid #111;border-radius:50%;right:-45px;top:78px}
.bold-orbit::after{content:"";position:absolute;width:34px;height:34px;background:#111;border-radius:50%;left:22px;top:15px}
.bold-pill{position:absolute;right:24px;bottom:24px;border:1px solid #111;border-radius:999px;padding:8px 11px;font-size:.56rem;font-weight:900;letter-spacing:.1em;z-index:2}
.bold-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.08) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(90deg,transparent,#000)}

/* editorial */
.editorial-visual{padding:28px;background:#ece8df;color:#1c1a18}
.editorial-index{font:700 .6rem/1 ui-monospace,monospace;letter-spacing:.12em}
.editorial-word{position:absolute;left:25px;top:52px;font-family:Georgia,serif;font-size:clamp(2.2rem,4.5vw,5.2rem);letter-spacing:-.055em;z-index:2}
.editorial-photo{position:absolute;right:30px;bottom:30px;width:54%;height:70%;overflow:hidden;background:#bbb3a5}
.arch{position:absolute;left:16%;right:16%;bottom:0;height:84%;border-radius:130px 130px 0 0;background:#25211d}
.arch::after{content:"";position:absolute;inset:32px;border-radius:110px 110px 0 0;background:#d6cdbc}
.sun-disc{position:absolute;width:78px;height:78px;border-radius:50%;background:#b86438;left:-24px;top:20px}
.editorial-caption{position:absolute;left:28px;bottom:27px;width:31%;font:700 .52rem/1.5 ui-monospace,monospace;letter-spacing:.08em}

/* local */
.local-visual{display:grid;grid-template-columns:1.1fr .9fr;background:#d9e1d7;color:#141b16;padding:25px;gap:20px}
.local-map{position:relative;border-radius:13px;background:#c9d2c6;overflow:hidden}
.street{position:absolute;background:#f4f2e9;border:1px solid rgba(0,0,0,.06);transform-origin:center}
.street.s1{width:140%;height:25px;left:-20%;top:45%;transform:rotate(20deg)}.street.s2{width:25px;height:140%;left:47%;top:-20%;transform:rotate(-12deg)}.street.s3{width:120%;height:18px;left:-10%;top:21%;transform:rotate(-28deg)}
.block{position:absolute;background:#a9b9a5;border-radius:7px}.b1{width:90px;height:70px;left:16%;top:10%}.b2{width:110px;height:58px;right:11%;top:15%}.b3{width:78px;height:90px;left:14%;bottom:10%}.b4{width:100px;height:70px;right:10%;bottom:13%}
.pin{position:absolute;width:50px;height:50px;border-radius:50% 50% 50% 0;background:#ff6a22;left:55%;top:50%;transform:rotate(-45deg);box-shadow:0 15px 30px rgba(255,106,34,.25)}
.pin span{position:absolute;width:15px;height:15px;background:#fff;border-radius:50%;left:18px;top:18px}
.local-card{border-radius:13px;background:#101b14;color:#f2f7f2;padding:34px;display:flex;flex-direction:column;justify-content:center}
.local-card>span{color:#9fb4a3;font-size:.54rem;font-weight:900;letter-spacing:.16em}.local-card strong{display:block;margin:12px 0;font-size:clamp(1.8rem,3vw,3.1rem);line-height:.96;letter-spacing:-.05em}.local-card p{color:#aab8ad;font-size:.76rem;max-width:245px}.local-card button{align-self:flex-start;margin-top:16px;border:0;border-radius:9px;padding:11px 13px;background:#d8ff69;font-weight:800;color:#111}

.concept-disclaimer{display:grid;grid-template-columns:auto 1fr;gap:15px;align-items:flex-start;margin-top:25px;padding:20px 22px;border:1px solid var(--line-dark);border-radius:16px;background:rgba(255,255,255,.025)}
.concept-disclaimer>span{width:34px;height:34px;border-radius:10px;background:rgba(255,122,26,.12);color:var(--accent);display:grid;place-items:center}
.concept-disclaimer p{margin:1px 0 0;color:#8d949d;font-size:.76rem;line-height:1.6}.concept-disclaimer strong{color:#dfe2e5}

/* COMPARE */
.compare-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:70px;align-items:center}
.compare-copy h2{margin-bottom:24px}
.check-list{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:11px}
.check-list li{color:var(--ink-soft);font-size:.84rem}
.check-list li::before{content:"✓";display:inline-grid;place-items:center;width:19px;height:19px;margin-right:9px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:.62rem;font-weight:900}
.compare-card{border:1px solid var(--line-light);border-radius:22px;padding:14px;background:color-mix(in srgb,var(--paper) 86%,white 14%);box-shadow:var(--shadow-light)}
.compare-labels{display:flex;justify-content:space-between;padding:7px 5px 12px;color:var(--ink-faint);font-size:.65rem;text-transform:uppercase;letter-spacing:.12em}
.compare-stage{position:relative;height:520px;border-radius:14px;overflow:hidden}
.compare-before,.compare-after{position:absolute;inset:0;padding:40px}
.compare-before{background:#e9e7df;color:#282623;font-family:Arial,sans-serif}
.old-nav{font-size:.64rem;border-bottom:2px solid #777;padding-bottom:12px}.compare-before h4{font-size:2.2rem;margin:90px 0 15px;font-family:Arial,sans-serif}.compare-before p{max-width:390px;color:#615e59}.compare-before button{border:1px solid #333;background:#d0cec7;padding:10px 15px;margin-top:10px}.old-boxes{display:flex;gap:9px;margin-top:55px}.old-boxes span{width:82px;height:55px;background:#cbc8c0;border:1px solid #aaa}
.compare-after{color:#fff;background:radial-gradient(circle at 80% 35%,rgba(116,88,255,.35),transparent 32%),linear-gradient(145deg,#11131b,#090a0d);clip-path:inset(0 0 0 53%)}
.new-nav{display:flex;justify-content:space-between;font-size:.63rem;color:#b8bbc4}.new-nav strong{color:#fff;letter-spacing:.1em}.new-kicker{display:block;margin-top:90px;color:#a591ff;font-size:.56rem;font-weight:900;letter-spacing:.18em}.compare-after h4{margin:12px 0;font-size:3.2rem;line-height:.9;letter-spacing:-.05em}.compare-after p{color:#a9adb9;max-width:340px}.compare-after button{border:0;border-radius:10px;padding:12px 14px;background:#8f78ff;color:#fff;font-weight:800}.new-glow{position:absolute;width:220px;height:220px;border-radius:50%;border:1px solid rgba(143,120,255,.35);right:5%;bottom:-20px}.new-glow::after{content:"";position:absolute;inset:30px;border-radius:50%;border:1px dashed rgba(255,255,255,.16)}
.compare-handle{position:absolute;top:0;bottom:0;left:53%;width:2px;background:#fff;transform:translateX(-50%);pointer-events:none;z-index:3}.compare-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#111;box-shadow:0 8px 24px rgba(0,0,0,.2);font-weight:900}.compare-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:4}

/* WEB LAB */
.lab-section{background:radial-gradient(circle at 80% 20%,rgba(110,89,255,.09),transparent 28rem),var(--dark)}
.lab-heading{display:grid;grid-template-columns:1fr 430px;align-items:end;gap:60px;margin-bottom:50px}
.lab-heading h2{color:var(--white);font-size:clamp(3.2rem,5.8vw,6.3rem)}
.lab-heading h2 em{font-family:Georgia,serif;font-weight:400;color:var(--accent)}
.builder{display:grid;grid-template-columns:360px 1fr;border:1px solid var(--line-dark);border-radius:27px;background:#0e1116;overflow:hidden;box-shadow:var(--shadow-dark)}
.builder-controls{padding:27px;border-right:1px solid var(--line-dark);background:#101319}
.builder-step{padding:0 0 23px;margin-bottom:23px;border-bottom:1px solid var(--line-dark)}
.step-head{display:flex;gap:10px;align-items:center;margin-bottom:12px}.step-head span{color:#626a74;font:700 .62rem/1 ui-monospace,monospace}.step-head strong{font-size:.8rem}
.choice-grid{display:grid;gap:7px}.choice-grid-two{grid-template-columns:1fr 1fr}
.choice{padding:10px 9px;border:1px solid var(--line-dark);border-radius:9px;background:transparent;color:#858d97;font-size:.68rem;cursor:pointer;transition:.18s ease}
.choice:hover{border-color:#3a414b;color:#ddd}.choice.is-active{background:#fff;color:#111;border-color:#fff;font-weight:800}
.color-choices{display:flex;gap:9px}.color-choice{width:29px;height:29px;border-radius:50%;background:var(--swatch);border:4px solid #101319;outline:1px solid #343b45;cursor:pointer}.color-choice.is-active{outline:2px solid #fff}
.layout-choices{display:grid;grid-template-columns:1fr 1fr;gap:8px}.layout-choice{display:flex;align-items:center;gap:8px;padding:9px;border:1px solid var(--line-dark);border-radius:9px;background:transparent;color:#858d97;font-size:.65rem;cursor:pointer}.layout-choice.is-active{background:#fff;color:#111;border-color:#fff;font-weight:800}
.layout-icon{width:29px;height:21px;border:1px solid currentColor;border-radius:4px;padding:4px;display:flex;gap:3px}.layout-icon i{display:block;background:currentColor;opacity:.45;border-radius:1px}.split-icon i:first-child{width:55%}.split-icon i:last-child{flex:1}.centered-icon{flex-direction:column;align-items:center}.centered-icon i:first-child{width:65%;height:3px}.centered-icon i:last-child{width:85%;height:4px}
.builder-cta{width:100%;margin-top:2px}

.builder-stage{padding:30px;display:flex;flex-direction:column;justify-content:center;min-width:0;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.035),transparent 50%)}
.builder-browser{--builder-accent:#ff7a1a;width:100%;max-width:800px;margin:auto;border:1px solid rgba(255,255,255,.13);border-radius:19px;background:#f4f1eb;color:#111;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.3);transition:.35s ease}
.builder-bar{height:41px;padding:0 12px;display:grid;grid-template-columns:80px 1fr 30px;align-items:center;background:#fff;border-bottom:1px solid rgba(0,0,0,.08)}
.builder-bar>div{display:flex;gap:5px}.builder-bar>div span{width:6px;height:6px;border-radius:50%;background:#ccc}.builder-bar>div span:first-child{background:var(--builder-accent)}
.builder-bar p{margin:0;justify-self:center;color:#8b8e91;font-size:.54rem}.builder-bar b{justify-self:end;color:var(--builder-accent)}
.builder-site{min-height:500px;padding:24px 30px;transition:.35s ease}
.builder-nav{display:flex;align-items:center;gap:21px;color:#7c7f83;font-size:.56rem}.builder-nav strong{margin-right:auto;color:#111;letter-spacing:.14em}.builder-nav button{border:0;border-radius:999px;background:var(--builder-accent);padding:8px 11px;font-size:.53rem;font-weight:850;color:#111}
.builder-hero{min-height:365px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:30px;padding:36px 5px 20px}
.builder-copy small{color:var(--builder-accent);font-size:.5rem;font-weight:900;letter-spacing:.18em}.builder-copy h3{margin:12px 0 12px;font-size:clamp(2.4rem,4.1vw,4.4rem);line-height:.89;letter-spacing:-.06em}.builder-copy p{max-width:360px;color:#6e7175;font-size:.7rem;line-height:1.65}
.builder-buttons{display:flex;gap:8px;margin-top:20px}.builder-buttons button{border:1px solid rgba(0,0,0,.13);border-radius:8px;background:transparent;padding:9px 10px;font-size:.55rem;font-weight:800}.builder-buttons button:first-child{background:var(--builder-accent);border-color:var(--builder-accent)}
.builder-visual{position:relative;min-height:300px}.builder-shape{position:absolute;border-radius:50%;border:1px solid color-mix(in srgb,var(--builder-accent) 48%, transparent)}.shape-one{width:250px;height:250px;right:5%;top:8%}.shape-two{width:175px;height:175px;right:14%;top:20%;border-style:dashed}
.builder-object{position:absolute;width:112px;height:112px;right:23%;top:29%;border-radius:32px;display:grid;place-items:center;background:var(--builder-accent);font-size:2.8rem;font-weight:950;transform:rotate(10deg);box-shadow:0 22px 50px color-mix(in srgb,var(--builder-accent) 25%, transparent)}
.builder-card{position:absolute;right:2%;bottom:2%;width:165px;padding:14px;border-radius:12px;background:rgba(255,255,255,.9);border:1px solid rgba(0,0,0,.08);box-shadow:0 16px 35px rgba(0,0,0,.08)}.builder-card span{display:block;color:var(--builder-accent);font-size:.45rem;font-weight:900;letter-spacing:.13em}.builder-card strong{display:block;margin:5px 0 2px;font-size:.77rem}.builder-card small{color:#86898d;font-size:.48rem}
.builder-footerline{display:flex;justify-content:space-between;align-items:center;padding-top:10px;border-top:1px solid rgba(0,0,0,.08);color:#979a9d;font-size:.48rem}.builder-footerline>div{display:flex;gap:5px}.builder-footerline i{display:block;width:18px;height:3px;background:#d7d7d7;border-radius:999px}.builder-footerline i:first-child{background:var(--builder-accent)}
.builder-meta{display:flex;justify-content:space-between;max-width:800px;width:100%;margin:13px auto 0;color:#69717c;font-size:.58rem}.builder-meta span:first-child{display:flex;align-items:center;gap:6px}.builder-meta i{width:6px;height:6px;border-radius:50%;background:#63df83}

/* builder style variations */
.builder-browser[data-style="luxury"]{background:#11100e;color:#f7ecda}
.builder-browser[data-style="luxury"] .builder-bar{background:#171410;border-color:rgba(255,255,255,.08)}
.builder-browser[data-style="luxury"] .builder-site{background:radial-gradient(circle at 76% 30%,color-mix(in srgb,var(--builder-accent) 14%,transparent),transparent 35%),#11100e}
.builder-browser[data-style="luxury"] .builder-nav{color:#857c70}.builder-browser[data-style="luxury"] .builder-nav strong{color:#f4e5ca;font-family:Georgia,serif}.builder-browser[data-style="luxury"] .builder-copy h3{font-family:Georgia,serif;font-weight:500;letter-spacing:-.045em}.builder-browser[data-style="luxury"] .builder-copy p{color:#8d8478}.builder-browser[data-style="luxury"] .builder-buttons button{color:#eee;border-color:rgba(255,255,255,.12)}.builder-browser[data-style="luxury"] .builder-buttons button:first-child{color:#111}.builder-browser[data-style="luxury"] .builder-card{background:#181511;border-color:rgba(255,255,255,.1);color:#f4e5ca}.builder-browser[data-style="luxury"] .builder-footerline{border-color:rgba(255,255,255,.08);color:#6f675e}
.builder-browser[data-style="bold"]{background:#e8ff43;color:#111}.builder-browser[data-style="bold"] .builder-site{background-image:linear-gradient(rgba(0,0,0,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.07) 1px,transparent 1px);background-size:34px 34px}.builder-browser[data-style="bold"] .builder-copy h3{font-weight:950;letter-spacing:-.075em}.builder-browser[data-style="bold"] .builder-object{border-radius:50%;background:#111;color:var(--builder-accent)}.builder-browser[data-style="bold"] .builder-nav button,.builder-browser[data-style="bold"] .builder-buttons button:first-child{background:#111;color:#fff;border-color:#111}
.builder-browser[data-style="corporate"]{background:#f3f6fa}.builder-browser[data-style="corporate"] .builder-site{background:linear-gradient(150deg,#fff,#edf3f9)}.builder-browser[data-style="corporate"] .builder-object{border-radius:16px}.builder-browser[data-style="corporate"] .builder-copy h3{letter-spacing:-.045em}
.builder-browser[data-layout="centered"] .builder-hero{grid-template-columns:1fr;text-align:center;padding-top:48px}.builder-browser[data-layout="centered"] .builder-copy{max-width:580px;margin:auto}.builder-browser[data-layout="centered"] .builder-copy p{margin-left:auto;margin-right:auto}.builder-browser[data-layout="centered"] .builder-buttons{justify-content:center}.builder-browser[data-layout="centered"] .builder-visual{min-height:165px}.builder-browser[data-layout="centered"] .builder-shape{display:none}.builder-browser[data-layout="centered"] .builder-object{width:78px;height:78px;right:calc(50% - 39px);top:15px;font-size:2rem;border-radius:22px}.builder-browser[data-layout="centered"] .builder-card{right:calc(50% - 82px);bottom:-5px}

/* EXPERTISE */
.expertise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}
.expertise-card{position:relative;min-height:330px;padding:24px;border:1px solid var(--line-light);border-radius:21px;background:color-mix(in srgb,var(--paper) 90%,white 10%);overflow:hidden}
.expertise-index{color:var(--ink-faint);font:700 .62rem/1 ui-monospace,monospace}.expertise-card h3{margin:24px 0 10px;font-size:1.35rem;letter-spacing:-.04em}.expertise-card p{color:var(--ink-soft);font-size:.8rem;line-height:1.7;max-width:92%}.skill-tags{position:absolute;left:24px;right:24px;bottom:22px;display:flex;flex-wrap:wrap;gap:6px}.skill-tags span{padding:6px 8px;border:1px solid var(--line-light);border-radius:999px;color:var(--ink-faint);font-size:.55rem}
.expertise-icon{position:absolute;right:22px;top:20px;width:58px;height:58px;border:1px solid var(--line-light);border-radius:18px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.motion-icon i{width:24px;height:24px;border:1px solid var(--accent);border-radius:50%;position:relative}.motion-icon i::after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:var(--accent);top:-3px;left:9px;animation:spinDot 3s linear infinite;transform-origin:3px 15px}
.device-icon{display:flex;align-items:end;justify-content:center;gap:4px}.device-icon i{width:28px;height:20px;border:1px solid var(--accent);border-radius:3px}.device-icon b{width:10px;height:18px;border:1px solid var(--accent);border-radius:3px}
.speed-icon i{width:27px;height:27px;border:2px solid var(--accent);border-radius:50%;border-left-color:transparent;transform:rotate(-35deg)}.speed-icon i::after{content:"";position:absolute;width:2px;height:12px;background:var(--accent);left:12px;top:10px;transform:rotate(38deg);transform-origin:top}
.search-icon{font-size:1.7rem;font-weight:300}.funnel-icon{display:flex;flex-direction:column;gap:4px}.funnel-icon i{height:4px;background:var(--accent);border-radius:999px}.funnel-icon i:nth-child(1){width:28px}.funnel-icon i:nth-child(2){width:19px}.funnel-icon i:nth-child(3){width:10px}.accessible-icon{font:900 1rem/1 Georgia,serif}

/* FEATURED */
.featured-section{padding-top:80px}
.featured-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:65px;align-items:center;border-top:1px solid var(--line-light);padding-top:48px}
.featured-copy h2{font-size:clamp(2.8rem,4.5vw,4.8rem)}.featured-copy>p{color:var(--ink-soft);line-height:1.8;max-width:530px}.text-link{display:inline-block;margin-top:15px;color:var(--accent);font-weight:850;font-size:.8rem}
.featured-board{display:grid;grid-template-columns:1fr 1fr;gap:12px}.feature-slot{min-height:205px;padding:22px;border:1px solid var(--line-light);border-radius:18px;background:color-mix(in srgb,var(--paper) 90%,white 10%)}.feature-slot>span{color:var(--ink-faint);font-size:.52rem;font-weight:900;letter-spacing:.14em}.feature-slot strong{display:block;margin:38px 0 8px;font-size:1.3rem}.feature-slot p{margin:0;color:var(--ink-soft);font-size:.7rem;line-height:1.6}.feature-slot i{display:inline-block;margin-top:19px;color:var(--accent);font-size:.58rem;font-style:normal}.slot-active{background:var(--accent);color:#16100b;border-color:var(--accent)}.slot-active>span,.slot-active p,.slot-active i{color:rgba(20,14,9,.63)}.compact-slot{grid-column:span 2;min-height:115px;display:flex;align-items:center;justify-content:space-between;gap:20px}.compact-slot strong{margin:0;font-size:1.15rem}

/* PROCESS */
.process-section{background:linear-gradient(180deg,#0b0d10,#090b0e)}
.process-list{border-top:1px solid var(--line-dark)}
.process-item{display:grid;grid-template-columns:80px 1fr 130px;align-items:center;gap:25px;padding:29px 8px;border-bottom:1px solid var(--line-dark);transition:.22s ease}
.process-item:hover{padding-left:18px;background:linear-gradient(90deg,rgba(255,122,26,.08),transparent)}
.process-index{color:var(--accent);font:700 .7rem/1 ui-monospace,monospace}.process-item h3{margin:0 0 4px;font-size:1.25rem}.process-item p{margin:0;color:#8d949e;font-size:.8rem}.process-meta{justify-self:end;color:#646b74;font-size:.65rem;text-transform:uppercase;letter-spacing:.13em}

/* SCOPE */
.scope-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:65px;align-items:center}
.scope-copy h2{font-size:clamp(2.7rem,4.5vw,4.8rem)}.scope-copy>p{max-width:520px}
.scope-card{border:1px solid var(--line-light);border-radius:22px;padding:24px;background:color-mix(in srgb,var(--paper) 88%,white 12%);box-shadow:var(--shadow-light)}
.scope-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding-bottom:18px;border-bottom:1px solid var(--line-light)}.scope-head span{color:var(--ink-faint);font-size:.55rem;font-weight:900;letter-spacing:.14em}.scope-head strong{text-align:right;font-size:.95rem}
.scope-options{display:grid;gap:8px;margin:18px 0}.scope-options label{display:grid;grid-template-columns:auto 1fr;column-gap:10px;padding:14px;border:1px solid var(--line-light);border-radius:12px;cursor:pointer}.scope-options input{grid-row:span 2;margin-top:4px;accent-color:var(--accent)}.scope-options span{font-weight:800;font-size:.78rem}.scope-options small{color:var(--ink-soft);font-size:.62rem;margin-top:2px}
.scope-result{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:18px;border-top:1px solid var(--line-light)}.scope-result>div span{display:block;color:var(--ink-faint);font-size:.54rem;text-transform:uppercase;letter-spacing:.12em}.scope-result>div strong{display:block;margin-top:3px;font-size:.74rem}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:.65fr 1.35fr;gap:70px}.faq-grid h2{font-size:clamp(2.8rem,4.7vw,4.9rem)}
.faq-list{border-top:1px solid var(--line-light)}.faq-item{border-bottom:1px solid var(--line-light)}.faq-item summary{list-style:none;display:flex;justify-content:space-between;gap:20px;padding:24px 4px;cursor:pointer;font-weight:800}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary::after{content:"+";color:var(--accent);font-size:1.35rem;font-weight:400;transition:transform .2s ease}.faq-item[open] summary::after{transform:rotate(45deg)}.faq-item p{margin:-5px 0 24px;color:var(--ink-soft);font-size:.84rem;line-height:1.75;max-width:700px}

/* CONTACT */
.contact-section{overflow:hidden;background:var(--accent);color:#16100b}
.contact-orb{position:absolute;width:620px;height:620px;border:1px solid rgba(20,14,9,.11);border-radius:50%;left:-220px;bottom:-330px}.contact-orb::after{content:"";position:absolute;inset:80px;border:1px dashed rgba(20,14,9,.12);border-radius:50%}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:start}
.contact-label{color:rgba(20,14,9,.56)}.contact-label span{color:#16100b}
.contact-copy h2{font-size:clamp(3.2rem,5.7vw,6.2rem)}.contact-copy h2 em{font-family:Georgia,serif;font-weight:400}
.contact-copy>p{max-width:530px;color:rgba(20,14,9,.66);font-size:.95rem;line-height:1.75}
.contact-points{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}.contact-points span{padding:8px 10px;border:1px solid rgba(20,14,9,.16);border-radius:999px;font-size:.62rem;font-weight:750}
.contact-form{padding:27px;border-radius:22px;background:#111317;color:#f2f3f4;box-shadow:0 30px 80px rgba(60,25,5,.23)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.contact-form label{display:block;margin-bottom:14px}.contact-form label>span{display:block;margin:0 0 7px;color:#aeb3bd;font-size:.67rem;font-weight:800}.contact-form input,.contact-form textarea,.contact-form select{width:100%;border:1px solid rgba(255,255,255,.1);border-radius:11px;background:#181b20;color:#f6f6f6;padding:13px 14px;outline:none}.contact-form textarea{resize:vertical;min-height:118px}.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:rgba(255,122,26,.65);box-shadow:0 0 0 3px rgba(255,122,26,.09)}.form-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:8px}.form-bottom p{margin:0;color:#8f949e;font-size:.6rem;max-width:210px}

/* FOOTER */
.site-footer{padding:42px 0 25px;background:#090b0e;color:#e9ebed;border-top:1px solid var(--line-dark)}
.footer-main{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:start}.footer-brand .brand-symbol{border-color:var(--line-dark);background:#111317}.footer-main>div>p{margin:12px 0 0;color:#6f7680;font:italic 1rem/1 Georgia,serif}.footer-links{justify-self:center;display:grid;grid-template-columns:1fr 1fr;gap:9px 25px}.footer-links a,.back-top{color:#7e858f;font-size:.7rem}.back-top{justify-self:end}.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid var(--line-dark);margin-top:35px;padding-top:18px;color:#5f6670;font-size:.62rem}

/* MODAL / TOAST */
.demo-modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .2s ease}.demo-modal.is-open{opacity:1;pointer-events:auto}.demo-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(12px)}.demo-dialog{position:relative;width:min(100%,630px);padding:34px;border:1px solid var(--line-dark);border-radius:24px;background:#111419;color:#f3f4f5;box-shadow:var(--shadow-dark);transform:translateY(18px) scale(.98);transition:transform .25s ease}.demo-modal.is-open .demo-dialog{transform:none}.modal-close{position:absolute;right:17px;top:17px;width:37px;height:37px;border:1px solid var(--line-dark);border-radius:50%;background:transparent;color:#fff;cursor:pointer;font-size:1.3rem}.modal-kicker{color:var(--accent);font-size:.56rem;font-weight:900;letter-spacing:.18em}.demo-dialog h2{margin:10px 0 9px;font-size:2.5rem;letter-spacing:-.05em}.demo-dialog>p{color:#8f969f;line-height:1.7}.modal-preview{position:relative;height:230px;margin:24px 0;border:1px solid var(--line-dark);border-radius:15px;overflow:hidden;background:linear-gradient(145deg,rgba(255,122,26,.1),transparent);display:grid;place-items:center;text-align:center}.modal-grid{position:absolute;inset:0;background-image:linear-gradient(var(--line-dark) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark) 1px,transparent 1px);background-size:26px 26px;mask-image:radial-gradient(circle,#000,transparent 73%)}.modal-orbit{position:absolute;width:160px;height:160px;border:1px solid rgba(255,122,26,.28);border-radius:50%;animation:spin 10s linear infinite}.modal-orbit::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--accent);left:50%;top:-4px}.modal-preview strong{position:relative;font-size:2.5rem;line-height:.9;letter-spacing:-.05em}
.toast{position:fixed;left:50%;bottom:25px;z-index:400;transform:translate(-50%,20px);padding:12px 16px;border-radius:12px;background:#111419;border:1px solid var(--line-dark);box-shadow:var(--shadow-dark);opacity:0;pointer-events:none;color:#f5f6f7;font-size:.75rem;transition:.25s ease}.toast.show{opacity:1;transform:translate(-50%,0)}

/* REVEAL / ANIMATIONS */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1);transition-delay:var(--delay,0ms)}
.reveal.is-visible{opacity:1;transform:none}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes spinDot{to{transform:rotate(360deg)}}

/* RESPONSIVE */
@media(max-width:1080px){
  .desktop-nav{display:none}.menu-btn{display:block}
  .hero-grid{grid-template-columns:1fr;gap:32px}.hero-copy{max-width:820px}.hero h1{font-size:clamp(4.3rem,10vw,7rem)}.hero-stage{min-height:590px}
  .browser-card{width:min(100%,760px)}
  .section-heading,.lab-heading{grid-template-columns:1fr}.section-heading p,.lab-heading>p{max-width:680px}
  .position-grid{grid-template-columns:1fr}.principles{max-width:860px}
  .expertise-grid{grid-template-columns:repeat(2,1fr)}
  .compare-grid,.featured-grid,.scope-grid,.contact-grid{grid-template-columns:1fr}
  .builder{grid-template-columns:310px 1fr}.builder-stage{padding:20px}
}
@media(max-width:820px){
  :root{--header-h:72px}.container{width:min(calc(100% - 28px),var(--container))}.section{padding:82px 0}
  .nav-actions>.btn{display:none}.hero{padding-top:42px}.hero-grid-bg{background-size:60px 60px}
  .hero h1{font-size:clamp(3.55rem,17vw,5.5rem)}.hero-lead{font-size:.96rem}.proof-row{grid-template-columns:1fr;gap:15px}
  .hero-stage{min-height:455px}.browser-card{min-height:400px}.browser-address{display:none}.browser-bar{grid-template-columns:1fr 1fr}.browser-spark{justify-self:end}.preview-body{min-height:265px;padding:29px 21px}.preview-art{width:170px;height:170px;right:5px;top:48px;transform:scale(.86)}.preview-copy-area{width:60%}.interaction-label{top:20px;left:8px}.note-c{display:none}.note-a{left:-3px;top:58px}.note-b{right:-3px;bottom:45px}
  .capability-line{flex-wrap:wrap;justify-content:center}
  .principles{grid-template-columns:1fr}.principles article,.principles article:nth-child(2),.principles article:nth-child(3){padding:18px 0;border-right:0;border-bottom:1px solid var(--line-light)}.principles article:last-child{border-bottom:0}
  .project-grid{grid-template-columns:1fr}.project-wide{grid-column:auto}.project-visual,.project-large .project-visual,.project-wide .project-visual{min-height:390px}.bold-visual{min-height:390px}.luxury-visual{padding:18px}.project-browser{width:100%;height:85%}.luxury-watch{transform:scale(.75);transform-origin:right top;right:8px;top:50px}.luxury-copy{margin-top:95px;font-size:2.3rem}.local-visual{grid-template-columns:1fr;padding:16px}.local-map{min-height:170px}.local-card{padding:24px}
  .compare-stage{height:440px}.compare-before,.compare-after{padding:24px}.compare-before h4{margin-top:75px;font-size:1.8rem}.compare-after h4{font-size:2.5rem}.new-kicker{margin-top:72px}
  .builder{grid-template-columns:1fr}.builder-controls{border-right:0;border-bottom:1px solid var(--line-dark)}.builder-stage{padding:18px}.builder-browser{max-width:680px}.builder-site{min-height:470px}
  .expertise-grid{grid-template-columns:1fr}.featured-board{grid-template-columns:1fr}.compact-slot{grid-column:auto;display:block}.compact-slot strong{margin-top:28px}
  .process-item{grid-template-columns:50px 1fr}.process-meta{display:none}
  .faq-grid{grid-template-columns:1fr;gap:35px}
  .field-row{grid-template-columns:1fr;gap:0}.form-bottom{align-items:stretch;flex-direction:column}.form-bottom p{max-width:none}
  .footer-main{grid-template-columns:1fr;gap:24px}.footer-links{justify-self:start}.back-top{justify-self:start}
}
@media(max-width:560px){
  .hero-actions{flex-direction:column;align-items:stretch}.hero-actions .btn{width:100%}
  .preview-title span{height:16px}.preview-art{transform:scale(.7);transform-origin:right center;right:-20px}.preview-copy-area{width:66%}.preview-stats strong{font-size:.6rem}.preview-stats span{font-size:.47rem}
  .float-note{font-size:.58rem;padding:8px 10px}.capability-line{font-size:.6rem}
  .project-visual,.project-large .project-visual,.project-wide .project-visual{min-height:340px}.editorial-photo{width:64%;right:18px}.editorial-word{font-size:3rem}
  .choice-grid-two{grid-template-columns:1fr 1fr}.builder-stage{padding:10px}.builder-site{padding:18px 16px;min-height:440px}.builder-nav span{display:none}.builder-hero{grid-template-columns:1fr;min-height:360px;padding-top:28px}.builder-visual{min-height:140px}.builder-copy h3{font-size:2.7rem}.shape-one{width:150px;height:150px}.shape-two{width:110px;height:110px}.builder-object{width:70px;height:70px;right:24%;top:26%;font-size:1.7rem;border-radius:20px}.builder-card{width:135px;padding:10px}.builder-meta{flex-direction:column;gap:5px}
  .scope-head,.scope-result{align-items:flex-start;flex-direction:column}.scope-head strong{text-align:left}.scope-result .btn{width:100%}
  .contact-form{padding:20px}
  .footer-bottom{flex-direction:column;gap:8px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.reveal{opacity:1;transform:none}
}


/* ============================================================
   WEB LAB V3 — expanded interactive configurator
   ============================================================ */
.lab-v3 {
  background:
    radial-gradient(circle at 82% 10%, rgba(108,88,255,.12), transparent 30rem),
    radial-gradient(circle at 10% 72%, rgba(255,122,26,.08), transparent 28rem),
    #080a0d;
  overflow: hidden;
}
.lab-v3::before {
  content:"";
  position:absolute; inset:0; pointer-events:none; opacity:.22;
  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:72px 72px;
  mask-image:linear-gradient(to bottom, transparent, #000 18%, #000 86%, transparent);
}
.lab-v3 .container { position:relative; z-index:1; }
.lab-intro-copy p { margin:0; color:#9299a4; line-height:1.78; }
.lab-trustline {
  display:flex; flex-wrap:wrap; gap:9px 16px; margin-top:18px;
  color:#676f79; font-size:.58rem; text-transform:uppercase; letter-spacing:.08em;
}
.lab-trustline span { display:flex; align-items:center; gap:6px; }
.lab-trustline i { width:6px;height:6px;border-radius:50%;background:#63df83;box-shadow:0 0 0 4px rgba(99,223,131,.08); }

.lab-shell {
  display:grid;
  grid-template-columns:minmax(390px, 440px) minmax(0,1fr);
  min-height:780px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:28px;
  overflow:hidden;
  background:#0d1015;
  box-shadow:0 42px 120px rgba(0,0,0,.38);
}
.lab-panel {
  min-width:0;
  display:flex;
  flex-direction:column;
  background:#101319;
  border-right:1px solid rgba(255,255,255,.1);
}
.lab-panel-top {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:21px 22px 18px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.lab-panel-top > div:first-child { display:grid; gap:3px; }
.lab-mini-label { color:#555e69; font-size:.48rem; font-weight:900; letter-spacing:.16em; }
.lab-panel-top strong { color:#f1f3f4; font-size:.98rem; }
.lab-toolbar { display:flex; gap:6px; }
.lab-tool {
  width:33px;height:33px;border:1px solid rgba(255,255,255,.1);border-radius:9px;
  background:#151920;color:#89919c;cursor:pointer;font-weight:800;
  transition:.18s ease;
}
.lab-tool:hover { color:#fff;border-color:#424a55;transform:translateY(-1px); }
.lab-tool:disabled { opacity:.3;cursor:not-allowed;transform:none; }

.lab-progress {
  display:grid;grid-template-columns:repeat(6,1fr);gap:0;
  padding:0 14px;border-bottom:1px solid rgba(255,255,255,.09);
}
.lab-progress-step {
  position:relative;min-width:0;padding:13px 2px 12px;border:0;background:transparent;color:#505966;cursor:pointer;text-align:center;
}
.lab-progress-step::after {
  content:"";position:absolute;left:20%;right:20%;bottom:-1px;height:2px;background:transparent;border-radius:9px;
}
.lab-progress-step span { display:block;font:700 .48rem/1 ui-monospace,monospace;margin-bottom:4px; }
.lab-progress-step b { display:block;font-size:.5rem;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.lab-progress-step.is-active { color:#f2f3f4; }
.lab-progress-step.is-active span { color:#ff7a1a; }
.lab-progress-step.is-active::after { background:#ff7a1a; }

.lab-step-viewport {
  flex:1; min-height:0; overflow:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:#313842 transparent;
}
.lab-step-pane { display:none;padding:24px 22px 26px;animation:labPaneIn .28s ease both; }
.lab-step-pane.is-active { display:block; }
@keyframes labPaneIn { from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none} }

.lab-step-copy { margin-bottom:22px; }
.lab-step-copy > span { color:#ff7a1a;font-size:.52rem;font-weight:900;letter-spacing:.15em; }
.lab-step-copy h3 { margin:7px 0 8px;color:#f4f5f6;font-size:1.45rem;letter-spacing:-.04em;line-height:1.08; }
.lab-step-copy p { margin:0;color:#7d8590;font-size:.72rem;line-height:1.62; }

.industry-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:7px; }
.industry-card {
  min-height:76px;padding:10px 6px;border:1px solid rgba(255,255,255,.1);border-radius:11px;
  background:#13171d;color:#747d88;cursor:pointer;display:grid;place-items:center;align-content:center;gap:5px;
  transition:.18s ease;
}
.industry-card span { font-size:.88rem;color:#8e96a0; }
.industry-card b { font-size:.58rem;font-weight:800; }
.industry-card:hover { border-color:#39414c;color:#e8eaec;transform:translateY(-1px); }
.industry-card.is-active { background:#f4f4f1;color:#111;border-color:#f4f4f1;box-shadow:0 10px 24px rgba(0,0,0,.18); }
.industry-card.is-active span { color:#ff7a1a; }

.lab-form-grid { display:grid;grid-template-columns:1fr;gap:10px;margin-top:19px; }
.lab-field { display:grid;gap:6px; }
.lab-field > span { color:#68717c;font-size:.56rem;font-weight:800; }
.lab-field input {
  width:100%;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:#151920;color:#eef0f2;
  padding:11px 12px;outline:none;font-size:.72rem;
}
.lab-field input:focus { border-color:rgba(255,122,26,.55);box-shadow:0 0 0 3px rgba(255,122,26,.08); }

.goal-grid { display:grid;gap:8px; }
.goal-card {
  display:grid;grid-template-columns:38px 1fr;align-items:center;gap:10px;width:100%;
  padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:11px;background:#13171d;color:#7f8792;text-align:left;cursor:pointer;
  transition:.18s ease;
}
.goal-icon { width:34px;height:34px;border-radius:9px;background:#191e25;display:grid;place-items:center;color:#ff7a1a;font-weight:900; }
.goal-card b { display:block;color:#d8dbe0;font-size:.68rem;margin-bottom:2px; }
.goal-card small { display:block;color:#626b76;font-size:.56rem;line-height:1.35; }
.goal-card:hover { border-color:#39414c;transform:translateX(2px); }
.goal-card.is-active { border-color:rgba(255,122,26,.45);background:rgba(255,122,26,.07); }
.goal-card.is-active .goal-icon { background:#ff7a1a;color:#111; }
.goal-card.is-active b { color:#fff; }

.style-grid-v3 { display:grid;grid-template-columns:1fr 1fr;gap:9px; }
.style-card-v3 {
  padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#13171d;color:#7f8792;text-align:left;cursor:pointer;
  transition:.18s ease;
}
.style-card-v3:hover { border-color:#3b434d;transform:translateY(-1px); }
.style-card-v3.is-active { border-color:rgba(255,122,26,.45);box-shadow:inset 0 0 0 1px rgba(255,122,26,.12); }
.style-card-v3 b { display:block;margin:9px 0 2px;color:#dfe2e5;font-size:.66rem; }
.style-card-v3 small { display:block;color:#626b75;font-size:.52rem; }
.style-swatch { position:relative;display:block;height:72px;border-radius:8px;overflow:hidden;background:#eee; }
.style-swatch i { position:absolute;display:block; }
.minimal-swatch{background:#f3f1ec}.minimal-swatch i:first-child{left:9px;top:10px;width:43%;height:8px;background:#111}.minimal-swatch i:last-child{right:11px;bottom:10px;width:31px;height:31px;border-radius:10px;background:#ff7a1a}
.luxury-swatch{background:#11100e}.luxury-swatch i:first-child{left:10px;bottom:13px;width:47%;height:22px;border-top:1px solid #c9a258;border-bottom:1px solid #c9a258}.luxury-swatch i:last-child{right:13px;top:13px;width:38px;height:38px;border:1px solid #c9a258;border-radius:50%}
.bold-swatch{background:#dfff39}.bold-swatch i:first-child{left:9px;top:10px;width:70%;height:19px;background:#111}.bold-swatch i:last-child{right:-8px;bottom:-8px;width:50px;height:50px;border:2px solid #111;border-radius:50%}
.editorial-swatch{background:#e9e4da}.editorial-swatch i:first-child{left:10px;top:10px;width:45%;height:38px;border-left:8px solid #1b1b19;border-top:1px solid #1b1b19}.editorial-swatch i:last-child{right:11px;bottom:9px;width:38%;height:47px;background:#8e7b67}
.tech-swatch{background:#0c1118}.tech-swatch i:first-child{inset:0;background-image:linear-gradient(rgba(104,182,255,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(104,182,255,.15) 1px,transparent 1px);background-size:11px 11px}.tech-swatch i:last-child{left:23px;top:20px;width:26px;height:26px;border:1px solid #5caaff;transform:rotate(45deg)}
.corporate-swatch{background:#edf3f8}.corporate-swatch i:first-child{left:9px;top:10px;width:55%;height:10px;background:#17324e}.corporate-swatch i:last-child{left:9px;bottom:10px;width:82%;height:20px;border:1px solid #b7c7d5}
.warm-swatch{background:#f1e6da}.warm-swatch i:first-child{right:9px;top:9px;width:46px;height:46px;border-radius:50%;background:#c67852}.warm-swatch i:last-child{left:10px;bottom:11px;width:42%;height:15px;background:#4b392f}
.brutalist-swatch{background:#fff}.brutalist-swatch i:first-child{inset:8px;border:2px solid #111}.brutalist-swatch i:last-child{left:16px;bottom:16px;width:58%;height:18px;background:#ff4a21;box-shadow:17px -22px 0 #111}

.design-group { margin-bottom:20px; }
.design-group-head { display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:9px;color:#cfd3d7;font-size:.62rem; }
.design-group-head > span { color:#5e6772;font-size:.52rem; }
.palette-grid { display:grid;grid-template-columns:repeat(8,1fr);gap:7px; }
.palette-card { height:34px;padding:3px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:#151920;cursor:pointer; }
.palette-card i { display:block;width:100%;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--p1) 0 34%,var(--p2) 34% 67%,var(--p3) 67%); }
.palette-card.is-active { border-color:#fff;box-shadow:0 0 0 1px #fff inset; }

.select-pill-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:7px; }
.select-pill {
  min-height:58px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:#151920;color:#dce0e3;
  cursor:pointer;text-align:left;padding:8px 10px;font-size:1rem;
}
.select-pill small { display:block;margin-top:1px;color:#606974;font:600 .49rem/1.2 Inter,Arial,sans-serif; }
.select-pill.is-active { border-color:rgba(255,122,26,.5);background:rgba(255,122,26,.06); }
.font-editorial{font-family:Georgia,serif}.font-geometric{font-family:"Trebuchet MS",Arial,sans-serif}.font-elegant{font-family:"Times New Roman",serif;font-style:italic}.font-condensed{font-family:"Arial Narrow",Arial,sans-serif;font-stretch:condensed}.font-corporate{font-family:Arial,sans-serif}

.design-pair { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.lab-select {
  width:100%;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:#151920;color:#d7dade;
  padding:10px 11px;outline:none;font-size:.64rem;
}
.segmented { display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(255,255,255,.1);border-radius:9px;overflow:hidden; }
.segmented button { padding:9px 5px;border:0;border-right:1px solid rgba(255,255,255,.09);background:#151920;color:#656e79;font-size:.55rem;cursor:pointer; }
.segmented button:last-child{border-right:0}.segmented button.is-active{background:#f3f3ef;color:#111;font-weight:800}
.motion-segment { grid-template-columns:repeat(4,1fr); }

.feature-toggle-grid { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.feature-toggle { cursor:pointer; }
.feature-toggle input { position:absolute;opacity:0;pointer-events:none; }
.feature-toggle > span {
  min-height:86px;display:grid;grid-template-columns:32px 1fr;column-gap:9px;align-content:center;
  padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:11px;background:#13171d;transition:.18s ease;
}
.feature-toggle i { grid-row:span 2;width:30px;height:30px;border-radius:8px;background:#191e25;display:grid;place-items:center;color:#78818c;font-style:normal;font-weight:900;font-size:.7rem; }
.feature-toggle b { color:#d4d8dc;font-size:.61rem;align-self:end; }
.feature-toggle small { color:#5f6873;font-size:.49rem;line-height:1.3;align-self:start; }
.feature-toggle input:checked + span { border-color:rgba(255,122,26,.45);background:rgba(255,122,26,.06); }
.feature-toggle input:checked + span i { background:#ff7a1a;color:#111; }
.feature-toggle input:checked + span b { color:#fff; }

.pages-group { margin-top:20px; }
.page-chip-grid { display:flex;flex-wrap:wrap;gap:7px; }
.page-chip-grid label { cursor:pointer; }
.page-chip-grid input { position:absolute;opacity:0;pointer-events:none; }
.page-chip-grid span { display:block;padding:8px 10px;border:1px solid rgba(255,255,255,.1);border-radius:999px;color:#68717b;font-size:.55rem; }
.page-chip-grid input:checked + span { background:#f1f1ed;color:#111;border-color:#f1f1ed;font-weight:800; }
.page-chip-grid input:disabled + span { opacity:.75; }

.result-hero-card {
  display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
  padding:18px;border:1px solid rgba(255,122,26,.32);border-radius:14px;background:linear-gradient(135deg,rgba(255,122,26,.12),rgba(255,122,26,.03));
}
.result-hero-card > div:first-child > span { color:#ff9a54;font-size:.49rem;font-weight:900;letter-spacing:.14em; }
.result-hero-card > div:first-child > strong { display:block;margin:5px 0;color:#fff;font-size:1.45rem;letter-spacing:-.04em; }
.result-hero-card p { margin:0;color:#79828c;font-size:.57rem;line-height:1.45;max-width:240px; }
.result-score { width:82px;text-align:right; }
.result-score small { display:block;color:#626b75;font-size:.48rem; }
.result-score b { display:block;color:#fff;font-size:1.6rem;line-height:1.1; }
.result-score > i { display:block;width:100%;height:4px;margin-top:7px;border-radius:999px;background:#252b33;overflow:hidden; }
.result-score > i span { display:block;width:42%;height:100%;background:#ff7a1a;border-radius:inherit;transition:width .3s ease; }

.result-summary { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0; }
.result-summary > div { padding:11px;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:#13171d; }
.result-summary span { display:block;color:#59636e;font-size:.47rem;text-transform:uppercase;letter-spacing:.1em; }
.result-summary strong { display:block;margin-top:3px;color:#dfe2e5;font-size:.62rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }

.config-code { display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px;border:1px dashed rgba(255,255,255,.15);border-radius:10px; }
.config-code span { display:block;color:#59636e;font-size:.45rem;letter-spacing:.12em; }
.config-code strong { display:block;color:#ff9a54;font:800 .7rem/1.4 ui-monospace,monospace;letter-spacing:.08em; }
.config-code button { border:1px solid rgba(255,255,255,.1);border-radius:8px;background:#191e25;color:#a3aab2;padding:8px 9px;font-size:.52rem;cursor:pointer; }
.config-code button:hover { color:#fff;border-color:#3c4651; }

.result-actions { display:grid;gap:8px;margin-top:15px; }
.lab-secondary-btn { border-color:rgba(255,255,255,.12);background:transparent;color:#8b939d; }
.result-footnote { margin:12px 0 0;color:#535d68;font-size:.48rem;line-height:1.45; }

.lab-step-footer {
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:13px 18px;
  border-top:1px solid rgba(255,255,255,.09);background:#0e1116;
}
.lab-step-footer > span { color:#59626d;font-size:.53rem; }
.lab-step-footer > span b { color:#c7ccd1; }
.lab-nav-btn {
  justify-self:start;border:0;background:transparent;color:#68717c;padding:7px 4px;cursor:pointer;font-size:.58rem;font-weight:750;
}
.lab-nav-btn:disabled { opacity:.2;cursor:not-allowed; }
.lab-nav-next { justify-self:end;color:#ff8b39; }

/* Preview column */
.lab-preview-column { min-width:0;display:flex;flex-direction:column;background:#0a0d11; }
.preview-toolbar {
  height:56px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:0 20px;border-bottom:1px solid rgba(255,255,255,.09);
}
.preview-status { display:flex;align-items:center;gap:7px;color:#8b939d;font-size:.56rem; }
.preview-status i { width:6px;height:6px;border-radius:50%;background:#63df83;box-shadow:0 0 0 4px rgba(99,223,131,.07); }
.device-switcher { display:flex;border:1px solid rgba(255,255,255,.1);border-radius:9px;overflow:hidden; }
.device-switcher button { width:36px;height:28px;border:0;border-right:1px solid rgba(255,255,255,.08);background:#11151a;color:#5f6873;cursor:pointer;font-size:.72rem; }
.device-switcher button:last-child{border-right:0}.device-switcher button.is-active{background:#f2f2ee;color:#111}
.preview-config-mini { justify-self:end;max-width:220px;color:#545d68;font-size:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }

.preview-canvas {
  flex:1;min-height:0;display:grid;place-items:center;padding:28px;
  background:
    radial-gradient(circle at 50% 45%,rgba(255,255,255,.045),transparent 50%),
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:auto,32px 32px,32px 32px;
  overflow:auto;
}
.preview-device-frame {
  width:min(100%, 850px);height:650px;transition:width .35s ease,height .35s ease;display:grid;place-items:center;
}
.preview-device-frame[data-device="tablet"] { width:min(100%, 630px);height:650px; }
.preview-device-frame[data-device="mobile"] { width:min(100%, 350px);height:650px; }

.builder-browser-v3 {
  --builder-accent:#ff7a1a;
  --builder-accent-2:#ffb36f;
  --builder-bg:#f4f0e9;
  --builder-ink:#111317;
  --builder-muted:#72767b;
  --builder-radius:18px;
  width:100%;height:100%;max-width:none;margin:0;
  display:flex;flex-direction:column;
  border:1px solid rgba(255,255,255,.12);border-radius:20px;
  background:var(--builder-bg);color:var(--builder-ink);
  overflow:hidden;box-shadow:0 35px 90px rgba(0,0,0,.35);
  transition:background .35s ease,color .35s ease,border-radius .3s ease;
}
.builder-browser-v3 .builder-bar { flex:0 0 41px; }
.builder-browser-v3 .builder-site {
  flex:1;min-height:0;overflow:auto;padding:22px 27px;background:var(--builder-bg);color:var(--builder-ink);
  transition:background .35s ease,color .35s ease;
  scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--builder-ink) 14%,transparent) transparent;
}
.builder-browser-v3 .builder-bar {
  background:color-mix(in srgb,var(--builder-bg) 90%,white 10%);
  border-color:color-mix(in srgb,var(--builder-ink) 10%,transparent);
}
.builder-browser-v3 .builder-bar p { color:color-mix(in srgb,var(--builder-ink) 48%,transparent); }
.builder-browser-v3 .builder-nav-v3 {
  position:relative;z-index:10;display:flex;align-items:center;gap:18px;padding:4px 1px 14px;
  color:color-mix(in srgb,var(--builder-ink) 54%,transparent);font-size:.53rem;
}
.builder-browser-v3 .builder-nav-v3 strong { margin-right:auto;color:var(--builder-ink);letter-spacing:.13em;font-size:.64rem; }
.builder-nav-links { display:flex;align-items:center;gap:16px; }
.builder-browser-v3 .builder-nav-v3 button {
  border:0;border-radius:999px;background:var(--builder-accent);color:#111;padding:8px 11px;font-size:.5rem;font-weight:850;
}
.builder-browser-v3 .builder-hero-v3 {
  min-height:340px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:27px;
  padding:30px 4px 25px;border-radius:var(--builder-radius);transition:.35s ease;
}
.builder-browser-v3 .builder-copy small { color:var(--builder-accent);font-size:.48rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase; }
.builder-browser-v3 .builder-copy h3 { margin:11px 0 12px;color:var(--builder-ink);font-size:clamp(2.2rem,3.9vw,4rem);line-height:.89;letter-spacing:-.06em; }
.builder-browser-v3 .builder-copy p { max-width:350px;color:color-mix(in srgb,var(--builder-ink) 58%,transparent);font-size:.66rem;line-height:1.65; }
.builder-browser-v3 .builder-buttons { display:flex;gap:7px;margin-top:18px;flex-wrap:wrap; }
.builder-browser-v3 .builder-buttons button { border:1px solid color-mix(in srgb,var(--builder-ink) 14%,transparent);border-radius:calc(var(--builder-radius) * .48);background:transparent;color:var(--builder-ink);padding:9px 10px;font-size:.51rem;font-weight:800; }
.builder-browser-v3 .builder-buttons button:first-child { background:var(--builder-accent);border-color:var(--builder-accent);color:#111; }
.builder-proof-mini { display:flex;flex-wrap:wrap;gap:8px 11px;margin-top:20px;color:color-mix(in srgb,var(--builder-ink) 43%,transparent);font-size:.45rem; }
.builder-browser-v3 .builder-visual { position:relative;min-height:275px; }
.builder-browser-v3 .builder-shape { border-color:color-mix(in srgb,var(--builder-accent) 48%,transparent); }
.builder-browser-v3 .shape-one { width:235px;height:235px;right:3%;top:6%; }
.builder-browser-v3 .shape-two { width:165px;height:165px;right:13%;top:19%; }
.builder-browser-v3 .builder-object {
  width:104px;height:104px;right:23%;top:29%;border-radius:calc(var(--builder-radius) * 1.45);
  background:var(--builder-accent);color:#111;box-shadow:0 22px 50px color-mix(in srgb,var(--builder-accent) 28%,transparent);
}
.builder-browser-v3 .builder-card {
  right:0;bottom:0;width:162px;padding:13px;border-radius:calc(var(--builder-radius) * .7);
  background:color-mix(in srgb,var(--builder-bg) 88%,white 12%);
  color:var(--builder-ink);border-color:color-mix(in srgb,var(--builder-ink) 10%,transparent);
}
.builder-browser-v3 .builder-card span { color:var(--builder-accent); }
.builder-browser-v3 .builder-card small { color:color-mix(in srgb,var(--builder-ink) 50%,transparent); }
.builder-footerline-v3 {
  margin-top:15px;padding-top:13px;border-color:color-mix(in srgb,var(--builder-ink) 10%,transparent);
  color:color-mix(in srgb,var(--builder-ink) 42%,transparent);
}
.builder-footerline-v3 i { background:color-mix(in srgb,var(--builder-ink) 14%,transparent); }
.builder-footerline-v3 i:first-child { background:var(--builder-accent); }

.preview-dynamic-sections { display:grid;gap:10px;margin-top:2px; }
.preview-module {
  position:relative;overflow:hidden;padding:15px;border:1px solid color-mix(in srgb,var(--builder-ink) 10%,transparent);
  border-radius:var(--builder-radius);background:color-mix(in srgb,var(--builder-bg) 93%,var(--builder-ink) 7%);
}
.preview-module-head { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px; }
.preview-module-head span { color:var(--builder-accent);font-size:.44rem;font-weight:900;letter-spacing:.14em; }
.preview-module-head b { color:color-mix(in srgb,var(--builder-ink) 50%,transparent);font-size:.48rem; }
.module-cards { display:grid;grid-template-columns:repeat(3,1fr);gap:7px; }
.module-cards i { display:block;height:56px;border-radius:calc(var(--builder-radius) * .55);background:color-mix(in srgb,var(--builder-ink) 8%,transparent); }
.module-cards i:nth-child(2){background:color-mix(in srgb,var(--builder-accent) 13%,transparent)}
.module-review { display:grid;grid-template-columns:1fr auto;align-items:center;gap:15px; }
.module-review strong { display:block;font-size:.72rem;margin-bottom:4px; }
.module-review p { margin:0;color:color-mix(in srgb,var(--builder-ink) 48%,transparent);font-size:.5rem; }
.module-stars { color:var(--builder-accent);letter-spacing:.12em;font-size:.6rem; }
.module-list { display:grid;grid-template-columns:repeat(3,1fr);gap:7px; }
.module-list span { display:block;padding:9px;border:1px solid color-mix(in srgb,var(--builder-ink) 9%,transparent);border-radius:calc(var(--builder-radius) * .45);font-size:.48rem;color:color-mix(in srgb,var(--builder-ink) 55%,transparent); }
.module-map { min-height:72px;background:
  linear-gradient(25deg,transparent 48%,color-mix(in srgb,var(--builder-ink) 8%,transparent) 49% 52%,transparent 53%),
  linear-gradient(-20deg,transparent 42%,color-mix(in srgb,var(--builder-ink) 8%,transparent) 43% 46%,transparent 47%),
  color-mix(in srgb,var(--builder-accent) 5%,var(--builder-bg));
}
.module-map::after { content:"";position:absolute;width:20px;height:20px;border-radius:50% 50% 50% 0;background:var(--builder-accent);left:57%;top:42%;transform:rotate(-45deg); }
.module-faq span { display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid color-mix(in srgb,var(--builder-ink) 9%,transparent);font-size:.48rem; }
.module-faq span:last-child{border-bottom:0}.module-faq b{color:var(--builder-accent)}

.preview-bottom-bar {
  min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 20px;border-top:1px solid rgba(255,255,255,.09);
  color:#515b66;font-size:.5rem;
}
.preview-bottom-bar > div { display:flex;gap:8px; }
.preview-bottom-bar > div span { padding:5px 7px;border:1px solid rgba(255,255,255,.08);border-radius:999px; }

/* Preview nav variants */
.builder-browser-v3[data-nav="floating"] .builder-nav-v3 {
  margin:3px 0 5px;padding:9px 11px;border:1px solid color-mix(in srgb,var(--builder-ink) 10%,transparent);
  border-radius:999px;background:color-mix(in srgb,var(--builder-bg) 88%,transparent);
}
.builder-browser-v3[data-nav="minimal"] .builder-nav-links { display:none; }
.builder-browser-v3[data-nav="minimal"] .builder-nav-v3 button { background:transparent;color:var(--builder-ink);border:1px solid color-mix(in srgb,var(--builder-ink) 14%,transparent); }
.builder-browser-v3[data-nav="centered"] .builder-nav-v3 { display:grid;grid-template-columns:1fr auto 1fr; }
.builder-browser-v3[data-nav="centered"] .builder-nav-v3 strong { grid-column:2;margin:0; }
.builder-browser-v3[data-nav="centered"] .builder-nav-links { grid-row:2;grid-column:1/4;justify-self:center;margin-top:6px; }
.builder-browser-v3[data-nav="centered"] .builder-nav-v3 button { position:absolute;right:0;top:4px; }

/* Preview hero variants */
.builder-browser-v3[data-hero="centered"] .builder-hero-v3 { grid-template-columns:1fr;text-align:center;min-height:370px;padding-top:42px; }
.builder-browser-v3[data-hero="centered"] .builder-copy { max-width:570px;margin:auto; }
.builder-browser-v3[data-hero="centered"] .builder-copy p { margin-left:auto;margin-right:auto; }
.builder-browser-v3[data-hero="centered"] .builder-buttons,.builder-browser-v3[data-hero="centered"] .builder-proof-mini { justify-content:center; }
.builder-browser-v3[data-hero="centered"] .builder-visual { min-height:155px; }
.builder-browser-v3[data-hero="centered"] .builder-shape { display:none; }
.builder-browser-v3[data-hero="centered"] .builder-object { width:76px;height:76px;right:calc(50% - 38px);top:10px;font-size:1.8rem;border-radius:calc(var(--builder-radius) * 1.1); }
.builder-browser-v3[data-hero="centered"] .builder-card { right:calc(50% - 81px);bottom:-5px; }

.builder-browser-v3[data-hero="fullscreen"] .builder-hero-v3 { min-height:430px;grid-template-columns:1fr;padding:42px 15px;align-content:center; }
.builder-browser-v3[data-hero="fullscreen"] .builder-copy { position:relative;z-index:3;max-width:88%; }
.builder-browser-v3[data-hero="fullscreen"] .builder-copy h3 { font-size:clamp(3rem,6vw,6.2rem);max-width:700px; }
.builder-browser-v3[data-hero="fullscreen"] .builder-visual { position:absolute;right:5%;width:45%;height:320px;opacity:.55; }
.builder-browser-v3[data-hero="fullscreen"] .builder-card { display:none; }

.builder-browser-v3[data-hero="editorial"] .builder-hero-v3 { grid-template-columns:.75fr 1.25fr;align-items:stretch;padding-top:26px; }
.builder-browser-v3[data-hero="editorial"] .builder-copy h3 { font-family:Georgia,serif;font-weight:500;letter-spacing:-.045em; }
.builder-browser-v3[data-hero="editorial"] .builder-visual { min-height:335px;background:color-mix(in srgb,var(--builder-ink) 9%,transparent);border-radius:0 0 0 38%;overflow:hidden; }
.builder-browser-v3[data-hero="editorial"] .builder-object { width:140px;height:190px;border-radius:80px 80px 0 0;right:18%;top:80px;transform:none; }
.builder-browser-v3[data-hero="editorial"] .builder-card { left:-32px;right:auto;bottom:14px; }

.builder-browser-v3[data-hero="product"] .builder-hero-v3 { grid-template-columns:.9fr 1.1fr; }
.builder-browser-v3[data-hero="product"] .builder-visual { background:color-mix(in srgb,var(--builder-accent) 7%,transparent);border-radius:var(--builder-radius); }
.builder-browser-v3[data-hero="product"] .builder-object { width:150px;height:190px;right:25%;top:38px;border-radius:calc(var(--builder-radius) * 1.1);transform:rotate(-6deg); }
.builder-browser-v3[data-hero="product"] .shape-one { width:260px;height:260px;right:7%;top:7%; }

/* Preview style variants */
.builder-browser-v3[data-style="luxury"] {
  --builder-bg:#11100e;--builder-ink:#f2e8d8;--builder-muted:#8b8175;
}
.builder-browser-v3[data-style="luxury"] .builder-site {
  background:radial-gradient(circle at 80% 26%,color-mix(in srgb,var(--builder-accent) 11%,transparent),transparent 34%),var(--builder-bg);
}
.builder-browser-v3[data-style="luxury"] .builder-nav-v3 strong,
.builder-browser-v3[data-style="luxury"] .builder-copy h3 { font-family:Georgia,serif;font-weight:500; }
.builder-browser-v3[data-style="luxury"] .builder-object { border-radius:50%;box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--accent) 15%,transparent),0 22px 50px color-mix(in srgb,var(--builder-accent) 24%,transparent); }

.builder-browser-v3[data-style="bold"] { --builder-bg:#e7ff3d;--builder-ink:#111; }
.builder-browser-v3[data-style="bold"] .builder-site {
  background-image:linear-gradient(rgba(0,0,0,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.07) 1px,transparent 1px);
  background-size:30px 30px;
}
.builder-browser-v3[data-style="bold"] .builder-copy h3 { font-weight:950;letter-spacing:-.075em;text-transform:uppercase; }
.builder-browser-v3[data-style="bold"] .builder-object { border-radius:50%;background:#111;color:var(--builder-accent); }
.builder-browser-v3[data-style="bold"] .builder-buttons button:first-child,.builder-browser-v3[data-style="bold"] .builder-nav-v3 button { background:#111;color:#fff;border-color:#111; }

.builder-browser-v3[data-style="editorial"] { --builder-bg:#ece7dc;--builder-ink:#1c1a18; }
.builder-browser-v3[data-style="editorial"] .builder-copy h3 { font-family:Georgia,serif;font-weight:500; }
.builder-browser-v3[data-style="editorial"] .builder-nav-v3 strong { font-family:Georgia,serif;font-size:.78rem; }
.builder-browser-v3[data-style="editorial"] .builder-object { border-radius:100px 100px 0 0;transform:none; }

.builder-browser-v3[data-style="tech"] { --builder-bg:#0b1118;--builder-ink:#e8f1f8; }
.builder-browser-v3[data-style="tech"] .builder-site {
  background-image:linear-gradient(rgba(100,177,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(100,177,255,.07) 1px,transparent 1px);
  background-size:24px 24px;
}
.builder-browser-v3[data-style="tech"] .builder-copy h3 { letter-spacing:-.045em; }
.builder-browser-v3[data-style="tech"] .builder-object { border-radius:18px;transform:rotate(45deg); }
.builder-browser-v3[data-style="tech"] .builder-object::first-letter { transform:rotate(-45deg); }

.builder-browser-v3[data-style="corporate"] { --builder-bg:#f0f5f9;--builder-ink:#173047; }
.builder-browser-v3[data-style="corporate"] .builder-copy h3 { letter-spacing:-.045em; }
.builder-browser-v3[data-style="corporate"] .builder-object { border-radius:16px;transform:none; }

.builder-browser-v3[data-style="warm"] { --builder-bg:#f1e6db;--builder-ink:#44372f; }
.builder-browser-v3[data-style="warm"] .builder-copy h3 { font-family:Georgia,serif;font-weight:500; }
.builder-browser-v3[data-style="warm"] .builder-object { border-radius:50% 50% 18px 50%; }
.builder-browser-v3[data-style="warm"] .builder-card { box-shadow:0 16px 38px rgba(72,52,40,.12); }

.builder-browser-v3[data-style="brutalist"] { --builder-bg:#fff;--builder-ink:#111;--builder-radius:0px; }
.builder-browser-v3[data-style="brutalist"] { border-radius:0;box-shadow:14px 14px 0 #ff7a1a; }
.builder-browser-v3[data-style="brutalist"] .builder-site { border-top:2px solid #111; }
.builder-browser-v3[data-style="brutalist"] .builder-copy h3 { font-weight:950;text-transform:uppercase;letter-spacing:-.07em; }
.builder-browser-v3[data-style="brutalist"] .builder-object { border:2px solid #111;box-shadow:10px 10px 0 #111;transform:rotate(3deg); }
.builder-browser-v3[data-style="brutalist"] .preview-module { border-width:2px; }

/* Typography */
.builder-browser-v3[data-font="modern"] { font-family:Inter,Arial,sans-serif; }
.builder-browser-v3[data-font="editorial"] .builder-copy h3,.builder-browser-v3[data-font="editorial"] .builder-nav-v3 strong { font-family:Georgia,serif; }
.builder-browser-v3[data-font="geometric"] { font-family:"Trebuchet MS",Arial,sans-serif; }
.builder-browser-v3[data-font="elegant"] .builder-copy h3,.builder-browser-v3[data-font="elegant"] .builder-nav-v3 strong { font-family:"Times New Roman",serif;font-weight:500;font-style:italic; }
.builder-browser-v3[data-font="condensed"] .builder-copy h3 { font-family:"Arial Narrow",Arial,sans-serif;font-stretch:condensed;font-weight:900;text-transform:uppercase; }
.builder-browser-v3[data-font="business"] { font-family:Arial,sans-serif; }

/* Radius */
.builder-browser-v3[data-radius="sharp"] { --builder-radius:2px; }
.builder-browser-v3[data-radius="round"] { --builder-radius:30px; }

/* Preview mode */
.builder-browser-v3[data-mode="dark"]:not([data-style="luxury"]):not([data-style="tech"]) {
  --builder-bg:#0e1115!important;--builder-ink:#f2f4f5!important;
}

/* Motion */
.builder-browser-v3[data-motion="none"] * { animation:none!important;transition:none!important; }
.builder-browser-v3[data-motion="subtle"] .builder-object { animation:labPreviewFloat 6s ease-in-out infinite; }
.builder-browser-v3[data-motion="smooth"] .builder-object { animation:labPreviewFloat 4.8s ease-in-out infinite; }
.builder-browser-v3[data-motion="smooth"] .shape-two { animation:spin 20s linear infinite; }
.builder-browser-v3[data-motion="dynamic"] .builder-object { animation:labPreviewFloatDynamic 2.7s ease-in-out infinite; }
.builder-browser-v3[data-motion="dynamic"] .shape-one { animation:labPulse 3s ease-in-out infinite; }
.builder-browser-v3[data-motion="dynamic"] .shape-two { animation:spin 8s linear infinite; }
@keyframes labPreviewFloat{0%,100%{transform:translateY(0) rotate(10deg)}50%{transform:translateY(-9px) rotate(13deg)}}
@keyframes labPreviewFloatDynamic{0%,100%{transform:translateY(0) rotate(8deg) scale(1)}50%{transform:translateY(-14px) rotate(15deg) scale(1.04)}}
@keyframes labPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}

/* Devices */
.preview-device-frame[data-device="tablet"] .builder-browser-v3 .builder-site { padding:20px 20px; }
.preview-device-frame[data-device="tablet"] .builder-browser-v3 .builder-nav-links { gap:10px; }
.preview-device-frame[data-device="tablet"] .builder-browser-v3 .builder-hero-v3 { gap:14px; }
.preview-device-frame[data-device="tablet"] .builder-browser-v3 .builder-copy h3 { font-size:2.8rem; }
.preview-device-frame[data-device="tablet"] .builder-browser-v3 .shape-one { width:190px;height:190px; }
.preview-device-frame[data-device="tablet"] .builder-browser-v3 .shape-two { width:130px;height:130px; }
.preview-device-frame[data-device="tablet"] .module-cards { grid-template-columns:repeat(2,1fr); }

.preview-device-frame[data-device="mobile"] .builder-browser-v3 { border-radius:25px; }
.preview-device-frame[data-device="mobile"] .builder-browser-v3 .builder-site { padding:16px 14px; }
.preview-device-frame[data-device="mobile"] .builder-browser-v3 .builder-bar { grid-template-columns:52px 1fr 22px; }
.preview-device-frame[data-device="mobile"] .builder-browser-v3 .builder-nav-v3 { padding-bottom:11px; }
.preview-device-frame[data-device="mobile"] .builder-browser-v3 .builder-nav-links { display:none; }
.preview-device-frame[data-device="mobile"] .builder-browser-v3 .builder-nav-v3 button { font-size:.45rem;padding:7px 8px; }
.preview-device-frame[data-device="mobile"] .builder-browser-v3 .builder-hero-v3,
.preview-device-frame[data-device="mobile"] .builder-browser-v3[data-hero="editorial"] .builder-hero-v3,
.preview-device-frame[data-device="mobile"] .builder-browser-v3[data-hero="product"] .builder-hero-v3 {
  min-height:420px;grid-template-columns:1fr;text-align:left;padding:25px 2px 18px;
}
.preview-device-frame[data-device="mobile"] .builder-browser-v3 .builder-copy { max-width:none;margin:0; }
.preview-device-frame[data-device="mobile"] .builder-browser-v3 .builder-copy h3 { font-size:2.75rem; }
.preview-device-frame[data-device="mobile"] .builder-browser-v3 .builder-copy p { font-size:.61rem; }
.preview-device-frame[data-device="mobile"] .builder-browser-v3 .builder-buttons,.preview-device-frame[data-device="mobile"] .builder-browser-v3 .builder-proof-mini { justify-content:flex-start; }
.preview-device-frame[data-device="mobile"] .builder-browser-v3 .builder-visual { min-height:175px;position:relative;width:100%;height:auto;opacity:1; }
.preview-device-frame[data-device="mobile"] .builder-browser-v3 .builder-shape { display:block; }
.preview-device-frame[data-device="mobile"] .builder-browser-v3 .shape-one { width:155px;height:155px;right:10%;top:5px; }
.preview-device-frame[data-device="mobile"] .builder-browser-v3 .shape-two { width:105px;height:105px;right:19%;top:30px; }
.preview-device-frame[data-device="mobile"] .builder-browser-v3 .builder-object { width:70px;height:70px;right:31%;top:49px;font-size:1.7rem;border-radius:calc(var(--builder-radius) * 1.2); }
.preview-device-frame[data-device="mobile"] .builder-browser-v3 .builder-card { width:135px;right:3%;bottom:4px;left:auto;padding:10px; }
.preview-device-frame[data-device="mobile"] .preview-module { padding:11px; }
.preview-device-frame[data-device="mobile"] .module-cards,.preview-device-frame[data-device="mobile"] .module-list { grid-template-columns:1fr 1fr; }
.preview-device-frame[data-device="mobile"] .module-cards i:nth-child(3),.preview-device-frame[data-device="mobile"] .module-list span:nth-child(3) { display:none; }
.preview-device-frame[data-device="mobile"] .builder-browser-v3[data-nav="centered"] .builder-nav-v3 { display:flex; }
.preview-device-frame[data-device="mobile"] .builder-browser-v3[data-nav="centered"] .builder-nav-v3 strong { margin-right:auto; }
.preview-device-frame[data-device="mobile"] .builder-browser-v3[data-nav="centered"] .builder-nav-v3 button { position:static; }

@media(max-width:1120px){
  .lab-shell{grid-template-columns:370px minmax(0,1fr)}
  .industry-grid{grid-template-columns:repeat(2,1fr)}
  .palette-grid{grid-template-columns:repeat(4,1fr)}
  .preview-canvas{padding:18px}
  .preview-device-frame{height:620px}
}
@media(max-width:900px){
  .lab-shell{grid-template-columns:1fr;min-height:0}
  .lab-panel{border-right:0;border-bottom:1px solid rgba(255,255,255,.1)}
  .lab-step-viewport{max-height:none;overflow:visible}
  .lab-preview-column{min-height:720px}
  .preview-device-frame{height:610px}
  .preview-toolbar{grid-template-columns:1fr auto}.preview-config-mini{display:none}
}
@media(max-width:620px){
  .lab-v3 .lab-heading h2{font-size:3.35rem}
  .lab-trustline{display:grid}
  .lab-panel-top{padding:17px 16px}
  .lab-progress{padding:0 7px}.lab-progress-step b{display:none}.lab-progress-step{padding:11px 0}.lab-progress-step span{font-size:.54rem}
  .lab-step-pane{padding:20px 16px}
  .industry-grid{grid-template-columns:repeat(2,1fr)}
  .style-grid-v3{grid-template-columns:1fr 1fr}
  .feature-toggle-grid{grid-template-columns:1fr}
  .design-pair{grid-template-columns:1fr}
  .select-pill-grid{grid-template-columns:repeat(2,1fr)}
  .palette-grid{grid-template-columns:repeat(4,1fr)}
  .result-summary{grid-template-columns:1fr}
  .preview-toolbar{height:auto;min-height:58px;padding:10px 12px;grid-template-columns:1fr auto}.preview-status span{display:none}
  .preview-canvas{padding:10px}
  .preview-device-frame[data-device="desktop"],.preview-device-frame[data-device="tablet"]{width:100%;height:590px}
  .preview-device-frame[data-device="mobile"]{width:min(100%,350px);height:590px}
  .preview-bottom-bar{padding:8px 12px;align-items:flex-start;flex-direction:column}.preview-bottom-bar>div{width:100%}
}


/* ============================================================
   WEB LAB V4 — real design systems + visible feature modules
   ============================================================ */
.preview-utility-layer {
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:25;
}
.builder-browser-v3 .builder-site { position:relative; }

/* Utility components */
.preview-whatsapp {
  position:absolute;
  right:16px;
  top:365px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 11px 8px 8px;
  border-radius:999px;
  background:#25d366;
  color:#072b15;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  font-family:Inter,Arial,sans-serif;
}
.preview-whatsapp .wa-mark {
  width:27px;height:27px;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:#1faa52;font-size:.75rem;font-weight:950;
}
.preview-whatsapp b { display:block;font-size:.54rem;line-height:1.1; }
.preview-whatsapp small { display:block;margin-top:1px;font-size:.39rem;opacity:.7; }

.preview-search-pop {
  position:absolute;top:58px;left:50%;transform:translateX(-50%);
  width:min(42%,230px);height:31px;padding:0 9px;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:7px;
  border:1px solid color-mix(in srgb,var(--builder-ink) 12%,transparent);
  border-radius:999px;background:color-mix(in srgb,var(--builder-bg) 92%,white 8%);
  color:color-mix(in srgb,var(--builder-ink) 55%,transparent);
  box-shadow:0 8px 22px rgba(0,0,0,.08);
  font-family:Inter,Arial,sans-serif;
}
.preview-search-pop span { color:var(--builder-accent);font-size:.72rem; }
.preview-search-pop b { font-size:.48rem;font-weight:650; }
.preview-search-pop kbd { border:1px solid color-mix(in srgb,var(--builder-ink) 10%,transparent);border-radius:4px;padding:2px 4px;font-size:.38rem; }

.preview-cart-chip {
  position:absolute;right:17px;top:57px;width:34px;height:29px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;gap:3px;
  background:var(--builder-ink);color:var(--builder-bg);box-shadow:0 8px 18px rgba(0,0,0,.12);
  font:800 .5rem/1 Inter,Arial,sans-serif;
}
.preview-cart-chip span { font-size:.72rem; }

.preview-booking-chip {
  position:absolute;right:17px;top:96px;padding:7px 9px;border-radius:999px;
  background:var(--builder-accent);color:#111;display:flex;align-items:center;gap:5px;
  font:800 .46rem/1 Inter,Arial,sans-serif;box-shadow:0 8px 20px color-mix(in srgb,var(--builder-accent) 22%,transparent);
}

/* More complete preview modules */
.module-eyebrow { display:block;color:var(--builder-accent);font-size:.42rem;font-weight:900;letter-spacing:.14em;margin-bottom:5px; }
.module-project-grid,.module-products {
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
.module-project-grid article,.module-products article {
  min-width:0;
  border-radius:calc(var(--builder-radius) * .65);
  overflow:hidden;
}
.module-project-grid i,.module-products i {
  display:block;height:72px;border-radius:inherit;
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--builder-accent) 25%,transparent),transparent),
    color-mix(in srgb,var(--builder-ink) 8%,var(--builder-bg));
}
.module-project-grid article:nth-child(2) i,.module-products article:nth-child(2) i { background:linear-gradient(35deg,color-mix(in srgb,var(--builder-accent) 8%,var(--builder-bg)),color-mix(in srgb,var(--builder-ink) 18%,var(--builder-bg))); }
.module-project-grid article:nth-child(3) i,.module-products article:nth-child(3) i { background:radial-gradient(circle at 70% 30%,var(--builder-accent),color-mix(in srgb,var(--builder-ink) 10%,var(--builder-bg)) 38%,var(--builder-bg) 39%); }
.module-project-grid strong,.module-project-grid small { display:block; }
.module-project-grid strong { margin-top:7px;font-size:.52rem; }
.module-project-grid small { margin-top:2px;color:color-mix(in srgb,var(--builder-ink) 44%,transparent);font-size:.4rem; }

.module-products article {
  position:relative;padding-bottom:4px;
}
.module-products article > div { padding:7px 1px 0; }
.module-products strong,.module-products small { display:block; }
.module-products strong { font-size:.51rem; }
.module-products small { color:color-mix(in srgb,var(--builder-ink) 46%,transparent);font-size:.4rem;margin-top:2px; }
.module-products article > b {
  position:absolute;right:6px;top:56px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;background:var(--builder-accent);color:#111;font-size:.7rem;
}

.module-review-v4 { grid-template-columns:1fr auto; }
.module-review-v4 strong { font-size:.76rem; }
.module-review-side { text-align:right; }
.module-review-side small { display:block;color:color-mix(in srgb,var(--builder-ink) 40%,transparent);font-size:.4rem;margin-top:3px; }

.booking-layout { display:grid;grid-template-columns:1.15fr .85fr;gap:10px; }
.booking-calendar { display:grid;grid-template-columns:repeat(4,1fr);gap:5px; }
.booking-calendar > div {
  min-height:56px;border:1px solid color-mix(in srgb,var(--builder-ink) 10%,transparent);
  border-radius:calc(var(--builder-radius) * .48);display:grid;place-items:center;align-content:center;gap:3px;
}
.booking-calendar b { color:color-mix(in srgb,var(--builder-ink) 42%,transparent);font-size:.37rem; }
.booking-calendar span { font-size:.62rem;font-weight:850; }
.booking-calendar .is-selected { background:var(--builder-accent);color:#111;border-color:var(--builder-accent); }
.booking-calendar .is-selected b { color:rgba(0,0,0,.55); }
.booking-slots { display:grid;grid-template-columns:1fr;gap:4px; }
.booking-slots button { border:1px solid color-mix(in srgb,var(--builder-ink) 11%,transparent);border-radius:calc(var(--builder-radius) * .4);background:transparent;color:var(--builder-ink);font-size:.44rem; }

.gallery-mosaic { display:grid;grid-template-columns:1.2fr .8fr .8fr;grid-template-rows:50px 50px;gap:5px; }
.gallery-mosaic i { display:block;border-radius:calc(var(--builder-radius) * .5);background:color-mix(in srgb,var(--builder-ink) 10%,var(--builder-bg)); }
.gallery-mosaic i:first-child { grid-row:span 2;background:linear-gradient(135deg,color-mix(in srgb,var(--builder-accent) 25%,var(--builder-bg)),color-mix(in srgb,var(--builder-ink) 14%,var(--builder-bg))); }
.gallery-mosaic i:nth-child(3) { background:var(--builder-accent);opacity:.7; }

.module-map-v4 {
  position:relative;min-height:115px;border-radius:calc(var(--builder-radius) * .6);overflow:hidden;
  background:color-mix(in srgb,var(--builder-accent) 7%,var(--builder-bg));
}
.module-map-v4 .road { position:absolute;display:block;background:color-mix(in srgb,var(--builder-bg) 85%,white 15%);border:1px solid color-mix(in srgb,var(--builder-ink) 6%,transparent); }
.module-map-v4 .r1 { width:130%;height:15px;left:-15%;top:48%;transform:rotate(12deg); }
.module-map-v4 .r2 { width:14px;height:140%;left:48%;top:-20%;transform:rotate(-18deg); }
.module-map-v4 .r3 { width:90%;height:11px;left:8%;top:24%;transform:rotate(-24deg); }
.map-pin {
  position:absolute;left:58%;top:44%;width:24px;height:24px;border-radius:50% 50% 50% 0;
  background:var(--builder-accent);color:#111;display:grid;place-items:center;transform:rotate(-45deg);font-size:.4rem;
}
.map-pin::first-letter { transform:rotate(45deg); }
.map-card {
  position:absolute;left:9px;bottom:8px;padding:7px 9px;border-radius:calc(var(--builder-radius) * .45);
  background:color-mix(in srgb,var(--builder-bg) 91%,white 9%);border:1px solid color-mix(in srgb,var(--builder-ink) 9%,transparent);box-shadow:0 8px 20px rgba(0,0,0,.07);
}
.map-card strong,.map-card small { display:block; }
.map-card strong { font-size:.47rem; }.map-card small{font-size:.37rem;color:color-mix(in srgb,var(--builder-ink) 45%,transparent);margin-top:2px;}

.blog-row { display:grid;gap:0;border-top:1px solid color-mix(in srgb,var(--builder-ink) 9%,transparent); }
.blog-row article { display:grid;grid-template-columns:24px 1fr auto;gap:7px;align-items:center;padding:8px 0;border-bottom:1px solid color-mix(in srgb,var(--builder-ink) 9%,transparent); }
.blog-row span { color:var(--builder-accent);font:700 .38rem/1 ui-monospace,monospace; }
.blog-row strong { font-size:.49rem; }
.blog-row small { color:color-mix(in srgb,var(--builder-ink) 42%,transparent);font-size:.37rem; }

.module-newsletter { display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:15px; }
.module-newsletter strong { display:block;font-size:.74rem; }
.module-newsletter p { margin:3px 0 0;color:color-mix(in srgb,var(--builder-ink) 48%,transparent);font-size:.44rem; }
.newsletter-field { height:34px;border:1px solid color-mix(in srgb,var(--builder-ink) 12%,transparent);border-radius:999px;display:flex;align-items:center;justify-content:space-between;padding-left:10px;overflow:hidden; }
.newsletter-field span { color:color-mix(in srgb,var(--builder-ink) 38%,transparent);font-size:.41rem; }
.newsletter-field button { width:35px;align-self:stretch;border:0;background:var(--builder-accent);color:#111; }

.module-contact-v4 { display:grid;grid-template-columns:.8fr 1.2fr;gap:16px;align-items:center; }
.contact-mini-copy strong { display:block;font-size:.76rem;line-height:1.05; }
.contact-mini-copy p { margin:5px 0 0;color:color-mix(in srgb,var(--builder-ink) 46%,transparent);font-size:.42rem; }
.contact-mini-form { display:grid;grid-template-columns:1fr 1fr;gap:5px; }
.contact-mini-form span { padding:8px;border:1px solid color-mix(in srgb,var(--builder-ink) 10%,transparent);border-radius:calc(var(--builder-radius) * .4);color:color-mix(in srgb,var(--builder-ink) 38%,transparent);font-size:.38rem; }
.contact-mini-form .wide { grid-column:span 2; }
.contact-mini-form button { grid-column:span 2;border:0;border-radius:calc(var(--builder-radius) * .4);background:var(--builder-accent);color:#111;padding:8px;font-size:.43rem;font-weight:850; }

/* ------------------------------------------------------------
   Every STYLE below has its own layout language.
   ------------------------------------------------------------ */

/* MINIMAL — Swiss, restrained, spacious */
.builder-browser-v3[data-style="minimal"] .builder-site { padding:31px 34px; }
.builder-browser-v3[data-style="minimal"] .builder-nav-v3 {
  padding-bottom:24px;border-bottom:1px solid color-mix(in srgb,var(--builder-ink) 10%,transparent);
}
.builder-browser-v3[data-style="minimal"] .builder-nav-v3 strong { letter-spacing:.19em;font-size:.54rem; }
.builder-browser-v3[data-style="minimal"] .builder-hero-v3 { min-height:390px;gap:55px;padding:54px 0 48px; }
.builder-browser-v3[data-style="minimal"] .builder-copy { max-width:420px; }
.builder-browser-v3[data-style="minimal"] .builder-copy h3 { font-weight:620;letter-spacing:-.055em;line-height:.94; }
.builder-browser-v3[data-style="minimal"] .builder-copy small { letter-spacing:.24em; }
.builder-browser-v3[data-style="minimal"] .builder-object {
  width:120px;height:120px;border-radius:50%;background:transparent;color:var(--builder-accent);
  border:1px solid var(--builder-accent);box-shadow:none;transform:none;font-weight:500;
}
.builder-browser-v3[data-style="minimal"] .shape-one { width:245px;height:245px;border-color:color-mix(in srgb,var(--builder-ink) 13%,transparent); }
.builder-browser-v3[data-style="minimal"] .shape-two { display:none; }
.builder-browser-v3[data-style="minimal"] .builder-card {
  background:transparent;box-shadow:none;border:0;border-left:1px solid var(--builder-accent);border-radius:0;padding:8px 0 8px 11px;
}
.builder-browser-v3[data-style="minimal"] .builder-buttons button { border-radius:1px; }
.builder-browser-v3[data-style="minimal"] .builder-buttons button:first-child { color:#fff; }
.builder-browser-v3[data-style="minimal"] .preview-module {
  border:0;border-top:1px solid color-mix(in srgb,var(--builder-ink) 11%,transparent);border-radius:0;background:transparent;padding:20px 0;
}
.builder-browser-v3[data-style="minimal"] .preview-module-head span { letter-spacing:.2em; }

/* WARM — organic, human, soft, layered */
.builder-browser-v3[data-style="warm"] .builder-site {
  padding:25px 27px;
  background:
    radial-gradient(circle at 90% 18%,color-mix(in srgb,var(--builder-accent) 10%,transparent),transparent 24%),
    radial-gradient(circle at 8% 54%,rgba(170,107,71,.09),transparent 27%),
    var(--builder-bg);
}
.builder-browser-v3[data-style="warm"] .builder-nav-v3 {
  padding:9px 13px;margin-bottom:10px;border:0;border-radius:999px;background:rgba(255,255,255,.28);backdrop-filter:blur(8px);
}
.builder-browser-v3[data-style="warm"] .builder-nav-v3 strong { font-family:Georgia,serif;font-size:.7rem;letter-spacing:.04em; }
.builder-browser-v3[data-style="warm"] .builder-hero-v3 { min-height:430px;padding:48px 20px 28px; }
.builder-browser-v3[data-style="warm"] .builder-copy h3 {
  font-family:Georgia,serif;font-weight:500;letter-spacing:-.048em;line-height:.92;
}
.builder-browser-v3[data-style="warm"] .builder-copy small { letter-spacing:.12em; }
.builder-browser-v3[data-style="warm"] .builder-buttons button { border-radius:999px; }
.builder-browser-v3[data-style="warm"] .builder-visual { min-height:190px; }
.builder-browser-v3[data-style="warm"] .builder-object {
  width:118px;height:108px;right:28%;top:21px;
  border-radius:62% 38% 61% 39% / 42% 58% 42% 58%;
  transform:rotate(-8deg);box-shadow:0 18px 42px rgba(79,50,33,.15);
}
.builder-browser-v3[data-style="warm"] .shape-one {
  width:210px;height:170px;border:0;background:color-mix(in srgb,var(--builder-accent) 12%,transparent);
  border-radius:58% 42% 36% 64% / 55% 58% 42% 45%;right:10%;top:5px;
}
.builder-browser-v3[data-style="warm"] .shape-two { display:none; }
.builder-browser-v3[data-style="warm"] .builder-card {
  width:175px;right:6%;bottom:5px;padding:14px;border:0;border-radius:28px 28px 28px 8px;background:rgba(255,255,255,.52);backdrop-filter:blur(8px);
}
.builder-browser-v3[data-style="warm"] .preview-module {
  border:0;border-radius:28px;background:rgba(255,255,255,.28);padding:19px;
}
.builder-browser-v3[data-style="warm"] .module-project-grid i,.builder-browser-v3[data-style="warm"] .module-products i { border-radius:25px 25px 8px 25px; }

/* LUXURY — dark editorial, fine rules, restrained gold/accent */
.builder-browser-v3[data-style="luxury"] .builder-site {
  padding:27px 31px;
  background:
    radial-gradient(circle at 78% 30%,color-mix(in srgb,var(--builder-accent) 10%,transparent),transparent 28%),
    var(--builder-bg);
}
.builder-browser-v3[data-style="luxury"] .builder-nav-v3 {
  border-bottom:1px solid color-mix(in srgb,var(--builder-accent) 25%,transparent);padding-bottom:16px;
}
.builder-browser-v3[data-style="luxury"] .builder-nav-v3 strong { font-family:Georgia,serif;font-size:.72rem;font-weight:400;letter-spacing:.2em; }
.builder-browser-v3[data-style="luxury"] .builder-nav-v3 button { background:transparent!important;color:var(--builder-accent)!important;border:1px solid color-mix(in srgb,var(--builder-accent) 55%,transparent)!important;border-radius:0; }
.builder-browser-v3[data-style="luxury"] .builder-copy h3 { font-family:Georgia,serif;font-weight:400;font-size:clamp(2.5rem,4.4vw,4.7rem);line-height:.91; }
.builder-browser-v3[data-style="luxury"] .builder-copy small { letter-spacing:.28em; }
.builder-browser-v3[data-style="luxury"] .builder-buttons button { border-radius:0; }
.builder-browser-v3[data-style="luxury"] .builder-buttons button:first-child { background:transparent;color:var(--builder-accent);border:1px solid var(--builder-accent); }
.builder-browser-v3[data-style="luxury"] .builder-object {
  width:125px;height:125px;border-radius:50%;background:#0b0907;color:var(--builder-accent);
  border:7px double color-mix(in srgb,var(--builder-accent) 78%,#6c5128);box-shadow:0 0 0 1px color-mix(in srgb,var(--builder-accent) 25%,transparent),0 28px 60px rgba(0,0,0,.36);
}
.builder-browser-v3[data-style="luxury"] .builder-card { background:rgba(8,7,6,.72);border-color:color-mix(in srgb,var(--builder-accent) 25%,transparent);border-radius:0; }
.builder-browser-v3[data-style="luxury"] .preview-module { border-radius:0;background:rgba(255,255,255,.015);border-color:color-mix(in srgb,var(--builder-accent) 16%,transparent); }
.builder-browser-v3[data-style="luxury"] .preview-module-head { border-bottom:1px solid color-mix(in srgb,var(--builder-accent) 18%,transparent);padding-bottom:8px; }

/* BOLD — campaign graphics, heavy typography, hard blocks */
.builder-browser-v3[data-style="bold"] { border:2px solid #111; }
.builder-browser-v3[data-style="bold"] .builder-site {
  padding:22px 24px;background-image:
    linear-gradient(rgba(0,0,0,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.08) 1px,transparent 1px);
  background-size:30px 30px;
}
.builder-browser-v3[data-style="bold"] .builder-nav-v3 { border:2px solid #111;padding:9px 10px;background:var(--builder-bg); }
.builder-browser-v3[data-style="bold"] .builder-nav-v3 strong { font-size:.68rem;letter-spacing:0; }
.builder-browser-v3[data-style="bold"] .builder-hero-v3 { min-height:455px; }
.builder-browser-v3[data-style="bold"] .builder-copy h3 { font-size:clamp(3.4rem,6.8vw,7rem);line-height:.77; }
.builder-browser-v3[data-style="bold"] .builder-copy small { color:#111;letter-spacing:.05em;border:1px solid #111;padding:4px 5px;background:var(--builder-accent); }
.builder-browser-v3[data-style="bold"] .builder-buttons button { border:2px solid #111;border-radius:0;box-shadow:4px 4px 0 #111; }
.builder-browser-v3[data-style="bold"] .builder-object { width:150px;height:150px;border:2px solid #111;box-shadow:10px 10px 0 color-mix(in srgb,var(--builder-accent) 70%,#111); }
.builder-browser-v3[data-style="bold"] .builder-card { border:2px solid #111;border-radius:0;box-shadow:6px 6px 0 #111;background:var(--builder-bg); }
.builder-browser-v3[data-style="bold"] .preview-module { border:2px solid #111;border-radius:0;background:var(--builder-bg);box-shadow:5px 5px 0 #111; }

/* EDITORIAL — asymmetry, serif, art-book composition */
.builder-browser-v3[data-style="editorial"] .builder-site { padding:30px 31px; }
.builder-browser-v3[data-style="editorial"] .builder-nav-v3 { border-bottom:1px solid color-mix(in srgb,var(--builder-ink) 18%,transparent);padding-bottom:18px; }
.builder-browser-v3[data-style="editorial"] .builder-nav-v3 strong { font-family:Georgia,serif;font-size:.85rem;font-weight:400;letter-spacing:-.03em; }
.builder-browser-v3[data-style="editorial"] .builder-hero-v3 { min-height:420px;grid-template-columns:.7fr 1.3fr;gap:18px; }
.builder-browser-v3[data-style="editorial"] .builder-copy h3 { font-family:Georgia,serif;font-weight:400;line-height:.9; }
.builder-browser-v3[data-style="editorial"] .builder-visual { min-height:355px;border-radius:0;background:color-mix(in srgb,var(--builder-ink) 10%,var(--builder-bg));overflow:hidden; }
.builder-browser-v3[data-style="editorial"] .builder-object { width:150px;height:230px;right:18%;top:78px;border-radius:90px 90px 0 0;transform:none; }
.builder-browser-v3[data-style="editorial"] .builder-card { left:-35px;right:auto;bottom:16px;border-radius:0;background:var(--builder-bg); }
.builder-browser-v3[data-style="editorial"] .preview-module { border-radius:0;background:transparent;padding-left:0;padding-right:0; }
.builder-browser-v3[data-style="editorial"] .module-project-grid { grid-template-columns:1.4fr .8fr .8fr; }

/* TECH — grid, glow, interface chrome */
.builder-browser-v3[data-style="tech"] .builder-site {
  padding:24px 27px;background-image:
    radial-gradient(circle at 78% 25%,color-mix(in srgb,var(--builder-accent) 13%,transparent),transparent 28%),
    linear-gradient(rgba(100,177,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(100,177,255,.07) 1px,transparent 1px);
  background-size:auto,24px 24px,24px 24px;
}
.builder-browser-v3[data-style="tech"] .builder-nav-v3 {
  border:1px solid color-mix(in srgb,var(--builder-accent) 22%,transparent);border-radius:10px;padding:9px 11px;background:rgba(0,0,0,.16);
}
.builder-browser-v3[data-style="tech"] .builder-nav-v3 strong,.builder-browser-v3[data-style="tech"] .builder-copy small { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.builder-browser-v3[data-style="tech"] .builder-copy h3 { text-shadow:0 0 32px color-mix(in srgb,var(--builder-accent) 20%,transparent); }
.builder-browser-v3[data-style="tech"] .builder-object {
  border-radius:20px;transform:rotate(45deg);border:1px solid color-mix(in srgb,var(--builder-accent) 65%,transparent);
  background:color-mix(in srgb,var(--builder-accent) 18%,#07111a);color:var(--builder-accent);box-shadow:0 0 42px color-mix(in srgb,var(--builder-accent) 22%,transparent);
}
.builder-browser-v3[data-style="tech"] .builder-card { background:rgba(6,15,22,.73);backdrop-filter:blur(8px);border-color:color-mix(in srgb,var(--builder-accent) 24%,transparent); }
.builder-browser-v3[data-style="tech"] .preview-module { background:rgba(4,12,18,.45);border-color:color-mix(in srgb,var(--builder-accent) 18%,transparent);box-shadow:inset 0 0 28px rgba(0,0,0,.12); }

/* CORPORATE — disciplined grid, information clarity */
.builder-browser-v3[data-style="corporate"] .builder-site { padding:26px 30px; }
.builder-browser-v3[data-style="corporate"] .builder-nav-v3 { padding-bottom:14px;border-bottom:1px solid #c9d7e2; }
.builder-browser-v3[data-style="corporate"] .builder-nav-v3 strong { font-size:.62rem;letter-spacing:.08em; }
.builder-browser-v3[data-style="corporate"] .builder-hero-v3 {
  min-height:365px;border:1px solid #d4e0e8;padding:34px 31px;background:#fff;
}
.builder-browser-v3[data-style="corporate"] .builder-copy h3 { font-size:clamp(2.25rem,3.7vw,3.8rem);line-height:.95;letter-spacing:-.045em; }
.builder-browser-v3[data-style="corporate"] .builder-object {
  width:150px;height:115px;border-radius:8px;transform:none;background:#fff;border:1px solid #cbd9e3;color:var(--builder-accent);box-shadow:0 15px 30px rgba(22,49,73,.08);
}
.builder-browser-v3[data-style="corporate"] .builder-object::after {
  content:"";position:absolute;left:16px;right:16px;bottom:17px;height:32px;
  background:linear-gradient(to right,var(--builder-accent) 0 20%,transparent 20% 27%,color-mix(in srgb,var(--builder-accent) 55%,transparent) 27% 57%,transparent 57% 64%,#d3dee6 64%);
  clip-path:polygon(0 75%,20% 44%,35% 58%,54% 18%,70% 38%,100% 0,100% 100%,0 100%);
}
.builder-browser-v3[data-style="corporate"] .builder-card { border-radius:8px;background:#fff;box-shadow:0 12px 28px rgba(22,49,73,.08); }
.builder-browser-v3[data-style="corporate"] .preview-module { border-radius:10px;background:#fff;border-color:#d5e0e8; }

/* BRUTALIST — raw borders, zero polish, intentional collision */
.builder-browser-v3[data-style="brutalist"] { border:3px solid var(--builder-ink);border-radius:0;box-shadow:12px 12px 0 var(--builder-accent); }
.builder-browser-v3[data-style="brutalist"] .builder-bar { border-bottom:3px solid var(--builder-ink); }
.builder-browser-v3[data-style="brutalist"] .builder-site { padding:18px 19px; }
.builder-browser-v3[data-style="brutalist"] .builder-nav-v3 { border:3px solid var(--builder-ink);padding:8px;background:var(--builder-accent);color:#111; }
.builder-browser-v3[data-style="brutalist"] .builder-nav-v3 strong { color:#111;font-size:.72rem; }
.builder-browser-v3[data-style="brutalist"] .builder-hero-v3 { min-height:450px;border-bottom:3px solid var(--builder-ink); }
.builder-browser-v3[data-style="brutalist"] .builder-copy h3 { font-size:clamp(3.2rem,6.5vw,6.8rem);line-height:.78; }
.builder-browser-v3[data-style="brutalist"] .builder-copy p { max-width:290px;border-left:6px solid var(--builder-accent);padding-left:9px; }
.builder-browser-v3[data-style="brutalist"] .builder-buttons button { border:3px solid var(--builder-ink);border-radius:0;box-shadow:5px 5px 0 var(--builder-ink); }
.builder-browser-v3[data-style="brutalist"] .builder-object { border:3px solid var(--builder-ink);border-radius:0;box-shadow:11px 11px 0 var(--builder-ink); }
.builder-browser-v3[data-style="brutalist"] .builder-card { border:3px solid var(--builder-ink);border-radius:0;box-shadow:6px 6px 0 var(--builder-accent); }
.builder-browser-v3[data-style="brutalist"] .preview-module { border:3px solid var(--builder-ink);border-radius:0;background:var(--builder-bg);box-shadow:6px 6px 0 var(--builder-accent); }

/* Device adaptation for utilities/modules */
.preview-device-frame[data-device="tablet"] .preview-whatsapp { top:352px;right:12px; }
.preview-device-frame[data-device="mobile"] .preview-search-pop { top:50px;width:48%;left:47%; }
.preview-device-frame[data-device="mobile"] .preview-cart-chip { top:50px;right:10px; }
.preview-device-frame[data-device="mobile"] .preview-booking-chip { top:86px;right:10px; }
.preview-device-frame[data-device="mobile"] .preview-whatsapp {
  position:sticky;float:right;top:auto;bottom:12px;right:8px;width:38px;height:38px;padding:5px;border-radius:50%;z-index:50;
}
.preview-device-frame[data-device="mobile"] .preview-whatsapp > div { display:none; }
.preview-device-frame[data-device="mobile"] .preview-whatsapp .wa-mark { width:28px;height:28px; }
.preview-device-frame[data-device="mobile"] .module-project-grid,
.preview-device-frame[data-device="mobile"] .module-products { grid-template-columns:1fr 1fr; }
.preview-device-frame[data-device="mobile"] .module-project-grid article:nth-child(3),
.preview-device-frame[data-device="mobile"] .module-products article:nth-child(3) { display:none; }
.preview-device-frame[data-device="mobile"] .module-contact-v4,
.preview-device-frame[data-device="mobile"] .module-newsletter { grid-template-columns:1fr; }
.preview-device-frame[data-device="mobile"] .booking-layout { grid-template-columns:1fr; }
.preview-device-frame[data-device="mobile"] .booking-slots { grid-template-columns:repeat(3,1fr); }
.preview-device-frame[data-device="mobile"] .gallery-mosaic { grid-template-columns:1fr 1fr;grid-template-rows:60px 60px; }
.preview-device-frame[data-device="mobile"] .gallery-mosaic i:first-child { grid-row:span 2; }
.preview-device-frame[data-device="mobile"] .gallery-mosaic i:nth-child(5) { display:none; }
.preview-device-frame[data-device="mobile"] .blog-row article { grid-template-columns:20px 1fr; }
.preview-device-frame[data-device="mobile"] .blog-row small { display:none; }

/* Style + mobile sanity: preserve identities even on a narrow screen */
.preview-device-frame[data-device="mobile"] .builder-browser-v3[data-style="warm"] .builder-hero-v3 { text-align:center; }
.preview-device-frame[data-device="mobile"] .builder-browser-v3[data-style="warm"] .builder-buttons,
.preview-device-frame[data-device="mobile"] .builder-browser-v3[data-style="warm"] .builder-proof-mini { justify-content:center; }
.preview-device-frame[data-device="mobile"] .builder-browser-v3[data-style="editorial"] .builder-visual { min-height:195px; }
.preview-device-frame[data-device="mobile"] .builder-browser-v3[data-style="minimal"] .builder-site { padding:21px 19px; }
.preview-device-frame[data-device="mobile"] .builder-browser-v3[data-style="bold"] .builder-copy h3,
.preview-device-frame[data-device="mobile"] .builder-browser-v3[data-style="brutalist"] .builder-copy h3 { font-size:3.3rem; }


/* ============================================================
   V4.1 — additive page selection
   ============================================================ */
.preview-page-structure {
  margin: 2px 0 12px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb,var(--builder-ink) 9%,transparent);
  border-radius: calc(var(--builder-radius) * .55);
  background: color-mix(in srgb,var(--builder-bg) 95%,var(--builder-ink) 5%);
}
.page-structure-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:7px;
}
.page-structure-head span {
  color:var(--builder-accent);
  font-size:.4rem;
  font-weight:900;
  letter-spacing:.14em;
}
.page-structure-head b {
  color:color-mix(in srgb,var(--builder-ink) 44%,transparent);
  font-size:.39rem;
}
.page-structure-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}
.page-structure-tabs span {
  padding:5px 7px;
  border:1px solid color-mix(in srgb,var(--builder-ink) 10%,transparent);
  border-radius:999px;
  color:color-mix(in srgb,var(--builder-ink) 48%,transparent);
  font-size:.4rem;
}
.page-structure-tabs span.is-current {
  background:var(--builder-accent);
  border-color:var(--builder-accent);
  color:#111;
  font-weight:850;
}

/* Let selected pages accumulate in the desktop/tablet navigation. */
.builder-browser-v3 .builder-nav-links {
  flex-wrap:wrap;
  justify-content:flex-end;
  row-gap:5px;
}
.builder-browser-v3 .builder-nav-links span {
  white-space:nowrap;
}

/* Style-specific page structure */
.builder-browser-v3[data-style="minimal"] .preview-page-structure {
  border-radius:0;
  border-left:0;
  border-right:0;
  background:transparent;
}
.builder-browser-v3[data-style="luxury"] .preview-page-structure {
  border-radius:0;
  border-color:color-mix(in srgb,var(--builder-accent) 18%,transparent);
  background:transparent;
}
.builder-browser-v3[data-style="bold"] .preview-page-structure,
.builder-browser-v3[data-style="brutalist"] .preview-page-structure {
  border:2px solid var(--builder-ink);
  border-radius:0;
  background:var(--builder-bg);
}
.builder-browser-v3[data-style="warm"] .preview-page-structure {
  border:0;
  border-radius:24px;
  background:rgba(255,255,255,.26);
}
.builder-browser-v3[data-style="tech"] .preview-page-structure {
  border-color:color-mix(in srgb,var(--builder-accent) 18%,transparent);
  background:rgba(3,12,18,.38);
}
.builder-browser-v3[data-style="corporate"] .preview-page-structure {
  background:#fff;
  border-color:#d6e0e7;
}

/* On tablet/mobile, keep the preview readable without losing selections.
   The site-structure bar still displays every selected page. */
.preview-device-frame[data-device="tablet"] .builder-nav-links {
  max-width:55%;
  justify-content:flex-end;
}
.preview-device-frame[data-device="tablet"] .builder-nav-links span:nth-child(n+5) {
  display:none;
}
.preview-device-frame[data-device="mobile"] .preview-page-structure {
  margin-top:0;
}
.preview-device-frame[data-device="mobile"] .page-structure-tabs {
  gap:4px;
}


/* ============================================================
   V4.2 — simple custom pages
   ============================================================ */
.custom-page-builder {
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.09);
}
.custom-page-open {
  width:100%;
  border:1px dashed rgba(255,255,255,.16);
  border-radius:10px;
  background:transparent;
  color:#929aa4;
  padding:10px 11px;
  text-align:left;
  cursor:pointer;
  font-size:.6rem;
  font-weight:800;
}
.custom-page-open:hover {
  color:#fff;
  border-color:rgba(255,122,26,.5);
  background:rgba(255,122,26,.04);
}
.custom-page-form {
  margin-top:9px;
  padding:12px;
  border:1px solid rgba(255,122,26,.25);
  border-radius:11px;
  background:rgba(255,122,26,.045);
}
.custom-page-form[hidden] { display:none; }
.custom-page-form label {
  display:grid;
  gap:5px;
  margin-bottom:9px;
}
.custom-page-form label > span {
  color:#8a929d;
  font-size:.54rem;
  font-weight:800;
}
.custom-page-form label > span small {
  color:#555e68;
  font-weight:600;
}
.custom-page-form input {
  width:100%;
  border:1px solid rgba(255,255,255,.1);
  border-radius:9px;
  background:#151920;
  color:#eef0f2;
  padding:10px 11px;
  font-size:.65rem;
  outline:none;
}
.custom-page-form input:focus {
  border-color:rgba(255,122,26,.5);
  box-shadow:0 0 0 3px rgba(255,122,26,.07);
}
.custom-page-actions {
  display:flex;
  justify-content:flex-end;
  gap:7px;
  margin-top:4px;
}
.custom-page-actions button {
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:#151920;
  color:#747d88;
  padding:8px 9px;
  cursor:pointer;
  font-size:.52rem;
}
.custom-page-actions button:last-child {
  background:#ff7a1a;
  border-color:#ff7a1a;
  color:#111;
  font-weight:850;
}
.custom-page-list {
  display:grid;
  gap:6px;
  margin-top:9px;
}
.custom-page-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 10px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:9px;
  background:#13171d;
}
.custom-page-item > div {
  min-width:0;
}
.custom-page-item strong {
  display:block;
  color:#e2e5e8;
  font-size:.6rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.custom-page-item small {
  display:block;
  margin-top:2px;
  color:#59636d;
  font-size:.48rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.custom-page-item button {
  flex:0 0 auto;
  width:25px;height:25px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:50%;
  background:transparent;
  color:#69727c;
  cursor:pointer;
}
.custom-page-item button:hover {
  color:#fff;
  border-color:#5a636e;
}
.custom-page-help {
  margin:8px 1px 0;
  color:#4f5862;
  font-size:.46rem;
  line-height:1.45;
}

.page-structure-tabs span.is-custom {
  border-style:dashed;
}
.page-structure-tabs span.is-custom i {
  color:var(--builder-accent);
  font-style:normal;
  font-size:.46rem;
  margin-left:2px;
}
.builder-nav-links .is-custom-page::after {
  content:"+";
  color:var(--builder-accent);
  font-size:.43rem;
  margin-left:2px;
  vertical-align:top;
}

.module-custom-page {
  min-height:96px;
  display:grid;
  grid-template-columns:34px 1fr auto;
  align-items:center;
  gap:11px;
}
.custom-module-number {
  width:31px;height:31px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--builder-accent);
  color:#111;
  font-weight:900;
}
.custom-module-copy strong {
  display:block;
  font-size:.7rem;
  line-height:1.05;
}
.custom-module-copy p {
  margin:4px 0 0;
  color:color-mix(in srgb,var(--builder-ink) 48%,transparent);
  font-size:.43rem;
  line-height:1.45;
}
.custom-module-arrow {
  color:var(--builder-accent);
  font-size:.9rem;
}

/* Let each design system keep its identity */
.builder-browser-v3[data-style="minimal"] .module-custom-page {
  border-left:0;border-right:0;
}
.builder-browser-v3[data-style="warm"] .custom-module-number {
  border-radius:60% 40% 55% 45% / 50% 60% 40% 50%;
}
.builder-browser-v3[data-style="luxury"] .custom-module-number {
  background:transparent;
  color:var(--builder-accent);
  border:1px solid var(--builder-accent);
}
.builder-browser-v3[data-style="bold"] .custom-module-number,
.builder-browser-v3[data-style="brutalist"] .custom-module-number {
  border-radius:0;
  border:2px solid var(--builder-ink);
}
.builder-browser-v3[data-style="tech"] .custom-module-number {
  border-radius:8px;
  box-shadow:0 0 18px color-mix(in srgb,var(--builder-accent) 28%,transparent);
}
.builder-browser-v3[data-style="corporate"] .custom-module-number {
  border-radius:6px;
}

@media(max-width:620px){
  .custom-page-actions { flex-direction:column; }
  .custom-page-actions button { width:100%; }
}


/* ============================================================
   V4.3 — HERO POLISH
   Cleaner headline rhythm, calmer demo, sharper readability.
   ============================================================ */
.hero-grid {
  grid-template-columns: .88fr 1.12fr;
  gap: 58px;
}

.hero-copy {
  min-width: 0;
}

.hero-title {
  max-width: 710px;
  margin: 25px 0 24px;
  font-size: clamp(3.95rem, 6.15vw, 6.85rem);
  line-height: .89;
  letter-spacing: -.071em;
  font-weight: 900;
}

.hero-title-line {
  display: block;
  white-space: nowrap;
}

.hero-title-accent {
  color: var(--accent);
}

.hero h1 span.hero-title-line:not(.hero-title-accent) {
  color: var(--ink);
}

.hero-lead {
  max-width: 625px;
}

.hero-lab-cta {
  gap: 11px;
  background: color-mix(in srgb, var(--paper) 86%, white 14%);
}

.hero-lab-cta span {
  color: var(--accent);
  transition: transform .22s ease;
}

.hero-lab-cta:hover span {
  transform: rotate(18deg) scale(1.12);
}

/* Give the browser demo a little more visual authority. */
.browser-card {
  width: min(112%, 775px);
  box-shadow:
    0 58px 125px rgba(33,26,20,.19),
    0 0 120px rgba(255,122,26,.085);
}

.preview-stats {
  margin-top: 14px;
}

.preview-stats div {
  padding: 15px 13px 2px;
}

.preview-stats strong {
  font-size: .74rem;
  letter-spacing: -.015em;
}

.preview-stats span {
  margin-top: 3px;
  font-size: .575rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--ink) 56%, transparent);
}

.browser-address {
  color: color-mix(in srgb, var(--ink) 48%, transparent);
}

.preview-kicker {
  font-size: .58rem;
}

.float-note {
  box-shadow: 0 15px 45px rgba(23,18,14,.12);
}

.note-a {
  left: -4px;
  top: 134px;
}

.note-b {
  right: -5px;
  bottom: 112px;
}

/* Keep headline line 1 intact on normal desktop sizes. */
@media (min-width: 1081px) and (max-width: 1260px) {
  .hero-title {
    font-size: clamp(3.7rem, 5.75vw, 5.35rem);
  }
}

/* On tablet we keep the designed line breaks, but scale them down. */
@media (max-width: 1080px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .hero-title {
    max-width: 820px;
    font-size: clamp(4.1rem, 10vw, 6.7rem);
  }

  .browser-card {
    width: min(100%, 780px);
  }
}

@media (max-width: 700px) {
  .hero-title {
    font-size: clamp(3.25rem, 15.6vw, 4.8rem);
    line-height: .91;
  }

  .hero-title-line {
    white-space: normal;
  }

  .hero-title-line:first-child {
    white-space: nowrap;
  }

  .hero-lab-cta {
    background: transparent;
  }

  .preview-stats strong {
    font-size: .64rem;
  }

  .preview-stats span {
    font-size: .49rem;
  }
}

@media (max-width: 430px) {
  .hero-title {
    font-size: clamp(2.9rem, 14.3vw, 3.75rem);
  }

  .hero-title-line:first-child {
    white-space: normal;
  }
}


/* ============================================================
   V4.4 — HERO FINAL SPACING
   Fix overlap, add breathing room, improve USP readability.
   ============================================================ */

/* 1) Browser mockup: slightly smaller and shifted right */
@media (min-width: 1081px) {
  .hero-stage {
    transform: translateX(26px);
  }

  .browser-card {
    width: min(104%, 725px);
  }

  .note-a {
    left: 4px;
  }

  .note-b {
    right: 2px;
  }
}

/* 2) More breathing room between headline and body copy */
.hero-title {
  margin-bottom: 34px;
}

.hero-lead {
  margin-top: 0;
}

/* 3) Make the three proof points easier to read */
.proof-row {
  margin-top: 48px;
  padding-top: 27px;
  gap: 14px;
}

.proof-row > div {
  gap: 11px;
}

.proof-icon {
  width: 31px;
  height: 31px;
  border-radius: 10px;
}

.proof-row strong {
  font-size: .81rem;
  line-height: 1.2;
}

.proof-row small {
  margin-top: 4px;
  font-size: .67rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--ink) 52%, transparent);
}

/* Keep the desktop composition safe around the 1600px-class viewport */
@media (min-width: 1081px) and (max-width: 1500px) {
  .hero-grid {
    grid-template-columns: .91fr 1.09fr;
    gap: 46px;
  }

  .hero-stage {
    transform: translateX(20px);
  }

  .browser-card {
    width: min(102%, 700px);
  }
}

/* Tablet/mobile should not inherit the desktop shift */
@media (max-width: 1080px) {
  .hero-stage {
    transform: none;
  }

  .browser-card {
    width: min(100%, 780px);
  }

  .hero-title {
    margin-bottom: 28px;
  }

  .proof-row strong {
    font-size: .78rem;
  }

  .proof-row small {
    font-size: .64rem;
  }
}

@media (max-width: 700px) {
  .hero-title {
    margin-bottom: 24px;
  }

  .proof-row {
    margin-top: 38px;
    padding-top: 22px;
  }
}


/* ============================================================
   V4.5 — HERO STRUCTURAL LAYOUT FIX
   Prevents preview/text collision across desktop widths.
   ============================================================ */

/*
  The previous hero used an oversized card + horizontal transform.
  That allowed the right column to physically intrude into the left.
  V4.5 removes that behaviour and gives both grid tracks hard bounds.
*/
@media (min-width: 1181px) {
  .hero .container.hero-grid {
    width: min(calc(100% - 42px), 1320px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
    gap: 58px;
    align-items: center;
  }

  .hero-copy,
  .hero-stage {
    min-width: 0;
    width: 100%;
  }

  .hero-copy {
    position: relative;
    z-index: 2;
  }

  .hero-stage {
    position: relative;
    z-index: 1;
    transform: none !important;
    justify-items: end;
    overflow: visible;
  }

  .hero-title {
    width: 100%;
    max-width: 620px;
    font-size: clamp(4.25rem, 5.45vw, 6.05rem);
  }

  .hero-title-line {
    width: max-content;
    max-width: 100%;
  }

  .browser-card {
    width: 100% !important;
    max-width: 675px;
    justify-self: end;
  }

  .orbit-one {
    right: -22px;
  }

  .note-a {
    left: 0;
  }

  .note-b {
    right: 0;
  }
}

/*
  At medium desktop widths, forcing a two-column hero is what causes
  collisions. Switch earlier to a stacked composition instead of
  waiting until tablet widths.
*/
@media (min-width: 821px) and (max-width: 1180px) {
  .hero {
    padding-top: 54px;
  }

  .hero .container.hero-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .hero-copy {
    max-width: 830px;
  }

  .hero-title {
    max-width: 820px;
    font-size: clamp(4.2rem, 9vw, 6.4rem);
  }

  .hero-stage {
    width: 100%;
    min-height: 570px;
    transform: none !important;
    justify-items: center;
  }

  .browser-card {
    width: min(100%, 780px) !important;
    max-width: 780px;
    justify-self: center;
  }

  .interaction-label {
    left: max(8px, calc(50% - 390px));
  }
}

/* Safety net: never let the preview card create horizontal collision. */
.hero-stage .browser-card {
  box-sizing: border-box;
}

@media (max-width: 820px) {
  .hero-stage {
    transform: none !important;
  }

  .browser-card {
    width: min(100%, 760px) !important;
    max-width: 760px;
  }
}

/*
  Keep the headline deliberately designed while still allowing
  emergency wrapping on unusually narrow desktop browser windows.
*/
@media (min-width: 1181px) and (max-width: 1320px) {
  .hero-title {
    font-size: clamp(4rem, 5.15vw, 5.45rem);
  }
}