
:root{
  --vs-yellow:#f5b400;
  --vs-black:#07090b;
  --vs-ink:#111419;
  --vs-muted:#555d64;
  --vs-line:#e1e3e6;
  --vs-max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.visual-page{margin:0;background:#fff;color:var(--vs-ink);font-family:Inter,"Segoe UI",Arial,sans-serif}
.visual-page a{text-decoration:none;color:inherit}
.vs-shell{width:min(var(--vs-max),calc(100% - 54px));margin:auto}

/* Header matches approved Simulators page dimensional system */
.vs-header{height:64px;background:#060708;color:#fff;border-bottom:1px solid #24272a;position:sticky;top:0;z-index:70}
.vs-nav{height:100%;max-width:1380px;margin:auto;padding:0 17px;display:flex;align-items:center;gap:34px}
.vs-brand{width:156px;min-width:156px}
.vs-brand img{display:block;width:100%}
.vs-menu{display:flex;align-items:center;justify-content:center;gap:31px;flex:1;height:100%}
.vs-menu>a,.vs-parent{height:100%;display:flex;align-items:center;font-size:10px;font-weight:850;white-space:nowrap;border-bottom:3px solid transparent}
.vs-menu>a:hover,.vs-menu>a.active,.vs-parent:hover{color:var(--vs-yellow);border-bottom-color:var(--vs-yellow)}
.vs-dd{height:100%;position:relative;display:flex;align-items:center}
.vs-dd-menu{display:none;position:absolute;top:64px;left:50%;transform:translateX(-50%);min-width:238px;background:#0b0d0f;border:1px solid #2a2d30;padding:7px;box-shadow:0 16px 34px rgba(0,0,0,.34);z-index:90}
.vs-dd:hover .vs-dd-menu,.vs-dd:focus-within .vs-dd-menu{display:block}
.vs-dd-menu a{display:block;padding:11px 12px;font-size:10px;font-weight:800;color:#fff}
.vs-dd-menu a:hover{background:#171a1d;color:var(--vs-yellow)}
.vs-toggle{display:none;background:none;border:0;color:#fff;font-size:24px}

/* Hero */
.vs-hero{height:455px;position:relative;overflow:hidden;background:#080a0c;color:#fff}
.vs-hero-img{position:absolute;right:0;top:0;width:61%;height:100%;object-fit:cover;object-position:center}
.vs-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#07090b 0%,#07090b 29%,rgba(7,9,11,.94) 40%,rgba(7,9,11,.28) 70%,rgba(7,9,11,.03) 100%)}
.vs-hero-copy{position:relative;z-index:2;padding-top:67px}
.vs-kicker{font-size:14px;font-weight:900;color:var(--vs-yellow);letter-spacing:1.5px}
.vs-kicker:after{content:"";display:block;width:43px;height:3px;background:var(--vs-yellow);margin-top:14px}
.vs-hero h1{font-family:"Arial Narrow","Aptos Narrow",Impact,sans-serif;font-size:46px;line-height:1.05;letter-spacing:-.7px;margin:18px 0 17px;max-width:520px}
.vs-hero p{font-size:14px;line-height:1.72;color:#ebedef;max-width:535px;margin:0}

/* Main options */
.vs-main{padding:31px 0 0}
.vs-title-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:23px}
.vs-title h2{font-family:"Arial Narrow","Aptos Narrow",Impact,sans-serif;font-size:31px;margin:0}
.vs-title:before{content:"";display:block;width:42px;height:3px;background:var(--vs-yellow);margin-bottom:12px}
.vs-expert{display:inline-flex;align-items:center;gap:24px;border:2px solid var(--vs-yellow);border-radius:24px;color:#d99300;font-size:11px;font-weight:900;padding:10px 18px 10px 21px}
.vs-expert span{font-size:22px;line-height:1}

.vs-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.vs-card{border:1px solid var(--vs-line);border-radius:7px;overflow:hidden;background:#fff;display:flex;flex-direction:column;min-height:540px}
.vs-card-img{position:relative;aspect-ratio:1/1.4;background:#f4f4f4;overflow:hidden}
.vs-card-img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.vs-card-code{position:absolute;left:8px;bottom:8px;background:#090b0d;color:var(--vs-yellow);width:27px;height:30px;border-radius:4px;display:grid;place-items:center;font-size:15px;font-weight:900}
.vs-new{position:absolute;left:8px;top:8px;background:var(--vs-yellow);color:#111;border-radius:2px;font-size:10px;font-weight:900;padding:4px 8px}
.vs-card-copy{padding:15px 13px 17px;display:flex;flex-direction:column;flex:1}
.vs-card-copy h3{font-family:"Arial Narrow","Aptos Narrow",Impact,sans-serif;font-size:21px;line-height:1.1;margin:0 0 9px}
.vs-card-copy p{font-size:11.5px;line-height:1.62;color:#4f565d;margin:0 0 14px}
.vs-price{color:#e39a00;font-size:14px;font-weight:900;margin-top:auto;padding-top:10px}

/* Mission/benefits section */
.vs-mission{border-top:1px solid var(--vs-line);margin-top:27px;padding:28px 0 27px}
.vs-mission-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr)}
.vs-mission-copy{padding-right:34px;border-right:1px solid var(--vs-line)}
.vs-mission-copy:before{content:"";display:block;width:42px;height:3px;background:var(--vs-yellow);margin-bottom:12px}
.vs-mission-copy h2{font-family:"Arial Narrow","Aptos Narrow",Impact,sans-serif;font-size:28px;line-height:1.07;margin:0 0 15px;max-width:310px}
.vs-mission-copy p{font-size:11.3px;line-height:1.62;color:#4e555c;margin:0 0 10px}
.vs-mission-copy strong{font-size:13px;line-height:1.4;display:block}
.vs-feature{text-align:center;padding:6px 22px;border-right:1px solid var(--vs-line)}
.vs-feature:last-child{border-right:0}
.vs-feature-icon{height:72px;display:grid;place-items:center;font-size:55px;color:var(--vs-yellow);line-height:1}
.vs-feature b{font-size:11px;line-height:1.25;display:block;min-height:30px;margin:7px 0 11px}
.vs-feature p{font-size:10px;line-height:1.6;color:#565d63;margin:0}

/* Footer */
.vs-footer{background:#060708;color:#fff;padding:29px 0 15px}
.vs-footer-grid{display:grid;grid-template-columns:1.2fr 1.1fr 1fr .8fr;gap:48px;align-items:start}
.vs-footer-logo{width:180px}
.vs-footer p,.vs-footer a{font-size:10px;line-height:1.7;color:#d8dadd;display:block}
.vs-footer h4{font-size:11px;color:var(--vs-yellow);margin:0 0 11px}
.vs-footer .vs-expert{margin-top:12px;color:#fff}
.vs-socials{display:flex;gap:12px;margin:11px 0}
.vs-socials span{width:42px;height:42px;border:1px solid #aaa;border-radius:4px;display:grid;place-items:center;font-weight:900;font-size:18px}
.vs-site{color:var(--vs-yellow)!important;font-weight:900}
.vs-copy{text-align:center;font-size:9px;color:#aaa;margin-top:15px}

@media(max-width:1050px){
  .vs-menu{gap:18px}.vs-menu>a,.vs-parent{font-size:9px}
  .vs-grid{grid-template-columns:repeat(3,1fr)}
  .vs-card{min-height:510px}
  .vs-mission-grid{grid-template-columns:1fr 1fr}
  .vs-mission-copy{grid-column:1/3;border-right:0;border-bottom:1px solid var(--vs-line);padding:0 0 22px;margin-bottom:22px}
}
@media(max-width:780px){
  .vs-toggle{display:block;margin-left:auto}
  .vs-menu{display:none;position:absolute;left:0;right:0;top:64px;background:#080a0c;height:auto;flex-direction:column;align-items:stretch;padding:8px 22px;gap:0}
  .vs-menu.open{display:flex}
  .vs-menu>a,.vs-parent{height:auto;padding:12px 0;font-size:11px}
  .vs-dd{height:auto;display:block}
  .vs-dd-menu{display:block;position:static;transform:none;min-width:0;background:#0d0f11;border:0;box-shadow:none;padding:0 0 7px 15px}
  .vs-hero{height:620px}.vs-hero-img{width:100%;height:56%}
  .vs-hero:after{background:linear-gradient(0deg,#07090b 0%,#07090b 45%,rgba(7,9,11,.35) 74%,rgba(7,9,11,.05))}
  .vs-hero-copy{padding-top:350px}.vs-hero h1{font-size:39px}
  .vs-grid{grid-template-columns:1fr 1fr}
  .vs-footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .vs-shell{width:calc(100% - 30px)}
  .vs-brand{width:145px;min-width:145px}
  .vs-title-row{flex-direction:column;align-items:flex-start}
  .vs-grid,.vs-mission-grid,.vs-footer-grid{grid-template-columns:1fr}
  .vs-mission-copy{grid-column:auto}
  .vs-feature{border-right:0;border-bottom:1px solid var(--vs-line);padding:18px 5px}
}
