/* Sunshine Transportation — beachy/light vibe (no images) */
:root{
  --bg: #f6fbff;
  --text: #0b1b2b;
  --muted: rgba(11,27,43,0.68);
  --card: rgba(255,255,255,0.78);
  --line: rgba(11,27,43,0.10);

  --sea: #18b6d6;
  --sky: #8fd9ff;
  --sun: #ffd166;
  --foam: #ffffff;
  --accent: #0b5fff;

  --shadow: 0 18px 40px rgba(10,40,70,0.10);
  --shadow2: 0 10px 24px rgba(10,40,70,0.08);
  --radius: 18px;
  --radius2: 26px;
  --max: 1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background:
    radial-gradient(900px 500px at 12% 0%, rgba(255,209,102,0.45), transparent 60%),
    radial-gradient(900px 520px at 88% 8%, rgba(143,217,255,0.65), transparent 55%),
    radial-gradient(1000px 600px at 50% 105%, rgba(24,182,214,0.22), transparent 60%),
    var(--bg);
}

a{color: inherit}
.container{max-width: var(--max); margin:0 auto; padding: 0 18px}

/* Topbar */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(246,251,255,0.70);
  border-bottom: 1px solid rgba(11,27,43,0.08);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  min-width: 240px;
}
.brand__mark{
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.2) 35%, transparent 52%),
    linear-gradient(135deg, rgba(255,209,102,0.95), rgba(143,217,255,0.85));
  box-shadow: var(--shadow2);
  border: 1px solid rgba(11,27,43,0.08);
}
.brand__name{
  font-weight: 950;
  letter-spacing: -0.3px;
  font-size: 14px;
  display:block;
}
.brand__tag{
  display:block;
  font-weight: 750;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.nav{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
  justify-content:flex-end;
}
.nav a{
  text-decoration:none;
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
  padding: 9px 10px;
  border-radius: 999px;
  transition: 120ms ease;
}
.nav a:hover{color: var(--text); background: rgba(11,27,43,0.06)}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid rgba(11,27,43,0.10);
  text-decoration:none;
  font-weight: 950;
  letter-spacing: 0.1px;
  box-shadow: 0 10px 20px rgba(10,40,70,0.08);
  transition: transform 120ms ease, filter 120ms ease;
  white-space: nowrap;
}
.btn:hover{transform: translateY(-1px); filter: brightness(1.02)}
.btn--primary{
  background: linear-gradient(135deg, var(--sun), var(--sky) 55%, rgba(24,182,214,0.85));
  color: #062034;
}
.btn--ghost{
  background: rgba(255,255,255,0.75);
  color: var(--text);
}
.btn--full{width:100%}

/* Hero (no photo, but “photo-style”) */
.hero{
  padding: 26px 0 10px;
}
.hero__grid{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius2);
  border: 1px solid rgba(11,27,43,0.10);
  box-shadow: var(--shadow);
  padding: 28px;
  display:grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 18px;
  align-items: start;

  /* base surface */
  background: rgba(255,255,255,0.62);
}

/* “Sky + sun + sea + waves” illusion */
.hero__grid::before{
  content:"";
  position:absolute;
  inset:-2px;

  background:
    /* foam / wave highlights */
    radial-gradient(700px 120px at 25% 68%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(700px 140px at 70% 74%, rgba(255,255,255,0.75), transparent 62%),

    /* subtle wave texture lines */
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.35) 0px,
      rgba(255,255,255,0.35) 2px,
      rgba(255,255,255,0.0) 10px,
      rgba(255,255,255,0.0) 22px
    ),

    /* sun glow */
    radial-gradient(520px 320px at 18% 20%, rgba(255,209,102,0.95), rgba(255,209,102,0.20) 55%, transparent 72%),

    /* sky */
    linear-gradient(180deg,
      rgba(143,217,255,0.95) 0%,
      rgba(143,217,255,0.60) 38%,
      rgba(255,255,255,0.35) 52%,
      rgba(24,182,214,0.35) 62%,
      rgba(24,182,214,0.70) 100%
    );

  filter: saturate(1.05) contrast(1.02);
  opacity: 0.95;
}

/* soft vignette to keep text readable */
.hero__grid::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 500px at 35% 35%, rgba(255,255,255,0.55), rgba(255,255,255,0.14) 60%, rgba(255,255,255,0.00) 78%),
    linear-gradient(90deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.64) 42%, rgba(255,255,255,0.58) 100%);
  pointer-events:none;
}

.hero__grid > *{position: relative; z-index: 1}

.hero__title{
  margin: 0 0 10px;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 0.98;
  letter-spacing: -1px;
  font-weight: 1000;
}
.hero__sub{
  margin: 0 0 14px;
  color: rgba(11,27,43,0.78);
  font-weight: 800;
  line-height: 1.6;
  max-width: 60ch;
}

.hero__pills{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 18px;
}
.pill{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(11,27,43,0.10);
  background: rgba(255,255,255,0.72);
  font-weight: 900;
  color: rgba(11,27,43,0.86);
  box-shadow: 0 10px 18px rgba(10,40,70,0.06);
  font-size: 13px;
}
.pill--accent{
  border-color: rgba(255,209,102,0.55);
  background: rgba(255,209,102,0.22);
}

.hero__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}

.note{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,209,102,0.45);
  background: rgba(255,255,255,0.72);
  font-weight: 850;
  color: rgba(11,27,43,0.84);
}

/* Hero card */
.hero__card{
  background: rgba(255,255,255,0.80);
  border: 1px solid rgba(11,27,43,0.10);
  border-radius: var(--radius2);
  box-shadow: var(--shadow2);
  padding: 16px;
}
.card__title{margin: 0 0 12px; font-size: 18px; letter-spacing: -0.2px}
.card__stats{display:grid; gap: 10px}
.stat{
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(11,27,43,0.10);
  background: rgba(255,255,255,0.76);
}
.stat__k{font-weight: 950; font-size: 13px; color: rgba(11,27,43,0.70)}
.stat__v{font-weight: 1100; font-size: 30px; letter-spacing: -0.6px; margin-top: 4px}
.stat__v span{font-weight: 900; font-size: 13px; color: rgba(11,27,43,0.60)}
.stat__m{font-weight: 800; color: rgba(11,27,43,0.62); font-size: 12px; margin-top: 6px}

.card__contact{margin-top: 12px; display:grid; gap: 10px}

/* Sections */
.section{padding: 34px 0}
.section--alt{
  background: rgba(255,255,255,0.45);
  border-top: 1px solid rgba(11,27,43,0.08);
  border-bottom: 1px solid rgba(11,27,43,0.08);
}
h2{margin: 0 0 10px; font-size: 28px; letter-spacing: -0.4px}
.lead{margin: 0 0 16px; color: var(--muted); font-weight: 850; line-height: 1.6}

.grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.card{
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(11,27,43,0.10);
  border-radius: var(--radius2);
  box-shadow: var(--shadow2);
  padding: 16px;
}
.card h3{margin: 10px 0 8px; font-size: 18px; letter-spacing: -0.2px}
.card p{margin: 0; color: var(--muted); font-weight: 820; line-height: 1.6}

.icon{
  width: 44px;
  height: 44px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, rgba(255,209,102,0.55), rgba(143,217,255,0.65), rgba(24,182,214,0.28));
  border: 1px solid rgba(11,27,43,0.10);
}

/* Pricing boxes */
.price{
  background: rgba(255,255,255,0.80);
  border: 1px solid rgba(11,27,43,0.10);
  border-radius: var(--radius2);
  box-shadow: var(--shadow2);
  padding: 16px;
}
.price__top{display:flex; align-items:flex-start; justify-content:space-between; gap: 10px}
.price__big{
  margin: 12px 0 10px;
  font-size: 44px;
  font-weight: 1100;
  letter-spacing: -0.8px;
}
.price__big span{font-size: 14px; color: var(--muted); font-weight: 900; margin-left: 6px}
.tag{
  background: rgba(255,209,102,0.35);
  border: 1px solid rgba(255,209,102,0.55);
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 1000;
  font-size: 12px;
}
.tag--soft{
  background: rgba(143,217,255,0.35);
  border-color: rgba(143,217,255,0.65);
}
.price ul{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-weight: 850;
  line-height: 1.7;
}

.fineprint{margin-top: 12px; color: rgba(11,27,43,0.58); font-weight: 850; font-size: 12px}

/* Panels + form */
.panel{
  background: rgba(255,255,255,0.80);
  border: 1px solid rgba(11,27,43,0.10);
  border-radius: var(--radius2);
  box-shadow: var(--shadow2);
  padding: 16px;
}
.panel--info{
  background:
    radial-gradient(700px 220px at 30% 10%, rgba(255,209,102,0.35), transparent 55%),
    rgba(255,255,255,0.78);
}

label{display:block; margin: 10px 0 6px; font-weight: 950; font-size: 13px; color: rgba(11,27,43,0.70)}
input, select, textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(11,27,43,0.12);
  background: rgba(255,255,255,0.92);
  color: var(--text);
  outline: none;
  font-weight: 850;
}
textarea{min-height: 110px; resize: vertical}
input::placeholder, textarea::placeholder{color: rgba(11,27,43,0.38)}
.row2{display:grid; grid-template-columns: 1fr 1fr; gap: 10px}

.small{margin: 10px 0 0; color: rgba(11,27,43,0.62); font-weight: 850; font-size: 12px}
.small a{color: var(--accent); text-decoration:none}
.small a:hover{text-decoration:underline}

.alert{
  display:none;
  padding: 12px 12px;
  border-radius: 16px;
  margin: 10px 0 12px;
  font-weight: 950;
  border: 1px solid rgba(11,27,43,0.12);
}
.alert--success{background: rgba(24,182,214,0.14); border-color: rgba(24,182,214,0.25)}
.alert--error{background: rgba(255,107,107,0.14); border-color: rgba(255,107,107,0.25)}

.bullets{margin: 0; padding-left: 18px; color: var(--muted); font-weight: 860; line-height: 1.7}

.callbox{
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(11,27,43,0.10);
  background: rgba(255,255,255,0.80);
}
.callbox__title{font-weight: 1000; margin-bottom: 10px; letter-spacing: -0.2px}

/* Footer */
.footer{
  padding: 22px 0 38px;
  border-top: 1px solid rgba(11,27,43,0.08);
  background: rgba(246,251,255,0.70);
}
.footer__inner{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
  align-items:center;
}
.footer__brand{font-weight: 1100; letter-spacing: -0.3px}
.footer__meta{color: var(--muted); font-weight: 850; font-size: 12px; margin-top: 4px}
.footer__links{display:flex; gap: 12px; flex-wrap: wrap}
.footer__links a{
  text-decoration:none;
  color: rgba(11,27,43,0.72);
  font-weight: 950;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
}
.footer__links a:hover{background: rgba(11,27,43,0.06); color: var(--text)}

/* Responsive */
@media (max-width: 980px){
  .topbar{position: static}
  .hero__grid{grid-template-columns: 1fr; padding: 18px}
  .grid3{grid-template-columns: 1fr}
  .grid2{grid-template-columns: 1fr}
  .row2{grid-template-columns: 1fr}
}