/* ===== Tortuga Marketing — Bright Nautical Theme ===== */
/* Palette: crisp blues + neutral grays on mostly-white UI */
:root{
    --ink:#0F1115;            /* near-black text on light */
    --navy:#0F2544;           /* deep navy for headers/hero accents */
    --blue:#1F6FEB;           /* primary blue (CTA) */
    --blue-600:#1859C2;       /* hover blue */
    --sky:#E8F0FF;            /* very light blue tint for subtle bands */
    --gray-900:#1B1F24;
    --gray-700:#4A4F57;
    --gray-500:#6E7781;
    --gray-300:#D0D7DE;
    --gray-200:#E6EAEE;
    --gray-100:#F5F7FA;
  
    --text:#1B1F24;           /* default text on light */
    --text-muted:#525965;
  
    --bg:#F7F8FB;             /* page background */
    --surface:#FFFFFF;        /* cards/sections */
    --surface-alt:#FAFBFC;    /* alternate surface */
  
    --gold:#C9A227;           /* small accent (optional) */
    --danger:#D64545;         /* warn/negative if needed */
  
    --radius:10px;
    --shadow:0 6px 24px rgba(15,17,21,0.06), 0 2px 8px rgba(15,17,21,0.05);
    --shadow-sm:0 2px 10px rgba(15,17,21,0.06);
  }
  
  /* Global */
  body{
    font-family:sans-serif;
    margin:0; padding:0;
    background-color:var(--bg);
    color:var(--text);
  }
  
  .container{
    max-width:960px; margin:0 auto; padding:1em;
    text-align:center;
  }
  
  /* Header / Nav */
  header{
    background-color:#ffffff;
    color:var(--navy);
    padding:1em 0;
    box-shadow:var(--shadow-sm);
  }
  header h1{
    margin:0; padding-bottom:.5em; text-align:center; color:var(--navy);
  }
  header nav{ text-align:center; }
  header nav a{
    margin:0 1em; text-decoration:none; font-weight:700;
    color:var(--navy);
  }
  header nav a:hover{ color:var(--blue); }
  
  /* Main */
  main{ padding:2em 0; }
  
  /* Footer */
  footer{
    background-color:#ffffff;
    color:var(--gray-700);
    text-align:center; padding:1em 0;
    border-top:1px solid var(--gray-200);
  }
  
  /* Hero (lighter, airy) */
  .hero{
    text-align:center; padding:3em 0;
    background:linear-gradient(0deg, #ffffff 0%, var(--sky) 100%);
    color:var(--text);
  }
  .hero h1{ color:var(--navy); }
  .hero p{ color:var(--text-muted); }
  .hero .cta-button{
    display:inline-block; margin-top:1em; padding:.75em 1.5em;
    background-color:var(--blue); color:#fff; text-decoration:none; font-weight:700;
    border-radius:8px; transition:background-color .2s ease-in-out, transform .05s ease-in-out;
    box-shadow:var(--shadow-sm);
  }
  .hero .cta-button:hover{ background-color:var(--blue-600); transform:translateY(-1px); }
  
  /* Features grid (cards) */
  .features{
    display:flex; flex-wrap:wrap; justify-content:space-around; margin-top:3em;
    gap:1.5em;
  }
  .feature{
    width:30%; min-width:260px;
    background:var(--surface); margin-bottom:1.5em; padding:1.2em;
    box-shadow:var(--shadow); border-radius:var(--radius);
    color:var(--text);
    text-align:left;
    border:1px solid var(--gray-200);
  }
  @media (max-width:768px){ .feature{ width:100%; } }
  
  /* About (section card) */
  .about{
    background:var(--surface);
    margin-top:3em; padding:2em; border-radius:var(--radius);
    box-shadow:var(--shadow);
    color:var(--text);
    border:1px solid var(--gray-200);
    text-align:left;
  }
  
  /* Form */
  form{
    background:var(--surface);
    padding:2em; border-radius:var(--radius);
    box-shadow:var(--shadow); max-width:600px; margin:2em auto;
    display:flex; flex-direction:column; color:var(--text);
    border:1px solid var(--gray-200);
  }
  form label{ margin-top:1em; margin-bottom:.25em; font-weight:700; color:var(--gray-700); }
  form input, form textarea{
    padding:.75em; font-size:1em; border:1px solid var(--gray-300);
    border-radius:8px; font-family:inherit; resize:vertical; background:#fff;
  }
  form textarea{ min-height:120px; }
  form button{
    margin-top:1.2em; padding:.8em 1.2em; font-size:1em;
    background-color:var(--blue); color:#fff; border:none; border-radius:8px; cursor:pointer; font-weight:800;
    transition:background-color .2s ease-in-out, transform .05s ease-in-out;
    box-shadow:var(--shadow-sm);
  }
  form button:hover{ background-color:var(--blue-600); transform:translateY(-1px); }
  
  /* Services wrapper (as section card) */
  .services{
    margin-top:3em; padding:2em 1em; background:var(--surface);
    border-radius:var(--radius); box-shadow:var(--shadow);
    color:var(--text); border:1px solid var(--gray-200);
  }
  .services h2{
    text-align:center; color:var(--navy); margin-bottom:2em;
  }
  .service{ margin-bottom:2em; }
  .service h3{ color:var(--blue-600); margin-bottom:.5em; }
  .service p{ color:var(--text-muted); line-height:1.6; }
  
  /* CTA band (light, with card-style) */
  .cta{
    text-align:center; background:var(--surface); color:var(--text);
    padding:3em 1em; border-radius:var(--radius); margin-top:4em;
    box-shadow:var(--shadow); border:1px solid var(--gray-200);
  }
  .cta h2{ margin-bottom:.5em; color:var(--navy); }
  .cta p{ font-size:1.1em; margin-bottom:1.5em; color:var(--text-muted); }
  .cta .cta-button{
    background-color:var(--blue); color:#fff; padding:.8em 1.5em; border-radius:8px;
    text-decoration:none; font-weight:800; transition:background-color .2s ease-in-out, transform .05s ease-in-out;
    box-shadow:var(--shadow-sm);
  }
  .cta .cta-button:hover{ background-color:var(--blue-600); transform:translateY(-1px); }
  
  /* Services grid */
  .services-grid{
    display:flex; flex-wrap:wrap; gap:2em; justify-content:center;
  }
  .service-box{
    flex:1 1 40%; max-width:450px;
    background:var(--surface); padding:2em; border-radius:var(--radius);
    box-shadow:var(--shadow); color:var(--text);
    border:1px solid var(--gray-200); text-align:left;
  }
  .service-box h3{ margin-bottom:.5em; color:var(--navy); }
  .service-box ul{ text-align:left; padding-left:1.2em; line-height:1.6; }
  .service-box li{ margin-bottom:.5em; color:var(--text-muted); }
  
  /* “Bubble” style for FAQ/details or callouts */
  details{
    background:var(--surface); border:1px solid var(--gray-200);
    padding:1rem 1.1rem; border-radius:16px; box-shadow:var(--shadow-sm);
  }
  summary{ cursor:pointer; font-weight:800; color:var(--navy); }
  
  /* ===== Landing Page (scoped) ===== */
  .lp{ --shade:var(--blue); --accent:var(--blue-600); --muted:var(--gray-500); --mx:1100px; }
  .lp .container{ max-width:var(--mx); text-align:left; }
  
  /* Buttons for LP */
  .lp .btn{
    display:inline-block; padding:.75em 1.25em; border-radius:10px; text-decoration:none; font-weight:800;
    background:var(--blue); color:#fff; border:1px solid var(--blue); transition:background-color .15s ease-in-out, transform .05s;
    box-shadow:var(--shadow-sm);
  }
  .lp .btn:hover{ background:var(--blue-600); border-color:var(--blue-600); transform:translateY(-1px); }
  .lp .btn.btn-secondary{
    background:#fff; color:var(--navy); border:1px solid var(--gray-300);
  }
  
  /* Sections */
  .lp .section{ padding:2.25em 0; }
  .lp .section.alt{
    background:var(--surface); color:var(--text);
    border:1px solid var(--gray-200); border-radius:var(--radius);
    box-shadow:var(--shadow);
  }
  
  /* Hero */
  .lp .hero{ padding:3em 0; background:linear-gradient(0deg, #ffffff 0%, var(--sky) 100%); color:var(--text); }
  .lp .hero-grid{ display:grid; gap:1.25em; align-items:center; }
  @media (min-width:860px){
    .lp .hero-grid{ grid-template-columns:1.2fr 1fr; }
    .lp .grid-2{ grid-template-columns:1fr 1fr; }
    .lp .grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
    .lp .grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  }
  
  /* Cards / stats / pills */
  .lp .card{
    background:var(--surface); border:1px solid var(--gray-200);
    border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow); color:var(--text);
  }
  .lp .pill-list{ display:flex; gap:.6rem; flex-wrap:wrap; margin:.75rem 0 0; padding:0; list-style:none; color:var(--muted); }
  .lp .pill-list li{
    border:1px solid var(--gray-300); border-radius:999px; padding:.3rem .75rem; font-size:.92rem; background:#fff; color:var(--gray-700);
  }
  .lp .stat{
    border:1px solid var(--gray-200); border-radius:var(--radius); padding:1rem; text-align:center; background:var(--surface);
    color:var(--text); box-shadow:var(--shadow-sm);
  }
  .lp .stat .num{ font-size:1.8rem; font-weight:800; color:var(--blue-600); }
  
  /* FAQ bubbles */
  .lp details{ border:1px solid var(--gray-200); border-radius:16px; padding:1rem; background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm); }
  .lp summary{ cursor:pointer; font-weight:800; color:var(--navy); }
  
  /* Dark CTA (still card-like, not fully dark) */
  .lp .cta-dark{
    background:var(--surface); color:var(--text); text-align:center; border-radius:var(--radius);
    padding:3rem 1rem; margin:2.5rem auto; max-width:var(--mx);
    border:1px solid var(--gray-200); box-shadow:var(--shadow);
  }
  .lp .cta-dark h2{ color:var(--navy); }
  .lp .cta-dark p{ color:var(--text-muted); }
  
  /* Container tweak */
  .lp .container.container--left{ text-align:left; }