/* ManifestingGeniusCoaching — Starter Styles (Centered Hero via CSS)
   --------------------------------------------------
   Palette: adjustable; defaults lean teal → blue
   Fonts: Playfair Display (headings), Inter (body)
*/

:root{
  --bg: #ffffff;
  --text: #0b1620;
  --muted: #4a5568;
  --brand-1: #14b8a6; /* teal-500 */
  --brand-2: #3b82f6; /* blue-500 */
  --brand-3: #22d3ee; /* cyan-400 */
  --ring: rgba(20,184,166,.35);
  --card: #f7fafc;
  --card-border: #e2e8f0;
  --max: 1120px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

h1,h2,h3{font-family:"Playfair Display", Georgia, serif; line-height:1.2; color:#0a1220}
h1{font-size: clamp(2rem, 4vw, 3.2rem); margin:0 0 .5rem}
h2{font-size: clamp(1.6rem, 3vw, 2.2rem); margin:0 0 1rem}
h3{font-size: clamp(1.2rem, 2.2vw, 1.4rem); margin:.25rem 0 .5rem}

p{margin:.5rem 0 1rem}
strong{font-weight:600}

.container{max-width:var(--max); margin-inline:auto; padding:0 1rem}
.narrow{max-width:800px}
.section{padding: clamp(2.5rem, 7vw, 5rem) 0}

/* Accessibility */
.skip-link{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:1rem; top:1rem; width:auto; height:auto; background:#fff; color:#000; padding:.5rem .75rem; border-radius:.25rem; box-shadow:0 0 0 3px var(--ring)}
:focus-visible{outline:2px solid var(--brand-3); outline-offset:2px}

/* Header & Nav */
.site-header{position:sticky; top:0; z-index:50; background:#ffffffbf; backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--card-border)}
.header-inner{display:flex; align-items:center; justify-content:space-between; min-height:64px}

.brand{display:flex; align-items:center; gap:.75rem; text-decoration:none; color:inherit}
.site-logo{width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg, var(--brand-1), var(--brand-2)); box-shadow:0 2px 10px rgba(0,0,0,.08)}
.brand-text{display:flex; flex-direction:column}
.site-title{font-weight:600; letter-spacing:.2px}
.site-subtitle{font-size:.85rem; color:var(--muted)}

.nav-toggle{display:none}
.nav-toggle-label{display:none}

.nav .nav-list{list-style:none; display:flex; gap:1rem; margin:0; padding:0}
.nav a{display:inline-block; padding:.5rem .75rem; text-decoration:none; color:#0a1220; border-radius:.5rem}
.nav a:hover{background:rgba(59,130,246,.08)}

/* Mobile nav (checkbox hack) */
@media (max-width: 860px){
  .nav-toggle{display:block; position:absolute; left:-9999px}
  .nav-toggle-label{display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; border-radius:.5rem; cursor:pointer}
  .nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after{
    content:""; display:block; width:22px; height:2px; background:#0a1220; border-radius:2px; position:relative; transition:.2s ease
  }
  .nav-toggle-label span::before{position:absolute; left:0; top:-6px}
  .nav-toggle-label span::after{position:absolute; left:0; top:6px}
  .nav{position:fixed; inset:64px 0 auto 0; background:#fff; border-top:1px solid var(--card-border); transform:translateY(-110%); transition:.25s ease; box-shadow:0 10px 30px rgba(0,0,0,.06)}
  .nav .nav-list{flex-direction:column; padding:1rem}
  .nav-toggle:checked ~ .nav{transform:translateY(0%)}
}

/* Hero — centered purely with CSS */
.hero{
  background:linear-gradient(145deg, rgba(20,184,166,.10), rgba(59,130,246,.10));
  min-height:calc(100vh - 64px); /* fill screen minus sticky header */
  display:flex;
  align-items:center;
}
.hero-inner{
  width:100%;
  padding: clamp(3rem, 10vw, 6rem) 0;
  display:flex;
  flex-direction:column;
  align-items:center; /* centers logo & content */
  text-align:center;  /* centers text */
}
.hero-logo{
  width: clamp(96px, 16vw, 160px);
  height: clamp(96px, 16vw, 160px);
  margin: 0 0 1rem; /* centered by flex, no HTML tricks */
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, var(--brand-1), var(--brand-2));
  background-size: cover;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow: 0 10px 32px rgba(0,0,0,.10);
}
/* Swap in your actual logo purely via CSS: */
/* .hero-logo { background-image: url('https://manifestinggeniuscoaching.com/path/to/logo.png'); } */

.hero .support{font-size: clamp(1rem, 2.2vw, 1.2rem); color:var(--muted)}
.hero .subhead{max-width:800px; margin-inline:auto}
.cta-group{display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1rem; justify-content:center}

/* Cards & Sections */
.cards{display:grid; gap:1rem; grid-template-columns:repeat(3, 1fr)}
.cards.two{grid-template-columns:repeat(2, 1fr)}
.card{background:var(--card); border:1px solid var(--card-border); border-radius:16px; padding:1rem 1.1rem}
.card p{color:#243244}

@media (max-width: 860px){
  .cards{grid-template-columns:1fr}
  .cards.two{grid-template-columns:1fr}
}

/* Notes */
.note{margin-top:.75rem; color:var(--muted)}

/* About */
.about p{font-size:1.05rem}

/* Contact */
.contact-list{list-style:none; padding:0; margin:0; display:grid; gap:.5rem}
.contact-list a{color:#0a66c2}

/* Footer */
.site-footer{border-top:1px solid var(--card-border); background:#fff}
.footer-inner{padding:1rem 0; display:flex; align-items:center; justify-content:center; color:var(--muted)}