<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>BlueCare Clinic</title>
  <style>
    :root{
      --bg:#0e2a47;
      --bg-soft:#133960;
      --primary:#37b6ff;
      --accent:#7ad1ff;
      --text:#eaf6ff;
      --muted:#b9d7ee;
      --card:#102f52cc;
      --stroke:#1d4d7d66;
      --success:#4cd3a8;
      --warning:#ffd166;
      --white:#ffffff;
      --shadow: 0 10px 30px rgba(0,0,0,0.25);
      --radius:16px;
    }

    *{box-sizing:border-box}
    html,body{
      margin:0;
      padding:0;
      background: radial-gradient(1200px 800px at 85% -10%, #164371 0%, #0f3358 40%, var(--bg) 100%);
      color:var(--text);
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
      line-height:1.6;
    }

    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}

    /* Header */
    .topbar{
      position:sticky;
      top:0;
      z-index:50;
      backdrop-filter:saturate(140%) blur(10px);
      background:linear-gradient(180deg, rgba(16,47,82,0.85), rgba(16,47,82,0.55));
      border-bottom:1px solid var(--stroke);
    }
    .container{
      width:100%;
      max-width:1200px;
      margin:0 auto;
      padding:0 20px;
    }
    .nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      height:72px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      font-weight:700;
      letter-spacing:0.3px;
    }
    .logo{
      width:40px;height:40px;border-radius:12px;
      background: conic-gradient(from 210deg, var(--primary), var(--accent), var(--primary));
      display:grid;place-items:center;color:var(--bg);font-weight:900;
      box-shadow:0 6px 18px rgba(55,182,255,0.35);
    }
    .nav-links{
      display:flex;gap:26px;
    }
    .nav-links a{
      color:var(--muted);
      font-weight:500;
      padding:10px 6px;
      transition:color .2s ease, transform .2s ease;
    }
    .nav-links a:hover{color:var(--text);transform:translateY(-1px)}
    .cta{
      display:flex;gap:12px;align-items:center;
    }
    .btn{
      border:1px solid var(--stroke);
      color:var(--text);
      padding:10px 16px;
      border-radius:12px;
      background:linear-gradient(180deg, #143a62 0%, #0f2e51 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
      transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
      cursor:pointer;
    }
    .btn:hover{transform:translateY(-1px);box-shadow: var(--shadow)}
    .btn-primary{
      background:linear-gradient(180deg, #37b6ff, #1ea6fb);
      color:#05243f;
      border-color:transparent;
      font-weight:700;
    }
    .btn-primary:hover{box-shadow:0 10px 24px rgba(55,182,255,0.35)}

    /* Hero */
    .hero{
      position:relative;
      overflow:hidden;
      padding:72px 0 40px;
      border-bottom:1px solid var(--stroke);
      background:
        radial-gradient(800px 300px at 10% 0%, rgba(55,182,255,0.15), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(122,209,255,0.16), transparent 60%);
    }
    .hero-wrap{
      display:grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap:44px;
      align-items:center;
    }
    .badge{
      display:inline-flex;align-items:center;gap:8px;
      color:var(--white);
      background:rgba(55,182,255,0.16);
      border:1px solid rgba(122,209,255,0.35);
      padding:8px 12px;border-radius:999px;font-weight:600;font-size:14px;
      backdrop-filter: blur(6px);
    }
    .title{
      font-size: clamp(34px, 4.2vw, 54px);
      line-height:1.1;margin:14px 0 12px;font-weight:800;
      letter-spacing:-0.5px;
      text-shadow:0 8px 40px rgba(55,182,255,0.18);
    }
    .subtitle{
      color:var(--muted);
      font-size: clamp(16px, 1.2vw, 18px);
      margin-bottom:24px;
    }
    .hero-actions{
      display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;
    }
    .trust{
      display:flex;gap:14px;align-items:center;margin-top:24px;color:var(--muted);
      font-size:14px;
    }
    .avatars{display:flex}
    .avatar{
      width:34px;height:34px;border-radius:50%;
      border:2px solid rgba(255,255,255,0.15);
      background:linear-gradient(180deg,#5cc8ff,#1ea6fb);
      margin-left:-10px;
      box-shadow:0 6px 14px rgba(55,182,255,0.35);
    }
    .avatar:first-child{margin-left:0}

    /* Hero card */
    .hero-card{
      background: linear-gradient(180deg, rgba(16,47,82,0.75), rgba(16,47,82,0.55));
      border:1px solid var(--stroke);
      border-radius: var(--radius);
      padding:22px;
      box-shadow: var(--shadow);
      backdrop-filter: blur(8px);
    }
    .card-head{
      display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;
    }
    .chip{
      font-size:12px;padding:6px 10px;border-radius:999px;
      background:rgba(76, 211, 168, 0.18);
      color:#bdf5e4;border:1px solid rgba(76,211,168,0.35);
      font-weight:700;letter-spacing:.3px;
    }
    .schedule{
      display:grid;gap:10px;
      grid-template-columns: repeat(2, 1fr);
    }
    .field{
      background:rgba(15,46,80,0.6);
      border:1px solid var(--stroke);
      border-radius:12px;padding:12px 12px 10px;
      display:flex;flex-direction:column;gap:6px;
    }
    .label{font-size:12px;color:var(--muted)}
    .input{
      background:transparent;border:none;color:var(--text);
      font-size:15px;outline:none;
    }
    .hero-card .btn-primary{width:100%;margin-top:14px}

    /* Features */
    .section{
      padding:56px 0;
    }
    .features{
      display:grid;grid-template-columns: repeat(3, 1fr);gap:18px;
    }
    .feature{
      background: linear-gradient(180deg, rgba(16,47,82,0.6), rgba(16,47,82,0.4));
      border:1px solid var(--stroke);border-radius:16px;padding:18px;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .feature:hover{transform:translateY(-4px);box-shadow: var(--shadow);border-color: rgba(122,209,255,0.45)}
    .icon{
      width:42px;height:42px;border-radius:10px;
      background:linear-gradient(180deg,#7ad1ff,#37b6ff);
      color:#083054;font-weight:900;
      display:grid;place-items:center;margin-bottom:10px;
      box-shadow:0 8px 20px rgba(55,182,255,0.35)
    }
    .feature h3{margin:0 0 6px}
    .feature p{margin:0;color:var(--muted)}

    /* Appointment CTA */
    .cta-band{
      margin-top:22px;
      background: linear-gradient(90deg, rgba(55,182,255,0.1), rgba(55,182,255,0) 60%), linear-gradient(180deg, rgba(16,47,82,0.7), rgba(16,47,82,0.55));
      border:1px solid var(--stroke);
      padding:22px;border-radius:16px;display:flex;align-items:center;justify-content:space-between;gap:16px;
    }
    .cta-band p{margin:0;color:var(--muted)}
    .cta-band .btn-primary{white-space:nowrap}

    /* Doctors */
    .grid{
      display:grid;grid-template-columns: repeat(3, 1fr);gap:18px;margin-top:10px;
    }
    .card{
      background: linear-gradient(180deg, rgba(16,47,82,0.6), rgba(16,47,82,0.42));
      border:1px solid var(--stroke);
      border-radius:16px;padding:16px;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .card:hover{transform:translateY(-4px);box-shadow: var(--shadow);border-color: rgba(122,209,255,0.45)}
    .doc{
      display:flex;gap:14px;align-items:center;
    }
    .doc .pic{
      width:56px;height:56px;border-radius:14px;
      background:linear-gradient(180deg,#5cc8ff,#1ea6fb);
      box-shadow:0 8px 24px rgba(55,182,255,0.35)
    }
    .doc h4{margin:0 0 4px}
    .meta{color:var(--muted);font-size:14px;margin:0}
    .tags{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
    .tag{
      font-size:12px;padding:6px 10px;border-radius:999px;
      background:rgba(122,209,255,0.12);
      border:1px solid rgba(122,209,255,0.35);
      color:#d4efff;
    }

    /* Footer */
    .footer{
      margin-top:40px;
      border-top:1px solid var(--stroke);
      padding:30px 0 50px;
      color:var(--muted);
    }
    .foot-grid{
      display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:18px;
    }
    .foot-grid h5{margin:0 0 8px;color:var(--text)}
    .foot-grid a{color:var(--muted);display:block;padding:6px 0}
    .copyright{
      text-align:center;margin-top:22px;font-size:14px;color:#93c7ea
    }

    /* Responsive */
    @media (max-width: 980px){
      .hero-wrap{grid-template-columns:1fr}
      .nav-links{display:none}
      .features{grid-template-columns:1fr 1fr}
      .grid{grid-template-columns:1fr 1fr}
      .foot-grid{grid-template-columns:1fr 1fr}
    }
    @media (max-width: 640px){
      .schedule{grid-template-columns:1fr}
      .features, .grid{grid-template-columns:1fr}
      .cta-band{flex-direction:column;align-items:flex-start}
      .nav{height:66px}
    }
  </style>
</head>
<body>
  <header class="topbar">
    <div class="container nav">
      <div class="brand">
        <div class="logo">BC</div>
        <div>
          <div style="font-weight:800">BlueCare Clinic</div>
          <div style="font-size:12px;color:var(--muted)">Modern healthcare, human touch</div>
        </div>
      </div>
      <nav class="nav-links">
        <a href="#services">Services</a>
        <a href="#doctors">Our Doctors</a>
        <a href="#contact">Contact</a>
        <a href="#hours">Hours</a>
      </nav>
      <div class="cta">
        <button class="btn">Call: (555) 012-3456</button>
        <button class="btn btn-primary">Book Now</button>
      </div>
    </div>
  </header>

  <section class="hero">
    <div class="container hero-wrap">
      <div>
        <span class="badge">New patient welcome • No referral needed</span>
        <h1 class="title">Compassionate care on a modern blue canvas</h1>
        <p class="subtitle">From routine checkups to urgent visits, we bring board‑certified providers and same‑day appointments together in one calm, connected space.</p>
        <div class="hero-actions">
          <button class="btn btn-primary">Book Appointment</button>
          <button class="btn">Explore Services</button>
        </div>
        <div class="trust">
          <div class="avatars">
            <div class="avatar" title="Patient"></div>
            <div class="avatar" title="Patient"></div>
            <div class="avatar" title="Patient"></div>
            <div class="avatar" title="Patient"></div>
          </div>
          Trusted by 10,000+ local patients
        </div>
      </div>

      <div class="hero-card">
        <div class="card-head">
          <h3 style="margin:0">Quick Schedule</h3>
          <span class="chip">Open Today</span>
        </div>
        <div class="schedule">
          <div class="field">
            <label class="label">Full Name</label>
            <input class="input" type="text" placeholder="Jane Doe">
          </div>
          <div class="field">
            <label class="label">Phone</label>
            <input class="input" type="tel" placeholder="(555) 000‑0000">
          </div>
          <div class="field">
            <label class="label">Visit Type</label>
            <select class="input" style="appearance:none">
              <option>General Consultation</option>
              <option>Physical & Wellness</option>
              <option>Pediatrics</option>
              <option>Dermatology</option>
              <option>Telehealth</option>
            </select>
          </div>
          <div class="field">
            <label class="label">Preferred Date</label>
            <input class="input" type="date">
          </div>
        </div>
        <button class="btn btn-primary">Request Appointment</button>
        <p style="margin:12px 4px 0;color:var(--muted);font-size:12px">
          We’ll confirm by text within 30 minutes during business hours.
        </p>
      </div>
    </div>
  </section>

  <main class="container">
    <section id="services" class="section">
      <div class="features">
        <div class="feature">
          <div class="icon">24</div>
          <h3>Same‑Day Care</h3>
          <p>Walk‑ins welcome and guaranteed same‑day appointments for urgent needs.</p>
        </div>
        <div class="feature">
          <div class="icon">Rx</div>
          <h3>On‑Site Lab</h3>
          <p>Rapid testing and results to streamline your diagnosis and treatment.</p>
        </div>
        <div class="feature">
          <div class="icon">♥</div>
          <h3>Whole‑Family</h3>
          <p>From pediatrics to seniors, our providers care for every stage of life.</p>
        </div>
      </div>

      <div class="cta-band" id="hours">
        <div>
          <h3 style="margin:0 0 6px">Open Mon–Sat • 7:30am–7:00pm</h3>
          <p>Located at 125 Blueview Ave, Suite 300 • Free parking • Wheelchair accessible</p>
        </div>
        <div>
          <button class="btn">Call (555) 012-3456</button>
          <button class="btn btn-primary">Check Availability</button>
        </div>
      </div>
    </section>

    <section id="doctors" class="section">
      <h2 style="margin:0 0 10px">Our Doctors</h2>
      <p class="subtitle" style="margin:0 0 14px">Board‑certified, patient‑first, and tech‑enabled for faster care.</p>
      <div class="grid">
        <div class="card">
          <div class="doc">
            <div class="pic"></div>
            <div>
              <h4>Dr. Maya Chen, MD</h4>
              <p class="meta">Family Medicine • 12 yrs</p>
            </div>
          </div>
          <div class="tags">
            <span class="tag">Preventive Care</span>
            <span class="tag">Women’s Health</span>
            <span class="tag">Chronic Care</span>
          </div>
        </div>
        <div class="card">
          <div class="doc">
            <div class="pic"></div>
            <div>
              <h4>Dr. Rafael Ortiz, DO</h4>
              <p class="meta">Internal Medicine • 10 yrs</p>
            </div>
          </div>
          <div class="tags">
            <span class="tag">Urgent Care</span>
            <span class="tag">Hypertension</span>
            <span class="tag">Telehealth</span>
          </div>
        </div>
        <div class="card">
          <div class="doc">
            <div class="pic"></div>
            <div>
              <h4>Dr. Lila Gupta, FAAP</h4>
              <p class="meta">Pediatrics • 8 yrs</p>
            </div>
          </div>
          <div class="tags">
            <span class="tag">Newborns</span>
            <span class="tag">Vaccinations</span>
            <span class="tag">Adolescent Care</span>
          </div>
        </div>
      </div>
    </section>

    <section id="contact" class="section">
      <h2 style="margin:0 0 10px">Contact & Location</h2>
      <div class="grid" style="grid-template-columns:1.2fr 0.8fr">
        <div class="card">
          <h3 style="margin:0 0 10px">Send a Message</h3>
          <div class="schedule" style="grid-template-columns:1fr 1fr">
            <div class="field">
              <label class="label">Your Name</label>
              <input class="input" type="text" placeholder="John Smith">
            </div>
            <div class="field">
              <label class="label">Email</label>
              <input class="input" type="email" placeholder="you@example.com">
            </div>
            <div class="field" style="grid-column:1/-1">
              <label class="label">Message</label>
              <textarea class="input" placeholder="How can we help?" rows="4" style="resize:vertical"></textarea>
            </div>
          </div>
          <button class="btn btn-primary" style="margin-top:14px">Send Message</button>
        </div>
        <div class="card">
          <h3 style="margin:0 0 10px">Visit Us</h3>
          <p class="meta">125 Blueview Ave, Suite 300, Ocean City</p>
          <div style="height:180px;border-radius:12px;overflow:hidden;border:1px solid var(--stroke);background:
            linear-gradient(180deg, #164371, #0f2e51)">
            <div style="height:100%;display:grid;place-items:center;color:#cfeaff">Map Placeholder</div>
          </div>
          <div class="tags" style="margin-top:12px">
            <span class="tag">Free Parking</span>
            <span class="tag">Bus 12, 45</span>
            <span class="tag">Wheelchair Access</span>
          </div>
        </div>
      </div>
    </section>
  </main>

  <footer class="footer">
    <div class="container">
      <div class="foot-grid">
        <div>
          <div class="brand" style="margin-bottom:8px">
            <div class="logo">BC</div>
            <div style="font-weight:800">BlueCare Clinic</div>
          </div>
          <p>Modern, patient‑centered healthcare with same‑day access and connected digital tools.</p>
        </div>
        <div>
          <h5>Services</h5>
          <a href="#">Primary Care</a>
          <a href="#">Urgent Care</a>
          <a href="#">Pediatrics</a>
          <a href="#">Dermatology</a>
        </div>
        <div>
          <h5>Resources</h5>
          <a href="#">Insurance & Billing</a>
          <a href="#">Patient Portal</a>
          <a href="#">Privacy Policy</a>
          <a href="#">Careers</a>
        </div>
        <div>
          <h5>Contact</h5>
          <a href="#">(555) 012-3456</a>
          <a href="#">hello@bluecareclinic.com</a>
          <a href="#">125 Blueview Ave</a>
          <a href="#">Ocean City</a>
        </div>
      </div>
      <div class="copyright">© 2025 BlueCare Clinic. All rights reserved.</div>
    </div>
  </footer>
</body>
</html>