/* ============================================
   متاجر التقنية — tokens
   ============================================ */
:root{
  /* Light theme — default */
  --bg:#f4f1ed;
  --bg-soft:#ebe6de;
  --surface:#ffffff;
  --surface-2:#f4efe8;
  --border: rgba(28,19,39,.09);
  --border-strong: rgba(28,19,39,.16);
  --text:#1c1327;
  --muted:#5f5770;
  --muted-2:#8b8496;

  --nav-bg: rgba(244,241,237,.7);
  --nav-bg-scrolled: rgba(244,241,237,.9);
  --glow-opacity: .22;

  --orange:#e8963a;
  --coral:#e04a4a;
  --magenta:#c9345f;
  --purple:#7a2a9e;
  --deep:#3a1568;
  --blue:#3e6fe0;

  --grad-brand: linear-gradient(90deg,var(--orange),var(--coral),var(--magenta),var(--purple),var(--blue));
  --grad-btn: linear-gradient(90deg,var(--coral),var(--magenta));

  --font-display:'Cairo',sans-serif;
  --font-body:'Cairo',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:26px;
  --nav-h:82px;

  /* الموسيقى الخلفية — لتغييرها استبدل مسار الملف هنا فقط */
  --bg-music: url("assets/audio/bg-music.mp3");
}

:root[data-theme="dark"]{
  --bg:#0b0714;
  --bg-soft:#100a1f;
  --surface:#150c2a;
  --surface-2:#1c1136;
  --border: rgba(245,241,250,.09);
  --border-strong: rgba(245,241,250,.16);
  --text:#f5f1fa;
  --muted:#a79bc4;
  --muted-2:#7a6f96;

  --nav-bg: rgba(11,7,20,.55);
  --nav-bg-scrolled: rgba(11,7,20,.86);
  --glow-opacity: .4;

  --orange:#f8a843;
  --coral:#ed5858;
  --magenta:#dc435e;
  --purple:#7a2a9e;
  --deep:#3a1568;
  --blue:#3e6fe0;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body, .nav, .btn, [data-reveal]{ transition: background-color .35s ease, color .35s ease, border-color .35s ease; }
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{margin:0; padding:0; list-style:none;}
button{font-family:inherit;}

.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

.mono{font-family:var(--font-mono);}

.grad-text{
  background:var(--grad-btn);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.grad-text-brand{
  background:var(--grad-brand);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.eyebrow{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.04em;
  color:var(--coral);
  margin:0 0 14px;
}

/* ============================================
   Buttons
   ============================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 26px;
  border-radius:999px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.98rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }

.btn--primary{
  background:var(--grad-btn);
  color:#fff;
  box-shadow:0 10px 30px -12px rgba(220,67,94,.55);
}
.btn--primary:hover{ box-shadow:0 14px 34px -10px rgba(220,67,94,.7); }

.btn--ghost{
  background:transparent;
  color:var(--text);
  border-color:var(--border-strong);
}
.btn--ghost:hover{ border-color:var(--coral); background:rgba(237,88,88,.06); }

.btn--outline{
  background:transparent;
  color:var(--text);
  border-color:var(--border-strong);
}
.btn--outline:hover{ border-color:var(--magenta); }

.btn--sm{ padding:10px 20px; font-size:.88rem; }
.btn--block{ width:100%; }

.icon{ width:18px; height:18px; }

/* ============================================
   Navbar
   ============================================ */
.nav{
  position:fixed;
  inset-inline:0;
  top:0;
  height:var(--nav-h);
  z-index:100;
  background:var(--nav-bg);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease;
}
.nav.is-scrolled{
  background:var(--nav-bg-scrolled);
  border-bottom-color:var(--border);
}

.nav__inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.nav__logo img{ height:56px; width:auto; }

.nav__links{
  display:flex;
  align-items:center;
  gap:6px;
}
.navlink{
  padding:10px 14px;
  border-radius:999px;
  font-size:.95rem;
  color:var(--muted);
  transition:color .2s ease, background .2s ease;
}
.navlink:hover, .navlink.is-active{
  color:var(--text);
  background:var(--surface-2);
}

.nav__actions{ display:flex; align-items:center; gap:14px; }

.theme-toggle{
  position:relative;
  width:42px; height:42px;
  border-radius:50%;
  border:1px solid var(--border-strong);
  background:var(--surface);
  color:var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.theme-toggle:hover{ border-color:var(--coral); transform:translateY(-1px); }
.theme-toggle:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }
.theme-toggle__icon{
  position:absolute;
  width:19px; height:19px;
  transition:opacity .3s ease, transform .4s ease;
}
.theme-toggle__icon--sun{ opacity:0; transform:rotate(-60deg) scale(.6); }
.theme-toggle__icon--moon{ opacity:1; transform:rotate(0) scale(1); }
:root[data-theme="dark"] .theme-toggle__icon--sun{ opacity:1; transform:rotate(0) scale(1); }
:root[data-theme="dark"] .theme-toggle__icon--moon{ opacity:0; transform:rotate(60deg) scale(.6); }

.nav__burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:38px;
  height:38px;
  background:transparent;
  border:1px solid var(--border-strong);
  border-radius:10px;
  cursor:pointer;
}
.nav__burger span{
  display:block;
  height:2px;
  margin:0 8px;
  background:var(--text);
  border-radius:2px;
  transition:transform .25s ease, opacity .25s ease;
}
.nav__burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ opacity:0; }
.nav__burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================================
   Hero
   ============================================ */
.hero{
  position:relative;
  padding:calc(var(--nav-h) + 96px) 0 90px;
  overflow:hidden;
}

.hero__bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url('assets/hero-bg.svg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:var(--glow-opacity);
}

.hero__inner{ position:relative; z-index:1; max-width:820px; }

.hero__title{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2.2rem, 5.2vw, 3.8rem);
  line-height:1.28;
  margin:0 0 22px;
}

.hero__sub{
  color:var(--muted);
  font-size:1.1rem;
  max-width:600px;
  margin:0 0 36px;
}

.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:56px; }

.hero__stats{
  display:flex;
  flex-wrap:wrap;
  gap:36px;
  padding-top:32px;
  border-top:1px solid var(--border);
}
.stat{ display:flex; flex-direction:column; gap:4px; }
.stat__num{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:1.6rem;
  color:var(--text);
}
.stat__label{ font-size:.86rem; color:var(--muted-2); }

/* ============================================
   Marquee strip
   ============================================ */
.marquee{
  overflow:hidden;
  background:#ebe6de;
  border-block:1px solid rgba(245,241,250,.08);
  padding:18px 0;
}
.marquee__track{
  display:flex;
  width:max-content;
  animation:marquee-scroll 26s linear infinite;
}
.marquee__group{
  display:flex;
  align-items:center;
  flex-shrink:0;
}
.marquee__group span{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.3rem;
  color:#2a114d;
  white-space:nowrap;
  padding:0 8px;
}
.marquee__dot{
  width:9px; height:9px;
  border-radius:50%;
  background:#523188;
  margin:0 22px;
  flex-shrink:0;
}
@keyframes marquee-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation:none; }
}
.marquee:hover .marquee__track{ animation-play-state:paused; }

@media (max-width:760px){
  .marquee__group span{ font-size:1.05rem; }
  .marquee__dot{ margin:0 16px; }
}

/* ============================================
   Sections generic
   ============================================ */
.section{ padding:96px 0; position:relative; }
.section--soft{ background:var(--bg-soft); }

.section__head{ max-width:640px; margin:0 0 48px; }
.section__title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.7rem, 3.4vw, 2.4rem);
  margin:0 0 16px;
  line-height:1.35;
}
.section__p{ color:var(--muted); font-size:1.02rem; margin:0; }

/* ============================================
   About
   ============================================ */
.about__grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:64px;
  align-items:center;
}
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.chip{
  padding:10px 18px;
  border-radius:999px;
  border:1px solid var(--border-strong);
  font-size:.88rem;
  color:var(--muted);
  background:var(--surface);
}

.about__visual{ display:flex; justify-content:center; }
.about-visual-link{
  display:block;
  width:100%;
  max-width:440px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease;
}
.about-visual-link:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -20px rgba(20,15,30,.28); }
.about-visual-img{ width:100%; height:auto; display:block; }

/* ============================================
   Hosting / pricing
   ============================================ */
.plans{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:8px;
}
.plan-card{
  position:relative;
  padding:32px 28px;
  border-radius:var(--radius-md);
  background:var(--surface);
  border:1px solid var(--border);
  display:flex;
  flex-direction:column;
  transition:transform .25s ease, border-color .25s ease;
}
.plan-card:hover{ transform:translateY(-6px); border-color:var(--border-strong); }

.plan-card--featured{
  border-color:transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad-btn) border-box;
  border:1px solid transparent;
}
.plan-card__badge{
  position:absolute;
  top:-14px;
  inset-inline-start:28px;
  background:var(--grad-btn);
  color:#fff;
  font-family:var(--font-mono);
  font-size:.72rem;
  padding:5px 14px;
  border-radius:999px;
}
.plan-card__name{ font-family:var(--font-display); font-size:1.2rem; margin:0 0 10px; }
.plan-card__price{ font-size:1rem; color:var(--muted); margin:0 0 24px; }
.plan-card__price .mono{ font-size:2.1rem; color:var(--text); font-weight:600; }
.plan-card__per{ font-size:.85rem; }
.plan-card__list{ flex:1; margin-bottom:28px; display:flex; flex-direction:column; gap:12px; }
.plan-card__list li{
  font-size:.92rem;
  color:var(--muted);
  padding-inline-start:22px;
  position:relative;
}
.plan-card__list li::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:.5em;
  width:10px; height:10px;
  border-radius:3px;
  background:var(--grad-brand);
}
.plans__note{ margin-top:28px; font-size:.85rem; color:var(--muted-2); }

/* ============================================
   Hosting / pricing — new price-table design
   (old .plans / .plan-card rules above are kept, unused,
   in case you want to switch back later)
   ============================================ */
.price-table{
  display:flex;
  align-items:flex-end;
  gap:0;
  margin-top:8px;
}
.price-col{
  flex:1;
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border:1px solid var(--border);
  position:relative;
  z-index:1;
}
.price-col:first-child{ border-radius:var(--radius-md) 0 0 var(--radius-md); }
.price-col:last-child{ border-radius:0 var(--radius-md) var(--radius-md) 0; }
.price-col + .price-col{ border-inline-start:none; }

.price-col__head{
  padding:34px 24px 26px;
  text-align:center;
  background:var(--surface-2);
  border-bottom:1px solid var(--border);
  position:relative;
}
.price-col__name{ font-family:var(--font-display); font-size:1.05rem; margin:0 0 14px; color:var(--muted); }
.price-col__amount{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:6px;
  margin:0;
}
.price-col__amount .mono{ font-size:2.6rem; font-weight:700; color:var(--text); line-height:1; }
.price-col__currency{ font-size:.85rem; color:var(--muted); }
.price-col__per{ font-size:.8rem; color:var(--muted-2); margin:6px 0 0; }

.price-col__body{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:28px 26px 32px;
}
.price-col__list{ flex:1; display:flex; flex-direction:column; gap:13px; margin-bottom:22px; }
.price-col__list li{
  font-size:.9rem;
  color:var(--muted);
  padding-inline-start:20px;
  position:relative;
}
.price-col__list li::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:.55em;
  width:9px; height:9px;
  border-radius:3px;
  background:var(--grad-brand);
}
.price-col__stars{
  text-align:center;
  color:var(--orange);
  letter-spacing:3px;
  margin-bottom:18px;
  font-size:.95rem;
}
.price-col__badge{
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  background:var(--grad-btn);
  color:#fff;
  font-family:var(--font-mono);
  font-size:.7rem;
  padding:5px 16px;
  border-radius:999px;
  white-space:nowrap;
}

.price-col--featured{
  transform:translateY(-24px);
  z-index:2;
  border-radius:var(--radius-md);
  box-shadow:0 24px 50px -20px rgba(20,15,30,.25);
  border-color:transparent;
}
.price-col--featured .price-col__head{
  background:
    linear-gradient(160deg, var(--deep), #150c2a) padding-box;
  border-radius:var(--radius-md) var(--radius-md) 0 0;
  padding-top:44px;
}
.price-col--featured .price-col__name{ color:#cdbfe0; }
.price-col--featured .price-col__amount .mono{ color:#fff; }
.price-col--featured .price-col__currency{ color:#cdbfe0; }
.price-col--featured .price-col__per{ color:#a998c2; }

@media (max-width:820px){
  .price-table{ flex-direction:column; align-items:stretch; }
  .price-col, .price-col:first-child, .price-col:last-child{ border-radius:var(--radius-md); }
  .price-col + .price-col{ border-inline-start:1px solid var(--border); margin-top:32px; }
  .price-col--featured{ transform:none; margin-top:32px; }
}

/* ============================================
   Courses
   ============================================ */
.courses__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
}
.courses__text .feature-list{ margin:22px 0 28px; }

.course-frame{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:0 24px 50px -24px rgba(20,15,30,.22);
}
.course-frame__bar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:12px 16px;
  background:var(--surface-2);
  border-bottom:1px solid var(--border);
}
.course-frame__bar span{ width:9px; height:9px; border-radius:50%; background:var(--muted-2); opacity:.5; }

.course-frame__body{
  position:relative;
  aspect-ratio:16/9;
  background:var(--bg-soft);
}
.course-frame__body iframe,
.course-frame__body video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:none;
  display:block;
}
.course-video-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:var(--grad-brand);
  opacity:.9;
  color:#fff;
  text-align:center;
  padding:20px;
}
.course-video-placeholder__play{
  width:64px; height:64px;
  border-radius:50%;
  background:rgba(255,255,255,.25);
  display:flex;
  align-items:center;
  justify-content:center;
}
.course-video-placeholder__play svg{ width:26px; height:26px; }
.course-video-placeholder span{ font-family:var(--font-display); font-weight:700; font-size:.92rem; }

@media (max-width:980px){
  .courses__grid{ grid-template-columns:1fr; }
}

/* ============================================
   Services
   ============================================ */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.service-card{
  padding:30px 26px;
  border-radius:var(--radius-md);
  background:var(--surface);
  border:1px solid var(--border);
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.service-card:hover{
  transform:translateY(-4px);
  border-color:var(--border-strong);
  background:var(--surface-2);
}
.service-card__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px; height:48px;
  border-radius:14px;
  margin-bottom:20px;
  background:var(--surface-2);
  color:var(--coral);
}
.service-card__icon svg{ width:24px; height:24px; }
.service-card h3{ font-family:var(--font-display); font-size:1.08rem; margin:0 0 10px; }
.service-card p{ color:var(--muted); font-size:.92rem; margin:0; }

/* ============================================
   Marketplace
   ============================================ */
.marketplace__stack{ display:flex; flex-direction:column; }
.section__title--sm{ font-size:clamp(1.3rem, 2.4vw, 1.75rem); }
.feature-list{ display:flex; flex-direction:column; gap:14px; margin:22px 0 28px; }
.feature-list li{ display:flex; align-items:flex-start; gap:10px; color:var(--muted); font-size:.94rem; }
.check{
  flex-shrink:0;
  width:22px; height:22px;
  border-radius:7px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--grad-btn);
  color:#fff;
  font-size:.72rem;
}
.marketplace__ctas{ display:flex; flex-wrap:wrap; gap:12px; }

.marketplace__text--below{
  max-width:640px;
  margin:44px auto 0;
  text-align:center;
}
.marketplace__text--below .feature-list{ text-align:start; display:inline-flex; }
.marketplace__text--below .marketplace__ctas{ justify-content:center; }

.products-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.products-grid--big{
  gap:22px;
}
.product-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:transform .2s ease, border-color .2s ease;
}
.product-card:hover{ transform:translateY(-3px); border-color:var(--border-strong); }
.product-card__thumb{
  aspect-ratio:1/.85;
  border-radius:14px;
  overflow:hidden;
}
.products-grid--big .product-card__thumb{ aspect-ratio:1/.75; }
.product-card__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.product-card__name{ font-family:var(--font-display); font-size:1rem; font-weight:700; margin:2px 0 0; color:var(--text); }

.product-card__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
}
.product-card__category{
  font-size:.74rem;
  color:var(--muted-2);
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:999px;
  padding:3px 10px;
  white-space:nowrap;
}
.product-card__price-group{
  display:flex;
  align-items:baseline;
  gap:6px;
}
.product-card__price-note{
  font-size:.72rem;
  color:var(--coral);
  font-weight:600;
  white-space:nowrap;
}
.product-card__price{ font-size:.95rem; color:var(--muted); margin:0; }
.product-card__price .mono{ font-weight:600; color:var(--text); }
.product-card__price--free{
  font-family:var(--font-display);
  font-weight:700;
  color:#2f9e5f;
  font-size:.95rem;
}
.product-card__buy{
  margin-top:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:var(--grad-btn);
  color:#fff;
  border:none;
  border-radius:999px;
  padding:11px 12px;
  font-family:var(--font-display);
  font-size:.85rem;
  font-weight:700;
  cursor:pointer;
  transition:transform .15s ease;
}
.product-card__buy svg{ width:15px; height:15px; }
.product-card__buy:hover{ transform:translateY(-1px); }

@media (max-width:760px){
  .products-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:480px){
  .products-grid{ grid-template-columns:1fr; }
}

.browser{
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--border);
}
.browser__bar{
  display:flex;
  gap:7px;
  padding:14px 16px;
  background:var(--surface-2);
  border-bottom:1px solid var(--border);
}
.browser__bar span{ width:10px; height:10px; border-radius:50%; background:var(--muted-2); opacity:.5; }
.browser__body{ display:flex; gap:16px; padding:20px; }
.browser__side{ width:26%; display:flex; flex-direction:column; gap:12px; padding-top:6px; }
.browser__main{ flex:1; display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.sk{ height:9px; border-radius:5px; background:var(--surface-2); }
.sk--w30{ width:30%; } .sk--w40{ width:40%; } .sk--w50{ width:50%; } .sk--w60{ width:60%; } .sk--w70{ width:70%; }
.sk--price{ background:var(--grad-brand); opacity:.6; margin-top:8px; }

.pcard{
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.pcard__thumb{
  aspect-ratio:1/.8;
  border-radius:8px;
  background:var(--grad-brand);
  opacity:.18;
}

/* ============================================
   Work / Portfolio
   ============================================ */
.work-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}

.work-cta{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:340px;
  padding:30px 26px;
  border-radius:var(--radius-lg);
  background:var(--surface-2);
  border:1px dashed var(--border-strong);
  transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.work-cta:hover{ border-color:var(--coral); transform:translateY(-4px); background:var(--surface); }
.work-cta__text{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.3rem;
  line-height:1.5;
  color:var(--text);
}
.work-cta__link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.92rem;
  color:var(--coral);
  font-weight:700;
}
.work-cta__link svg{ width:18px; height:18px; transform:scaleX(-1); }

.work-card{
  display:flex;
  flex-direction:column;
  border-radius:var(--radius-lg);
  background:var(--surface);
  border:1px solid var(--border);
  overflow:hidden;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.work-card:hover{ transform:translateY(-4px); border-color:var(--border-strong); box-shadow:0 20px 40px -24px rgba(20,15,30,.25); }

.work-card__thumb{
  height:240px;
  background:var(--surface-2);
  border-bottom:1px solid var(--border);
  overflow:hidden;
}
.work-card__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.work-card__bar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 12px;
}
.work-card__bar span{ width:7px; height:7px; border-radius:50%; background:var(--muted-2); opacity:.5; }
.work-card__url{
  margin-inline-start:8px;
  font-family:var(--font-mono);
  font-size:.68rem;
  color:var(--muted-2);
  background:var(--surface);
  padding:3px 10px;
  border-radius:999px;
}

.work-more{ display:flex; justify-content:center; margin-top:32px; }

.work-card__tag{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:18px 22px 0;
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--muted);
}
.work-card__tag i{ width:7px; height:7px; border-radius:50%; background:var(--grad-btn); flex-shrink:0; }
.work-card__title{ margin:12px 22px 8px; font-family:var(--font-display); font-size:1.05rem; }
.work-card__desc{ margin:0 22px 18px; color:var(--muted); font-size:.88rem; line-height:1.7; }
.work-card__price{
  margin:0 22px 24px;
  font-size:.9rem;
  color:var(--text);
  font-weight:700;
}
.work-card__price .mono{ font-family:var(--font-mono); color:var(--coral); }

/* ============================================
   Reviews
   ============================================ */
.reviews__head{ max-width:640px; margin:0 0 28px; }
.reviews__lead{ color:var(--muted); margin:0 0 10px; font-size:.95rem; }

.reviews__summary{
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:40px;
  flex-wrap:wrap;
}
.btn--rate{
  background:var(--orange);
  color:#fff;
  border:none;
  padding:12px 22px;
  border-radius:999px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.9rem;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:transform .2s ease;
}
.btn--rate:hover{ transform:translateY(-2px); }
.btn--rate__star{ color:#fff; }

.reviews__score{ display:flex; align-items:baseline; gap:8px; }
.reviews__score-num{ font-family:var(--font-mono); font-size:1.5rem; font-weight:600; }
.reviews__score-label{ font-size:.85rem; color:var(--muted-2); }

.reviews-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.review-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:26px 24px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.review-card__top{ display:flex; align-items:center; justify-content:space-between; }
.review-card__stars{ color:var(--orange); letter-spacing:2px; }
.review-card__quote{ font-size:1.8rem; color:var(--border-strong); font-family:Georgia, serif; line-height:0; }
.review-card__text{ color:var(--text); font-size:.92rem; line-height:1.75; margin:0; flex:1; }
.review-card__author{ display:flex; align-items:center; gap:12px; padding-top:12px; border-top:1px solid var(--border); }
.review-card__avatar{
  flex-shrink:0;
  width:38px; height:38px;
  border-radius:50%;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.8rem;
  font-weight:700;
}
.review-card__author strong{ display:block; font-size:.88rem; }
.review-card__role{ font-size:.76rem; color:var(--muted-2); }

@media (max-width:980px){ .reviews-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:760px){ .reviews-grid{ grid-template-columns:1fr; } }

/* ============================================
   Review modal
   ============================================ */
.review-modal{
  position:fixed;
  inset:0;
  z-index:200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.review-modal.is-open{ display:flex; }
.review-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(11,7,20,.55);
  backdrop-filter:blur(4px);
}
.review-modal__box{
  position:relative;
  z-index:1;
  width:100%;
  max-width:460px;
  background:var(--surface);
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  padding:34px 30px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.35);
}
.review-modal__box h3{ font-family:var(--font-display); font-size:1.25rem; margin:0 0 8px; }
.review-modal__sub{ color:var(--muted); font-size:.88rem; margin:0 0 22px; }
.review-modal__close{
  position:absolute;
  top:16px; left:16px;
  width:32px; height:32px;
  border-radius:50%;
  border:1px solid var(--border-strong);
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font-size:.9rem;
}
.review-modal__close:hover{ color:var(--text); border-color:var(--coral); }

.review-modal__stars{
  display:flex;
  gap:8px;
  justify-content:center;
  margin-bottom:22px;
}
.review-modal__stars button{
  background:none;
  border:none;
  font-size:1.8rem;
  color:var(--border-strong);
  cursor:pointer;
  line-height:1;
  transition:color .15s ease, transform .15s ease;
}
.review-modal__stars button:hover{ transform:scale(1.1); }
.review-modal__stars button.is-active{ color:var(--orange); }

.review-modal__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
@media (max-width:480px){ .review-modal__row{ grid-template-columns:1fr; } }

/* ============================================
   Contact
   ============================================ */
.contact__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:start;
}
.contact-cards{ display:flex; flex-direction:column; gap:14px; margin-top:32px; }
.contact-card{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 20px;
  border-radius:var(--radius-sm);
  background:var(--surface);
  border:1px solid var(--border);
  transition:border-color .2s ease, transform .2s ease;
}
a.contact-card:hover{ border-color:var(--coral); transform:translateX(-2px); }
.contact-card__icon{
  flex-shrink:0;
  width:44px; height:44px;
  border-radius:12px;
  background:var(--surface-2);
  color:var(--coral);
  display:flex;
  align-items:center;
  justify-content:center;
}
.contact-card__icon svg{ width:20px; height:20px; }
.contact-card strong{ display:block; font-size:.92rem; margin-bottom:2px; }
.contact-card span span{ font-size:.86rem; color:var(--muted); }

.contact-form{
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:32px;
  border-radius:var(--radius-md);
  background:var(--surface);
  border:1px solid var(--border);
}
.field{ display:flex; flex-direction:column; gap:8px; font-size:.88rem; color:var(--muted); min-width:0; }
.field span{ white-space:normal; overflow-wrap:break-word; }
.field input, .field textarea{ width:100%; min-width:0; box-sizing:border-box; }
.field input, .field textarea{
  font-family:var(--font-body);
  background:var(--surface-2);
  border:1px solid transparent;
  border-radius:12px;
  padding:13px 16px;
  color:var(--text);
  font-size:.95rem;
  resize:vertical;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--muted-2); }
.field input:focus, .field textarea:focus{
  outline:none;
  border-color:var(--coral);
  box-shadow:0 0 0 3px rgba(237,88,88,.12);
}
.field__hint{ font-size:.78rem; color:var(--muted-2); margin:0; }

/* ============================================
   Footer
   ============================================ */
.footer{ border-top:1px solid var(--border); padding:64px 0 0; background:var(--bg-soft); }
.footer__inner{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:40px;
  padding-bottom:48px;
}
.footer__brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  text-align:right;
}
.footer__logo{ width:110px; height:auto; margin-bottom:14px; }
.footer__brand p{ color:var(--muted-2); font-size:.9rem; max-width:260px; }

.footer__links{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.footer__links a{ color:var(--muted); font-size:.92rem; transition:color .2s ease; }
.footer__links a:hover{ color:var(--text); }

.footer__contact{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.footer__heading{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.85rem;
  color:var(--text);
  margin:0 0 4px;
}
.footer__heading--social{ margin-top:18px; }
.footer__contact-item{
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--muted);
  font-size:.9rem;
  font-family:var(--font-mono);
  transition:color .2s ease;
}
.footer__contact-item svg{ width:17px; height:17px; flex-shrink:0; }
.footer__contact-item:hover{ color:var(--coral); }

.footer__social{ display:flex; gap:10px; }
.social-icon{
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid var(--border-strong);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  transition:color .2s ease, border-color .2s ease, transform .2s ease;
}
.social-icon svg{ width:17px; height:17px; }
.social-icon:hover{ color:#fff; border-color:transparent; background:var(--grad-btn); transform:translateY(-2px); }

.footer__bottom{
  border-top:1px solid var(--border);
  padding:20px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.footer__bottom p{ margin:0; font-size:.82rem; color:var(--muted-2); }

.back-to-top{
  flex-shrink:0;
  width:40px; height:40px;
  border-radius:50%;
  border:none;
  background:var(--grad-btn);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
  box-shadow:0 8px 20px -8px rgba(220,67,94,.5);
}
.back-to-top:hover{ transform:translateY(-3px); }
.back-to-top svg{ width:18px; height:18px; }

@media (max-width:760px){
  .footer__bottom{ flex-direction:row; padding:16px 20px; }
  .footer__bottom p{ font-size:.75rem; }
}

/* ============================================
   Floating WhatsApp button
   ============================================ */
.wa-float{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:90;
  width:58px; height:58px;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 28px -8px rgba(37,211,102,.6);
  transition:transform .2s ease, box-shadow .2s ease;
}
.wa-float:hover{ transform:scale(1.08); box-shadow:0 14px 32px -6px rgba(37,211,102,.75); }
.wa-float svg{ width:28px; height:28px; }

/* ============================================
   Reveal animation
   ============================================ */
[data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease, transform .7s ease;
}
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }

/* ============================================
   Responsive
   ============================================ */
@media (max-width:980px){
  .about__grid, .marketplace__grid, .contact__grid{ grid-template-columns:1fr; gap:40px; }
  .plans{ grid-template-columns:1fr; }
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .work-grid{ grid-template-columns:repeat(2,1fr); }
  .footer__inner{ grid-template-columns:1fr 1fr; }
}

@media (max-width:760px){
  .nav__links{
    position:fixed;
    top:var(--nav-h);
    inset-inline:0;
    background:var(--nav-bg-scrolled);
    backdrop-filter:blur(14px);
    flex-direction:column;
    align-items:stretch;
    padding:18px;
    gap:4px;
    border-bottom:1px solid var(--border);
    transform:translateY(-12px);
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
  }
  .nav__links.is-open{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .navlink{ padding:14px 16px; }
  .nav__burger{ display:flex; }
  .nav__actions .btn--sm:not(.install-btn){ display:none; }

  .services-grid{ grid-template-columns:1fr; }
  .work-grid{ grid-template-columns:1fr; }
  .hero__stats{ gap:26px; }
  .footer__inner{ grid-template-columns:1fr; text-align:center; }
  .footer__brand{ display:flex; flex-direction:column; align-items:center; }
  .footer__contact{ align-items:center; }
  .browser__body{ flex-direction:column; }
  .browser__side{ width:100%; flex-direction:row; flex-wrap:wrap; }
}

@media (max-width:420px){
  .hero__cta{ flex-direction:column; align-items:stretch; }
  .hero__cta .btn{ width:100%; }
}