/* =========================================================
   TechieCV — Coaching page (adds on top of main + packages)
   ========================================================= */
   
:root{
  --bg:#1b1b1b; 
  --surface:#2b2b2b; 
  --surface-2:#1f1f1f;
  --ink:#f6f7fb; 
  --muted:#b9bbc6; 
  --blue:#00a6fb; 
  --green:#23ce6b; 
  --yellow:#fcd441;
  --ring:rgba(255,255,255,.10); 
  --divider:rgba(255,255,255,.08);
  --radius:18px; 
  --shadow-1:0 10px 30px rgba(0,0,0,.40); 
  --shadow-2:0 22px 60px rgba(0,0,0,.55);
  --container:1120px; 
  --accent-grad:linear-gradient(135deg,var(--green),var(--blue));
}

body{
  margin:0; 
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:
    radial-gradient(900px 500px at 0% -20%, rgba(0,166,251,.12), transparent 60%),
    radial-gradient(800px 420px at 100% 0%, rgba(35,206,107,.10), transparent 55%),
    var(--bg);
  -webkit-font-smoothing:antialiased; 
  -moz-osx-font-smoothing:grayscale;
}


/* ---------- HERO ---------- */
.coaching-hero {
  width: min(1200px, 92%);
  margin: 4rem auto;
}
.coaching-hero .hero-inner {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 32px;
  align-items: center;
}
.hero-copy .hero-title { 
    text-align: 
    left; 
    line-height: 1.15; 
}

.hero-copy .hero-subtitle { 
    margin-top: 12px; 
    max-width: 52ch; 
}

.hero-ctas { 
    display: flex;
    gap: 12px; 
    margin-top: 20px; 
}

/* Phone mock — smaller vertical size */
.hero-visual { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

.phone-mock {
  position: relative;
  width: 240px;              /* smaller than packages draft */
  aspect-ratio: 9 / 18;      /* slightly less tall */
  border-radius: 28px;
  padding: 10px;
  background: linear-gradient(180deg, #0d0d0f, #1a1b1f);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: var(--deep-box-shadow);
}
.phone-notch {
  position: absolute; 
  top: 6px; 
  left: 50%; 
  transform: translateX(-50%);
  width: 40%; 
  height: 10px; 
  background: #0a0a0a;
  border-bottom-left-radius: 12px; 
  border-bottom-right-radius: 12px; opacity: .8;
}

.phone-screen {
  position: absolute; 
  inset: 12px; 
  border-radius: 22px;
  background:
    radial-gradient(180px 90px at 50% 0%, rgba(0,166,251,.18), transparent 60%),
    radial-gradient(200px 120px at 90% 20%, rgba(35,206,107,.12), transparent 60%),
    #0e0f12;
  display: grid; 
  place-items: center; 
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}

.screen-placeholder { 
    text-align: center; 
    padding: 24px; 
}

.screen-placeholder p {
    color: var(--white); 
    font-weight: bold; 
}

.screen-placeholder .hint { 
    display: block; 
    margin-top: 8px; 
    font-size: 12px; 
    color: var(--light-grey); 
    opacity: .7; 
}

.phone-home {
  position: absolute; 
  bottom: 8px; 
  left: 50%; 
  transform: translateX(-50%);
  width: 36%;
  height: 4px; 
  border-radius: 999px; 
  background: rgba(255,255,255,.18);
}

/* ---------- BENEFITS STRIP ---------- */
.coaching-benefits {
  width: min(1200px, 92%);
  margin: 4rem auto;
  gap: 2rem;
}
.benefits-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  width: 100%;
}
.benefit-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 18px;
  display: grid;
  gap: 10px;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}
.benefit-media {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.06);
}

.benefit-media img { 
    height: 50px;
    width: 50px;
    border-radius: 8px;
    object-fit: contain; 
}

.benefit-title { 
    margin-top: 4px; 
    text-align: left; 
}

.benefit-text { 
    font-size: var(--small-font); 
}

/* ---------- PROCESS ---------- */
.coaching-process { 
    width: min(1000px, 92%); 
    margin: 4rem auto; 
}

.process-steps { list-style: none; display: grid; grid-template-columns: 1fr; gap: 14px; width: 100%; margin-top: 12px; }
.process-step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px;
  border: 1px dashed rgba(255,255,255,0.14);
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
}
.step-badge {
  width: 48px; height: 48px; border-radius: 12px;
  display: grid; place-items: center;
  font-weight: 800; color: var(--black); background: var(--green);
  box-shadow: 0 6px 14px rgba(35,206,107,.25);
}
.step-content h3 { text-align: left; margin-bottom: 6px; }

/* ---------- PACKAGES LAYOUT ONLY (cards/ticks come from packages.css) ---------- */
/* =========================================================
   PACKAGE SECTION (copied exactly from packages.css)
   ========================================================= */


.packages-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.coaching-packages {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

/* Card */
.card {
  position: relative;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  isolation: isolate;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, outline-color .25s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: #f6f7fb;
}

.card--featured {
  border-color: rgba(35,206,107,.45);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  transform: translateY(-2px);
}
.card--featured .cta {
  background: var(--green);
  filter: brightness(1.08);
}
.card--featured:hover {
  transform: translateY(-3px);
}

/* Head row */
.card-head { 
  display: grid; 
  grid-template-columns: 1fr auto; 
  align-items: start; 
  gap: 14px; 
  margin-bottom: 4px; 
}

.title { 
  display: inline-flex; 
  align-items: center; 
  gap: 10px; 
  font-weight: 800; 
  font-size: 22px; 
  letter-spacing: .01em; 
}

.title .dot { 
  width: 8px; 
  height: 8px; 
  border-radius: 50%;
  background: var(--accent-grad); 
  box-shadow: 0 0 0 6px rgba(0,166,251,.10); 
}

#basic-package-title .dot { 
  background: var(--blue); 
  box-shadow: 0 0 0 6px rgba(0,166,251,.10);
}
#standard-package-title .dot { 
  background: var(--green); 
  box-shadow: 0 0 0 6px rgba(35,206,107,.10);
}
#premium-package-title .dot { 
  background: var(--yellow); 
  box-shadow: 0 0 0 6px rgba(252,212,65,.10);
}

.price-right { 
  text-align: right; 
  display: flex; 
  flex-direction: column; 
  align-items: flex-end; 
  line-height: 1; 
  margin-top: 2px; 
}
.price-right .amount { 
  font-size: 32px; 
  font-weight: 900; 
  letter-spacing: -0.02em; 
}

.desc { 
  color: var(--muted); 
  font-size: 14px; 
  margin: 0 0 4px; 
}

/* Feature list */
.features { 
  list-style: none; 
  padding: 0; 
  margin: 0; 
  display: grid; 
  gap: 10px; 
}
.features li { 
  display: grid; 
  grid-template-columns: 22px 1fr;
  gap: 10px; 
  align-items: start; 
  font-size: 14px; 
  padding: 4px; 
  border-bottom: 1px dashed rgba(255,255,255,0.08); 
}
.features li.new { 
  background: radial-gradient(circle at center, rgba(35,206,107,0.18) 0%, rgba(35,206,107,0.10) 70%, transparent 100%); 
  border-radius: 6px; 
}

/* Tick icon */
.tick { 
  width: 20px; 
  height: 20px; 
  border-radius: 7px; 
  display: grid; 
  place-items: center; 
  border: 1px solid var(--divider); 
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); 
  box-shadow: inset 0 0 0 2px rgba(0,166,251,.12); 
}
.tick::after { 
  content: ""; 
  width: 10px; 
  height: 10px; 
  border-radius: 3px; 
  background: var(--accent-grad); 
}

/* CTA */
.card-bottom { 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .75rem;
  margin-top: auto; 
}

.cta { 
  display: inline-flex; 
  justify-content: center; 
  align-items: center; 
  width: 100%; 
  min-height: 48px; 
  padding: 12px 16px; 
  border-radius: 12px; 
  font-weight: 900; 
  letter-spacing: .01em; 
  text-decoration: none; 
  color: var(--ink); 
  background: var(--green); 
  border: 1px solid var(--divider); 
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; 
}
.cta:hover { 
  transform: translateY(-2px); 
  filter: brightness(1.06); 
  box-shadow: 0 10px 30px rgba(0,0,0,.45); 
}

.note { 
  margin: 4px 0 0; 
  text-align: center; 
  font-size: 12px; 
  color: var(--muted); 
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .coaching-hero .hero-inner { grid-template-columns: 1fr; }
  .hero-title { text-align: center; }
  .hero-subtitle { margin-inline: auto; text-align: center; }
  .hero-ctas { justify-content: center; }
  .hero-visual { order: -1; }
}
@media (max-width: 900px) {
  .benefits-row { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .phone-mock { width: 220px; }
}