/* ═══════════════════════════════════════════════
   ABC Guitar Lessons · style.css
   Aesthetic: Vintage concert poster meets modern web
   Palette: Deep charcoal · Pure black · Signal red · Off-white
═══════════════════════════════════════════════ */

/* ── RESET ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

/* ── TOKENS ── */
:root{
  --bg:    #f5f4f2;
  --bg1:   #f9f8f7;
  --bg2:   #f9f8f7;
  --bg3:   #f9f8f7;
  --red:   #cc2828;
  --red2:  #e84040;
  --cream: #080808;
  --muted: #787470;
  --white: #0e0e0e;
  --line:  #cc282826;

  --serif: 'Cormorant Garamond', Georgia, serif;
  --body:  'Lora', Georgia, serif;
  --mono:  'DM Mono', monospace;

  --ease:  cubic-bezier(.16,1,.3,1);
  --t:     .5s var(--ease);
}

/* ── BASE ── */
body{
  background:var(--bg);
  color:var(--cream);
  font-family:var(--body);
  font-size:clamp(1rem,1.4vw,1.15rem);
  font-weight:400;
  line-height:1.75;
  overflow-x:hidden;
}

/* ── GRAIN OVERLAY ── */
body::after{
  content:'';
  position:fixed;inset:0;z-index:900;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
  background-size:180px;
  opacity:.03;
}

/* ════════════════════════════════
   NAV
════════════════════════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.2rem 3rem;
  transition:background .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.nav.stuck{
  background:rgba(8,7,5,.92);
  backdrop-filter:blur(16px);
  border-color:var(--line);
}
.nav.stuck .nav-name { color: var(--bg); }
.nav.stuck .nav-link { color: var(--bg); opacity: 0.7; }
.nav.stuck .nav-link:hover { opacity: 1; color: var(--red); }
.nav-brand{
  display:flex;align-items:center;gap:.7rem;
}
.nav-emblem{
  width:40px;height:40px;
  border:1.5px solid var(--red);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  overflow:hidden;
  background: var(--bg2); /* Fallback background */
}
.nav-emblem img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.nav-name{
  font-family:var(--mono);font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--white);
  transition: color var(--t);
}
.nav-links{
  display:flex;align-items:center;gap:2rem;
}
.nav-link{
  font-family:var(--mono);font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;
  transition: color var(--t), opacity var(--t);
}
.nav-link:hover{color:var(--red);}
.nav-cta{
  font-family:var(--mono);font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--bg);background:var(--red);
  padding:.55rem 1.4rem;border-radius:2px;
  text-decoration:none;
  transition:background var(--t), transform var(--t), box-shadow var(--t);
}
.nav-cta:hover{
  background:var(--red2);
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(204,40,40,.3);
}

/* ════════════════════════════════
   ABOUT / HERO
════════════════════════════════ */
.about{
  min-height:100vh;
  display:grid;
  grid-template-columns:55fr 45fr;
  align-items:center;
  position:relative;
  overflow:hidden;
}

/* Ambient glow */
.about-bg-glow{
  position:absolute;
  width:700px;height:700px;
  top:50%;right:5%;
  transform:translateY(-50%);
  background:radial-gradient(ellipse at center,
    rgba(204,40,40,.13) 0%,
    rgba(180,20,20,.04) 40%,
    transparent 70%);
  pointer-events:none;
  animation:glow-pulse 7s ease-in-out infinite alternate;
}
@keyframes glow-pulse{
  from{opacity:.5;transform:translateY(-50%) scale(1);}
  to{opacity:1;transform:translateY(-50%) scale(1.1);}
}

/* ── About Left ── */
.about-left{
  padding:9rem 3.5rem 7rem 5vw;
  display:flex;flex-direction:column;
  position:relative;z-index:2;
}

.about-kicker{
  display:flex;align-items:center;gap:.8rem;
  margin-bottom:2rem;
  opacity:0;animation:fup .7s .2s var(--ease) forwards;
}
.about-kicker-line{width:36px;height:1px;background:var(--red);flex-shrink:0;}
.about-kicker-text{
  font-family:var(--mono);font-size:.63rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--red);
}

.about-h1{
  font-family:var(--serif);
  font-size:clamp(3.5rem,6.5vw,6.8rem);
  font-weight:700;
  line-height:.9;
  letter-spacing:-.02em;
  color:var(--white);
  margin-bottom:1.8rem;
}
.about-h1 .a-r1{
  display:block;
  font-weight:300;font-style:italic;
  color:var(--muted);font-size:.48em;
  letter-spacing:.06em;margin-bottom:.25em;
  opacity:0;animation:fup .8s .3s var(--ease) forwards;
}
.about-h1 .a-r2{
  display:block;
  font-style:italic;
  background:linear-gradient(135deg,var(--red) 0%,var(--red2) 60%,var(--red) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  opacity:0;animation:fup .8s .45s var(--ease) forwards;
}

.about-rule{
  width:0;height:1px;
  background:linear-gradient(to right,var(--red),transparent);
  margin-bottom:1.8rem;
  animation:rule-grow .9s .85s var(--ease) forwards;
}
@keyframes rule-grow{to{width:min(360px,80%);}}

.about-bio{
  font-size:.97rem;color:var(--muted);
  line-height:1.8;max-width:46ch;
  opacity:0;
}
.about-bio-1{animation:fup .8s .95s var(--ease) forwards;}
.about-bio-2{
  margin-top:.8rem;margin-bottom:2.5rem;
  animation:fup .8s 1.1s var(--ease) forwards;
}

.about-stats{
  display:flex;align-items:center;gap:2rem;
  margin-bottom:2.5rem;
  opacity:0;animation:fup .8s 1.2s var(--ease) forwards;
}
.about-stat-num{
  font-family:var(--serif);font-size:2.5rem;font-weight:700;
  line-height:1;
  background:linear-gradient(135deg,var(--red),var(--red2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.about-stat-lbl{
  font-family:var(--mono);font-size:.56rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-top:.2rem;
}
.about-stat-sep{
  width:1px;height:38px;background:var(--line);flex-shrink:0;
}

.about-actions{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  opacity:0;animation:fup .8s 1.35s var(--ease) forwards;
}

/* Shared buttons */
.btn-primary{
  font-family:var(--mono);font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--bg);background:var(--red);
  padding:.85rem 2rem;border-radius:2px;
  text-decoration:none;
  transition:background var(--t), transform var(--t), box-shadow var(--t);
}
.btn-primary:hover{
  background:var(--red2);
  transform:translateY(-2px);
  box-shadow:0 12px 36px rgba(204,40,40,.4);
}
.btn-ghost{
  font-family:var(--mono);font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream);
  padding:.85rem 2rem;border-radius:2px;
  text-decoration:none;
  border:1px solid var(--line);
  transition:border-color var(--t), color var(--t), transform var(--t);
}
.btn-ghost:hover{
  border-color:rgba(204,40,40,.5);
  color:var(--red);
  transform:translateY(-2px);
}

/* ── About Right – Photos ── */
.about-right{
  position:relative;height:100vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}

.about-photos{
  position:relative;
  width:360px;height:520px;
  opacity:0;animation:fadeIn 1.2s 1.3s var(--ease) forwards;
}

/* Decorative offset frame behind main photo */
.aph-frame-dec{
  position:absolute;
  top:28px;right:-22px;
  width:272px;height:390px;
  border:1px solid rgba(204,40,40,.22);
  border-radius:2px;
  z-index:0;
}

/* Main portrait photo */
.aph-main{
  position:absolute;
  top:0;right:0;
  width:272px;height:390px;
  overflow:hidden;
  border-radius:2px;
  border:1px solid var(--line);
  z-index:1;
}
.aph-main img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center top;
  filter:sepia(15%) contrast(1.06) brightness(.9);
  transition:filter var(--t), transform .8s var(--ease);
}
.about-photos:hover .aph-main img{
  transform:scale(1.03);
  filter:sepia(8%) contrast(1.08) brightness(.92);
}
.aph-main-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 55%,rgba(8,7,5,.55));
  pointer-events:none;
}

/* Smaller accent photo overlapping bottom-left */
.aph-accent{
  position:absolute;
  bottom:0;left:0;
  width:196px;height:252px;
  overflow:hidden;
  border-radius:2px;
  border:1px solid rgba(204,40,40,.4);
  z-index:2;
  background:var(--bg);
}
.aph-accent img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 20%;
  filter:sepia(20%) contrast(1.1) brightness(.85);
  transition:transform .8s var(--ease);
}
.about-photos:hover .aph-accent img{
  transform:scale(1.04);
}
.aph-accent-label{
  position:absolute;bottom:0;left:0;right:0;
  padding:.6rem .8rem;
  background:linear-gradient(to top,rgba(8,7,5,.85),transparent);
}
.aph-accent-label span{
  font-family:var(--mono);font-size:.52rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);
}

/* Vertical label */
.about-vert-text{
  position:absolute;right:2rem;top:50%;
  transform:translateY(-50%) rotate(90deg);
  font-family:var(--mono);font-size:.58rem;
  letter-spacing:.25em;text-transform:uppercase;
  color:var(--muted);opacity:.3;white-space:nowrap;
}

/* ── Scroll indicator ── */
.scroll-line{
  position:absolute;bottom:2.5rem;left:5vw;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  opacity:0;animation:fadeIn 1s 1.8s ease forwards;
  z-index:2;
}
.scroll-line span{
  font-family:var(--mono);font-size:.58rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.scroll-line-bar{
  width:1px;height:48px;
  background:linear-gradient(to bottom,var(--red),transparent);
  animation:growbar 2s 2s ease-in-out infinite;
}
@keyframes growbar{
  0%{transform:scaleY(0);transform-origin:top;}
  50%{transform:scaleY(1);transform-origin:top;}
  51%{transform:scaleY(1);transform-origin:bottom;}
  100%{transform:scaleY(0);transform-origin:bottom;}
}

/* ════════════════════════════════
   MARQUEE
════════════════════════════════ */
.marquee-strip{
  background:var(--red);
  padding:.8rem 0;overflow:hidden;
}
.marquee-track{
  display:flex;width:max-content;
  animation:marquee 30s linear infinite;
}
.marquee-item{
  flex-shrink:0;
  font-family:var(--mono);font-size:.7rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--bg);padding:0 2.5rem;white-space:nowrap;
}
.marquee-dot{color:rgba(8,7,5,.3);}
@keyframes marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ════════════════════════════════
   SHARED SECTION UTILITIES
════════════════════════════════ */
.section-full{padding:7rem clamp(1.5rem,5vw,5rem);}
.section{max-width:1240px;margin:0 auto;}

.s-eyebrow{
  display:flex;align-items:center;gap:1rem;margin-bottom:.8rem;
}
.s-eyebrow-num{
  font-family:var(--mono);font-size:.62rem;
  letter-spacing:.2em;color:var(--red);
}
.s-eyebrow-line{
  flex:1;max-width:40px;height:1px;background:var(--red);opacity:.4;
}
.s-title{
  font-family:var(--serif);
  font-size:clamp(2.2rem,4vw,3.5rem);
  font-weight:700;line-height:1.05;
  color:var(--white);margin-bottom:3.5rem;
}
.s-title em{font-style:italic;color:var(--red);}

/* ════════════════════════════════
   COURSES
════════════════════════════════ */
.courses-bg{
  background:var(--bg1);
  border-top:1px solid var(--line);
}

.courses-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
  margin-bottom:2.5rem;
  align-items:start;
}

/* ── Course Card ── */
.course-card{
  background:var(--cream);
  color:var(--bg);
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),
    border-color var(--t),box-shadow var(--t),
    background var(--t), color var(--t);
}
.course-card.in{opacity:1;transform:translateY(0);}
.course-card:hover{
  background:var(--bg);
  color:var(--cream);
  border-color:rgba(204,40,40,.38);
  box-shadow:0 28px 72px rgba(0,0,0,.7);
}
/* Subtle top accent per course */
.course-card-1{border-top:2px solid var(--red);}
.course-card-2{border-top:2px solid rgba(204,40,40,.3);}

/* Card image */
.course-card-img{
  position:relative;
  height:256px;overflow:hidden;flex-shrink:0;
}
.course-card-img img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 25%;
  filter:sepia(18%) contrast(1.1) brightness(.8);
  transition:transform .9s var(--ease),filter .5s;
}
.course-card:hover .course-card-img img{
  transform:scale(1.05);
  filter:sepia(8%) contrast(1.1) brightness(.85);
}
.course-card-img-overlay{
  position:absolute;inset:0;
  background:linear-gradient(
    to bottom,
    rgba(8,7,5,.08) 0%,
    rgba(8,7,5,.55) 65%,
    rgba(8,7,5,.88) 100%
  );
}
.course-img-label{
  position:absolute;bottom:1.1rem;left:1.5rem;
}
.course-level-badge{
  font-family:var(--mono);font-size:.58rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);
  border:1px solid rgba(204,40,40,.4);
  padding:.3rem .85rem;border-radius:2px;
  background:rgba(8,7,5,.65);
  backdrop-filter:blur(6px);
}

/* Card body */
.course-card-body{
  padding:2rem 2rem 2.5rem;
  display:flex;flex-direction:column;
  flex:1;
}
.course-card-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:1rem;margin-bottom:1rem;
}
.course-name{
  font-family:var(--serif);
  font-size:clamp(1.35rem,2vw,1.75rem);
  font-weight:700;line-height:1.1;
  color:inherit;
}
.course-price-wrap{
  text-align:right;flex-shrink:0;
}
.course-price-label{
  display:block;
  font-family:var(--mono);font-size:.48rem;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.25rem;
}
.course-price{
  display:block;
  font-family:var(--serif);font-size:2rem;font-weight:700;
  background:linear-gradient(135deg,var(--red),var(--red2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1;
}
.course-desc{
  font-size:.88rem;color:var(--muted);
  line-height:1.7;margin-bottom:1.5rem;
  font-style:italic;
}

/* Stats bar */
.course-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);border-radius:2px;
  overflow:hidden;margin-bottom:1.8rem;
}
.course-stat{
  padding:.85rem .5rem;
  border-right:1px solid var(--line);
  text-align:center;
}
.course-stat:last-child{border-right:none;}
.course-stat-val{
  display:block;
  font-family:var(--serif);font-size:1.35rem;font-weight:700;
  color:inherit;line-height:1;
}
.course-stat-lbl{
  display:block;
  font-family:var(--mono);font-size:.5rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-top:.25rem;
}

/* Section label with line */
.course-section-label{
  font-family:var(--mono);font-size:.58rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);margin-bottom:.85rem;
  display:flex;align-items:center;gap:.6rem;
}
.course-section-label::after{
  content:'';flex:1;height:1px;background:var(--line);
}

/* Topics grid */
.course-topics-section{margin-bottom:1.8rem;}
.course-topics-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:.45rem .8rem;
}
.course-topic{
  font-size:.82rem;color:inherit;
  display:flex;align-items:center;gap:.5rem;
  line-height:1.3;
}
.ct-dot{color:var(--red);font-size:.45rem;flex-shrink:0;}

/* Songs list */
.course-songs-section{margin-bottom:1.8rem;}
.song-row{
  display:flex;align-items:center;gap:.9rem;
  padding:.7rem 0;
  border-bottom:1px solid var(--line);
}
.song-row:last-child{border-bottom:none;}
.song-n{
  font-family:var(--mono);font-size:.58rem;
  color:var(--red);letter-spacing:.1em;
  flex-shrink:0;width:18px;
}
.song-info{flex:1;min-width:0;}
.song-title{
  font-family:var(--serif);font-size:.98rem;font-weight:700;
  color:inherit;line-height:1.2;
}
.song-by{
  font-size:.75rem;color:var(--muted);font-style:italic;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.song-tag{
  font-family:var(--mono);font-size:.52rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);
  border:1px solid var(--line);
  padding:.2rem .55rem;border-radius:2px;
  flex-shrink:0;white-space:nowrap;
}
.song-tag-accent{
  color:var(--red);border-color:rgba(204,40,40,.3);
}

/* Requirements row */
.course-needs{
  display:flex;gap:.5rem;flex-wrap:wrap;
  margin-bottom:1.8rem;
}
.course-need{
  font-family:var(--mono);font-size:.56rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:inherit;
  border:1px solid var(--line);
  padding:.3rem .65rem;border-radius:2px;
  transition:border-color var(--t);
}
.course-need:hover{border-color:rgba(204,40,40,.3);}

/* Course CTA button */
.course-cta{
  display:block;text-align:center;
  font-family:var(--mono);font-size:.7rem;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--bg);background:var(--red);
  padding:1rem 1.5rem;border-radius:2px;
  text-decoration:none;
  margin-top:auto;
  transition:background var(--t),transform var(--t),box-shadow var(--t);
}
.course-cta:hover{
  background:var(--red2);
  transform:translateY(-2px);
  box-shadow:0 10px 32px rgba(204,40,40,.35);
}

/* Language strip */
.lang-strip{
  display:flex;align-items:center;gap:1.5rem;
  padding:1.5rem 0;
  border-top:1px solid var(--line);
}
.lang-strip-pre{
  font-family:var(--mono);font-size:.58rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);flex-shrink:0;
}
.lang-strip-flags{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
}
.lang-flag{
  display:flex;align-items:center;gap:.45rem;
  font-family:var(--mono);font-size:.6rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--cream);
}
.lang-sep{color:var(--line);font-size:.8rem;}

/* ════════════════════════════════
   CONTACT
════════════════════════════════ */
.contact-bg{
  position:relative;background:var(--bg);
  border-top:1px solid var(--line);overflow:hidden;
}
.contact-glow{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:900px;height:500px;
  background:radial-gradient(ellipse,rgba(204,40,40,.1) 0%,transparent 65%);
  pointer-events:none;
}
.contact-inner{
  max-width:860px;margin:0 auto;text-align:center;
  padding:8rem clamp(1.5rem,5vw,3rem);
  position:relative;z-index:1;
}
.contact-pre{
  font-family:var(--mono);font-size:.65rem;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--red);margin-bottom:1.2rem;
  display:flex;align-items:center;justify-content:center;gap:.8rem;
}
.contact-pre::before,.contact-pre::after{
  content:'';width:40px;height:1px;background:var(--red);opacity:.4;
}
.contact-h2{
  font-family:var(--serif);
  font-size:clamp(3rem,6.5vw,5.5rem);
  font-weight:700;line-height:.95;
  color:var(--white);margin-bottom:1.2rem;
}
.contact-h2 em{
  font-style:italic;
  background:linear-gradient(135deg,var(--red),var(--red2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.contact-sub{
  font-style:italic;color:var(--muted);
  margin-bottom:3.5rem;font-size:1.05rem;
}
.contact-cards{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:2.5rem;
}
.c-card{
  text-decoration:none;
  display:flex;flex-direction:column;gap:.4rem;
  padding:2rem 1.8rem;
  border:1px solid var(--line);border-radius:4px;
  background:var(--cream);text-align:left;
  color:var(--bg);
  opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),
    border-color var(--t),background var(--t),box-shadow var(--t), color var(--t);
}
.c-card.in{opacity:1;transform:translateY(0);}
.c-card:hover{
  color:var(--cream);
  border-color:rgba(204,40,40,.5);
  background:var(--bg);
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(0,0,0,.5);
}
.c-type{
  font-family:var(--mono);font-size:.6rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--red);
}
.c-val{
  font-family:var(--serif);font-size:clamp(1rem,2vw,1.35rem);
  font-weight:700;color:inherit;word-break:break-all;
}
.c-note{font-size:.8rem;color:var(--muted);font-style:italic;margin-top:.2rem;}
.contact-disclaimer{
  font-family:var(--mono);font-size:.6rem;
  letter-spacing:.1em;color:var(--muted);opacity:.6;text-transform:uppercase;
}

/* ════════════════════════════════
   FOOTER
════════════════════════════════ */
.footer{
  border-top:1px solid var(--line);
  padding:2rem clamp(1.5rem,5vw,5rem);
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:.5rem;background:var(--bg);
}
.footer p{
  font-family:var(--mono);font-size:.6rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);opacity:.5;
}
.footer-love{color:var(--red)!important;opacity:.4!important;}

/* ════════════════════════════════
   KEYFRAMES
════════════════════════════════ */
@keyframes fup{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes fadeIn{to{opacity:1;}}

/* ════════════════════════════════
   RESPONSIVE
════════════════════════════════ */
@media(max-width:1100px){
  .about-photos{width:320px;height:470px;}
  .aph-main{width:248px;height:360px;}
  .aph-frame-dec{width:248px;height:360px;}
  .aph-accent{width:175px;height:230px;}
}
@media(max-width:900px){
  .about{grid-template-columns:1fr;min-height:auto;}
  .about-right{display:none;}
  .about-left{padding:8rem 2rem 5rem;}
  .courses-grid{grid-template-columns:1fr;}
  .contact-cards{grid-template-columns:1fr;}
  .nav{padding:1rem 1.5rem;}
  .nav-link{display:none;}
}
@media(max-width:600px){
  .about-left{padding:7rem 1.25rem 4rem;}
  .section-full{padding:5rem 1.25rem;}
  .nav{padding:1rem 1.25rem;}
  .contact-inner{padding:5rem 1.25rem;}
  .course-stats{grid-template-columns:repeat(2,1fr);}
  .course-stat:nth-child(2){border-right:none;}
  .course-stat:nth-child(3){border-top:1px solid var(--line);}
  .course-stat:nth-child(4){border-top:1px solid var(--line);}
  .course-topics-grid{grid-template-columns:1fr;}
  .about-stats{gap:1.2rem;}
  .lang-strip{flex-direction:column;align-items:flex-start;gap:.8rem;}
}