/* =============================================================
   Eman Saeed — English Coach | styles.css
   Advanced, world-class, fully responsive RTL design system
   Theme: deep-dark + violet gradient + warm-orange accents
   ============================================================= */

/* ---------- Design Tokens ---------- */
:root{
  /* surfaces */
  --bg:#080414;
  --bg-2:#0b0620;
  --surface:#130d2e;
  --surface-2:#191240;
  --surface-3:#221a4f;
  --indigo:#1e1b4b;

  /* lines */
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);

  /* text */
  --white:#ffffff;
  --soft:#d8d4ef;
  --mute:#9a95bd;

  /* brand */
  --violet:#8b5cf6;
  --violet-2:#9a5cff;
  --violet-3:#663fff;
  --violet-soft:#c9b8ff;
  --orange:#ee634e;
  --orange-2:#f0785f;
  --green:#5fe06a;

  /* gradients */
  --grad:linear-gradient(135deg,#9a5cff 0%,#663fff 100%);
  --grad-text:linear-gradient(100deg,#b79bff 0%,#8b5cf6 45%,#7c5cff 100%);
  --grad-soft:linear-gradient(160deg,rgba(154,92,255,.16),rgba(102,63,255,.04));
  --glow:rgba(124,77,255,.55);

  /* shape */
  --r-xs:12px;
  --r-sm:16px;
  --r:22px;
  --r-lg:30px;
  --r-xl:40px;

  /* shadow */
  --shadow:0 24px 70px -28px rgba(0,0,0,.75);
  --shadow-violet:0 30px 80px -30px rgba(124,77,255,.6);

  /* layout */
  --maxw:1220px;
  --pad:clamp(18px,5vw,40px);
  --gap:clamp(20px,3.4vw,40px);

  /* type */
  --f-head:'Alexandria','Cairo','Tajawal',system-ui,sans-serif;
  --f-body:'Cairo','Alexandria','Tajawal',system-ui,sans-serif;

  --nav-h:74px;
}

/* ---------- Reset & Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:96px;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--f-body);
  background:var(--bg);
  color:var(--white);
  line-height:1.7;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  position:relative;
}

/* ambient page glow */
body::before{
  content:"";
  position:fixed;inset:0;
  background:
    radial-gradient(60vw 50vh at 80% -5%,rgba(124,77,255,.20),transparent 60%),
    radial-gradient(45vw 40vh at 5% 12%,rgba(102,63,255,.14),transparent 60%),
    radial-gradient(50vw 45vh at 50% 110%,rgba(139,92,246,.12),transparent 60%);
  z-index:-2;pointer-events:none;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.5;
  background-image:url("assets/images/grid-pattern.svg");
  background-size:1400px auto;background-position:center top;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 60%,transparent 92%);
          mask-image:linear-gradient(180deg,transparent,#000 18%,#000 60%,transparent 92%);
  mix-blend-mode:screen;opacity:.05;
}

img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul{list-style:none}

::selection{background:var(--violet-3);color:#fff}

/* scrollbar */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg-2)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--violet-3),var(--violet));border-radius:20px;border:3px solid var(--bg-2)}

/* ---------- Layout helpers ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(64px,9vw,128px);position:relative}
.center{text-align:center}

.eyebrow{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--f-head);font-weight:600;font-size:.82rem;letter-spacing:.02em;
  color:var(--violet-soft);
  padding:.5em 1.1em;border-radius:100px;
  background:rgba(139,92,246,.12);
  border:1px solid rgba(139,92,246,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--violet-2);box-shadow:0 0 12px var(--violet-2)}

.section-head{max-width:760px;margin-inline:auto;margin-bottom:clamp(36px,5vw,64px)}
.section-head .eyebrow{margin-bottom:18px}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:800;line-height:1.32;letter-spacing:-.01em}
h2.title{font-size:clamp(1.7rem,4.4vw,3rem);font-weight:800;line-height:1.4}
.lead{color:var(--mute);font-size:clamp(1rem,1.4vw,1.12rem);margin-top:16px}
.grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Buttons ---------- */
.btn{
  --bh:54px;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  height:var(--bh);padding-inline:1.6em;border-radius:100px;
  font-family:var(--f-head);font-weight:600;font-size:.98rem;
  cursor:pointer;border:1px solid transparent;white-space:nowrap;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s,border-color .25s;
  position:relative;isolation:isolate;
}
.btn svg{width:1.1em;height:1.1em}
.btn-primary{
  color:#fff;background:var(--grad);
  box-shadow:0 12px 30px -10px var(--glow),inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:linear-gradient(135deg,#b07bff,#7a52ff);opacity:0;transition:opacity .3s;
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 20px 44px -12px var(--glow),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-primary:hover::before{opacity:1}
.btn-ghost{
  background:rgba(255,255,255,.05);color:var(--white);
  border-color:var(--line-2);backdrop-filter:blur(8px);
}
.btn-ghost:hover{transform:translateY(-3px);background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.28)}
.btn-lg{--bh:60px;font-size:1.05rem;padding-inline:2em}
.btn-block{width:100%}

/* arrow chip */
.arrow-chip{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--grad);color:#fff;flex:none;
  box-shadow:0 10px 24px -10px var(--glow);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.arrow-chip svg{width:18px;height:18px}

/* =============================================================
   NAVBAR
   ============================================================= */
.nav{
  position:fixed;inset-inline:0;top:0;z-index:80;
  transition:padding .35s ease;
  padding-top:16px;
}
.nav-inner{
  max-width:var(--maxw);margin-inline:auto;
  display:flex;align-items:center;gap:18px;
  height:var(--nav-h);padding-inline:14px 14px;
  margin-inline:var(--pad);
  border-radius:100px;
  background:rgba(16,11,38,.55);
  border:1px solid var(--line);
  box-shadow:0 14px 40px -18px rgba(0,0,0,.7);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  transition:background .35s,border-color .35s,box-shadow .35s,transform .35s;
}
.nav.scrolled{padding-top:8px}
.nav.scrolled .nav-inner{background:rgba(12,8,30,.82);border-color:var(--line-2)}
.nav-logo{display:flex;align-items:center;gap:10px;padding-inline-start:10px}
.nav-logo img{height:54px;width:auto}
.nav-links{display:flex;align-items:center;gap:6px;margin-inline:auto}
.nav-links a{
  font-family:var(--f-head);font-weight:500;font-size:.95rem;color:var(--soft);
  padding:.55em 1em;border-radius:100px;transition:color .2s,background .2s;
}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav-cta{flex:none}
.nav-toggle{
  display:none;width:46px;height:46px;border-radius:14px;flex:none;
  background:rgba(255,255,255,.06);border:1px solid var(--line-2);
  cursor:pointer;place-items:center;
}
.nav-toggle span{position:relative;width:20px;height:2px;background:#fff;border-radius:2px;transition:.3s}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;inset-inline:0;height:2px;background:#fff;border-radius:2px;transition:.3s}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
body.menu-open .nav-toggle span{background:transparent}
body.menu-open .nav-toggle span::before{top:0;transform:rotate(45deg)}
body.menu-open .nav-toggle span::after{top:0;transform:rotate(-45deg)}

/* mobile drawer */
.nav-mobile{
  position:fixed;inset:0;z-index:70;
  background:rgba(8,4,20,.96);backdrop-filter:blur(20px);
  display:flex;flex-direction:column;justify-content:center;gap:8px;
  padding:90px var(--pad) 40px;
  transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .35s,transform .35s,visibility .35s;
}
body.menu-open .nav-mobile{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.nav-mobile a{
  font-family:var(--f-head);font-weight:600;font-size:1.5rem;color:var(--soft);
  padding:.5em 0;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;
  transform:translateY(14px);opacity:0;transition:.4s;
}
body.menu-open .nav-mobile a{transform:none;opacity:1}
body.menu-open .nav-mobile a:nth-child(1){transition-delay:.06s}
body.menu-open .nav-mobile a:nth-child(2){transition-delay:.12s}
body.menu-open .nav-mobile a:nth-child(3){transition-delay:.18s}
body.menu-open .nav-mobile a:nth-child(4){transition-delay:.24s}
body.menu-open .nav-mobile a:nth-child(5){transition-delay:.3s}
body.menu-open .nav-mobile a:nth-child(6){transition-delay:.36s}
.nav-mobile .btn{margin-top:24px;transition-delay:.42s}

/* =============================================================
   HERO
   ============================================================= */
.hero{position:relative;padding-top:calc(var(--nav-h) + 70px);padding-bottom:clamp(40px,6vw,80px);overflow:hidden}
.hero-grid{
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
  gap:clamp(28px,4vw,60px);
}
.hero-badge{margin-bottom:22px}
.hero h1{font-size:clamp(2.1rem,5.6vw,4rem);line-height:1.32;letter-spacing:-.02em}
.hero h1 .grad-text{display:inline-block}
.hero-sub{color:var(--soft);font-size:clamp(1.02rem,1.6vw,1.2rem);max-width:46ch;margin-top:22px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero-rating{display:flex;align-items:center;gap:14px;margin-top:30px;flex-wrap:wrap}
.avatars{display:flex;flex-direction:row-reverse}
.avatars img{
  width:44px;height:44px;border-radius:50%;object-fit:cover;
  border:2px solid var(--bg);margin-inline-start:-12px;background:var(--surface-2);
}
.avatars img:first-child{margin-inline-start:0}
.rating-meta .stars{color:#ffc24b;font-size:.95rem;letter-spacing:2px}
.rating-meta b{font-weight:800}
.rating-meta span{display:block;color:var(--mute);font-size:.86rem}

/* hero visual */
.hero-visual{position:relative;display:grid;place-items:center;min-height:300px}
.hero-photo{
  position:relative;z-index:2;width:min(100%,560px);aspect-ratio:16/9;
  border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line-2);
  box-shadow:var(--shadow-violet);
  background:linear-gradient(160deg,#3a2a78,#1a1340);
}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.hero-visual .blob{
  position:absolute;z-index:1;width:74%;aspect-ratio:1;border-radius:50%;
  filter:blur(46px);opacity:.85;
  background:radial-gradient(circle at 30% 30%,#9a5cff,#5a23ff 60%,transparent 72%);
  animation:floaty 7s ease-in-out infinite;
}
.float-card{
  position:absolute;z-index:3;display:flex;align-items:center;gap:10px;
  padding:11px 15px;border-radius:16px;
  background:rgba(20,14,46,.72);border:1px solid var(--line-2);
  backdrop-filter:blur(12px);box-shadow:var(--shadow);
  font-size:.85rem;font-family:var(--f-head);font-weight:600;
}
.float-card .ic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--grad);flex:none}
.float-card .ic svg{width:18px;height:18px;color:#fff}
.float-card.fc-1{inset-inline-start:-6px;top:16%;animation:floaty 6s ease-in-out infinite}
.float-card.fc-2{inset-inline-end:-10px;bottom:14%;animation:floaty 6.6s ease-in-out infinite .6s}
.float-card small{display:block;color:var(--mute);font-weight:400;font-size:.72rem}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* benefits bar */
.benefits{margin-top:clamp(34px,5vw,64px)}
.benefits-bar{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  padding:14px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.benefit{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r);transition:background .25s}
.benefit:hover{background:rgba(139,92,246,.1)}
.benefit .ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;flex:none;
  background:rgba(139,92,246,.16);border:1px solid rgba(139,92,246,.3);color:var(--violet-soft)}
.benefit .ic svg{width:20px;height:20px}
.benefit b{font-family:var(--f-head);font-weight:600;font-size:.95rem;line-height:1.35}

/* =============================================================
   WELCOME band
   ============================================================= */
.welcome-card{
  display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:clamp(24px,4vw,48px);align-items:center;
  padding:clamp(20px,3vw,34px);border-radius:var(--r-xl);
  background:var(--grad-soft);border:1px solid var(--line);box-shadow:var(--shadow);
  position:relative;overflow:hidden;
}
.welcome-media{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;border:1px solid var(--line-2);position:relative}
.welcome-media img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.welcome-copy h2{font-size:clamp(1.5rem,3.2vw,2.3rem)}
.welcome-copy p{color:var(--soft);margin-top:16px;font-size:1.04rem}
.signature{margin-top:22px;font-family:var(--f-head);font-weight:700;font-size:1.15rem;color:var(--violet-soft)}
.signature small{display:block;color:var(--mute);font-weight:400;font-size:.85rem;margin-top:2px}

/* =============================================================
   SERVICES (interactive hover list)
   ============================================================= */
.svc-layout{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(24px,4vw,56px);align-items:start}
.svc-preview{
  position:sticky;top:110px;border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:4/3.4;border:1px solid var(--line-2);box-shadow:var(--shadow);
  background:var(--surface);
}
.svc-preview .pv{position:absolute;inset:0;opacity:0;transform:scale(1.06);transition:opacity .55s,transform .55s}
.svc-preview .pv.active{opacity:1;transform:scale(1)}
.svc-preview .pv::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,4,20,.75))}
.svc-preview img{width:100%;height:100%;object-fit:cover}
.svc-preview .pv b{position:absolute;inset-inline:22px;bottom:20px;z-index:2;font-family:var(--f-head);font-weight:700;font-size:1.2rem}

.svc-list{display:flex;flex-direction:column}
.svc-item{
  display:flex;align-items:flex-start;gap:16px;
  padding:clamp(20px,2.6vw,28px) 6px;
  border-top:1px solid var(--line);cursor:pointer;
  transition:padding-inline .35s,background .3s;position:relative;
}
.svc-item>div{flex:1;min-width:0}
.svc-item:last-child{border-bottom:1px solid var(--line)}
.svc-num{font-family:var(--f-head);font-weight:700;color:var(--violet);font-size:.9rem;width:2.4em;flex:none;opacity:.7}
.svc-item h3{font-size:clamp(1.05rem,2vw,1.45rem);font-weight:700;transition:color .25s;line-height:1.45}
.svc-item p{color:var(--mute);font-size:.92rem;margin-top:6px;line-height:1.7}
.svc-item .svc-num{margin-top:5px}
.svc-item .arrow-chip{width:46px;height:46px;margin-top:2px}
.svc-item:hover{padding-inline-start:18px;background:linear-gradient(90deg,rgba(139,92,246,.10),transparent)}
.svc-item:hover h3{color:var(--violet-soft)}
.svc-item:hover .arrow-chip{transform:rotate(-45deg) scale(1.08)}
.svc-item.active h3{color:#fff}

/* =============================================================
   STATS
   ============================================================= */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,20px)}
.stat-feature{
  grid-row:span 2;grid-column:span 2;position:relative;border-radius:var(--r-lg);overflow:hidden;
  min-height:300px;border:1px solid var(--line-2);box-shadow:var(--shadow);
}
.stat-feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stat-feature::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,4,20,.1) 30%,rgba(8,4,20,.92))}
.stat-feature .fcap{position:absolute;inset-inline:24px;bottom:22px;z-index:2}
.stat-feature .fnum{font-family:var(--f-head);font-weight:900;font-size:clamp(2.6rem,5vw,3.6rem);line-height:1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-feature .ftxt{color:var(--soft);margin-top:6px;max-width:34ch}
.stat-wide{grid-row:span 1}
.stat-card{
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(18px,2.2vw,26px);
  display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden;
  transition:transform .3s,border-color .3s,box-shadow .3s;
}
.stat-card:hover{transform:translateY(-5px);border-color:rgba(139,92,246,.4);box-shadow:var(--shadow-violet)}
.stat-card .si{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;
  background:rgba(238,99,78,.14);border:1px solid rgba(238,99,78,.32);color:var(--orange);margin-bottom:4px}
.stat-card .si svg{width:22px;height:22px}
.stat-num{font-family:var(--f-head);font-weight:900;font-size:clamp(1.8rem,3.4vw,2.5rem);line-height:1}
.stat-num .suf{color:var(--violet-2)}
.stat-card p{color:var(--mute);font-size:.92rem;line-height:1.5}

/* =============================================================
   ABOUT
   ============================================================= */
.about-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,4vw,60px);align-items:center}
.about-media{position:relative}
.about-photo{border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/4.6;border:1px solid var(--line-2);box-shadow:var(--shadow-violet);position:relative;z-index:2}
.about-photo img{width:100%;height:100%;object-fit:cover;object-position:center 15%}
.about-media .glow-ring{position:absolute;inset:-8% 0 auto auto;width:58%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(154,92,255,.5),transparent 65%);filter:blur(40px);z-index:1}
.about-copy .eyebrow{margin-bottom:16px}
.about-name{font-size:clamp(1.6rem,3.4vw,2.4rem);margin-bottom:6px}
.about-role{color:var(--violet-soft);font-family:var(--f-head);font-weight:600;margin-bottom:18px}
.about-copy p{color:var(--soft);margin-bottom:14px}
.about-copy p strong{color:#fff;font-weight:700}
.certs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:26px 0}
.cert{
  border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);background:var(--surface);
  aspect-ratio:1.3/1;cursor:pointer;transition:transform .3s,border-color .3s;position:relative;
}
.cert img{width:100%;height:100%;object-fit:cover}
.cert:hover{transform:translateY(-4px) scale(1.02);border-color:var(--violet)}
.cert::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}

/* =============================================================
   FEATURES (differentiators)
   ============================================================= */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px)}
.feat-card{
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,2.6vw,32px);
  position:relative;overflow:hidden;transition:transform .3s,border-color .3s,box-shadow .3s;
}
.feat-card::before{content:"";position:absolute;inset-inline-start:0;top:0;width:100%;height:3px;
  background:var(--grad);transform:scaleX(0);transform-origin:inline-start;transition:transform .4s}
.feat-card:hover{transform:translateY(-6px);border-color:rgba(139,92,246,.4);box-shadow:var(--shadow-violet)}
.feat-card:hover::before{transform:scaleX(1)}
.feat-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:16px;margin-bottom:20px;
  background:rgba(238,99,78,.13);border:1px solid rgba(238,99,78,.3);color:var(--orange)}
.feat-icon svg{width:28px;height:28px}
.feat-card h3{font-size:1.2rem;margin-bottom:10px}
.feat-card p{color:var(--mute);font-size:.95rem}

/* =============================================================
   GALLERY (in action)
   ============================================================= */
.gallery-grid{
  display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:14px;
}
.g-item{
  position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--line);
  cursor:pointer;
}
.g-item img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.g-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(8,4,20,.55));opacity:0;transition:opacity .4s}
.g-item:hover img{transform:scale(1.08)}
.g-item:hover::after{opacity:1}
.g-item .cap{position:absolute;inset-inline:16px;bottom:14px;z-index:2;font-family:var(--f-head);font-weight:600;font-size:.92rem;
  transform:translateY(10px);opacity:0;transition:.4s}
.g-item:hover .cap{transform:none;opacity:1}
.g-tall{grid-row:span 2}
.g-wide{grid-column:span 2}

/* =============================================================
   TESTIMONIALS
   ============================================================= */
.tst-marquee{margin-top:10px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);overflow:hidden}
.tst-track{display:flex;gap:18px;width:max-content;animation:scrollx 46s linear infinite}
.tst-marquee:hover .tst-track{animation-play-state:paused}
@keyframes scrollx{to{transform:translateX(50%)}} /* RTL: moves toward start */
.tst-card{
  width:min(86vw,400px);flex:none;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;
  display:flex;flex-direction:column;gap:14px;
}
.tst-card .stars{color:#ffc24b;letter-spacing:2px;font-size:.95rem}
.tst-card .quote{color:var(--soft);font-size:.98rem;line-height:1.75;flex:1}
.tst-card .quote.en{direction:ltr;text-align:left;font-family:'Inter',var(--f-body)}
.tst-author{display:flex;align-items:center;gap:12px;margin-top:4px}
.tst-author img,.tst-author .ava{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--line-2)}
.tst-author .ava{display:grid;place-items:center;font-family:var(--f-head);font-weight:700;color:#fff;background:var(--grad)}
.tst-author b{font-family:var(--f-head);font-weight:700;display:block;font-size:.98rem;unicode-bidi:plaintext}
.tst-author span{color:var(--mute);font-size:.84rem;unicode-bidi:plaintext}

/* video feedback */
.vfeed{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(28px,4vw,48px)}
.vcard{
  position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2);
  background:var(--surface);aspect-ratio:9/13;box-shadow:var(--shadow);
}
.vcard video{width:100%;height:100%;object-fit:cover;background:#000}
.vcard .vplay{
  position:absolute;inset:0;display:grid;place-items:center;cursor:pointer;z-index:3;
  background:linear-gradient(180deg,rgba(8,4,20,.15),rgba(8,4,20,.55));transition:opacity .3s;
}
.vcard .vplay .pbtn{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.55);backdrop-filter:blur(6px);
  transition:transform .3s,background .3s}
.vcard .vplay .pbtn svg{width:26px;height:26px;color:#fff;margin-inline-start:3px}
.vcard:hover .vplay .pbtn{transform:scale(1.12);background:rgba(154,92,255,.45)}
.vcard .vlabel{position:absolute;inset-inline:14px;bottom:12px;z-index:4;font-family:var(--f-head);font-weight:600;font-size:.85rem;
  display:flex;align-items:center;gap:7px;text-shadow:0 2px 8px rgba(0,0,0,.6);pointer-events:none}
.vcard .vlabel .vd{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
.vcard.playing .vplay{opacity:0;pointer-events:none}

/* ---------- CTA video showcase (welcome band) ---------- */
.welcome-media.video-showcase{aspect-ratio:9/16;width:100%;max-width:300px;margin-inline:auto;cursor:pointer;background:#000}
.welcome-media.video-showcase video{width:100%;height:100%;object-fit:cover}
.welcome-media.video-showcase .vlabel{position:absolute;inset-inline:16px;bottom:14px;z-index:4;
  font-family:var(--f-head);font-weight:600;font-size:.9rem;display:flex;align-items:center;gap:8px;
  text-shadow:0 2px 8px rgba(0,0,0,.6);pointer-events:none}
.welcome-media.video-showcase .vlabel .vd{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}

/* ---------- Feedback video carousel ---------- */
.fb-carousel{position:relative;max-width:1000px;margin-inline:auto}
.fb-viewport{overflow:hidden;border-radius:var(--r-lg)}
.fb-track{display:flex;direction:ltr;will-change:transform;transition:transform .55s cubic-bezier(.22,.8,.28,1)}
.fb-track.dragging{transition:none}
.fb-slide{flex:0 0 100%;min-width:0;direction:rtl;
  display:grid;grid-template-columns:290px 1fr;gap:clamp(22px,3.4vw,48px);align-items:center;
  padding:clamp(16px,2.5vw,34px)}
.fb-video{flex:none;width:100%;max-width:290px;aspect-ratio:9/13;margin-inline:auto}
.fb-text{position:relative}
.fb-quote-mark{position:absolute;top:-30px;inset-inline-start:-4px;font-family:Georgia,serif;
  font-size:5.5rem;line-height:1;color:var(--violet);opacity:.25;pointer-events:none}
.fb-text .stars{color:#ffc24b;letter-spacing:2px;font-size:1.05rem;margin-bottom:14px}
.fb-text .quote{color:var(--soft);font-size:clamp(1.05rem,1.6vw,1.32rem);line-height:1.9;font-weight:500}
.fb-text .tst-author{margin-top:24px;display:flex;align-items:center;gap:12px}
.fb-text .tst-author img,.fb-text .tst-author .ava{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--line-2)}
.fb-text .tst-author .ava{display:grid;place-items:center;font-family:var(--f-head);font-weight:700;color:#fff;background:var(--grad)}
.fb-text .tst-author b{font-family:var(--f-head);font-weight:700;display:block;font-size:1.02rem}
.fb-text .tst-author span{color:var(--mute);font-size:.86rem}
.fb-nav{position:absolute;top:38%;transform:translateY(-50%);z-index:5;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(20,14,46,.85);border:1px solid var(--line-2);color:#fff;backdrop-filter:blur(8px);
  transition:background .25s,transform .25s,opacity .25s}
.fb-nav:hover{background:var(--grad);border-color:transparent}
.fb-nav svg{width:22px;height:22px}
.fb-prev{inset-inline-end:-6px}
.fb-next{inset-inline-start:-6px}
.fb-dots{display:flex;justify-content:center;gap:9px;margin-top:26px}
.fb-dots button{width:9px;height:9px;border-radius:50%;border:none;cursor:pointer;padding:0;
  background:rgba(255,255,255,.22);transition:width .3s,background .3s}
.fb-dots button.active{width:28px;border-radius:20px;background:var(--grad)}

/* =============================================================
   CTA + BOOKING FORM
   ============================================================= */
.cta-wrap{
  border-radius:var(--r-xl);overflow:hidden;position:relative;
  background:radial-gradient(120% 120% at 80% 0%,rgba(124,77,255,.28),transparent 55%),linear-gradient(180deg,var(--surface),var(--bg-2));
  border:1px solid var(--line-2);box-shadow:var(--shadow);
}
.cta-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,4vw,56px);padding:clamp(26px,4vw,56px)}
.cta-copy h2{font-size:clamp(1.7rem,3.6vw,2.7rem)}
.cta-copy .lead{margin-top:18px}
.cta-benefits{margin-top:28px;display:flex;flex-direction:column;gap:16px}
.cta-benefit{display:flex;gap:14px;align-items:flex-start}
.cta-benefit .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;flex:none;
  background:rgba(139,92,246,.15);border:1px solid rgba(139,92,246,.32);color:var(--violet-soft)}
.cta-benefit .ic svg{width:22px;height:22px}
.cta-benefit b{font-family:var(--f-head);font-weight:700;display:block}
.cta-benefit span{color:var(--mute);font-size:.9rem}

.form{
  background:rgba(10,6,26,.5);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(20px,3vw,32px);backdrop-filter:blur(8px);
}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-bottom:14px}
.field label{display:block;font-size:.85rem;color:var(--soft);margin-bottom:7px;font-weight:600}
.field input,.field select,.field textarea{
  width:100%;height:52px;padding:0 16px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid var(--line-2);color:#fff;
  transition:border-color .25s,background .25s,box-shadow .25s;
}
.field textarea{height:auto;padding:14px 16px;min-height:104px;resize:vertical;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:#6f6a90}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--violet);background:rgba(139,92,246,.08);
  box-shadow:0 0 0 4px rgba(139,92,246,.16);
}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%239a95bd' stroke-width='2'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 16px center}
.field select option{background:#15102e;color:#fff}
.form .btn{margin-top:6px}
.form-note{display:flex;align-items:center;gap:8px;color:var(--mute);font-size:.82rem;margin-top:14px;justify-content:center}

/* =============================================================
   FOOTER
   ============================================================= */
.footer{border-top:1px solid var(--line);margin-top:clamp(60px,8vw,110px);padding-top:clamp(48px,6vw,80px);position:relative}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(24px,3vw,40px);padding-bottom:48px}
.foot-brand img{height:64px;margin-bottom:18px}
.foot-brand p{color:var(--mute);max-width:32ch;font-size:.95rem}
.foot-social{display:flex;gap:10px;margin-top:20px}
.foot-social a{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid var(--line-2);color:var(--soft);transition:.25s}
.foot-social a:hover{background:var(--grad);color:#fff;transform:translateY(-3px);border-color:transparent}
.foot-social a svg{width:19px;height:19px}
.foot-col h4{font-size:.95rem;margin-bottom:16px;color:#fff}
.foot-col a{display:block;color:var(--mute);padding:6px 0;font-size:.92rem;transition:color .2s,padding-inline .2s}
.foot-col a:hover{color:var(--violet-soft);padding-inline-start:5px}
.foot-contact a{display:flex;align-items:center;gap:10px}
.foot-contact svg{width:17px;height:17px;color:var(--violet);flex:none}
.foot-bottom{border-top:1px solid var(--line);padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;color:var(--mute);font-size:.86rem}
.foot-bottom .heart{color:var(--orange)}

/* =============================================================
   Scroll reveal
   ============================================================= */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:.08s}
[data-reveal][data-delay="2"]{transition-delay:.16s}
[data-reveal][data-delay="3"]{transition-delay:.24s}
[data-reveal][data-delay="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important}
  .tst-track,.blob,.float-card{animation:none!important}
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width:1024px){
  :root{--nav-h:66px}
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-visual{order:-1}
  .hero-photo{width:min(94%,480px)}
  .hero-sub{margin-inline:auto}
  .hero-copy{text-align:center}
  .hero-cta,.hero-rating{justify-content:center}
  .welcome-card{grid-template-columns:1fr}
  .welcome-media{max-width:420px;margin-inline:auto;aspect-ratio:16/11;width:100%}
  .svc-layout{grid-template-columns:1fr}
  .svc-preview{display:none}
  .about-grid{grid-template-columns:1fr}
  .about-media{max-width:440px;margin-inline:auto}
  .cta-grid{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:880px){
  .nav-links{display:none}
  .nav-cta{display:none}
  .nav-toggle{display:grid;margin-inline-start:auto}
  .nav-inner{height:var(--nav-h);gap:12px}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat-feature{grid-column:span 2;grid-row:auto;min-height:260px}
  .vfeed{grid-template-columns:repeat(3,1fr);gap:12px}
  .gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}
  .g-wide{grid-column:span 2}
  .g-tall{grid-row:span 1}
}
@media (max-width:680px){
  .benefits-bar{grid-template-columns:1fr 1fr}
  .stats-grid{grid-template-columns:1fr}
  .stat-feature{grid-column:span 1!important;grid-row:auto!important;min-height:230px}
  .certs{grid-template-columns:repeat(2,1fr)}
  .feat-grid{grid-template-columns:1fr}
  .form .row{grid-template-columns:1fr}
  .vfeed{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr}
  .float-card{display:none}
  .welcome-media.video-showcase{max-width:250px}
  .fb-slide{grid-template-columns:1fr;gap:18px;text-align:center;padding:14px 8px 8px}
  .fb-video{max-width:210px}
  .fb-quote-mark{display:none}
  .fb-text .tst-author{justify-content:center}
  .fb-nav{width:44px;height:44px;top:32%}
  .fb-prev{inset-inline-end:0}
  .fb-next{inset-inline-start:0}
}
@media (max-width:440px){
  :root{--pad:16px}
  .hero h1{font-size:clamp(1.9rem,8vw,2.4rem)}
  .benefits-bar{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr}
  .stat-feature{grid-column:span 1}
  .gallery-grid{grid-template-columns:1fr;grid-auto-rows:210px}
  .g-wide,.g-tall{grid-column:span 1}
  .btn{--bh:50px;font-size:.92rem}
  .nav-logo img{height:44px}
}

/* ---------- Testimonials masonry ---------- */
.nav-links a.is-active{color:#fff;background:rgba(139,92,246,.16)}
.tst-masonry{columns:3;column-gap:18px;margin-top:8px}
.tst-masonry .tst-card{width:auto;break-inside:avoid;margin-bottom:18px}
@media (max-width:900px){.tst-masonry{columns:2}}
@media (max-width:600px){.tst-masonry{columns:1}}

/* ---------- Overflow safety (bulletproof responsive) ---------- */
.hero-grid>*,.svc-layout>*,.about-grid>*,.cta-grid>*,.welcome-card>*,.stats-grid>*,.feat-grid>*,.foot-grid>*,.benefits-bar>*{min-width:0}
h1,h2,h3,.svc-item h3,.about-name{overflow-wrap:break-word}
.hero-rating{max-width:100%}
@media (max-width:360px){.hero h1{font-size:clamp(1.55rem,7.5vw,2rem)}}

/* =============================================================
   Round 3 additions: chat gallery, CTA band, book page, lightbox
   ============================================================= */

/* ---------- Chat feedback: swipeable row (native scroll, bulletproof) ---------- */
.chat-row{display:flex;gap:18px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding:6px 4px 18px;scrollbar-width:thin}
.chat-row::-webkit-scrollbar{height:8px}
.chat-row::-webkit-scrollbar-thumb{background:linear-gradient(var(--violet-3),var(--violet));border-radius:20px}
.chat-shot{margin:0;flex:0 0 auto;width:clamp(230px,72vw,300px);scroll-snap-align:center;
  border-radius:16px;overflow:hidden;border:1px solid var(--line-2);background:#fff;
  box-shadow:0 20px 44px -22px rgba(0,0,0,.75);transition:transform .3s,box-shadow .3s;cursor:zoom-in}
.chat-shot img{display:block;width:100%;height:auto}
.chat-shot:hover{transform:translateY(-5px);box-shadow:0 30px 60px -24px rgba(124,77,255,.5)}
.chat-hint{display:block;text-align:center;color:var(--mute);font-size:.85rem;
  margin-top:8px;font-family:var(--f-head);font-weight:500}

/* ---------- Compact CTA band (home) ---------- */
.cta-band .cta-band-inner{padding:clamp(32px,5.5vw,70px) clamp(20px,4vw,44px)}
.cta-band-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.cta-band-actions .btn-ghost svg{width:1.2em;height:1.2em}

/* ---------- Booking page ---------- */
.book-page .cta-grid{align-items:start}
.phone-row{display:flex;gap:8px}
.code-select{flex:0 0 44%;max-width:210px;min-width:0}
.phone-row #f-phone{flex:1;min-width:0}
.field optgroup{background:#15102e;color:var(--violet-soft);font-weight:700}
.book-contact{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.book-wa{display:inline-flex;align-items:center;gap:10px;color:var(--green);
  font-family:var(--f-head);font-weight:600;font-size:1rem;transition:opacity .2s}
.book-wa:hover{opacity:.8}
.book-wa svg{width:24px;height:24px}
@media (max-width:420px){.code-select{flex-basis:48%}}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(4,2,12,.93);
  display:none;align-items:center;justify-content:center;padding:24px;cursor:zoom-out;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lightbox.open{display:flex}
.lightbox img{max-width:min(94vw,720px);max-height:90vh;width:auto;height:auto;
  border-radius:16px;box-shadow:0 40px 90px -20px #000;border:1px solid var(--line-2)}
.lb-close{position:absolute;top:18px;inset-inline-start:18px;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid var(--line-2);color:#fff;
  display:grid;place-items:center;cursor:pointer}
.lb-close svg{width:22px;height:22px}

/* =============================================================
   Round 4 (10/10): premium motion + signature touches
   ============================================================= */

/* ---------- Topics marquee strip ---------- */
.topics-marquee{overflow:hidden;border-block:1px solid var(--line);
  background:linear-gradient(90deg,rgba(139,92,246,.07),rgba(102,63,255,.03));padding:15px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.topics-track{display:flex;align-items:center;width:max-content;direction:ltr;
  animation:topscroll 34s linear infinite;font-family:var(--f-head);font-weight:700}
.topics-track > *{margin-inline-end:24px}
.topics-track span{font-size:clamp(1rem,2vw,1.45rem);color:var(--soft);white-space:nowrap}
.topics-track i{color:var(--violet-2);font-style:normal;font-size:.85em;opacity:.85}
@keyframes topscroll{from{transform:translateX(0)}to{transform:translateX(-25%)}}

/* ---------- Reading progress bar ---------- */
.progress-bar{position:fixed;top:0;inset-inline:0;height:3px;z-index:120;width:0;
  background:var(--grad);box-shadow:0 0 12px var(--glow);will-change:width}

/* ---------- Film grain overlay ---------- */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.03;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Animated ambient gradient mesh ---------- */
body::before{animation:meshshift 20s ease-in-out infinite alternate}
@keyframes meshshift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-3%,2%,0) scale(1.08)}}

/* ---------- Typography polish ---------- */
.hero h1 .grad-text{position:relative}
.hero h1 .grad-text::after{content:"";position:absolute;inset-inline:0;bottom:.06em;height:.12em;
  background:linear-gradient(90deg,var(--violet-2),transparent);border-radius:4px;opacity:.45}

/* parallax hint */
.hero-photo,.about-photo{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .topics-track,.chat-track{animation:none!important}
  body::before{animation:none!important}
  .progress-bar{display:none}
}

/* ---------- Floating gradient orbs (dopa-style ambient depth) ---------- */
.orbs{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(64px);opacity:.5;mix-blend-mode:screen}
.orb-1{width:34vw;height:34vw;top:-6%;inset-inline-end:-4%;
  background:radial-gradient(circle at 35% 35%,#9a5cff,#5a23ff 55%,transparent 72%);animation:orbfloat 16s ease-in-out infinite}
.orb-2{width:28vw;height:28vw;top:40%;inset-inline-start:-8%;
  background:radial-gradient(circle at 35% 35%,#7c5cff,#3a1e8a 55%,transparent 72%);animation:orbfloat 20s ease-in-out infinite reverse}
.orb-3{width:24vw;height:24vw;bottom:-6%;inset-inline-start:42%;opacity:.32;
  background:radial-gradient(circle at 35% 35%,#b07bff,#663fff 55%,transparent 72%);animation:orbfloat 24s ease-in-out infinite}
@keyframes orbfloat{0%,100%{transform:translate3d(0,0,0)}33%{transform:translate3d(-4%,6%,0)}66%{transform:translate3d(5%,-4%,0)}}

/* ---------- Hero particle network canvas ---------- */
.hero{overflow:hidden}
.hero-net{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.6}
.hero > .container{position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){.orb{animation:none!important}}
@media (max-width:680px){.orb-1{width:62vw;height:62vw}.orb-2,.orb-3{width:56vw;height:56vw}}