:root { --ink:#071c45; --blue:#1768d9; --pale:#f5f9ff; --line:#d8e0ec; --paper:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 50% 0%, #fff 0, #edf1f6 45%, #e6ebf1 100%); font-family:"DM Sans", sans-serif; }
a { color:inherit; text-decoration:none; }
.site-shell { width:min(100% - 32px, 1120px); margin:32px auto; overflow:hidden; border-radius:10px; background:var(--paper); box-shadow:0 18px 42px rgba(9,30,70,.19); }
.site-header { min-height:190px; display:flex; align-items:center; justify-content:space-between; padding:35px 44px 28px; }
.brand { width:284px; display:grid; grid-template-columns:66px 1fr; grid-template-rows:47px 19px; position:relative; }
.brand-mark { position:relative; width:62px; height:48px; grid-row:1 / 3; }
.brand-mark::before { content:""; position:absolute; top:11px; left:15px; width:37px; height:25px; border:5px solid var(--ink); border-radius:22px; background:#fff; }
.brand-mark::after { content:""; position:absolute; top:23px; left:2px; width:30px; height:12px; border-top:4px solid var(--ink); transform:skewX(-31deg); box-shadow:-11px 7px 0 -1px var(--ink); }
.brand-mark i { position:absolute; z-index:2; top:21px; left:32px; width:13px; height:30px; background:var(--blue); clip-path:polygon(57% 0,100% 0,59% 42%,92% 42%,0 100%,31% 54%,0 54%); }
.brand-mark b { position:absolute; z-index:3; top:33px; left:1px; width:42px; border-top:3px solid #1467ce; transform:skewX(-30deg); }
.brand-word { align-self:end; font:800 italic 30px/1 "Plus Jakarta Sans", sans-serif; letter-spacing:-2px; text-transform:uppercase; white-space:nowrap; }
.brand-word span { color:var(--blue); }.brand-word sup { font-size:8px; vertical-align:top; margin-left:2px; }
.brand-tagline { align-self:start; font-size:11px; font-weight:600; text-align:center; letter-spacing:.1px; white-space:nowrap; }.brand-tagline sup { font-size:5px; }
nav { display:flex; gap:38px; align-items:center; text-transform:uppercase; font-weight:700; font-size:14px; } nav a { position:relative; } nav a::after { content:""; position:absolute; left:0; right:0; bottom:-12px; height:2px; background:var(--blue); transform:scaleX(0); transition:transform .2s ease; } nav a:hover::after, nav a:focus-visible::after { transform:scaleX(1); }
.hero { min-height:428px; position:relative; overflow:hidden; color:white; background:#06142c; }.storm { position:absolute; inset:0; background:radial-gradient(ellipse at 68% 28%, rgba(81,105,148,.72), transparent 25%), radial-gradient(ellipse at 80% 20%, rgba(55,75,114,.82), transparent 30%), linear-gradient(150deg, #071a35 8%, #132d54 56%, #071527 100%); }.cloud { position:absolute; border-radius:50%; filter:blur(18px); opacity:.5; background:#7785a4; }.cloud-one { width:460px; height:140px; top:35px; left:35%; }.cloud-two { width:310px; height:105px; top:115px; right:1%; background:#263a5e; }.lightning { position:absolute; width:115px; height:260px; top:56px; right:17%; background:#e6f3ff; clip-path:polygon(50% 0,69% 0,53% 31%,79% 26%,46% 59%,63% 57%,15% 100%,36% 65%,20% 68%); filter:drop-shadow(0 0 8px white) drop-shadow(0 0 22px #a9d2ff); opacity:.92; }.horizon { position:absolute; bottom:0; right:0; width:70%; height:88px; background:radial-gradient(ellipse at 5% 70%, #f0a73d 0 2px, transparent 3px) 0 0 / 51px 21px, linear-gradient(0deg, rgba(1,10,24,.91), rgba(1,10,24,.2)); opacity:.85; }
.hero-copy { position:relative; z-index:1; width:min(100% - 64px, 480px); padding:59px 0 45px; margin-left:64px; }.eyebrow { margin:0 0 10px; color:#8fc2ff; text-transform:uppercase; letter-spacing:1.6px; font-size:11px; font-weight:700; }.hero h1 { max-width:430px; margin:0; font:800 38px/1.2 "Plus Jakarta Sans", sans-serif; letter-spacing:-1.5px; }.blue-rule,.card-rule { display:block; width:69px; height:2px; margin:22px 0; background:#2e8fff; }.hero-copy > p:last-child { max-width:410px; margin:0; font-size:17px; line-height:1.65; }
.contact-area { display:grid; grid-template-columns:1fr 1fr; gap:22px; padding:38px 74px 20px; }.info-card { min-height:304px; padding:23px 25px 24px; text-align:center; border:1px solid var(--line); border-radius:6px; box-shadow:0 1px 3px rgba(10,33,75,.03); }.icon { width:52px; height:52px; margin:0 auto 13px; border:1px solid #acd0fc; border-radius:50%; position:relative; color:var(--blue); }.phone-icon::before { content:""; position:absolute; inset:14px 17px 12px 16px; border:3px solid var(--blue); border-top-color:transparent; border-right-color:transparent; border-radius:5px 5px 10px 10px; transform:rotate(-46deg); }.mail-icon::before,.envelope::before { content:""; position:absolute; inset:15px 11px; border:2px solid currentColor; }.mail-icon span::before,.mail-icon span::after,.envelope::after { content:""; position:absolute; width:16px; border-top:2px solid currentColor; top:22px; }.mail-icon span::before { left:10px; transform:rotate(36deg); }.mail-icon span::after { right:10px; transform:rotate(-36deg); }.info-card h2,.customer-note h2 { margin:0; text-transform:uppercase; font:800 17px "Plus Jakarta Sans", sans-serif; letter-spacing:-.5px; }.card-rule { width:48px; margin:11px auto 20px; }.phone-link { display:block; margin-bottom:6px; font-weight:600; font-size:17px; }.quiet { margin:0 0 17px!important; color:#637087; font-size:14px!important; }.mail-link { display:flex; justify-content:center; align-items:center; gap:10px; margin:0 0 17px; font-size:16px; font-weight:500; }.envelope { position:relative; width:20px; height:16px; color:var(--blue); }.envelope::before { inset:0; }.envelope::after { left:3px; top:5px; width:12px; transform:rotate(33deg); }.info-card p { max-width:250px; margin:0 auto; font-size:16px; line-height:1.6; }
.customer-note { display:flex; align-items:center; gap:30px; margin:20px 74px 38px; padding:22px 58px; border-radius:5px; background:linear-gradient(100deg,#edf5ff,#f5f9ff); }.customer-icon { width:77px; height:55px; flex:none; position:relative; border-right:1px solid #8bb8f2; }.customer-icon::before { content:""; position:absolute; left:16px; top:2px; width:18px; height:18px; border:3px solid var(--ink); border-radius:50%; }.customer-icon::after { content:""; position:absolute; left:8px; bottom:0; width:32px; height:22px; border:3px solid var(--ink); border-bottom:0; border-radius:20px 20px 0 0; }.customer-icon span { position:absolute; left:33px; bottom:0; width:22px; height:22px; border:3px solid var(--ink); border-radius:50%; background:#dceeff; }.customer-note p { max-width:600px; margin:7px 0 0; font-size:14px; line-height:1.5; }
.site-footer { border-top:1px solid #b8d3f6; margin:0 48px; }.footer-top { display:flex; align-items:center; justify-content:space-between; padding:30px 20px; }.footer-brand { transform:scale(.82); transform-origin:left center; margin-right:-45px; }.footer-details { display:flex; gap:35px; font-weight:600; font-size:14px; }.footer-details a + a { padding-left:35px; border-left:1px solid #b8d3f6; }.copyright { padding:16px; margin:0 -48px; background:linear-gradient(100deg,#f4f6f8,#fff); text-align:center; color:#4b5360; font-size:13px; }.copyright p { margin:0 0 6px; }.copyright p:last-child { margin-bottom:0; }.copyright a { color:#0e62c9; }.copyright a + a { margin-left:18px; padding-left:18px; border-left:1px solid #b8d3f6; }
@media (max-width:720px) { .site-shell { width:100%; margin:0; border-radius:0; } .site-header { min-height:130px; padding:25px; } .brand { transform:scale(.82); transform-origin:left center; margin-right:-45px; } nav { gap:18px; font-size:12px; white-space:nowrap; } .hero-copy { margin-left:32px; padding-top:46px; } .hero h1 { font-size:32px; } .contact-area { grid-template-columns:1fr; padding:25px; } .customer-note { margin:0 25px 25px; padding:20px; gap:18px; } .footer-top { align-items:flex-start; flex-direction:column; gap:18px; } .footer-details { flex-direction:column; gap:10px; padding-left:0; } .footer-details a + a { padding-left:0; border-left:0; } }
@media (max-width:420px) { .site-header { flex-direction:column; align-items:flex-start; gap:16px; } .brand { transform:scale(.9); margin-bottom:-7px; } .hero-copy { width:calc(100% - 46px); margin-left:24px; }.hero h1 { font-size:29px; }.hero-copy > p:last-child { font-size:15px; }.customer-note { align-items:flex-start; }.customer-icon { display:none; } }