:root { --ink:#1a2a33; --muted:#5d6d76; --line:#d5e1e4; --wash:#edf4f5; --teal:#008f94; --teal-dark:#006f75; --orange:#ef7b24; --deep:#173d48; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); font-family:Arial,Helvetica,sans-serif; line-height:1.5; } h1,h2,h3,p { margin-top:0; }
.site-header, footer { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:14px clamp(24px,6vw,96px); } .site-header { min-height:78px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; font-size:20px; font-weight:700; } .brand img { width:54px; height:48px; object-fit:contain; } .header-status, footer { color:var(--muted); font-size:14px; }
.hero { display:grid; grid-template-columns:minmax(0,.9fr) minmax(440px,1.1fr); align-items:center; gap:clamp(42px,7vw,120px); min-height:min(720px,calc(100vh - 78px)); padding:clamp(64px,9vw,132px) clamp(24px,8vw,132px) 58px; background:var(--wash); } .hero-content { max-width:610px; }
.eyebrow { margin-bottom:12px; color:var(--teal-dark); font-size:13px; font-weight:700; text-transform:uppercase; } h1 { margin-bottom:20px; font-size:clamp(46px,6vw,74px); line-height:1.02; } h2 { margin-bottom:20px; font-size:clamp(30px,4vw,50px); line-height:1.1; } .hero-copy { margin-bottom:31px; color:var(--muted); font-size:20px; }
.hero-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:0; } .hero-facts div { border-left:3px solid var(--orange); padding-left:12px; } .hero-facts dt { font-size:14px; font-weight:700; } .hero-facts dd { margin:4px 0 0; color:var(--muted); font-size:13px; }
.hero-product { overflow:hidden; border:1px solid #c8d8dc; border-radius:8px; background:#f8fbfb; box-shadow:0 18px 45px rgba(23,41,53,.16); } .product-topline { display:flex; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); font-size:14px; font-weight:700; } .product-status { color:#457029; font-size:12px; }
.product-layout { display:grid; grid-template-columns:125px 1fr; min-height:360px; } .product-nav { display:flex; flex-direction:column; gap:4px; padding:18px 10px; background:#1d5361; color:#eaf6f6; font-size:13px; } .product-nav span { padding:9px 10px; } .product-nav .selected { border-radius:4px; background:var(--teal); font-weight:700; } .product-workspace { padding:24px; background:#f3f7f8; } .workspace-kicker { margin-bottom:8px; color:var(--teal-dark); font-size:13px; font-weight:700; } .product-workspace h2 { font-size:24px; }
.workspace-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; } .workspace-card { display:flex; flex-direction:column; gap:8px; min-height:115px; padding:15px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--muted); font-size:13px; } .workspace-card strong { color:var(--ink); font-size:25px; } .workspace-card.wide { grid-column:span 2; min-height:105px; } .mini-lines { display:grid; gap:8px; } .mini-lines i { display:block; height:8px; border-radius:2px; background:#d8e9ea; } .mini-lines i:nth-child(2) { width:76%; background:#a9d7d9; } .mini-lines i:nth-child(3) { width:51%; }
.technical-section,.operations-section,.locations-section,.engineering-section,.security-section { padding:clamp(68px,10vw,130px) clamp(36px,8vw,132px); } .technical-grid,.engineering-grid,.location-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:44px; } .technical-grid article,.engineering-grid article { border-top:3px solid var(--orange); padding-top:17px; } .technical-grid h3,.engineering-grid h3,.location-grid h3 { margin-bottom:9px; font-size:22px; } .technical-grid p,.operations-list p,.engineering-grid p,.location-grid p,.security-copy p { color:var(--muted); font-size:17px; }
.operations-section,.security-section { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(42px,8vw,130px); } .operations-section { background:#f6f9f9; } .operations-list { border-top:1px solid var(--line); } .operations-list article { display:grid; grid-template-columns:48px 1fr; gap:15px; padding:21px 0; border-bottom:1px solid var(--line); } .operations-list span { color:var(--teal-dark); font-weight:700; } .operations-list p { margin:0; } .operations-list strong { color:var(--ink); }
.calendar-section { padding:clamp(68px,10vw,130px) clamp(36px,8vw,132px); background:#f3f7f8; } .calendar-intro { max-width:780px; } .calendar-intro > p:last-child { max-width:700px; color:var(--muted); font-size:17px; line-height:1.65; } .calendar-showcase { display:grid; grid-template-columns:.88fr 1.12fr; gap:24px; margin-top:40px; } .calendar-panel { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:0 12px 30px rgba(25,54,62,.07); } .calendar-panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:17px 20px; border-bottom:1px solid var(--line); color:var(--muted); font-size:14px; } .calendar-panel-head strong { color:var(--ink); font-size:17px; } .day-grid { display:grid; grid-template-columns:58px 1fr; grid-auto-rows:44px; padding:14px 17px 18px; align-items:center; } .day-grid > span { height:100%; padding-top:8px; border-top:1px solid #edf1f2; color:var(--muted); font-size:12px; } .slot { display:flex; align-items:center; height:30px; padding:0 10px; border-radius:4px; color:#17303b; font-size:12px; font-style:normal; font-weight:650; } .teal { border-left:3px solid var(--teal); background:#cfeeed; } .blue { border-left:3px solid #4b80b6; background:#dce9f7; } .gold { border-left:3px solid #c49331; background:#fff0c7; } .week-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); grid-auto-rows:35px; gap:7px; padding:16px; background-image:linear-gradient(#f8fbfb 1px,transparent 1px); } .week-grid b { color:var(--muted); font-size:12px; text-align:center; } .week-slot { display:block; align-self:stretch; min-height:22px; border-radius:4px; } .preparation-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:24px; } .preparation-grid article { padding:23px 24px; border-left:3px solid var(--teal); background:#fff; } .preparation-grid h3 { margin:0 0 10px; font-size:17px; } .preparation-grid p { margin:0; color:var(--muted); line-height:1.6; }
.locations-section { background:var(--wash); } .location-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .location-grid article { display:flex; flex-direction:column; align-items:flex-start; min-height:350px; padding:30px; border:1px solid #c8d8dc; border-radius:8px; background:#fff; } .location-grid img { width:100%; height:190px; margin-bottom:28px; object-fit:contain; object-position:left center; } .location-grid p { margin-bottom:0; }
.security-section { background:var(--deep); color:#fff; } .security-section .eyebrow { color:#9edadd; } .security-copy p { color:#e0ecee; } footer { padding-top:22px; padding-bottom:22px; }
.demo-access-section { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(42px,8vw,130px); padding:clamp(68px,10vw,130px) clamp(36px,8vw,132px); background:#fff; } .demo-access-section > div > p:last-child,.demo-contact p { color:var(--muted); font-size:17px; line-height:1.65; } .demo-contact { align-self:center; padding:27px 30px; border-left:3px solid var(--orange); background:var(--wash); } .demo-contact p { margin-bottom:20px; } .demo-contact a { display:inline-flex; align-items:center; min-height:40px; margin:0 10px 0 0; padding:0 15px; border:1px solid var(--teal); border-radius:4px; color:var(--teal-dark); font-weight:700; text-decoration:none; } .demo-contact a:hover { background:var(--teal); color:#fff; }
@media (max-width:900px) { .hero,.operations-section,.security-section,.calendar-showcase { grid-template-columns:1fr; min-height:auto; } .hero-product { max-width:680px; } .technical-grid,.engineering-grid,.preparation-grid { grid-template-columns:1fr; gap:30px; } }
@media (max-width:620px) { .site-header,footer { padding:12px 24px; } .header-status { font-size:12px; } .hero,.technical-section,.operations-section,.calendar-section,.locations-section,.engineering-section,.security-section,.demo-access-section { padding:52px 28px; } .hero-facts,.location-grid { grid-template-columns:1fr; } .product-layout { grid-template-columns:86px 1fr; } .product-nav { padding:12px 6px; font-size:11px; } .product-nav span { padding:7px 6px; } .product-workspace { padding:15px; } .product-workspace h2 { font-size:18px; } .workspace-grid { gap:8px; } .workspace-card { min-height:94px; padding:10px; } .location-grid article { min-height:0; padding:24px; } .location-grid img { height:160px; margin-bottom:20px; } .demo-access-section { grid-template-columns:1fr; } footer { align-items:flex-start; flex-direction:column; } }