.websites-page { background:#f4f4f1; }
.websites-page :focus-visible { outline:3px solid #087b56; outline-offset:4px; }
.websites-page h1,.websites-page h2,.websites-page h3 { letter-spacing:0; }
.web-frame { width:min(1380px,100%); margin-inline:auto; }
.web-hero { position:relative; display:flex; align-items:end; min-height:min(720px,calc(100svh - 160px)); padding:70px clamp(20px,5vw,76px); background:#172527 url('../assets/illustrations/examples/illustration-03-skarazin-display.webp') center 52% / cover no-repeat; color:#fff; isolation:isolate; }
.web-hero::before { content:''; position:absolute; inset:0; background:rgba(8,14,17,.52); z-index:-1; }
.web-hero-inner { width:min(1380px,100%); margin:auto; }
.web-eyebrow { color:#ffe31e; font-size:13px; font-weight:900; }
.web-hero h1 { max-width:800px; margin:18px 0 22px; font-size:64px; line-height:.97; text-shadow:0 2px 10px #101417; }
.web-hero p:not(.web-eyebrow) { max-width:600px; font-size:20px; line-height:1.45; text-shadow:0 2px 8px #101417; }
.web-hero .page-actions { margin-top:28px; }
.web-hero .page-btn { background:#ffe31e; }
.web-hero-link { display:inline-flex; gap:14px; align-items:center; padding:12px 0; border-bottom:2px solid #fff; font-weight:900; text-transform:uppercase; }
.web-proof-link { display:inline-flex; align-items:baseline; gap:12px; margin-top:32px; color:#fff; font-weight:900; }
.web-proof-link span { font-size:13px; font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.web-formats,.web-process,.web-contact { padding:80px clamp(20px,5vw,76px); }
.web-formats { scroll-margin-top:70px; }
.web-section-heading { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:30px; }
.web-section-heading h2,.web-contact h2 { margin-bottom:0; font-size:48px; line-height:1; }
.web-section-heading > p { max-width:500px; margin:0; color:#53565a; font-size:18px; line-height:1.5; }
.web-concept-note { margin:30px 0 0; color:#53565a; font-size:14px; line-height:1.45; }
.web-format-list { margin-top:32px; }
.web-format { display:grid; grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr); gap:48px; align-items:center; padding:42px 0; border-top:1px solid #a2a4a3; }
.web-format:last-child { border-bottom:1px solid #a2a4a3; }
.web-format-copy { max-width:395px; }
.web-number { color:#dc3e36; font-size:12px; font-weight:900; }
.web-format h3 { margin:18px 0 14px; font-size:32px; line-height:1; }
.web-format p { color:#53565a; font-size:17px; line-height:1.5; }
.web-open { display:flex; align-items:center; justify-content:space-between; gap:24px; max-width:260px; width:100%; margin-top:24px; padding:12px 0; border:0; border-bottom:2px solid #111; background:none; color:#111; font:inherit; font-weight:900; text-align:left; text-transform:uppercase; cursor:pointer; }
.web-open span { font-size:21px; }
.web-open:hover,.web-order:hover { color:#a5241e; }
.web-order { display:block; margin-top:16px; padding:6px 0; border:0; background:none; color:#111; font:inherit; font-size:14px; font-weight:900; text-align:left; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.web-preview { min-width:0; border:1px solid #151515; background:#fff; box-shadow:8px 8px 0 rgba(12,12,14,.13); }
.web-preview-bar { display:flex; justify-content:space-between; gap:12px; padding:11px 14px; background:#1b1c20; color:#fff; font-size:10px; font-weight:900; }
.web-preview-bar span:last-child { color:#ffe31e; }
.web-preview-screen { overflow:hidden; position:relative; width:100%; aspect-ratio:16/10; background:#e1e5e4; }
.web-preview-screen iframe { display:block; width:200%; height:200%; border:0; transform:scale(.5); transform-origin:0 0; pointer-events:none; user-select:none; }
.web-process { background:#e7edea; }
.web-process ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; margin:38px 0 0; padding:0; list-style:none; }
.web-process li { border-top:2px solid #111; padding-top:18px; }
.web-process li b { color:#da4038; font-size:12px; }
.web-process li h3 { margin:18px 0 10px; font-size:23px; line-height:1.05; }
.web-process li p { color:#53565a; line-height:1.5; }
.web-contact { background:#1c1d20; color:#fff; }
.web-contact .page-kicker { color:#ffe31e; }
.web-contact h2 { max-width:700px; }
.web-contact p:not(.page-kicker) { max-width:570px; margin:22px 0 28px; color:#d9dad7; font-size:18px; line-height:1.5; }
.web-demo-dialog { width:min(1160px,calc(100% - 32px)); max-width:none; max-height:calc(100svh - 32px); padding:0; border:1px solid #151515; background:#fff; box-shadow:8px 8px 0 #000; }
.web-demo-dialog[open] { display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.web-demo-dialog::backdrop { background:rgba(10,11,13,.78); }
.web-demo-header,.web-demo-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; }
.web-demo-header { border-bottom:1px solid #b9b9b9; }
.web-demo-header span { color:#b32e2a; font-size:11px; font-weight:900; }
.web-demo-header h2 { margin:4px 0 0; font-size:24px; line-height:1.1; }
.web-dialog-close { width:46px; height:46px; flex:0 0 46px; border:1px solid #111; background:#fff; color:#111; font-size:30px; cursor:pointer; }
.web-demo-frame { width:100%; height:min(65svh,680px); min-height:280px; border:0; background:#fff; }
.web-demo-footer { border-top:1px solid #b9b9b9; }
.web-demo-footer span { color:#56595d; font-size:13px; line-height:1.35; }
.web-demo-footer .page-btn { min-height:44px; padding:10px 16px; font-size:13px; }
@media (min-width:761px) and (max-width:1100px) { .websites-page .page-nav { justify-content:flex-start; gap:12px; } }
@media (max-width:880px) {
  .web-section-heading,.web-format { grid-template-columns:1fr; }
  .web-format { gap:24px; }
  .web-format-copy { max-width:620px; }
  .web-process ol { grid-template-columns:1fr; gap:18px; }
}
@media (max-width:760px) {
  .websites-page .page-nav { flex:1 1 0; width:0; max-width:none; scrollbar-width:none; }
  .websites-page .page-nav::-webkit-scrollbar { display:none; }
  .web-hero { min-height:0; padding-block:72px 54px; background-position:42% center; }
  .web-hero h1 { font-size:42px; }
  .web-hero p:not(.web-eyebrow) { font-size:17px; }
  .web-hero .page-btn { width:auto; }
  .web-formats,.web-process,.web-contact { padding-block:54px; }
  .web-section-heading h2,.web-contact h2 { font-size:36px; }
  .web-section-heading > p { font-size:16px; }
  .web-format h3 { font-size:27px; }
  .web-format p { font-size:16px; }
  .web-demo-header h2 { font-size:19px; }
  .web-demo-header,.web-demo-footer { padding:10px 12px; }
  .web-demo-footer { flex-wrap:wrap; }
  .web-demo-footer .page-btn { width:auto; }
  .web-demo-frame { height:min(56svh,560px); }
}
@media (max-width:360px) { .web-hero h1 { font-size:36px; } .web-demo-footer span { font-size:12px; } }