:root{
  --navy:#071f4c;
  --blue:#1262dc;
  --teal:#109aa1;
  --purple:#6028b6;
  --muted:#61708c;
  --surface:#ffffff;
  --border:#dfe7f1;
}

html{scroll-behavior:smooth}
body{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--navy);
  background:#fff;
}
.navbar-brand{color:var(--navy)!important;letter-spacing:.01em}
.brand-mark{
  width:40px;height:40px;border:2px solid var(--blue);border-radius:12px;
  display:grid;place-items:center;color:var(--blue);font-size:1.2rem;
}
.hero-section{
  position:relative;overflow:hidden;padding:3.5rem 0 2.5rem;
  min-height:610px;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.98) 42%,rgba(245,251,255,.84) 68%,rgba(235,248,255,.66) 100%);
}
.hero-bg{
  position:absolute;inset:0;background:url("../assets/img/hero-marine.svg") center/cover no-repeat;
  opacity:.95;pointer-events:none;
}
.hero-content{z-index:2}
.eyebrow{font-size:.82rem;font-weight:800;letter-spacing:.16em;color:var(--blue)}
.hero-copy{max-width:700px;color:#263d65}
.platform-badge{
  background:rgba(255,255,255,.92);border:1px solid rgba(7,31,76,.1);
  padding:.65rem 1rem;border-radius:12px;font-weight:700;box-shadow:0 8px 24px rgba(7,31,76,.08)
}
.pillars{font-weight:800}
.pillar{white-space:nowrap}
.pillar i{margin-right:.35rem}
.pillar-blue{color:var(--blue)}
.pillar-teal{color:var(--teal)}
.pillar-purple{color:var(--purple)}
.divider{color:#8997ad}
.mini-feature{
  display:flex;align-items:center;gap:.75rem;padding:.7rem;background:rgba(255,255,255,.78);
  border:1px solid rgba(7,31,76,.08);border-radius:16px;backdrop-filter:blur(4px)
}
.mini-feature strong{display:block;font-size:.93rem}
.mini-feature small{display:block;color:#60708a;line-height:1.25;margin-top:.12rem}
.mini-icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:1.2rem;flex:0 0 auto}
.icon-blue{background:#e7f0ff;color:var(--blue)}
.icon-teal{background:#e5f8f8;color:var(--teal)}
.icon-purple{background:#f1eaff;color:var(--purple)}

.phone-stage{max-width:430px;perspective:1200px}
.phone-shell{
  width:min(100%,360px);margin:auto;background:#10151e;border:6px solid #111722;border-radius:42px;
  padding:10px;box-shadow:0 30px 70px rgba(7,31,76,.3);transform:rotate(5deg);
  position:relative;
}
.phone-notch{
  position:absolute;top:13px;left:50%;transform:translateX(-50%);width:95px;height:22px;
  border-radius:0 0 14px 14px;background:#0b1018;z-index:4;
}
.phone-screen{
  background:#f7f9fc;border-radius:31px;overflow:hidden;min-height:560px;padding:2.1rem .8rem 1rem;
}
.phone-topbar{display:flex;align-items:center;justify-content:space-between;padding:.4rem .35rem 1rem;font-size:.83rem}
.vessel-card{
  display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--border);
  border-radius:16px;padding:.8rem;margin-bottom:.65rem;box-shadow:0 4px 10px rgba(7,31,76,.05)
}
.boat-thumb{
  width:72px;height:52px;border-radius:10px;background:linear-gradient(#bde8ff 0 58%,#1b8dc2 58%);
  display:grid;place-items:center;color:#fff;font-size:1.5rem
}
.app-category{
  background:#fff;border:1px solid var(--border);border-radius:12px;padding:.7rem .75rem;margin-bottom:.42rem;
  display:flex;justify-content:space-between;align-items:center;font-size:.85rem;box-shadow:0 3px 8px rgba(7,31,76,.04)
}
.app-category.active{display:block;padding:0}
.category-head{
  border:0;background:transparent;width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:.7rem .75rem;color:var(--navy);font-weight:700
}
.category-body{padding:0 .8rem .65rem 2rem}
.category-body a{
  display:block;color:#4e5f7d;text-decoration:none;padding:.35rem 0;font-size:.78rem
}
.category-body i{width:20px}
.cat-icon{margin-right:.45rem}
.blue{color:var(--blue)} .purple{color:var(--purple)} .orange{color:#f08a24}
.yellow{color:#f4b400}.cyan{color:#1aa6bd}.green{color:#58a84e}.red{color:#e83f3f}

.pricing-section{background:linear-gradient(#fff,#fbfdff)}
.price-card{
  position:relative;background:#fff;border:1px solid var(--border);border-radius:20px;padding:1.6rem;
  box-shadow:0 12px 30px rgba(7,31,76,.08);display:flex;flex-direction:column
}
.price-card.plus{border-color:#45b9bd;box-shadow:0 16px 34px rgba(16,154,161,.13)}
.popular-badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--teal);color:#fff;
  border-radius:999px;padding:.35rem 1rem;font-size:.72rem;font-weight:800;letter-spacing:.05em
}
.plan-icon{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:1.4rem;margin-bottom:1rem
}
.plan-icon.free{background:#e7f0ff;color:var(--blue)}
.plan-icon.plus{background:linear-gradient(135deg,#0c868c,#20b2b7);color:#fff}
.plan-icon.premium{background:linear-gradient(135deg,#46209a,#7c41db);color:#fff}
.price-card h3{font-weight:800;font-size:1.35rem}
.price{display:flex;align-items:baseline;gap:.35rem;margin-top:.5rem}
.price span{font-size:2.1rem;font-weight:800}
.price small{color:#30466b}
.price.teal span{color:var(--teal)}
.price.purple span{color:var(--purple)}
.annual{font-size:.9rem;margin-top:-.15rem;color:#30466b}
.annual strong{color:var(--teal)}
.price-card:last-child .annual strong{color:var(--purple)}
.plan-list{list-style:none;padding:0;margin:0 0 1.2rem}
.plan-list li{margin:.7rem 0;color:#30466b}
.plan-list i{color:var(--blue);margin-right:.5rem}
.teal-list i{color:var(--teal)}
.purple-list i{color:var(--purple)}
.btn-teal{background:var(--teal);border-color:var(--teal);color:#fff}
.btn-teal:hover{background:#0c858b;border-color:#0c858b;color:#fff}
.btn-purple{background:var(--purple);border-color:var(--purple);color:#fff}
.btn-purple:hover{background:#4f2199;border-color:#4f2199;color:#fff}
.bottom-message{color:#30466b}
.bottom-message i{color:var(--blue);margin-right:.5rem}
.footer{border-top:1px solid var(--border)}
.checkout-summary{
  display:flex;align-items:end;justify-content:space-between;padding:1rem;border-radius:14px;background:#f3f8ff
}
.checkout-summary span{font-weight:800;font-size:1.35rem}
.checkout-summary small{color:var(--muted)}
.paypal-placeholder{
  border:1px dashed #6b7d99;border-radius:14px;padding:1rem;display:flex;gap:.8rem;align-items:center;background:#fffaf0
}
.paypal-placeholder i{font-size:1.8rem;color:#003087}
.paypal-placeholder small{display:block;color:var(--muted)}

@media (max-width:991.98px){
  .hero-section{padding-top:2rem}
  .phone-shell{transform:none}
  .feature-row{margin-bottom:1rem}
  .hero-bg{opacity:.58}
}
@media (max-width:575.98px){
  .hero-section{padding-top:1.5rem}
  .display-4{font-size:2.35rem}
  .divider{display:none}
  .pillars{gap:.7rem!important;align-items:flex-start!important;flex-direction:column}
  .price-card{padding:1.25rem}
  .phone-screen{min-height:520px}
}