:root{
    --bg:#f6fbff;          /* beachy white */
    --card:#ffffff;
    --text:#0b1220;        /* black-ish */
    --muted:#4b5b73;
    --blue:#0ea5e9;        /* sky/ocean */
    --blue2:#1d4ed8;       /* deep blue */
    --border: rgba(15,23,42,.10);
    --shadow: 0 18px 50px rgba(2, 24, 56, .10);
    --radius: 18px;
  }
  
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    background:
      radial-gradient(1100px 600px at 20% 0%, rgba(14,165,233,.18), transparent 60%),
      radial-gradient(900px 500px at 80% 10%, rgba(29,78,216,.12), transparent 55%),
      var(--bg);
    color: var(--text);
    line-height:1.55;
  }
  
  a{color:inherit;text-decoration:none}
  .container{max-width:1100px;margin:0 auto;padding:0 18px}
  
  /* NAV */
  .nav{
    position:sticky;top:0;z-index:50;
    background: rgba(246,251,255,.78);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
  }
  .nav-inner{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 0; gap:14px;
  }
  .brand{display:flex;align-items:center;gap:12px}
  .brand img{width:44px;height:44px;object-fit:contain}
  .brand .title{font-weight:900;letter-spacing:.2px}
  .brand .subtitle{font-size:12px;color:var(--muted);margin-top:2px}
  
  .links{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  .links a{font-size:14px;color:var(--muted)}
  .links a:hover{color: var(--text)}
  
  /* BUTTONS */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:10px 14px;border-radius:14px;
    border:1px solid var(--border);
    background: #fff;
    color: var(--text);
    transition: transform .15s ease, box-shadow .15s ease, border .15s ease;
    cursor:pointer;
  }
  .btn:hover{transform: translateY(-1px); box-shadow: 0 10px 22px rgba(2,24,56,.10)}
  .btn.primary{
    border: 1px solid rgba(14,165,233,.55);
    background: linear-gradient(135deg, var(--blue), var(--blue2));
    color: #fff;
  }
  .btn.primary:hover{transform: translateY(-2px); box-shadow: 0 16px 32px rgba(2,24,56,.18)}
  .btn.ghost{
    background: rgba(14,165,233,.08);
    border: 1px solid rgba(14,165,233,.22);
    color: var(--text);
  }
  .btn.small{padding:8px 12px;border-radius:12px;font-size:13px}
  
  /* HERO */
  .hero{padding:44px 0 18px}
  .hero-grid{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap:18px;
    align-items:stretch;
  }
  .card{
    background: rgba(255,255,255,.88);
    border:1px solid var(--border);
    border-radius: var(--radius);
    padding:22px;
    box-shadow: var(--shadow);
  }
  .hero-card{
    background:
      linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.92)),
      radial-gradient(900px 400px at 10% 20%, rgba(14,165,233,.25), transparent 60%),
      radial-gradient(700px 300px at 90% 30%, rgba(29,78,216,.18), transparent 55%);
    border:1px solid rgba(14,165,233,.18);
  }
  h1{
    margin:0;
    font-size:44px;
    line-height:1.05;
    letter-spacing:-.6px;
  }
  .lead{color:var(--muted);font-size:16px;margin:14px 0 18px;max-width:65ch}
  
  /* TRUST BADGES */
  .badges{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 0}
  .badge{
    font-size:13px;
    color: var(--text);
    border:1px solid rgba(14,165,233,.18);
    background: rgba(14,165,233,.07);
    padding:8px 10px;
    border-radius:999px;
  }
  
  /* SECTIONS */
  .section{padding:22px 0}
  .section h2{margin:0 0 10px;font-size:22px;letter-spacing:-.3px}
  .section p{color:var(--muted);margin:0 0 16px}
  
  /* GRIDS */
  .grid3{display:grid;grid-template-columns: repeat(3, 1fr);gap:14px}
  .item{
    border-radius: 16px;
    border:1px solid var(--border);
    background: #fff;
    padding:16px;
    box-shadow: 0 10px 26px rgba(2,24,56,.06);
  }
  .item h3{margin:0 0 6px;font-size:16px}
  .item p{margin:0;color:var(--muted);font-size:14px}
  
  .split{display:grid;grid-template-columns: 1fr 1fr;gap:14px}
  
  /* GALLERY */
  .gallery{display:grid;grid-template-columns: repeat(3, 1fr);gap:10px}
  .ph{
    border-radius: 16px;
    border:1px solid var(--border);
    background: linear-gradient(180deg, rgba(14,165,233,.10), rgba(255,255,255,1));
    overflow:hidden;
    min-height:160px;
    display:flex;align-items:center;justify-content:center;
    color: rgba(11,18,32,.55);
    font-size:13px;
  }
  .ph img{width:100%;height:100%;object-fit:cover;display:block}
  
  /* FOOTER */
  .footer{
    padding:26px 0 40px;
    border-top:1px solid var(--border);
    color:var(--muted);
    font-size:13px;
  }
  
  /* MOBILE */
  @media (max-width: 900px){
    .hero-grid{grid-template-columns:1fr}
    h1{font-size:38px}
    .grid3{grid-template-columns:1fr}
    .split{grid-template-columns:1fr}
    .gallery{grid-template-columns:1fr 1fr}
  }
 /* Pinnacle watermark (clean version) */
.made-by{
    margin-top: 10px;
    font-size: 12px;
    text-align: center;
    color: var(--muted);
  }
  
  .made-by a{
    font-weight: 700;
    color: #6d28d9; /* tasteful purple */
    text-decoration: none;
    transition: color .15s ease, text-decoration .15s ease;
  }
  
  .made-by a:hover{
    color: #4c1d95;
    text-decoration: underline;
  }
  /* Stars + review form */
.stars{
    font-size: 18px;
    letter-spacing: 2px;
    color: #f59e0b; /* gold stars */
    user-select:none;
  }
  
  .field .label{
    display:block;
    font-weight:700;
    margin-bottom:6px;
  }
  
  .req{ color:#dc2626; font-weight:900; }
  
  input[type="text"], textarea{
    width:100%;
    padding:11px 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: #fff;
    outline: none;
    font-size: 14px;
  }
  input[type="text"]:focus, textarea:focus{
    border-color: rgba(14,165,233,.55);
    box-shadow: 0 0 0 4px rgba(14,165,233,.14);
  }
  
  /* Clickable star rating */
  .rating{
    display:flex;
    flex-direction: row-reverse;
    justify-content:flex-end;
    gap:6px;
  }
  .rating input{ display:none; }
  .rating label{
    font-size: 26px;
    color: rgba(245,158,11,.25);
    cursor:pointer;
    transition: transform .12s ease, color .12s ease;
    line-height:1;
  }
  .rating label:hover{ transform: translateY(-1px); }
  .rating input:checked ~ label,
  .rating label:hover,
  .rating label:hover ~ label{
    color: #f59e0b;
  }