/*
Theme Name: HealthTechPro OnePage
Theme URI: https://healthtechproacademy.com
Author: Steve Bate & GPT-5 Thinking
Description: One-page theme with Hero image uploader, social icons & contact info, and testimonials.
Version: 1.0.4
License: GPL-2.0-or-later
Text Domain: healthtechpro-onepage
*/

:root{ --navy:#071a2f; --deep-navy:#031120; --cyan:#1fb5ff; --mid-blue:#2d8cff; --white:#ffffff; --bg-grad: linear-gradient(135deg, rgba(3,17,32,1) 0%, rgba(7,26,47,1) 45%, rgba(10,34,54,1) 100%); }
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{ margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color:var(--white); background: var(--bg-grad); line-height:1.6; }
.container{width:min(1100px, 92vw); margin:0 auto}
.section{padding:72px 0}
.section.dark{background:var(--deep-navy)}
.section.alt{background:#0b2135}
h1{font-size:clamp(32px,6vw,52px); margin:0 0 12px}
h2{font-size:clamp(24px,4vw,36px); margin:0 0 8px}
p{color:#e6edf5}
a{color:var(--cyan); text-decoration:none} a:hover{text-decoration:underline}
.btn{display:inline-block; border:none; border-radius:14px; padding:14px 22px; font-weight:600; background: linear-gradient(135deg, var(--cyan), var(--mid-blue)); color:#001223; box-shadow: 0 8px 24px rgba(31,181,255,.25)}
.btn.outline{background:transparent; color:var(--white); border:1px solid rgba(255,255,255,.25)}
.btn-group{display:flex; gap:12px; flex-wrap:wrap}
.navbar{position:sticky; top:0; z-index:50; background: rgba(7,26,47,.75); backdrop-filter: blur(10px); border-bottom:1px solid rgba(255,255,255,.06)}
.navbar .nav-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.logo{display:flex; align-items:center; gap:10px; font-weight:800}
.logo img{height:36px; width:auto; border-radius:8px}
.navlinks{display:flex; gap:18px}
.navlinks a{color:#dce7f5; font-weight:600; opacity:.9} .navlinks a:hover{opacity:1}
.hero{ padding: clamp(64px, 8vw, 120px) 0 70px; background: radial-gradient(900px 500px at 85% 15%, rgba(31,181,255,.12), transparent 60%), radial-gradient(600px 400px at 15% 20%, rgba(43,108,255,.10), transparent 60%); }
.hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; align-items:center; }
.kicker{font-weight:700; letter-spacing:.2em; color: var(--cyan); text-transform:uppercase; font-size:12px; opacity:.9}
.card{ background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:20px; padding:22px; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 30px rgba(0,0,0,.25); }
.grid-3{display:grid; grid-template-columns: repeat(3,1fr); gap:18px}
.grid-2{display:grid; grid-template-columns: repeat(2,1fr); gap:18px}
.badge{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background: rgba(31,181,255,.12); border:1px solid rgba(31,181,255,.35); color:#cfefff; font-weight:600}
.small{font-size:14px; color:#c6d4e6}
blockquote{ margin:0; padding:18px 22px; border-left:3px solid var(--cyan); background: rgba(255,255,255,.03); border-radius: 8px; }
footer{padding:26px 0; color:#b8c7da; font-size:14px}
footer .footer-inner{display:grid; grid-template-columns: 1.2fr .8fr; gap:14px; align-items:start}
.footer-links a{margin-right:14px; color:#b8c7da}
.footer-links a:hover{color:#eaf2ff}
.footer-contact{display:grid; gap:6px; font-size:14px}
.social{display:flex; gap:10px; margin-top:8px}
.social a{display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12)}
.social a:hover{background:rgba(255,255,255,.12)}
.section-title{display:flex; align-items:end; justify-content:space-between; gap:8px; margin-bottom:18px}
.anchor{scroll-margin-top:90px}
/* testimonials */
.testimonials{position:relative}
.testimony-wrap{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
.testimony{background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:18px; position:relative}
.testimony:before{content:"“"; position:absolute; top:-18px; left:8px; font-size:64px; color:rgba(31,181,255,.25); font-weight:900}
.testimony .quote{font-size:16px; color:#e8f2ff}
.testimony .meta{margin-top:10px; font-weight:700; color:#cfe6ff; font-size:14px}
.testimony .role{font-weight:500; color:#aecdff; font-size:13px}
@media(max-width: 920px){ .hero-grid,.grid-3,.grid-2{grid-template-columns: 1fr} .navlinks{display:none} .testimony-wrap{grid-template-columns:1fr} }
.t-carousel{overflow:hidden}
.t-track{display:flex; gap:18px; transition: transform .6s ease}
.t-slide{min-width: calc(100%);}
.t-dots{display:flex; gap:8px; justify-content:center; margin-top:14px}
.t-dots button{width:9px; height:9px; border-radius:999px; background: rgba(255,255,255,.25); border:none}
.t-dots button.active{background: var(--cyan)}