:root{
  --navy:#0C365A; --deep:#072136; --amber:#F59300; --burnt:#D68305;
  --ink:#0B1622; --slate:#5B6B7A; --mist:#EEF2F5; --paper:#FFFFFF;
  --mist-soft:#F5F8FA; --line:#e7edf1; --body:#33424f;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Jost',Arial,Helvetica,sans-serif; color:var(--ink);
  background:var(--paper); line-height:1.65; -webkit-font-smoothing:antialiased;}
.wrap{max-width:1120px; margin:0 auto; padding:0 32px;}
.narrow{max-width:820px;}
.eyebrow{font-size:13px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--slate);}
h1,h2,h3{font-weight:700; color:var(--navy); letter-spacing:-.02em; line-height:1.1;}
h2{font-size:38px; margin-bottom:20px;}
h3{font-size:22px; font-weight:600; letter-spacing:-.01em;}
p{font-size:18px; color:var(--body);}
a{color:inherit; text-decoration:none;}
section{padding:96px 0;}
.section-sm{padding:72px 0;}
.lead{max-width:62ch;}
.mist-sec{background:var(--mist-soft);}

/* nav */
.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.nav .wrap{display:flex; align-items:center; gap:32px; height:76px;}
.nav img{height:34px; display:block;}
.nav .links{display:flex; gap:28px; margin-left:auto; font-size:15px; font-weight:500; color:var(--navy);}
.nav .links a{opacity:.82;} .nav .links a:hover{opacity:1;}
.lang{font-size:14px; font-weight:500; color:var(--slate); cursor:pointer;}
.lang-switch{position:relative;}
.lang-menu{position:absolute; right:0; top:130%; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:6px; min-width:150px; box-shadow:0 18px 40px -22px rgba(12,54,90,.4);
  display:none; z-index:60;}
.lang-switch:hover .lang-menu{display:block;}
.lang-menu a{display:block; padding:8px 12px; border-radius:8px; font-size:14px; font-weight:500; color:var(--navy);}
.lang-menu a:hover{background:var(--mist);}
.lang-menu a.current{color:var(--slate); cursor:default;}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15px;
  padding:12px 22px; border-radius:999px; cursor:pointer; transition:.15s; border:1.6px solid transparent;}
.btn-amber{background:var(--amber); color:var(--deep);}
.btn-amber:hover{background:var(--burnt);}
.btn-navy-o{border-color:var(--navy); color:var(--navy);}
.btn-navy-o:hover{background:var(--navy); color:#fff;}
.btn-white-o{border-color:rgba(255,255,255,.5); color:#fff;}
.btn-white-o:hover{background:rgba(255,255,255,.1);}
.btn span{display:inline-block; transition:.15s;}
.btn:hover span{transform:translateX(3px);}

/* homepage hero */
.hero{position:relative; overflow:hidden; color:#fff;
  background-image:linear-gradient(95deg, rgba(6,29,49,.92) 0%, rgba(7,33,54,.72) 44%, rgba(7,33,54,.4) 100%),
    url("../assets/hero.png"),
    url("https://shipm8.com/wp-content/uploads/2023/04/Aerial-connections-01.jpg");
  background-size:cover; background-position:center; background-repeat:no-repeat;}
.hero .wrap{display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:48px;
  padding-top:112px; padding-bottom:124px;}
.hero .eyebrow{color:#9fc0dc;}
.hero h1{font-size:76px; color:#fff; margin:18px 0 22px;}
.hero p{font-size:21px; color:#dbe7f0; max-width:34ch;}
.hero-cta{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;}
.hero-art{position:relative; display:flex; justify-content:center; align-items:center; min-height:420px;}
.hero-art .halo{position:absolute; width:400px; height:400px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);}
.hero-art .halo2{position:absolute; width:290px; height:290px; border-radius:50%; background:#fff;
  box-shadow:0 44px 90px -30px rgba(0,0,0,.55);}
.hero-art img{position:relative; width:210px; height:auto;}

/* page hero (inner pages) */
.page-hero{background:var(--navy); color:#fff; position:relative; overflow:hidden;
  padding:60px 0 70px;}
.page-hero h1{color:#fff; font-size:52px; max-width:20ch;}
.page-hero p{color:#cfdae4; font-size:20px; max-width:58ch; margin-top:18px;}
.page-hero .eyebrow{color:#8fa6ba; margin-bottom:16px; display:block;}
.breadcrumb{font-size:14px; color:#9fc0dc; margin-bottom:20px;}
.breadcrumb a{opacity:.85;} .breadcrumb a:hover{opacity:1; color:#fff;}
.breadcrumb span{margin:0 8px; opacity:.5;}

/* decorative blob */
.blob{position:absolute; right:-120px; top:-90px; width:420px; height:420px;
  border-radius:46% 54% 50% 50%/54% 46% 54% 46%; background:rgba(245,147,0,.14); pointer-events:none;}

/* prose */
.prose{max-width:70ch;}
.prose p{margin-bottom:22px;}
.prose h2{margin-top:8px;}

/* chips */
.chips{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px;}
.chip{font-size:15px; font-weight:500; color:var(--navy); background:var(--mist); padding:11px 20px; border-radius:999px;}

/* split (text + aside) */
.split{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:start;}
.aside-card{background:var(--mist-soft); border:1px solid var(--line); border-radius:22px; padding:32px 34px;}
.aside-card h3{margin-bottom:14px;}

/* card grid */
.cardgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:24px; margin-top:44px;}
.card{background:#fff; border:1px solid var(--line); border-radius:22px; padding:30px 30px; transition:.18s;}
.card:hover{transform:translateY(-4px); box-shadow:0 26px 54px -34px rgba(12,54,90,.4); border-color:#d8e2e9;}
.card .tab{width:40px; height:6px; background:var(--amber); border-radius:999px; margin-bottom:20px;}
.card h3{font-size:20px; margin-bottom:10px; color:var(--navy);}
.card p{font-size:16px;}
.card .go{margin-top:18px; display:inline-flex; align-items:center; gap:7px; font-weight:600; color:var(--navy); font-size:15px;}
.card .go span{transition:.15s;} .card:hover .go span{transform:translateX(4px);}
a.card{display:block; color:inherit;}

/* checklist */
.checklist{list-style:none; margin-top:8px;}
.checklist li{padding-left:32px; position:relative; margin:14px 0; font-size:17px; color:var(--body);}
.checklist li:before{content:'✓'; position:absolute; left:0; top:0; color:var(--amber); font-weight:700; font-size:18px;}

/* quote */
.quote{font-size:26px; font-weight:600; color:var(--navy); line-height:1.35; max-width:62ch; letter-spacing:-.01em;}
.quote .amber-dot{width:54px; height:6px; background:var(--amber); border-radius:999px; margin-bottom:26px;}
.quote .by{font-size:15px; color:var(--slate); font-weight:500; margin-top:20px;}

/* timeline */
.timeline{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:26px; margin-top:44px;}
.tcard{background:#fff; border-radius:20px; padding:30px 28px; border:1px solid var(--line);}
.tcard .yr{font-size:32px; font-weight:700; color:var(--amber); letter-spacing:-.02em;}
.tcard p{font-size:16px; margin-top:8px;}

/* stats */
.stats{display:flex; gap:56px; margin-top:8px; flex-wrap:wrap;}
.stat .n{font-size:44px; font-weight:700; color:var(--navy); letter-spacing:-.02em;}
.stat .l{font-size:14px; color:var(--slate); letter-spacing:.04em; text-transform:uppercase;}

/* navy section */
.navy-sec{background:var(--navy); color:#fff; position:relative; overflow:hidden;}
.navy-sec h2{color:#fff;} .navy-sec p{color:#cfdae4;}
.navy-sec .eyebrow{color:#8fa6ba;}
.navy-sec .grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.amber-dot{width:54px; height:6px; background:var(--amber); border-radius:999px; margin-bottom:26px;}
.pull{font-size:27px; font-weight:600; color:#fff; letter-spacing:-.01em; line-height:1.3;}
.pull b{color:var(--amber); font-weight:600;}

/* product cards */
.pgrid{display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:48px;}
.pcard{border-radius:26px; overflow:hidden; background:#fff; transition:.2s; box-shadow:0 34px 64px -38px rgba(0,0,0,.6);}
.pcard:hover{transform:translateY(-6px); box-shadow:0 44px 80px -36px rgba(0,0,0,.7);}
.phead{height:158px; display:flex; align-items:center; justify-content:center;}
.phead.bts{background:#0f4270;} .phead.ship{background:#f7edd9;}
.pbody{padding:32px 34px 36px;}
.pcard .tag{font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--burnt);}
.pcard h3{margin:10px 0 12px; font-size:26px; color:var(--navy);}
.pcard p{font-size:16px; color:var(--body);}
.feat{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 6px;}
.feat span{font-size:13px; color:var(--slate); background:var(--mist); padding:6px 13px; border-radius:999px;}
.pcard .go{margin-top:22px;}

/* contact */
.contact .grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start;}
.lines a.line{display:flex; align-items:center; gap:12px; font-size:19px; color:#fff; font-weight:500; margin:14px 0;}
.lines .ic{width:40px; height:40px; border-radius:50%; background:rgba(245,147,0,.16);
  display:flex; align-items:center; justify-content:center; color:var(--amber); font-weight:700; flex-shrink:0;}
.form{background:#fff; border-radius:22px; padding:30px 32px;}
.form label{display:block; font-size:14px; font-weight:500; color:var(--navy); margin:14px 0 6px;}
.form input,.form textarea{width:100%; border:1.5px solid var(--line); border-radius:12px; padding:12px 14px;
  font-family:inherit; font-size:16px; color:var(--ink);}
.form input:focus,.form textarea:focus{outline:none; border-color:var(--amber);}

/* footer */
footer{background:var(--deep); color:#93a6b6; padding:56px 0 40px; font-size:15px;}
footer .top{display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap;}
footer .brand{font-weight:700; font-size:26px; color:#fff; letter-spacing:.04em;}
footer .cols{display:flex; gap:56px; flex-wrap:wrap;}
footer h4{color:#fff; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px;}
footer a{display:block; margin:8px 0; color:#93a6b6;} footer a:hover{color:#fff;}
footer .made{margin-top:40px; padding-top:24px; border-top:1px solid rgba(255,255,255,.08);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}

@media(max-width:860px){
  .hero .wrap,.navy-sec .grid,.pgrid,.contact .grid,.split{grid-template-columns:1fr;}
  .hero h1{font-size:52px;} h2{font-size:30px;} .page-hero h1{font-size:38px;} .hero-art{display:none;}
}