:root {
  color-scheme: light;
  --navy:#071f31;
  --navy2:#0a3e55;
  --teal:#21d2dc;
  --aqua:#69e4ea;
  --mist:#eaf7f9;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
}

body {
  overflow-x: hidden;
  background: #dceff3;
  font-family: Arial, Helvetica, sans-serif;
}

.homepage {
  width: 100%;
  margin: 0;
  padding: 0;
}

.design-canvas {
  position: relative;
  width: 100vw;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.approved-design {
  display: block;
  width: 100vw;
  height: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-drag: none;
}

.hotspot {
  position: absolute;
  z-index: 10;
  display: block;
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
  background: transparent;
  border: 0;
  outline: 0;
  cursor: pointer;
}

.hotspot:focus, .hotspot:hover, .hotspot:active {
  background: transparent;
  outline: 0;
}

.hs-home      { left: 36.20%; top: 1.80%; width: 4.60%; height: 6.45%; }
.hs-services  { left: 42.90%; top: 1.80%; width: 5.70%; height: 6.45%; }
.hs-about     { left: 50.00%; top: 1.80%; width: 4.80%; height: 6.45%; }
.hs-resources { left: 55.80%; top: 1.80%; width: 6.20%; height: 6.45%; }
.hs-contact   { left: 64.10%; top: 1.80%; width: 4.90%; height: 6.45%; }
.hs-work      { left: 80.10%; top: 1.55%; width: 17.30%; height: 7.05%; }

.hs-explore   { left: 5.35%; top: 52.65%; width: 15.85%; height: 5.20%; }
.hs-blueprint { left: 20.95%; top: 52.65%; width: 20.35%; height: 5.20%; }

.hs-card1     { left: 2.55%; top: 68.45%; width: 30.25%; height: 27.70%; }
.hs-card2     { left: 33.70%; top: 68.45%; width: 30.30%; height: 27.70%; }
.hs-card3     { left: 64.85%; top: 68.45%; width: 30.65%; height: 27.70%; }

.mobile-home { display:none; }

/* Phone-specific homepage */
@media (max-width: 720px) {
  body { background:#eaf5f7; }
  .desktop-home { display:none; }
  .mobile-home { display:block; min-height:100vh; background:#eaf5f7; color:#0b2638; }

  .m-header {
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: 68px;
    padding: 9px 14px;
    display:flex;
    align-items:center;
    gap:12px;
    background:rgba(232,248,250,.96);
    border-bottom:1px solid rgba(4,59,76,.12);
    backdrop-filter:blur(12px);
  }

  .m-brand {
    min-width:0;
    display:flex;
    align-items:center;
    gap:9px;
    text-decoration:none;
    color:#082539;
    flex:1;
  }

  .m-logo-mark {
    width:44px;
    height:44px;
    border-radius:50%;
    border:3px solid #1dc9d4;
    border-left-color:#0a2e49;
    position:relative;
    flex:0 0 auto;
  }
  .m-logo-mark:before {
    content:"";
    position:absolute;
    left:8px; right:5px; bottom:9px;
    height:10px;
    border-bottom:3px solid #1dc9d4;
    border-radius:50%;
    transform:rotate(-8deg);
  }
  .m-logo-mark:after {
    content:"▥";
    position:absolute;
    right:5px;
    top:8px;
    color:#0a2e49;
    font-weight:900;
  }

  .m-brand strong {
    display:block;
    font-size:1.05rem;
    line-height:1;
    letter-spacing:-.04em;
  }
  .m-brand strong b { color:#00b8c7; }
  .m-brand small {
    display:block;
    margin-top:5px;
    font-size:.37rem;
    line-height:1.05;
    font-weight:800;
    letter-spacing:.04em;
  }

  .m-menu {
    width:42px;
    height:42px;
    border:0;
    border-radius:12px;
    background:#0b7d8d;
    color:#fff;
    font-size:1.25rem;
  }

  .m-nav {
    display:none;
    position:absolute;
    top:68px;
    left:0; right:0;
    padding:16px 18px 18px;
    background:#effbfc;
    border-bottom:1px solid #d1e8eb;
  }
  .m-nav.open { display:grid; gap:14px; }
  .m-nav a { color:#12384d; text-decoration:none; font-weight:800; font-size:.95rem; }

  .m-hero {
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(circle at 50% -4%,rgba(132,245,250,.48),transparent 24%),
      radial-gradient(circle at 82% 32%,rgba(10,145,169,.34),transparent 33%),
      linear-gradient(145deg,#061b2d 0%,#083a53 58%,#075b68 100%);
    color:#fff;
  }

  .m-rays {
    position:absolute;
    inset:-20px 0 auto;
    height:210px;
    background:conic-gradient(from 178deg at 50% 0%,transparent 0 42%,rgba(255,255,255,.16) 44%,transparent 47%,rgba(255,255,255,.12) 49%,transparent 53%,rgba(255,255,255,.12) 56%,transparent 59%);
    opacity:.9;
    pointer-events:none;
  }

  .m-hero-content { position:relative; z-index:2; padding:42px 18px 28px; }

  .m-kicker {
    margin:0 0 13px;
    color:#34d7e1;
    font-size:.68rem;
    line-height:1.35;
    letter-spacing:.12em;
    font-weight:900;
  }

  .m-hero h1 {
    margin:0;
    max-width:400px;
    font-size:clamp(2.45rem,12vw,3.8rem);
    line-height:.98;
    letter-spacing:-.055em;
    font-weight:900;
  }
  .m-hero h1 span { color:#67e4eb; }

  .m-lead {
    margin:18px 0 0;
    max-width:430px;
    color:#e5f5f6;
    font-size:1rem;
    line-height:1.55;
  }

  .m-benefits {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin:24px 0 20px;
  }

  .m-benefits div {
    min-height:62px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 11px;
    border:1px solid rgba(116,226,233,.16);
    border-radius:14px;
    background:rgba(1,36,50,.18);
  }

  .m-benefits strong {
    min-width:28px;
    color:#37d7df;
    font-size:1.25rem;
    letter-spacing:-.2em;
  }
  .m-benefits span {
    color:#fff;
    font-size:.69rem;
    font-weight:900;
    line-height:1.22;
    letter-spacing:.025em;
  }

  .m-actions { display:grid; gap:10px; }
  .m-btn {
    min-height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    border-radius:999px;
    padding:0 17px;
    text-decoration:none;
    font-size:.74rem;
    font-weight:900;
    letter-spacing:.03em;
  }
  .m-btn.primary { background:#3bdbe3; color:#082838; }
  .m-btn.outline { border:1px solid #48dce5; color:#eaffff; background:rgba(2,30,43,.22); }

  .m-dashboard {
    margin:28px 0 0;
    padding:15px;
    border:1px solid rgba(114,232,238,.38);
    border-radius:18px;
    background:linear-gradient(150deg,rgba(4,45,64,.52),rgba(2,31,46,.34));
    box-shadow:0 24px 55px rgba(0,0,0,.18);
    backdrop-filter:blur(7px);
    transform:rotate(-1.2deg);
  }

  .m-dash-label {
    margin-bottom:9px;
    color:rgba(255,255,255,.54);
    text-align:right;
    font-size:.48rem;
    font-weight:900;
    letter-spacing:.12em;
  }

  .m-stats {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .m-stats div {
    min-height:88px;
    padding:11px;
    border:1px solid rgba(133,231,236,.23);
    border-radius:10px;
    background:rgba(8,62,79,.28);
  }

  .m-stats span,.m-stats em {
    display:block;
    font-size:.57rem;
    font-style:normal;
  }
  .m-stats span { color:#d8f4f6; font-weight:700; }
  .m-stats strong { display:block; margin:6px 0 8px; font-size:1.15rem; }
  .m-stats em { color:#45dfa8; font-weight:800; }

  .m-chart {
    margin-top:8px;
    padding:11px;
    border:1px solid rgba(133,231,236,.22);
    border-radius:10px;
    background:rgba(5,42,58,.22);
  }
  .m-chart span { font-size:.62rem; font-weight:800; color:#eaffff; }
  .m-chart svg { width:100%; height:auto; display:block; margin-top:5px; }

  .m-services {
    display:grid;
    gap:14px;
    padding:16px 14px 22px;
    background:linear-gradient(#eaf5f7,#dceef2);
  }

  .m-card {
    overflow:hidden;
    display:grid;
    grid-template-columns:108px 1fr;
    min-height:150px;
    border-radius:15px;
    background:#fff;
    border:1px solid rgba(12,73,91,.09);
    box-shadow:0 10px 26px rgba(8,47,65,.07);
    text-decoration:none;
    color:#0b2638;
  }

  .m-card-art {
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    background:linear-gradient(160deg,#b8e7ea,#498a9e 62%,#0c4b61);
  }
  .m-card-art:before {
    content:"";
    position:absolute;
    left:-25px; right:-25px; top:20px;
    height:30px;
    border-radius:50%;
    border-bottom:10px solid rgba(255,255,255,.5);
    transform:rotate(-5deg);
  }
  .m-card-art .laptop {
    position:absolute;
    left:15px; bottom:28px;
    font-size:2.7rem;
    color:#eafafa;
    transform:rotate(-5deg);
  }
  .m-card-art .gear {
    position:absolute;
    right:9px; bottom:16px;
    font-size:2rem;
    color:#061f30;
    font-weight:900;
  }
  .trip-art { background:linear-gradient(160deg,#52c5d3,#0f7791 50%,#083d53); }
  .trip-art span:first-child { font-size:4rem; color:#baf6f8; position:absolute; left:5px; bottom:24px; }
  .trip-art span:last-child { font-size:3rem; color:#fff; position:absolute; right:8px; bottom:13px; transform:rotate(-10deg); }

  .m-card > div:last-child { padding:16px 15px; }
  .m-card-num {
    display:inline-grid;
    place-items:center;
    width:29px; height:29px;
    border-radius:50%;
    background:#0d8794;
    color:#fff;
    font-size:.58rem;
    font-weight:900;
  }
  .m-card h2 {
    margin:8px 0 5px;
    font-size:1rem;
    line-height:1.06;
    letter-spacing:-.025em;
  }
  .m-card p {
    margin:0 0 8px;
    color:#5d7380;
    font-size:.78rem;
    line-height:1.36;
  }
  .m-card strong { color:#078d9d; font-size:.67rem; }

  .m-industries {
    padding:27px 15px 34px;
    background:#eaf7f9;
    text-align:center;
  }
  .m-industries > p {
    margin:0 0 7px;
    color:#0c9cac;
    font-size:.66rem;
    letter-spacing:.14em;
    font-weight:900;
  }
  .m-industries h2 {
    margin:0 auto 22px;
    max-width:320px;
    color:#0b2e49;
    font-size:1.55rem;
    line-height:1.06;
    letter-spacing:-.035em;
  }

  .m-industry-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .m-industry-grid span {
    min-height:82px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    border-radius:13px;
    background:#fff;
    border:1px solid #d5e9ec;
    color:#0b3a54;
    font-size:1.45rem;
  }
  .m-industry-grid small {
    display:block;
    font-size:.69rem;
    line-height:1.2;
    color:#59717e;
  }

  .m-work {
    margin-top:18px;
    min-height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:#0b7e8d;
    color:#fff;
    text-decoration:none;
    font-size:.75rem;
    font-weight:900;
  }
}