/* Tantawy Host Pro UI — v0.5.0
   A focused presentation layer for the approved dark hero, multi-slide motion,
   premium cards and floating WhatsApp access. */

:root{
  --tw-hero-bg:#0d0f12;
  --tw-hero-bg-2:#15181d;
  --tw-hero-copy:#f7f7f5;
  --tw-hero-muted:#aeb2b9;
  --tw-hero-line:rgba(255,255,255,.10);
  --tw-ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- Header ---------- */
.tw-site-header{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(18px) saturate(135%);
}
.tw-site-header.is-scrolled{box-shadow:0 14px 45px rgba(15,17,20,.08)}
.tw-nav{height:84px}
.tw-brand-logo{max-height:54px}
.tw-menu{gap:22px}
.tw-menu a{font-size:13px;font-weight:800}
.tw-header-whatsapp{min-height:46px;padding-inline:20px}

/* ---------- Hero / Slider ---------- */
.tw-hero-slider.tw-hero-pro{
  position:relative;
  min-height:720px;
  padding-top:84px;
  background:
    radial-gradient(circle at 82% 26%, color-mix(in srgb,var(--tw-primary) 28%,transparent), transparent 30%),
    linear-gradient(135deg,var(--tw-hero-bg) 0%,#101318 52%,#0a0c0f 100%);
  overflow:hidden;
  isolation:isolate;
}
.tw-hero-pro:before{
  content:"";
  position:absolute;inset:84px 0 0;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 88%);
  pointer-events:none;
}
.tw-hero-atmosphere{position:absolute;inset:84px 0 0;pointer-events:none;z-index:-1}
.tw-hero-atmosphere span{position:absolute;border-radius:999px;filter:blur(1px);opacity:.6}
.tw-hero-atmosphere span:nth-child(1){width:390px;height:390px;inset:10% auto auto -140px;border:1px solid rgba(255,255,255,.06)}
.tw-hero-atmosphere span:nth-child(2){width:620px;height:620px;inset:-220px -130px auto auto;border:1px solid rgba(143,22,49,.22)}
.tw-hero-atmosphere span:nth-child(3){width:250px;height:250px;inset:auto 42% -150px auto;background:rgba(143,22,49,.10);filter:blur(55px)}

.tw-hero-pro .tw-slider-stage{position:relative;min-height:570px}
.tw-hero-pro .tw-slide{
  position:absolute;inset:0;
  display:grid;align-items:center;
  opacity:0;visibility:hidden;pointer-events:none;
  z-index:1;
  transition:opacity .72s ease,visibility .72s ease;
}
.tw-hero-pro .tw-slide:before{display:none}
.tw-hero-pro .tw-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;z-index:3}
.tw-hero-pro .tw-slide-grid{
  min-height:570px;
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  align-items:center;
  gap:78px;
  direction:ltr;
}
.tw-hero-pro .tw-slide-copy{
  direction:rtl;
  position:relative;
  z-index:4;
  padding:22px 0 24px;
  max-width:650px;
  justify-self:end;
}
.tw-slide-eyebrow{
  direction:ltr;
  display:flex;align-items:center;gap:11px;
  margin-bottom:17px;
  color:#858b94;font-size:11px;font-weight:900;letter-spacing:.08em;
  opacity:0;transform:translateY(14px);
}
.tw-slide-eyebrow i{display:block;width:54px;height:1px;background:rgba(255,255,255,.18)}
.tw-hero-pro .tw-kicker{
  background:rgba(143,22,49,.15);
  border:1px solid rgba(230,90,118,.25);
  color:#f28aa0;
  padding:7px 13px;
  opacity:0;
  transform:translateY(18px);
}
.tw-hero-pro .tw-slide-copy h1{
  max-width:650px;
  margin:18px 0 22px;
  color:var(--tw-hero-copy);
  font-size:clamp(44px,4.7vw,68px);
  line-height:1.13;
  letter-spacing:-2px;
  font-weight:900;
  opacity:0;
  transform:translateY(42px);
}
.tw-hero-pro .tw-slide-copy p{
  max-width:610px;
  margin:0 0 31px;
  color:var(--tw-hero-muted);
  font-size:16px;
  line-height:2;
  opacity:0;
  transform:translateY(30px);
}
.tw-hero-pro .tw-hero-actions{opacity:0;transform:translateY(26px)}
.tw-btn-hero-ghost{color:#fff;border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.035)}
.tw-btn-hero-ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.28)}

.tw-hero-pro .tw-slide.is-active .tw-slide-eyebrow,
.tw-hero-pro .tw-slide.is-active .tw-kicker,
.tw-hero-pro .tw-slide.is-active .tw-slide-copy h1,
.tw-hero-pro .tw-slide.is-active .tw-slide-copy p,
.tw-hero-pro .tw-slide.is-active .tw-hero-actions{
  opacity:1;transform:none;
  transition-property:opacity,transform;
  transition-timing-function:var(--tw-ease);
}
.tw-hero-pro .tw-slide.is-active .tw-slide-eyebrow{transition-duration:.65s;transition-delay:.04s}
.tw-hero-pro .tw-slide.is-active .tw-kicker{transition-duration:.68s;transition-delay:.10s}
.tw-hero-pro .tw-slide.is-active .tw-slide-copy h1{transition-duration:.82s;transition-delay:.16s}
.tw-hero-pro .tw-slide.is-active .tw-slide-copy p{transition-duration:.78s;transition-delay:.27s}
.tw-hero-pro .tw-slide.is-active .tw-hero-actions{transition-duration:.78s;transition-delay:.38s}

.tw-hero-pro .tw-slide.is-leaving-forward .tw-slide-copy,
.tw-hero-pro .tw-slide.is-leaving-back .tw-slide-copy{opacity:0;transition:opacity .35s ease}
.tw-hero-pro .tw-slide.is-leaving-forward .tw-slide-copy{transform:translateY(-18px)}
.tw-hero-pro .tw-slide.is-leaving-back .tw-slide-copy{transform:translateY(18px)}

/* Hero visual */
.tw-hero-pro .tw-slide-visual{
  direction:rtl;
  min-height:500px;
  display:grid;place-items:center;
  opacity:0;
  transform:translateX(-56px) scale(.94);
}
.tw-hero-pro .tw-slide.is-active .tw-slide-visual{
  opacity:1;transform:none;
  transition:opacity .78s .14s ease,transform 1s .14s var(--tw-ease);
}
.tw-hero-pro .tw-slide.is-leaving-forward .tw-slide-visual{transform:translateX(50px) scale(.96);opacity:0;transition:.48s ease}
.tw-hero-pro .tw-slide.is-leaving-back .tw-slide-visual{transform:translateX(-50px) scale(.96);opacity:0;transition:.48s ease}
.tw-slide-image-wrap{width:min(620px,100%);height:460px;border-radius:32px;border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 110px rgba(0,0,0,.42);overflow:hidden}

.tw-hosting-scene{position:relative;width:min(610px,100%);height:500px;perspective:1200px}
.tw-scene-glow{position:absolute;width:420px;height:420px;border-radius:50%;left:65px;top:50px;background:radial-gradient(circle,color-mix(in srgb,var(--tw-primary) 25%,transparent),transparent 66%);filter:blur(18px)}
.tw-scene-window{
  position:absolute;inset:57px 35px 60px 42px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:28px;
  background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.045));
  backdrop-filter:blur(18px);
  box-shadow:0 45px 100px rgba(0,0,0,.38);
  overflow:hidden;
  transform:rotateY(-6deg) rotateX(2deg);
}
.tw-scene-window:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.08),transparent 30%,transparent 70%,rgba(143,22,49,.06));pointer-events:none}
.tw-scene-window-top{height:56px;border-bottom:1px solid rgba(255,255,255,.09);display:flex;align-items:center;gap:7px;padding:0 18px;direction:ltr}
.tw-scene-window-top span{width:8px;height:8px;border-radius:50%;background:#4b5057}
.tw-scene-window-top span:nth-child(3){background:var(--tw-primary)}
.tw-scene-window-top b{margin-left:auto;font-size:10px;color:#858b94;font-weight:700;letter-spacing:.03em}
.tw-scene-window-body{height:calc(100% - 56px);display:grid;grid-template-columns:90px 1fr;direction:ltr}
.tw-scene-sidebar{border-right:1px solid rgba(255,255,255,.08);padding:25px 17px;display:grid;align-content:start;gap:17px}
.tw-scene-sidebar i{display:block;width:100%;height:8px;border-radius:99px;background:rgba(255,255,255,.08)}
.tw-scene-sidebar i:first-child{background:rgba(143,22,49,.55)}
.tw-scene-main{position:relative;padding:35px;direction:rtl}
.tw-scene-badge{width:72px;height:72px;border-radius:21px;display:grid;place-items:center;background:linear-gradient(145deg,var(--tw-primary),#5d0e22);color:#fff;font-size:22px;font-weight:900;box-shadow:0 20px 42px rgba(143,22,49,.32)}
.tw-scene-title{height:12px;width:58%;border-radius:99px;background:rgba(255,255,255,.72);margin-top:26px}
.tw-scene-line{height:7px;border-radius:99px;background:rgba(255,255,255,.11);margin-top:11px}
.tw-scene-line.l1{width:82%}.tw-scene-line.l2{width:64%}
.tw-scene-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:35px}
.tw-scene-cards span{display:block;height:92px;border-radius:15px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.045);position:relative;overflow:hidden}
.tw-scene-cards span:after{content:"";position:absolute;inset:auto 12px 13px;height:6px;border-radius:20px;background:rgba(255,255,255,.11)}
.tw-scene-cards span:nth-child(2){background:rgba(143,22,49,.14);border-color:rgba(143,22,49,.25)}
.tw-scene-card{
  position:absolute;z-index:5;
  min-width:165px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:16px;
  background:rgba(19,22,27,.78);
  backdrop-filter:blur(16px);
  box-shadow:0 22px 54px rgba(0,0,0,.28);
  color:#fff;
  display:grid;gap:2px;
}
.tw-scene-card small{font-size:9px;color:#8d939c}.tw-scene-card strong{font-size:12px}
.tw-scene-card-a{right:0;top:25px;animation:twSceneFloatA 5.5s ease-in-out infinite}
.tw-scene-card-b{left:3px;bottom:42px;animation:twSceneFloatB 6s ease-in-out infinite}
.tw-scene-card-c{right:35px;bottom:12px;animation:twSceneFloatC 6.8s ease-in-out infinite}
@keyframes twSceneFloatA{50%{transform:translateY(-10px) rotate(1deg)}}
@keyframes twSceneFloatB{50%{transform:translateY(10px) rotate(-1deg)}}
@keyframes twSceneFloatC{50%{transform:translateY(-7px)}}
.tw-scene-apps .tw-scene-badge{background:linear-gradient(145deg,#23262d,var(--tw-primary))}
.tw-scene-growth .tw-scene-badge{font-size:35px}
.tw-scene-growth .tw-scene-cards span:nth-child(1){height:58px;align-self:end}.tw-scene-growth .tw-scene-cards span:nth-child(2){height:78px;align-self:end}.tw-scene-growth .tw-scene-cards span:nth-child(3){height:105px;align-self:end}

/* Slider controls */
.tw-slider-footer{
  position:absolute;left:50%;bottom:28px;transform:translateX(-50%);
  z-index:20;
  display:grid;grid-template-columns:auto minmax(120px,1fr) auto;gap:24px;align-items:center;
  direction:ltr;
}
.tw-slider-arrows{display:flex;gap:8px}
.tw-slider-arrows button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#fff;cursor:pointer;display:grid;place-items:center;transition:.25s ease}
.tw-slider-arrows button:hover{background:#fff;color:#111;transform:translateY(-2px)}
.tw-slider-arrows button span{font-size:17px;line-height:1}
.tw-slider-progress{height:2px;background:rgba(255,255,255,.10);overflow:hidden;border-radius:99px}
.tw-slider-progress i{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--tw-primary),#e75d79);transform-origin:left;transform:scaleX(0)}
@keyframes twSliderProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.tw-slider-dots{display:flex;align-items:center;gap:5px;direction:ltr}
.tw-slider-dots button{width:42px;height:30px;border:0;background:transparent;color:#747a84;cursor:pointer;padding:0;font-size:10px;font-weight:900;position:relative}
.tw-slider-dots button:after{content:"";position:absolute;height:1px;left:8px;right:8px;bottom:2px;background:rgba(255,255,255,.10);transition:.25s}
.tw-slider-dots button.is-active{color:#fff}.tw-slider-dots button.is-active:after{background:var(--tw-primary);height:2px}

/* ---------- Shared sections ---------- */
.tw-section{padding:96px 0}
.tw-section-head{margin-bottom:46px}
.tw-section-head h2{letter-spacing:-1.1px}

/* ---------- Premium card motion ---------- */
.tw-motion-card,.tw-service-panel,.tw-post-card{
  --card-rx:0deg;--card-ry:0deg;
  transform:perspective(1200px) translateY(0) rotateX(var(--card-rx)) rotateY(var(--card-ry));
  transition:transform .38s var(--tw-ease),box-shadow .38s ease,border-color .35s ease,background .35s ease;
  will-change:transform;
}
.tw-motion-card:after,.tw-service-panel:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(143,22,49,.13),transparent 42%);
  opacity:0;transition:opacity .3s ease;
}
.tw-motion-card:hover:after,.tw-service-panel:hover:after{opacity:1}
.tw-motion-card:hover,.tw-service-panel:hover{transform:perspective(1200px) translateY(-10px) scale(1.008) rotateX(var(--card-rx)) rotateY(var(--card-ry))}
.tw-feature-card{min-height:285px;border-radius:24px;padding:30px;overflow:hidden}
.tw-feature-card:hover{box-shadow:0 28px 70px rgba(17,19,22,.13);border-color:rgba(143,22,49,.28)}
.tw-feature-card:before{content:"";position:absolute;inset:0 auto auto;width:0;height:3px;background:var(--tw-primary);transition:width .45s var(--tw-ease)}
.tw-feature-card:hover:before{width:100%}
.tw-feature-card h3{transition:transform .32s var(--tw-ease),color .3s ease}
.tw-feature-card:hover h3{transform:translateY(-3px);color:var(--tw-primary)}
.tw-service-panel{border-radius:26px;isolation:isolate}
.tw-service-panel:hover{box-shadow:0 28px 78px rgba(15,17,20,.13)}
.tw-service-dark:hover{box-shadow:0 32px 82px rgba(15,17,20,.27)}
.tw-service-glyph{transition:transform .55s var(--tw-ease),opacity .35s ease}
.tw-service-panel:hover .tw-service-glyph{transform:translate(-8px,-8px) scale(1.08);opacity:.13}

/* Pricing cards with pronounced, controlled motion */
.tw-pricing-grid{gap:20px;overflow:visible}
.tw-plan-card{
  position:relative;
  min-height:520px;
  border-radius:26px;
  overflow:hidden;
  background:linear-gradient(180deg,#fff,#f8f8f6);
  box-shadow:0 8px 26px rgba(17,19,22,.04);
}
.tw-plan-card:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--tw-primary);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--tw-ease)}
.tw-plan-card:hover:before,.tw-plan-card.is-featured:before{transform:scaleX(1)}
.tw-plan-card:hover{border-color:rgba(143,22,49,.30);box-shadow:0 34px 85px rgba(17,19,22,.14)}
.tw-plan-card.is-featured{background:linear-gradient(160deg,#171a1f 0%,#0f1114 100%);box-shadow:0 28px 75px rgba(10,12,15,.22)}
.tw-plan-card.is-featured:hover{box-shadow:0 38px 95px rgba(10,12,15,.32)}
.tw-plan-icon{transition:transform .38s var(--tw-ease),background .35s ease}
.tw-plan-card:hover .tw-plan-icon{transform:translateY(-4px) rotate(-4deg) scale(1.07)}
.tw-plan-price strong{letter-spacing:-1px;transition:transform .32s var(--tw-ease),color .3s ease}
.tw-plan-card:hover .tw-plan-price strong{transform:translateY(-2px);color:var(--tw-primary)}
.tw-plan-card.is-featured:hover .tw-plan-price strong{color:#fff}
.tw-plan-button{position:relative;overflow:hidden}
.tw-plan-button:after{content:"←";font-size:14px;opacity:0;transform:translateX(8px);transition:.3s var(--tw-ease)}
.tw-plan-card:hover .tw-plan-button:after{opacity:1;transform:none}
.tw-plan-features li{transition:transform .25s ease,color .25s ease}
.tw-plan-card:hover .tw-plan-features li{transform:translateX(-2px)}

/* Reveal system */
.tw-reveal{opacity:0;transform:translateY(34px);transition:opacity .72s ease,transform .82s var(--tw-ease);transition-delay:var(--delay,0ms)}
.tw-reveal.tw-reveal-visible{opacity:1;transform:none}
.tw-pricing-grid .tw-plan-card.tw-reveal-visible{animation:twCardEnter .72s var(--tw-ease) both;animation-delay:calc(var(--card-order,0) * 80ms)}
@keyframes twCardEnter{from{opacity:0;transform:translateY(28px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Blog card motion */
.tw-post-card{border-radius:24px;overflow:hidden}
.tw-post-card:hover{transform:translateY(-9px);box-shadow:0 30px 78px rgba(17,19,22,.12);border-color:rgba(143,22,49,.18)}
.tw-post-card .tw-post-thumb img{transition:transform .7s var(--tw-ease),filter .45s ease}
.tw-post-card:hover .tw-post-thumb img{transform:scale(1.055)}

/* ---------- Footer ---------- */
.tw-footer{padding-top:70px}
.tw-footer-email{display:inline-flex;color:#fff;font-size:13px;font-weight:800;padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.18);transition:.25s}
.tw-footer-email:hover{color:#f08aa0;border-color:#f08aa0}
.tw-footer-about p{max-width:390px}
.tw-footer-bottom{align-items:center}
.tw-credit{color:#fff}

/* Floating WhatsApp — intentionally outside the footer */
.tw-floating-whatsapp{
  position:fixed;
  left:24px;
  bottom:24px;
  z-index:1300;
  height:56px;
  min-width:56px;
  padding:0 18px 0 13px;
  border-radius:999px;
  background:#25d366;
  color:#fff;
  display:flex;
  direction:ltr;
  align-items:center;
  gap:9px;
  box-shadow:0 18px 45px rgba(17,94,47,.28);
  transition:transform .3s var(--tw-ease),box-shadow .3s ease,filter .3s ease;
}
.tw-floating-whatsapp svg{width:26px;height:26px;fill:currentColor;flex:none}
.tw-floating-whatsapp span{font-size:12px;font-weight:900;direction:rtl}
.tw-floating-whatsapp:hover{transform:translateY(-5px) scale(1.03);box-shadow:0 24px 55px rgba(17,94,47,.36);filter:brightness(.98)}
.tw-floating-whatsapp:after{content:"";position:absolute;inset:-5px;border-radius:inherit;border:1px solid rgba(37,211,102,.32);animation:twWaPulse 2.4s ease-out infinite}
@keyframes twWaPulse{0%,100%{opacity:0;transform:scale(.96)}45%{opacity:.8}80%{opacity:0;transform:scale(1.12)}}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  .tw-hero-pro .tw-slide-grid{gap:38px;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
  .tw-hero-pro .tw-slide-copy h1{font-size:52px}
  .tw-hosting-scene{transform:scale(.92)}
}
@media(max-width:900px){
  .tw-nav{height:76px}
  .tw-hero-slider.tw-hero-pro{padding-top:76px;min-height:910px}
  .tw-hero-pro .tw-slider-stage{min-height:810px}
  .tw-hero-pro .tw-slide-grid{grid-template-columns:1fr;gap:10px;min-height:790px;padding-top:48px;padding-bottom:90px;direction:rtl}
  .tw-hero-pro .tw-slide-copy{justify-self:stretch;max-width:720px;margin:auto;text-align:center;padding:0}
  .tw-slide-eyebrow{justify-content:center}
  .tw-hero-pro .tw-slide-copy h1,.tw-hero-pro .tw-slide-copy p{margin-inline:auto}
  .tw-hero-pro .tw-hero-actions{justify-content:center}
  .tw-hero-pro .tw-slide-visual{min-height:330px}
  .tw-hosting-scene{height:350px;max-width:500px;transform:scale(.88)}
  .tw-scene-window{inset:25px 25px 35px}
  .tw-scene-card-a{top:0}.tw-scene-card-b{bottom:5px}.tw-scene-card-c{display:none}
  .tw-slider-footer{bottom:18px}
}
@media(max-width:620px){
  .tw-hero-slider.tw-hero-pro{min-height:820px}
  .tw-hero-pro .tw-slider-stage{min-height:730px}
  .tw-hero-pro .tw-slide-grid{min-height:710px;padding-top:38px;padding-bottom:80px}
  .tw-hero-pro .tw-slide-copy h1{font-size:39px;letter-spacing:-1px}
  .tw-hero-pro .tw-slide-copy p{font-size:14px;line-height:1.9}
  .tw-hero-pro .tw-hero-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .tw-hero-pro .tw-hero-actions .tw-btn{min-width:0;padding-inline:12px;font-size:12px}
  .tw-hosting-scene{height:285px;transform:scale(.84);width:112%;margin-inline:-6%}
  .tw-scene-window{inset:12px 20px 30px}
  .tw-scene-card{min-width:135px;padding:10px 12px}.tw-scene-card strong{font-size:10px}
  .tw-slider-footer{grid-template-columns:auto 1fr auto;gap:10px}
  .tw-slider-arrows button{width:38px;height:38px}
  .tw-slider-dots button{width:28px}.tw-slider-dots button span{font-size:9px}
  .tw-slider-progress{min-width:55px}
  .tw-motion-card:hover,.tw-service-panel:hover{transform:translateY(-5px)}
  .tw-floating-whatsapp{left:15px;bottom:15px;width:54px;min-width:54px;height:54px;padding:0;justify-content:center}
  .tw-floating-whatsapp span{display:none}
  .tw-floating-whatsapp svg{width:25px;height:25px}
}

@media(prefers-reduced-motion:reduce){
  .tw-scene-card,.tw-floating-whatsapp:after,.tw-tech-track{animation:none!important}
  .tw-reveal,.tw-motion-card,.tw-service-panel,.tw-post-card,.tw-slide *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ============================================================
   v0.6.0 — Video hero + top-drop showcase + counters
   ============================================================ */

/* ---------- Video hero: one cinematic scene, never a carousel ---------- */
.tw-video-hero{
  position:relative;
  min-height:clamp(680px,88vh,940px);
  padding-top:90px;
  overflow:hidden;
  isolation:isolate;
  background:#0b0d10;
  color:#fff;
}
.tw-video-hero-media,.tw-video-hero-video,.tw-video-hero-overlay,.tw-video-hero-grain{position:absolute;inset:0}
.tw-video-hero-media{z-index:-3}
.tw-video-hero-video{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.92) contrast(1.04) brightness(.72)}
.tw-video-hero-overlay{
  z-index:1;
  background:
    linear-gradient(90deg,rgba(7,9,11,.74) 0%,rgba(7,9,11,.25) 43%,rgba(7,9,11,.10) 68%,rgba(7,9,11,.34) 100%),
    linear-gradient(0deg,rgba(7,9,11,.82) 0%,transparent 38%,rgba(7,9,11,.16) 100%);
}
.tw-video-hero-grain{z-index:2;opacity:.22;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
.tw-video-hero:after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent)}
.tw-video-hero-content{min-height:calc(clamp(680px,88vh,940px) - 90px);display:flex;align-items:flex-end;justify-content:space-between;padding-bottom:92px;position:relative;z-index:4}
.tw-video-hero-copy{width:min(690px,64vw);text-align:right}
.tw-hero-brandline{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-bottom:22px;color:#fff;font-size:12px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
.tw-hero-brand-ar{letter-spacing:0;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.15);padding:7px 11px;border-radius:999px;backdrop-filter:blur(10px)}
.tw-hero-brand-en{color:#f1cbd4}
.tw-hero-brand-divider{width:42px;height:1px;background:var(--tw-primary)}
.tw-video-hero h1{font-size:clamp(44px,6.1vw,92px);line-height:1.03;letter-spacing:-2.2px;margin:0 0 24px;font-weight:900;max-width:780px;text-wrap:balance}
.tw-video-hero-copy>p{font-size:clamp(15px,1.55vw,20px);line-height:1.9;max-width:660px;margin:0 0 30px;color:rgba(255,255,255,.72)}
.tw-video-hero .tw-hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.tw-btn-glass{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;backdrop-filter:blur(14px)}
.tw-btn-glass:hover{background:#fff;color:#111315;border-color:#fff}
.tw-hero-film-meta{align-self:flex-end;margin-bottom:8px;display:flex;align-items:center;gap:12px;direction:ltr;color:rgba(255,255,255,.45);font-size:9px;font-weight:900;letter-spacing:.16em;writing-mode:vertical-rl;transform:rotate(180deg)}
.tw-hero-film-meta i{width:1px;height:34px;background:rgba(255,255,255,.26)}
.tw-video-toggle{position:absolute;z-index:6;left:38px;top:125px;border:1px solid rgba(255,255,255,.18);background:rgba(8,10,12,.34);color:#fff;height:42px;padding:0 15px;border-radius:999px;display:flex;align-items:center;gap:9px;backdrop-filter:blur(12px);cursor:pointer;font-size:11px;font-weight:800;transition:.25s ease}
.tw-video-toggle:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.tw-video-toggle-icon{width:9px;height:13px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.tw-video-toggle.is-paused .tw-video-toggle-icon{width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid currentColor;border-right:0}
.tw-hero-scroll{position:absolute;z-index:6;right:50%;bottom:28px;transform:translateX(50%);width:34px;height:50px;border:1px solid rgba(255,255,255,.3);border-radius:99px;display:grid;place-items:start center;padding-top:9px}
.tw-hero-scroll span{display:block;width:4px;height:9px;border-radius:10px;background:#fff;animation:twScrollCue 1.8s ease-in-out infinite}
@keyframes twScrollCue{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(19px);opacity:1}}

/* ---------- Top-drop showcase carousel ---------- */
.tw-drop-showcase{position:relative;background:#f4f4f1;padding:105px 0 115px;overflow:hidden;border-bottom:1px solid #e2e2dd}
.tw-showcase-heading{display:grid;grid-template-columns:1.12fr .88fr;gap:60px;align-items:end;margin-bottom:42px}
.tw-section-kicker{display:block;font-size:10px;letter-spacing:.18em;font-weight:900;color:var(--tw-primary);margin-bottom:9px}
.tw-showcase-heading h2{font-size:clamp(36px,4.4vw,64px);line-height:1.08;letter-spacing:-1.3px;margin:0;font-weight:900;max-width:690px}
.tw-showcase-heading>p{margin:0;color:#71757a;font-size:15px;max-width:500px;line-height:1.9}
.tw-drop-stage{position:relative;height:620px;border-radius:34px;background:linear-gradient(150deg,#15181c 0%,#0d0f12 65%,#171316 100%);overflow:hidden;box-shadow:0 32px 90px rgba(16,18,20,.16);outline:0}
.tw-drop-stage:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 52% 15%,rgba(143,22,49,.28),transparent 31%),linear-gradient(115deg,rgba(255,255,255,.025),transparent 38%);pointer-events:none}
.tw-drop-stage:after{content:"AL-TANTAWY HOST";position:absolute;left:28px;top:28px;color:rgba(255,255,255,.12);font-size:10px;font-weight:900;letter-spacing:.22em;z-index:2}
.tw-drop-backdrop{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.tw-drop-backdrop span{position:absolute;border:1px solid rgba(255,255,255,.055);border-radius:50%;width:440px;height:440px;left:50%;top:50%;transform:translate(-50%,-50%)}
.tw-drop-backdrop span:nth-child(2){width:720px;height:720px}.tw-drop-backdrop span:nth-child(3){width:1020px;height:1020px}
.tw-drop-card{
  --x:0px;--y:35px;--r:0deg;--s:1;
  position:absolute;top:58px;left:50%;width:min(350px,28vw);height:470px;
  transform:translate3d(calc(-50% + var(--x)),var(--y),0) rotate(var(--r)) scale(var(--s));
  transform-origin:50% 14%;
  opacity:0;z-index:1;
  transition:transform .78s cubic-bezier(.16,1,.3,1),opacity .52s ease,filter .52s ease;
  will-change:transform,opacity;
  filter:saturate(.82);
  pointer-events:none;
}
.tw-drop-card[data-slot="0"]{--x:0px;--y:0px;--r:0deg;--s:1;opacity:1;z-index:10;filter:none;pointer-events:auto}
.tw-drop-card[data-slot="-1"]{--x:-315px;--y:34px;--r:-5deg;--s:.88;opacity:.82;z-index:8;pointer-events:auto}
.tw-drop-card[data-slot="1"]{--x:315px;--y:34px;--r:5deg;--s:.88;opacity:.82;z-index:8;pointer-events:auto}
.tw-drop-card[data-slot="-2"]{--x:-550px;--y:70px;--r:-8deg;--s:.72;opacity:.34;z-index:5}
.tw-drop-card[data-slot="2"]{--x:550px;--y:70px;--r:8deg;--s:.72;opacity:.34;z-index:5}
.tw-drop-card[data-slot="hidden"]{--x:0px;--y:-520px;--r:0deg;--s:.65;opacity:0;z-index:0}
.tw-drop-card.is-entering{animation:twDropCardIn .86s cubic-bezier(.12,.88,.26,1.12) both}
.tw-drop-card.is-exiting{animation:twDropCardOut .62s cubic-bezier(.58,.06,.82,.5) both;pointer-events:none}
@keyframes twDropCardIn{
  0%{transform:translate3d(calc(-50% + var(--x)),-560px,0) rotate(calc(var(--r) - 12deg)) scale(.66);opacity:0}
  70%{opacity:1}
  100%{transform:translate3d(calc(-50% + var(--x)),var(--y),0) rotate(var(--r)) scale(var(--s));opacity:1}
}
@keyframes twDropCardOut{
  from{transform:translate3d(calc(-50% + var(--x)),var(--y),0) rotate(var(--r)) scale(var(--s));opacity:1}
  to{transform:translate3d(calc(-50% + var(--x)),590px,0) rotate(calc(var(--r) + 14deg)) scale(.78);opacity:0}
}
.tw-drop-card-link{display:grid;grid-template-rows:54% 46%;height:100%;background:#f9f9f7;border-radius:27px;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 32px 74px rgba(0,0,0,.38);color:#111315;position:relative}
.tw-drop-card-link:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--tw-primary),#d05b75);z-index:3;transform:scaleX(.38);transform-origin:right;transition:transform .35s ease}
.tw-drop-card:hover .tw-drop-card-link:before{transform:scaleX(1)}
.tw-drop-card-visual{position:relative;background:linear-gradient(145deg,#e7e5e0,#f6f5f2);overflow:hidden;padding:24px}
.tw-drop-card-visual:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(143,22,49,.14),transparent 28%);pointer-events:none}
.tw-drop-card-visual img{width:100%;height:100%;object-fit:cover;border-radius:16px}
.tw-mini-ui{position:absolute;inset:34px 28px 22px;background:#fff;border-radius:17px;box-shadow:0 20px 44px rgba(20,22,25,.14);overflow:hidden;transform:perspective(800px) rotateX(3deg) rotateY(-4deg);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.tw-drop-card:hover .tw-mini-ui{transform:perspective(800px) rotateX(0) rotateY(0) translateY(-5px)}
.tw-mini-ui-bar{height:34px;background:#f0efeb;display:flex;align-items:center;gap:5px;padding:0 11px;color:#97999d}
.tw-mini-ui-bar i{width:6px;height:6px;background:#b9bab6;border-radius:50%}.tw-mini-ui-bar i:first-child{background:var(--tw-primary)}
.tw-mini-ui-bar b{font-size:8px;margin-left:auto;font-weight:800;direction:ltr}
.tw-mini-ui-body{padding:22px;display:flex;flex-direction:column;align-items:flex-start;gap:11px}
.tw-mini-ui-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--tw-primary);color:#fff;font-weight:900;font-size:13px}
.tw-mini-ui-body strong{font-size:13px;letter-spacing:.04em}.tw-mini-ui-body i{height:7px;border-radius:99px;background:#e8e8e4;width:88%}.tw-mini-ui-body i:nth-of-type(2){width:72%}.tw-mini-ui-body i:nth-of-type(3){width:56%}
.tw-drop-card-copy{position:relative;padding:25px 27px 28px}
.tw-drop-card-copy>span{font-size:9px;text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:var(--tw-primary)}
.tw-drop-card-copy h3{font-size:22px;line-height:1.35;margin:6px 0 8px;font-weight:900}
.tw-drop-card-copy p{margin:0;color:#76797d;font-size:12px;line-height:1.8;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tw-drop-arrow{position:absolute;left:24px;bottom:22px;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#111315;color:#fff;font-size:16px;transition:.3s ease}
.tw-drop-card:hover .tw-drop-arrow{background:var(--tw-primary);transform:rotate(45deg)}
.tw-drop-controls{position:absolute;z-index:30;left:34px;right:34px;bottom:28px;display:grid;grid-template-columns:auto 1fr auto auto;gap:16px;align-items:center;direction:ltr}
.tw-drop-controls button{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);color:#fff;cursor:pointer;transition:.25s ease}
.tw-drop-controls button:hover{background:#fff;color:#111315;transform:translateY(-2px)}
.tw-drop-progress{height:2px;background:rgba(255,255,255,.09);overflow:hidden}
.tw-drop-progress i{display:block;height:100%;width:100%;background:var(--tw-primary);transform:scaleX(0);transform-origin:left}
.tw-drop-count{font-size:10px;color:rgba(255,255,255,.45);min-width:54px;text-align:center}.tw-drop-count b{color:#fff;font-size:13px}
@keyframes twDropProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- Customer counter ---------- */
.tw-client-counter-section{background:#fff;padding:74px 0;border-bottom:1px solid #e5e5df}
.tw-client-counter-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:64px;align-items:center}
.tw-client-counter-copy h2{font-size:clamp(34px,4vw,56px);line-height:1.14;margin:7px 0 13px;font-weight:900;letter-spacing:-1px}
.tw-client-counter-copy p{margin:0;color:#74777c;max-width:660px;line-height:1.9}
.tw-client-counter-card{position:relative;border-radius:28px;background:#111315;color:#fff;min-height:230px;padding:34px 38px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;box-shadow:0 28px 70px rgba(15,17,20,.15)}
.tw-client-counter-card:before{content:"";position:absolute;width:240px;height:240px;border-radius:50%;background:var(--tw-primary);filter:blur(65px);opacity:.28;left:-60px;bottom:-100px}
.tw-counter-label{font-size:12px;color:#c7c8ca;font-weight:800;position:relative}
.tw-counter-number{display:flex;align-items:baseline;gap:8px;position:relative;margin-top:5px}
.tw-counter-number span{font-family:Arial,sans-serif;font-size:clamp(70px,8vw,118px);line-height:.95;letter-spacing:-6px;font-weight:800}.tw-counter-number b{font-size:42px;color:var(--tw-primary)}
.tw-client-counter-card small{color:#999ca0;font-size:10px;position:relative;margin-top:14px}

/* ---------- More cinematic card entrances / pricing tab replacement ---------- */
.tw-pricing-grid .tw-plan-card.tw-reveal{opacity:0;transform:perspective(1200px) translateY(-105px) rotateX(-7deg) scale(.94);transform-origin:50% 0}
.tw-pricing-grid .tw-plan-card.tw-reveal.tw-reveal-visible{animation:twPlanDropIn .82s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--card-order,0) * 95ms)}
.tw-plan-card.tw-plan-switch-out{animation:twPlanSwitchOut .36s cubic-bezier(.55,.06,.82,.55) both!important}
.tw-plan-card.tw-plan-switch-in{animation:twPlanDropIn .68s cubic-bezier(.16,1,.3,1) both!important;animation-delay:calc(var(--card-order,0) * 80ms)!important}
@keyframes twPlanDropIn{0%{opacity:0;transform:perspective(1200px) translateY(-125px) rotateX(-8deg) scale(.93)}70%{opacity:1}100%{opacity:1;transform:perspective(1200px) translateY(0) rotateX(0) scale(1)}}
@keyframes twPlanSwitchOut{to{opacity:0;transform:perspective(1200px) translateY(90px) rotateX(6deg) scale(.94)}}

/* ---------- Responsive v0.6 ---------- */
@media(max-width:1100px){
  .tw-drop-card{width:330px}.tw-drop-card[data-slot="-1"]{--x:-265px}.tw-drop-card[data-slot="1"]{--x:265px}.tw-drop-card[data-slot="-2"]{--x:-445px}.tw-drop-card[data-slot="2"]{--x:445px}
}
@media(max-width:900px){
  .tw-video-hero{padding-top:76px;min-height:820px}.tw-video-hero-content{min-height:744px;padding-bottom:78px;align-items:flex-end}.tw-video-hero-copy{width:100%}.tw-video-hero h1{font-size:clamp(44px,10vw,68px)}.tw-video-toggle{top:98px;left:18px}.tw-video-toggle-text{display:none}.tw-video-toggle{width:42px;padding:0;justify-content:center}.tw-hero-film-meta{display:none}
  .tw-showcase-heading,.tw-client-counter-grid{grid-template-columns:1fr;gap:22px}.tw-drop-showcase{padding:78px 0 88px}.tw-drop-stage{height:570px}.tw-drop-card{top:52px;width:310px;height:430px}.tw-drop-card[data-slot="-1"]{--x:-210px;--y:48px;--s:.78}.tw-drop-card[data-slot="1"]{--x:210px;--y:48px;--s:.78}.tw-drop-card[data-slot="-2"],.tw-drop-card[data-slot="2"]{opacity:0;pointer-events:none}.tw-drop-controls{left:18px;right:18px;bottom:18px}
  .tw-client-counter-section{padding:62px 0}.tw-client-counter-card{min-height:200px}
}
@media(max-width:620px){
  .tw-video-hero{min-height:760px}.tw-video-hero-content{min-height:684px;padding-bottom:72px}.tw-video-hero-copy>p{font-size:14px}.tw-video-hero h1{letter-spacing:-1.2px}.tw-hero-brand-divider{display:none}.tw-video-hero .tw-hero-actions{display:grid;grid-template-columns:1fr 1fr}.tw-video-hero .tw-btn{padding:0 14px;font-size:12px}
  .tw-drop-stage{height:540px;border-radius:24px}.tw-drop-card{width:min(292px,76vw);height:410px;top:48px}.tw-drop-card[data-slot="-1"]{--x:-145px;--y:60px;--s:.70;opacity:.28}.tw-drop-card[data-slot="1"]{--x:145px;--y:60px;--s:.70;opacity:.28}.tw-drop-card-copy{padding:20px 21px}.tw-drop-card-copy h3{font-size:20px}.tw-drop-controls{grid-template-columns:auto 1fr auto}.tw-drop-count{display:none}.tw-drop-controls button{width:42px;height:42px}.tw-drop-stage:after{left:18px;top:18px;font-size:8px}
  .tw-client-counter-card{padding:30px}.tw-counter-number span{letter-spacing:-4px}.tw-client-counter-copy h2{font-size:36px}
}
@media(prefers-reduced-motion:reduce){
  .tw-hero-scroll span,.tw-drop-card,.tw-drop-progress i,.tw-counter-number span{animation:none!important;transition:none!important}
}

/* Floating WhatsApp is an icon-only control on the left, never a footer contact block. */
.tw-floating-whatsapp{width:58px!important;min-width:58px!important;height:58px!important;padding:0!important;justify-content:center!important}
.tw-floating-whatsapp span{display:none!important}