/* ==========================================================================
   about.css — Design by Maryam (Cinematic + Animated)
   Sections: Header, About Split, Journey Wave, Skills, Testimonials, Footer
   Accent: #ffa500
   Tip: Keep this file after your global css so these enhancements win the cascade
   ========================================================================== */

/* 0) THEME TOKENS */
:root{
  /* Brand */
  --accent:#ffa500;          /* primary orange */
  --accent-2:#ffb84d;        /* lighter accent for gradients */

  /* Ink + Greys */
  --ink:#0f172a;
  --ink-2:#1f2937;
  --ink-3:#334155;
  --muted:#64748b;
  --muted-2:#94a3b8;
  --muted-3:#cbd5e1;

  /* Surfaces */
  --bg:#ffffff;
  --bg-2:#f9fafb;
  --bg-3:#0d0f15;

  /* Header */
  --header-h:74px;
  --hd-bg:#000;
  --hd-border:rgba(255,255,255,.10);
  --link:#d1d5db;
  --link-hover:#fff;

  /* Shadows */
  --shadow-1:0 10px 26px rgba(16,24,40,.10);
  --shadow-2:0 12px 28px rgba(16,24,40,.12);
  --shadow-3:0 18px 44px rgba(16,24,40,.18);
  --shadow-accent:0 14px 34px rgba(255,165,0,.35);

  /* Radii */
  --r-8:8px; --r-10:10px; --r-12:12px; --r-14:14px; --r-16:16px;
  --r-18:18px; --r-20:20px; --r-22:22px; --r-24:24px; --r-pill:999px;
}

/* 1) BASE + TYPOGRAPHY ----------------------------------------------------- */
*,
*::before,
*::after{ box-sizing:border-box }

html, body{ margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100% }

body{
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6; color:var(--ink); background:var(--bg);
}

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

h1,h2,h3,h4{ line-height:1.15; margin:0 0 8px; font-weight:900 }
p{ margin:0 0 14px }

.container{ width:min(100% - 48px, 1180px); margin-inline:auto }

/* Elegant focus ring */
:where(a, button, input, textarea, [tabindex]):focus-visible{
  outline:3px solid rgba(255,165,0,.28);
  outline-offset:2px;
  border-radius:8px;
}

/* Subtle scrollbar */
:root{ scrollbar-color: #d1d5db #f1f5f9; scrollbar-width: thin; }
::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-track{ background:#f1f5f9 }
::-webkit-scrollbar-thumb{ background:#d1d5db; border-radius:999px }
::-webkit-scrollbar-thumb:hover{ background:#cbd5e1 }

/* 2) BUTTONS --------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 18px; border-radius:var(--r-12);
  font-weight:800; letter-spacing:.01em;
  border:1px solid transparent; cursor:pointer;
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
  user-select:none;
}
.btn--primary{
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#111; box-shadow:var(--shadow-accent);
}
.btn--primary:hover{ transform:translateY(-2px) scale(1.02); filter:saturate(110%) }
.btn--ghost{
  background:rgba(0,0,0,.04); border:1px solid rgba(0,0,0,.10); color:var(--ink);
}
.btn--ghost:hover{ transform:translateY(-2px) }
.btn--pill{ border-radius:var(--r-pill) }

/* 3) HEADER (cinematic polish) -------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:var(--hd-bg);
  border-bottom:1px solid var(--hd-border);
  backdrop-filter:saturate(140%) blur(8px);
  transition:transform .35s ease, box-shadow .25s ease, background .25s ease;
  will-change:transform;
}
.site-header[data-animated]{ animation:headerIn .5s ease both }
@keyframes headerIn{ from{ transform:translateY(-16px); opacity:0 } to{ transform:none; opacity:1 } }
.site-header.is-hidden{ transform:translateY(calc(-1 * var(--header-h))) }
.site-header.is-scrolled{ box-shadow:0 8px 24px rgba(0,0,0,.35) }

.header__bar{ height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:12px }

/* UPDATED: Logo height 132px */
.brand__logo{ height:132px; width:auto }

.scroll-progress{ position:absolute; left:0; top:0; width:100%; height:3px; overflow:hidden }
.scroll-progress span{
  display:block; width:var(--p,0%); height:100%;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  transition:width .1s linear;
}

.nav__links{ display:flex; align-items:center; gap:12px }
.nav__links a{
  position:relative; display:inline-flex; align-items:center; padding:10px 12px; border-radius:10px;
  color:var(--link); font-weight:700; transition:.25s;
}
.nav__links a:hover{ color:var(--link-hover); background:rgba(255,255,255,.06) }
.nav__links a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.nav__links a:hover::after{ transform:scaleX(1) }
.nav__links a.active, .nav__links a[aria-current="page"]{ color:#fff }
.nav__links a.active::after, .nav__links a[aria-current="page"]::after{ transform:scaleX(1) }

.nav__cta{
  color:#111; background:linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius:var(--r-pill); padding:10px 16px; box-shadow:0 10px 24px rgba(255,165,0,.28);
}

.hamburger{
  display:none; width:44px; height:44px; border-radius:12px;
  background:rgba(255,255,255,.08); border:1px solid var(--hd-border);
  align-items:center; justify-content:center; cursor:pointer; transition:.25s;
}
.hamburger span, .hamburger::before, .hamburger::after{
  content:""; width:20px; height:2px; background:#fff; display:block; transition:.3s;
}
.hamburger::before{ transform:translateY(-6px) }
.hamburger::after{ transform:translateY(6px) }
.site-header.is-open .hamburger span{ opacity:0 }
.site-header.is-open .hamburger::before{ transform:translateY(0) rotate(45deg) }
.site-header.is-open .hamburger::after{ transform:translateY(0) rotate(-45deg) }

@media (max-width: 960px){
  .hamburger{ display:flex; z-index:1002 }
  .nav__links{
    position:fixed; inset: var(--header-h) 0 auto 0; display:none; flex-direction:column; gap:10px; padding:16px;
    background:rgba(0,0,0,.96); border-bottom:1px solid var(--hd-border); z-index:1001;
  }
  .site-header.is-open .nav__links{ display:flex }
  .nav__overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.35); opacity:0; visibility:hidden; transition:.25s; z-index:1000;
  }
  .site-header.is-open .nav__overlay{ opacity:1; visibility:visible }
}

/* 4) ABOUT — GRADIENT SPLIT (cinematic) ----------------------------------- */
.about-split{
  --abg-1:#fff9f0; --abg-2:#ffffff;
  background:
    radial-gradient(800px 360px at 10% 0%, rgba(255,165,0,.12), transparent 60%),
    radial-gradient(700px 300px at 100% 100%, rgba(2,6,23,.06), transparent 60%),
    linear-gradient(180deg, var(--abg-1), var(--abg-2));
  color:var(--ink); padding:80px 0; position:relative; overflow:hidden;
}
.about-split__grid{ display:grid; gap:28px; align-items:center; grid-template-columns: 0.42fr 0.58fr; }
@media (max-width: 960px){ .about-split__grid{ grid-template-columns:1fr; text-align:center } }

.about-split__media{ display:grid; place-items:center; perspective:1000px }
.about-split__img{
  width: clamp(220px, 34vw, 420px); aspect-ratio:1/1; object-fit:cover;
  border-radius:999px; background:#fff;
  border:8px solid #fff;
  box-shadow:0 18px 60px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.04) inset;
  transform: translateZ(0);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
}
@media (hover:hover) and (pointer:fine){
  .about-split__media:hover .about-split__img{
    transform: translateY(-6px) scale(1.03) rotateZ(-.5deg);
    box-shadow:0 26px 68px rgba(0,0,0,.2);
  }
}

.about-split__title{
  margin:0 0 6px; font-weight:900;
  font-size: clamp(28px, 4.6vw, 48px); line-height:1.12; letter-spacing:.01em;
  text-wrap: balance; word-break: normal;
}
.about-split__title .u-accent{
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.about-split__sub{ margin:0 0 8px; font-weight:800; color:var(--ink-2); font-size: clamp(16px, 2vw, 18px) }
.about-split__intro{ margin:0 0 14px; color:var(--muted); font-weight:600; max-width: 680px }
@media (max-width:960px){ .about-split__intro{ margin-inline:auto } }

.about-split__actions{ display:flex; gap:12px; flex-wrap:wrap }
@media (max-width:960px){ .about-split__actions{ justify-content:center } }
.about-split__btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 20px; border-radius:14px; font-weight:900; letter-spacing:.02em;
  color:#111; background: var(--accent);
  border:1px solid rgba(0,0,0,.04);
  box-shadow:0 12px 26px rgba(255,165,0,.28);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.about-split__btn:hover{ transform: translateY(-2px) scale(1.03); filter: saturate(112%) brightness(1.02); box-shadow:0 18px 44px rgba(255,165,0,.40) }

/* Scroll-reveal helpers */
.about-split [data-anim]{ opacity:0; transform: translateY(12px);
  transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .7s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--order, 0) * 120ms);
}
.about-split [data-anim].is-in{ opacity:1; transform:none }
.about-split [data-anim="line-left"]{ transform: translateX(-24px) }
.about-split [data-anim="img-right"]{ transform: translateX(24px) }

/* 5) JOURNEY / WAVE (cinematic) ------------------------------------------- */
.journey-wave{
  --jw-bg:#f9f9f9; --jw-text:#0f172a; --jw-muted:#475569;
  --jw-line:#e9eef5; --jw-accent: var(--accent); --jw-accent2: var(--accent-2);
  background:var(--jw-bg); color:var(--jw-text); padding:80px 0; position:relative; overflow:hidden;
}
.jw-head{ text-align:center; margin-bottom:18px }
.jw-title{ margin:0 0 6px; font-weight:900; font-size:clamp(28px,4.2vw,40px) }
.jw-lead{ margin:0; color:#64748b }

.jw-wrap{ position:relative; margin-top:18px; min-height:560px }
.jw-svg{ position:absolute; inset:0; width:100%; height:360px; pointer-events:none; top:110px; z-index:0 }

/* dashed grey base */
.jw-base{
  fill:none; stroke:var(--jw-line); stroke-width:6; stroke-linecap:round;
  stroke-dasharray:8 12; opacity:.95;
}
/* animated progress & glow */
.jw-progress{
  fill:none; stroke:var(--jw-accent); stroke-width:6; stroke-linecap:round;
  filter: drop-shadow(0 0 6px rgba(255,165,0,.45));
  stroke-dasharray: 1000; stroke-dashoffset: 1000;   /* JS updates real length */
}
.jw-glow{
  fill:none; stroke:var(--jw-accent); stroke-width:14; opacity:.16;
  filter: blur(6px);
  stroke-dasharray: 1000; stroke-dashoffset: 1000;   /* JS updates */
}

.jw-item{ position:static }
.jw-node{
  position:absolute; width:56px; height:56px; border-radius:999px; display:grid; place-items:center;
  background:#fff; border:3px solid var(--jw-accent);
  box-shadow:0 0 0 10px rgba(255,165,0,.12);
  transform: translate(-50%,-50%) scale(.85); opacity:0;
  transition: transform .55s cubic-bezier(.2,.7,.2,1), opacity .55s cubic-bezier(.2,.7,.2,1);
  z-index:2;
}
.jw-node img{ width:28px; height:28px; object-fit:contain; display:block }
.jw-item.in-view .jw-node{ transform: translate(-50%,-50%) scale(1); opacity:1 }

.jw-conn{
  position:absolute; height:6px; background: linear-gradient(90deg, var(--jw-accent), var(--jw-accent2));
  border-radius:999px; box-shadow:0 6px 16px rgba(255,165,0,.25);
  transform-origin: left center; width:0; opacity:0; z-index:1;
  transition: width .55s ease, opacity .3s ease;
}
.jw-item.in-view .jw-conn{ opacity:1 }

.jw-card{
  position:absolute; width: min(420px, 38vw); background:#fff;
  border:1px solid #e5e7eb; border-radius:18px; padding:16px;
  box-shadow:0 12px 28px rgba(16,24,40,.10);
  opacity:0; transform: translateY(18px) scale(.98);
  transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .55s ease, box-shadow .25s ease;
}
.jw-item.in-view .jw-card{ opacity:1; transform:none }
.jw-year{ margin:0 0 6px; font-size:18px; font-weight:900; color:#0f172a }
.jw-card p{ margin:0; color:#475569; font-weight:600 }

@media (hover:hover){
  .jw-card:hover{ transform: translateY(-3px); box-shadow:0 20px 48px rgba(16,24,40,.16), 0 0 0 1px rgba(255,165,0,.18) inset }
}

/* Mobile — clean vertical */
@media (max-width: 900px){
  .jw-wrap{ min-height:auto; padding-left: 70px }
  .jw-svg{ display:none }
  .jw-wrap::before{ content:""; position:absolute; left:26px; top:0; bottom:0; width:2px; background:#e5e7eb; }
  .jw-node{ position:relative; left:26px; top:auto; transform: translate(-50%,0) scale(1); margin: 22px 0 6px; opacity:1 }
  .jw-card{ position:relative; width:auto; transform:none; opacity:1; margin-bottom:8px }
  .jw-conn{ display:none }
}

/* 6) SKILLS (animated bars) ----------------------------------------------- */
.skills-pro{ background:#f9f9f9; color:#0f172a; padding:80px 0 }
.skills-pro__grid{ display:grid; gap:28px; align-items:start; grid-template-columns: .48fr .52fr }
@media (max-width: 960px){ .skills-pro__grid{ grid-template-columns:1fr } }

.skills-title{ margin:0 0 8px; font-weight:900; font-size: clamp(28px, 4.6vw, 44px) }
.skills-sub{ margin:0 0 8px; font-weight:800; color:#1f2937 }
.skills-desc{ margin:0; color:#475569; max-width: 600px }
.skills-actions{ margin-top:14px; display:flex; gap:12px; flex-wrap:wrap }

.skills-list{ list-style:none; margin:0; padding:0; display:grid; gap:16px }
.skill{ opacity:0; transform: translateX(-16px); transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i,0) * 90ms) }
.skill.is-in{ opacity:1; transform:none }

.srow{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px }
.label{ font-weight:800; color:#0f172a }
.val{ color:#1f2937; font-weight:800; min-width: 42px; text-align:right }

.track{
  position:relative; width:100%; height:12px; border-radius:999px; overflow:hidden;
  background:#eef2f7; border:1px solid #e5e7eb; transition: box-shadow .25s ease;
}
.fill{
  position:absolute; left:0; top:0; bottom:0; width:100%;
  transform: scaleX(0); transform-origin: left center;
  background-image: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent));
  background-size: 200% 100%;
  border-radius:inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 6px 14px rgba(255,165,0,.18);
  transition: transform 1.5s cubic-bezier(.2,.7,.2,1);
  animation: barFlow 2.6s linear infinite; animation-play-state: paused;
}
.skill.is-in .fill{ animation-play-state: running }
@keyframes barFlow{ 0%{ background-position:0% 0 } 100%{ background-position:200% 0 } }

@media (hover:hover){
  .skill:hover .track{ box-shadow: 0 10px 26px rgba(255,165,0,.18), 0 0 0 1px rgba(255,165,0,.18) inset }
}

/* 7) TESTIMONIALS (cinematic carousel) ------------------------------------ */
.tst-hero{
  --text:#0f172a; --muted:#475569; --brd:#e5e7eb;
  background: linear-gradient(180deg, #f3f5f9, #ffffff);
  color: var(--text); padding: clamp(72px, 10vh, 100px) 0; position: relative; overflow: hidden;
}
.tst-head{ text-align:center; margin-bottom:18px }
.tst-title{ margin:0 0 6px; font-weight:900; font-size:clamp(28px, 4.4vw, 40px) }
.tst-lead{ margin:0; color:#64748b }

.tst-slider{ position:relative; z-index:1; max-width: 1000px; margin: 18px auto 0; }
.tst-viewport{ position:relative; overflow:visible; }
.tst-stage{ position:relative; min-height: 320px; transition: min-height .35s ease; perspective: 1200px; }

.tst-card{
  position:absolute; left:50%; top:0; width:min(900px, 90vw);
  background:#fff; border:1px solid var(--brd); border-radius:20px; padding:16px;
  box-shadow:var(--shadow-2); display:grid; grid-template-columns: 140px 1fr; gap:16px; align-items:center;

  opacity: var(--op, 0);
  transform: translateX(calc(-50% + var(--tx, 0px))) rotateY(var(--ry, 0deg)) scale(var(--s, .9)) translateZ(0);
  transform-origin:center; transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s ease, box-shadow .3s ease;
}
.tst-accent{ position:absolute; left:16px; right:16px; top:0; height:4px; border-radius:999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.tst-media{ display:grid; place-items:center }
.tst-media img{ width:120px; height:120px; object-fit:cover; border-radius:999px; box-shadow:0 10px 26px rgba(16,24,40,.18) }
.tst-name{ margin:0; font-size:18px; font-weight:900; color:#0f172a }
.tst-role{ margin:4px 0 8px; color:#1f2937; font-weight:700 }
.tst-text{ margin:0; color:var(--muted); font-weight:600 }

.tst-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:999px; border:1px solid #e5e7eb;
  background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.10); cursor:pointer;
}
.tst-prev{ left:-6px } .tst-next{ right:-6px }
.tst-nav::before{
  content:""; display:block; width:12px; height:12px; border:2px solid #111; border-top:none; border-right:none; margin:auto; transform: rotate(45deg);
}
.tst-next::before{ transform: rotate(-135deg) }
.tst-prev:hover, .tst-next:hover{ box-shadow:0 10px 24px rgba(255,165,0,.25); border-color:rgba(255,165,0,.45) }

.tst-dots{ display:flex; gap:8px; justify-content:center; align-items:center; margin-top:12px }
.tst-dots button{ width:8px; height:8px; border-radius:999px; border:none; cursor:pointer; background:#d1d5db; transition:.2s }
.tst-dots button.active{ background: linear-gradient(90deg, var(--accent), var(--accent-2)); width:18px }

@media (max-width: 700px){
  .tst-card{ grid-template-columns: 1fr; text-align:center }
  .tst-media img{ width:110px; height:110px }
  .tst-prev{ left:2px } .tst-next{ right:2px }
}

/* 8) FOOTER --------------------------------------------------------------- */
.site-footer{
  background: linear-gradient(180deg, #0b0d10, #0f1117);
  color:#cbd5e1; border-top:1px solid rgba(255,255,255,.08);
  padding:44px 0 24px; margin-top:0;
}
.footer__grid{
  display:grid; gap:22px; grid-template-columns: 1.2fr .8fr .8fr .8fr;
  margin-bottom:16px;
}
.footer__brand .brand__logo{ height:56px; width:auto }
.footer__about{ color:#9aa0a6; margin:10px 0 0; max-width: 520px }

.footer__title{ margin:0 0 8px; color:#e2e8f0; font-weight:800; letter-spacing:.2px }
.footer__list{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
.footer__list a{ color:#aeb4bd; transition:.25s }
.footer__list a:hover{ color:#fff }

.footer__social{ display:flex; gap:10px; margin-top:10px }
.footer__social img{ width:22px; height:22px }

.footer__bottom{
  display:flex; gap:12px; align-items:center; justify-content:space-between; border-top:1px solid rgba(255,255,255,.08);
  padding-top:14px; color:#9aa0a6; font-size:14px;
}
.footer__mini a{ color:#aeb4bd; }
.footer__mini .dot{ margin-inline:8px }
.footer__muted{ color:#94a3b8 }

@media (max-width: 1060px){
  .footer__grid{ grid-template-columns: 1fr 1fr }
}
@media (max-width: 640px){
  .footer__grid{ grid-template-columns: 1fr }
  .footer__bottom{ flex-direction:column; gap:6px; text-align:center }
}

/* 9) UTILITIES ------------------------------------------------------------ */
.u-accent{
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section{ padding:80px 0 }

/* 10) REDUCED MOTION ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .site-header, .nav__links, .hamburger, .scroll-progress span, .nav__overlay,
  .about-split [data-anim], .jw-base, .jw-progress, .jw-glow, .jw-node, .jw-card, .jw-conn,
  .skill, .fill, .tst-card, .tst-dots button{
    transition:none !important; animation:none !important;
  }
  .about-split [data-anim], .skill, .fill, .jw-node, .jw-card{
    opacity:1 !important; transform:none !important;
  }
  .jw-progress, .jw-glow{ stroke-dashoffset:0 !important }
}
/* ABOUT HERO (cinematic) */
.about-hero{ position:relative; overflow:hidden; color:#fff }

/* Background image with Ken-Burns */
.about-hero__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  filter:saturate(105%) contrast(108%);
  transform:scale(1.02);
  animation: aboutKenBurns 20s ease-in-out infinite alternate;
}
@keyframes aboutKenBurns{
  from{ transform:scale(1.02) translateY(0) }
  to  { transform:scale(1.08) translateY(10px) }
}

/* Overlays (ensure content above) */
.about-hero .hero__overlay{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(255,165,0,.14), transparent 60%),
    radial-gradient(1000px 520px at 100% 100%, rgba(2,6,23,.12), transparent 60%),
    linear-gradient(90deg, rgba(10,12,16,.70) 0%, rgba(10,12,16,.32) 60%);
}
.about-hero .hero__glow{
  position:absolute; z-index:0; left:-16%; top:-10%; width:60%; height:60%;
  background:radial-gradient(420px 260px at 30% 40%, rgba(255,165,0,.22), transparent 70%);
  filter:blur(18px)
}

/* Content above overlay */
.about-hero .hero__content{
  position:relative; z-index:2;
  min-height:70vh; display:grid; align-content:center; padding:80px 0;
}
.about-hero__stack{ max-width:1100px }

/* Kicker */
.hero__kicker{ margin:0 0 10px; color:#ffd7a3; letter-spacing:.16em; text-transform:uppercase; font-weight:900; font-size:14px }

/* Title: no mid-word break + balanced */
.hero__title{
  color:#fff; font-weight:900; font-size: clamp(36px, 6vw, 78px);
  line-height:1.08; letter-spacing:.005em; margin:0 0 16px;
  max-width: 20ch; text-wrap: balance; word-break: normal; hyphens: manual;
}
.hero__title .accent{
  background:linear-gradient(90deg, #ffa500, #ffb84d);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Subhead + buttons */
.hero__sub{ color:#e5e7eb; margin:0 0 22px; font-size:clamp(16px, 2vw, 20px); max-width:60ch }
.hero__actions{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px }
.hero__actions .btn--ghost{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); color:#fff }
.hero__actions .btn--ghost:hover{ background:rgba(255,255,255,.18) }

/* Badges */
.hero__badges{ display:flex; gap:10px; flex-wrap:wrap; padding:0; margin:6px 0 0; list-style:none }
.hero__badges li{
  color:#fff; font-weight:800; font-size:14px;
  background: rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  padding:8px 12px; border-radius:999px;
}

/* Word-level animation (robust) */
.js-words-about .w{
  display:inline-block; opacity:0; transform:translateY(24px) scale(.98); filter:blur(4px);
}
.js-words-about.is-in .w{
  animation: aboutWordIn .6s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 60ms + 80ms) forwards;
}
@keyframes aboutWordIn{ to{ opacity:1; transform:none; filter:none } }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-hero__img{ animation:none; transform:none }
  .js-words-about .w{ opacity:1; transform:none; filter:none }
}