/* ===========================
   Blockers Inc — styles.css
   =========================== */

/* ===== CSS VARIABLES ===== */
:root{
  --brand-primary:#0B1F3B;
  --brand-accent:#F5B81B;
  --ink:#0D1321;
  --bg:#FFFFFF;
  --muted:#6B7280;
  --success:#10B981;
  --warning:#F59E0B;
  --danger:#EF4444;

  /* Derived (مع دعم المتصفحات الحديثة) */
  --primary-light: oklch(from var(--brand-primary) calc(l + 0.1) c h);
  --primary-dark:  oklch(from var(--brand-primary) calc(l - 0.1) c h);
  --accent-light:  oklch(from var(--brand-accent)  calc(l + 0.1) c h);
  --accent-dark:   oklch(from var(--brand-accent)  calc(l - 0.1) c h);

  /* Layout */
  --radius:1rem;
  --radius-sm:.5rem;
  --radius-lg:1.5rem;
  --shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);
  --shadow-lg:0 10px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);
  --shadow-xl:0 20px 50px -12px rgba(0,0,0,.25);

  /* Fonts & motion */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"SF Mono",Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --transition:.3s cubic-bezier(.4,0,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}

/* ===== RESET & BASE ===== */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:5rem; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}
body{
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  font-size:clamp(1rem,.95rem + .25vw,1.125rem);
  overflow-x:hidden;
  position:relative;
}
body.nav-open{ overflow:hidden; }
body::after{
  content:''; position:fixed; inset:0; background:rgba(3,8,18,.55);
  opacity:0; pointer-events:none; transition:opacity var(--transition);
  z-index:999;
}
body.nav-open::after{ opacity:1; pointer-events:auto; }

/* ===== ANIMATED BACKGROUND PARTICLES ===== */
#particles-canvas{
  position:fixed; inset:0;
  pointer-events:none; z-index:1; opacity:.3;
}

/* ===== SCROLL PROGRESS ===== */
.scroll-progress{
  position:fixed; top:0; left:0; width:100%; height:4px;
  background:rgba(11,31,59,.15); z-index:1000; pointer-events:none;
  transform:translateY(-100%);
  transition:transform .4s var(--spring), opacity .4s var(--spring);
  opacity:0;
}
.scroll-progress span{
  display:block; width:0; height:100%;
  background:linear-gradient(90deg,var(--accent-light),var(--brand-accent));
  transition:width .15s ease-out;
}
.scroll-progress.visible{
  transform:translateY(0);
  opacity:1;
}

/* ===== TYPOGRAPHY ===== */
h1,h2,h3,h4,h5,h6{ line-height:1.2; font-weight:700; color:var(--brand-primary); }
h1{ font-size:clamp(2.5rem,4vw + 1rem,4rem); }
h2{ font-size:clamp(2rem,3vw + 1rem,3rem); }
h3{ font-size:clamp(1.5rem,2vw + .5rem,2rem); }
h4{ font-size:clamp(1.25rem,1.5vw + .5rem,1.5rem); }
p{ margin-bottom:1rem; }
a{ color:var(--brand-accent); text-decoration:none; transition:color var(--transition); }
a:hover,a:focus{ color:var(--accent-dark); }

/* ===== UTILS ===== */
.container{ max-width:1280px; margin:0 auto; padding:0 clamp(1rem,5vw,3rem); }
.grid{ display:grid; gap:2rem; }
.stack{ display:flex; flex-direction:column; gap:1rem; }
.cluster{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }

/* ===== BUTTONS ===== */
.button{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.875rem 2rem; border-radius:var(--radius);
  font-weight:600; border:none; cursor:pointer;
  transition:all var(--transition); position:relative; overflow:hidden; font-size:1rem;
}
.button::before{
  content:''; position:absolute; top:50%; left:50%; width:0; height:0; border-radius:50%;
  background:rgba(255,255,255,.3); transform:translate(-50%,-50%); transition:width .6s,height .6s;
}
.button:active::before{ width:300px; height:300px; }
.button-primary{
  background:linear-gradient(135deg,var(--brand-accent) 0%,var(--accent-dark) 100%);
  color:var(--brand-primary); box-shadow:var(--shadow);
}
.button-primary:hover{ transform:translateY(-2px) scale(1.02); box-shadow:var(--shadow-lg); }
.button-secondary{
  background:transparent; color:var(--brand-primary); border:2px solid var(--brand-primary);
}
.button-secondary:hover{ background:var(--brand-primary); color:var(--bg); transform:translateY(-2px) scale(1.02); }

/* ===== CARD / TAG ===== */
.card{
  background:var(--bg); border-radius:var(--radius-lg); padding:2rem; box-shadow:var(--shadow);
  position:relative; overflow:hidden;
  --card-translate-y:0px;
  --card-scale:1;
  --card-rotate-x:0deg;
  --card-rotate-y:0deg;
  transition:transform .4s var(--spring), box-shadow .4s var(--spring);
  transform:translate3d(0,var(--card-translate-y),0)
           scale(var(--card-scale))
           rotateX(var(--card-rotate-x))
           rotateY(var(--card-rotate-y));
}
.card::before{
  content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  background:linear-gradient(45deg,transparent,rgba(245,184,27,.1),transparent);
  transform:rotate(45deg); transition:all .6s;
}
.card:hover{
  --card-translate-y:-8px;
  --card-scale:1.02;
  box-shadow:var(--shadow-xl);
}
.card:hover::before{ animation:shimmer 1.5s infinite; }
@keyframes shimmer{
  0%{ transform:translateX(-100%) translateY(-100%) rotate(45deg); }
  100%{ transform:translateX(100%) translateY(100%) rotate(45deg); }
}
.tag{
  display:inline-block; padding:.375rem .875rem; border-radius:9999px;
  background:rgba(245,184,27,.1); color:var(--brand-accent); font-size:.875rem; font-weight:600;
  animation:pulse-tag 2s infinite;
}
@keyframes pulse-tag{
  0%,100%{ box-shadow:0 0 0 0 rgba(245,184,27,.4); }
  50%{ box-shadow:0 0 0 8px rgba(245,184,27,0); }
}
[data-tilt]{
  will-change:transform;
  transform-style:preserve-3d;
}
[data-tilt]::after{
  content:'';
  position:absolute; inset:-1px;
  background:radial-gradient(220px circle at var(--card-glow-x,50%) var(--card-glow-y,50%), rgba(245,184,27,.18), transparent 75%);
  opacity:0; pointer-events:none;
  transition:opacity .4s var(--spring);
}
[data-tilt].tilt-active{
  --card-translate-y:-12px;
  --card-scale:1.03;
  box-shadow:var(--shadow-xl);
}
[data-tilt].tilt-active::after{ opacity:1; }

/* ===== LOADER ===== */
#loader{
  position:fixed; inset:0;
  background:linear-gradient(135deg,var(--brand-primary) 0%, #051020 100%);
  z-index:9999; display:flex; align-items:center; justify-content:center;
  transition:opacity .5s,visibility .5s;
}
#loader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
#loader svg{ width:120px; height:120px; filter:drop-shadow(0 0 20px rgba(245,184,27,.5)); }

/* ===== HEADER ===== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  padding:1.1rem 0; transition:all var(--transition);
  background:transparent;
}
.site-header::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,13,27,.86), rgba(6,13,27,0));
  opacity:.95; pointer-events:none; transition:opacity var(--transition), background var(--transition), box-shadow var(--transition);
}
.site-header .container{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.site-header.scrolled::before{
  opacity:1;
  background:rgba(255,255,255,.98);
  box-shadow:var(--shadow);
  backdrop-filter:blur(16px) saturate(180%);
}
.site-header.scrolled .site-brand__text,
.site-header.scrolled .site-nav__links a,
.site-header.scrolled .site-nav__cta p{
  color:var(--brand-primary);
}
.site-header.scrolled .site-nav__links a::after{
  background:linear-gradient(90deg,var(--brand-accent),var(--brand-primary));
}
.site-header.scrolled .nav-trigger span{
  background:var(--brand-primary);
}

.site-brand{
  display:flex; align-items:center; gap:.85rem;
  text-decoration:none; color:#fff; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.site-brand__mark{
  width:34px; height:34px; border-radius:12px;
  background:linear-gradient(135deg,var(--brand-accent),var(--accent-light));
  box-shadow:0 12px 28px -16px rgba(245,184,27,.65);
  position:relative; overflow:hidden;
}
.site-brand__mark::after{
  content:''; position:absolute; inset:9px;
  border-radius:8px; background:rgba(255,255,255,.88);
}
.site-brand img{
  height:42px; width:auto; filter:drop-shadow(0 6px 18px rgba(0,0,0,.25));
}
.site-brand__text{
  font-size:1rem; letter-spacing:.22em; color:#fff; transition:color var(--transition);
}

.site-nav{
  display:flex; align-items:center; gap:2rem;
}
.site-nav__inner{
  display:flex; align-items:center; gap:2rem;
}
.site-nav__links{
  list-style:none; display:flex; align-items:center; gap:2rem; margin:0; padding:0;
}
.site-nav__links a{
  color:#f4f7ff; font-weight:500; position:relative;
  transition:transform var(--transition), color var(--transition);
}
.site-nav__links a::after{
  content:''; position:absolute; left:0; bottom:-6px; width:0; height:2px;
  background:linear-gradient(90deg,var(--brand-accent),var(--accent-light));
  transition:width var(--transition);
}
.site-nav__links a:hover{ transform:translateY(-3px); }
.site-nav__links a:hover::after{ width:100%; }
.site-nav__cta{
  display:flex; flex-direction:column; align-items:flex-end; gap:.5rem;
}
.site-nav__cta p{
  margin:0; font-size:.85rem; color:rgba(244,247,255,.8);
}
.site-header.scrolled .site-nav__cta p{ color:var(--muted); }

.nav-trigger{
  display:none; background:none; border:0; cursor:pointer;
  padding:.45rem; position:relative; z-index:1001;
}
.nav-trigger span{
  display:block; width:24px; height:2px; background:#fff;
  margin:5px 0; transition:all var(--transition);
}
.nav-trigger.active span:nth-child(1){ transform:rotate(45deg) translateY(7px); }
.nav-trigger.active span:nth-child(2){ opacity:0; }
.nav-trigger.active span:nth-child(3){ transform:rotate(-45deg) translateY(-7px); }

/* ===== HERO ===== */
#hero{
  position:relative;
  min-height:100vh;
}
.hero-suite{
  position:relative; overflow:hidden;
  display:flex; align-items:center;
  padding:clamp(6rem,8vw,8rem) 0 clamp(4rem,7vw,6rem);
  color:#f4f7ff;
  background:radial-gradient(160% 140% at 10% 20%, rgba(245,184,27,.18), transparent 55%),
              linear-gradient(140deg, rgba(4,9,20,.92) 0%, rgba(7,17,36,.98) 45%, rgba(4,11,26,.95) 100%);
}
.hero-suite__gradient{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 50% at 20% 25%, rgba(76,201,240,.25), transparent),
    radial-gradient(40% 35% at 80% 35%, rgba(245,184,27,.2), transparent);
  opacity:.65; pointer-events:none; z-index:0;
}
.hero-suite::after{
  content:''; position:absolute; inset:-25% -18% -18%;
  background:radial-gradient(520px circle at var(--cursor-x,55%) var(--cursor-y,45%), rgba(76,201,240,.25), transparent 70%);
  opacity:0; pointer-events:none; transition:opacity .6s var(--spring);
  mix-blend-mode:screen; z-index:1;
}
#hero.glow-active::after{ opacity:.65; }
.hero-suite__wave{
  position:absolute; width:160%; height:220px;
  left:-30%; border-radius:50%;
  background:linear-gradient(90deg, rgba(245,184,27,.18) 0%, rgba(76,201,240,.18) 100%);
  filter:blur(28px); opacity:.4; pointer-events:none; z-index:0;
  animation:heroWave 16s ease-in-out infinite;
}
.hero-suite__wave--one{ top:12%; animation-delay:-3s; }
.hero-suite__wave--two{
  top:auto; bottom:-4%;
  background:linear-gradient(90deg, rgba(27,114,227,.22) 0%, rgba(245,184,27,.18) 100%);
  animation-duration:20s;
}
@keyframes heroWave{
  0%,100%{ transform:translate3d(0,0,0) rotate(2deg) scale(1); opacity:.35; }
  50%{ transform:translate3d(4%,6%,0) rotate(-1deg) scale(1.1); opacity:.55; }
}
.hero-suite__layout{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(2rem,6vw,4rem);
  align-items:center;
}
.hero-suite__copy{
  grid-column:span 6; display:flex; flex-direction:column; gap:1.75rem;
  align-items:flex-start;
  max-width:600px;
}
.hero-suite__eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.5rem 1.2rem; border-radius:999px;
  background:rgba(10,22,44,.8); border:1px solid rgba(255,255,255,.18);
  letter-spacing:.22em; text-transform:uppercase; font-weight:700; font-size:.75rem;
  color:rgba(244,247,255,.75); backdrop-filter:blur(14px);
  box-shadow:0 12px 35px -18px rgba(0,0,0,.75);
}
.hero-suite__eyebrow::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:linear-gradient(135deg,var(--brand-accent),var(--accent-light));
  box-shadow:0 0 16px rgba(245,184,27,.8);
}
.hero-suite h1{
  margin:0; font-size:clamp(2.75rem,4vw + .5rem,4rem); line-height:1.1;
  color:#fff;
}
.hero-suite p{
  margin:0; font-size:clamp(1.05rem,1.2vw + .75rem,1.2rem);
  line-height:1.75; color:rgba(236,241,255,.84);
}
.hero-suite__highlights{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:1rem;
}
.hero-suite__highlights li{
  position:relative; padding-left:1.75rem;
  font-size:1rem; color:rgba(230,236,255,.86);
}
.hero-suite__highlights li::before{
  content:''; position:absolute; left:0; top:.45rem;
  width:12px; height:12px; border-radius:50%;
  background:linear-gradient(135deg,var(--brand-accent),var(--accent-light));
  box-shadow:0 0 16px rgba(245,184,27,.6);
}
.hero-suite__actions{
  display:flex; flex-wrap:wrap; gap:1rem;
}
.hero-suite__actions .button-secondary{
  background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.2);
}
.hero-suite__visual{
  grid-column:span 6; position:relative;
  display:flex; justify-content:center; align-items:center;
  min-height:420px;
}
.hero-suite__scene{
  width:100%; max-width:460px;
  filter:drop-shadow(0 25px 70px rgba(0,0,0,.65));
}
.hero-suite__device{
  position:absolute; display:flex; align-items:center; gap:.75rem;
  padding:.85rem 1.1rem; border-radius:1rem;
  background:rgba(6,16,32,.8); border:1px solid rgba(92,176,255,.25);
  box-shadow:0 20px 50px -25px rgba(0,0,0,.8);
  color:rgba(220,232,255,.85); font-size:.85rem;
  backdrop-filter:blur(18px);
  animation:heroDeviceFloat 6s ease-in-out infinite;
}
.hero-suite__device p{ margin:0; color:inherit; font-size:inherit; }
.hero-suite__device-icon{
  width:18px; height:18px; border-radius:50%;
  background:linear-gradient(135deg,var(--brand-accent),var(--accent-light));
  position:relative; display:inline-block;
}
.hero-suite__device-icon::after{
  content:''; position:absolute; inset:4px;
  border-radius:50%; background:#fff;
}
.hero-suite__device--camera{ top:12%; left:12%; animation-delay:-1.5s; }
.hero-suite__device--thermostat{ bottom:22%; left:-3%; animation-delay:-3s; }
.hero-suite__device--lock{ top:28%; right:-2%; animation-delay:-4.5s; }
@keyframes heroDeviceFloat{
  0%,100%{ transform:translate3d(0,0,0); opacity:.85; }
  50%{ transform:translate3d(0,-10px,0); opacity:1; }
}
#hero.glow-active .hero-suite__visual{ filter:drop-shadow(0 30px 80px rgba(76,201,240,.2)); }

@keyframes gradient-shift{ 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }

/* ===== SECTIONS ===== */
section{ padding:5rem 0; position:relative; z-index:2; }
section:nth-child(even){ background:linear-gradient(180deg, rgba(11,31,59,.02) 0%, rgba(245,184,27,.02) 100%); }
.section-header{ text-align:center; max-width:700px; margin:0 auto 3rem; }
.section-header h2{ margin-bottom:1rem; position:relative; display:inline-block; }
.section-header h2::after{
  content:''; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%);
  width:80px; height:4px; background:linear-gradient(90deg,var(--brand-accent) 0%, var(--brand-primary) 100%); border-radius:2px;
}
.section-header p{ color:var(--muted); font-size:1.125rem; }

/* ===== PRODUCT CATALOG ===== */
.catalog-suite{
  position:relative; overflow:hidden;
  padding:clamp(4rem,6vw,6rem) 0;
}
.catalog-suite__glow{
  position:absolute; width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle, rgba(76,201,240,.25) 0%, rgba(76,201,240,0) 70%);
  top:-18%; left:-12%; opacity:.6; pointer-events:none;
  animation:catalogGlow 18s ease-in-out infinite;
}
.catalog-suite__glow--alt{
  top:auto; bottom:-22%; right:-14%;
  background:radial-gradient(circle, rgba(245,184,27,.3) 0%, rgba(245,184,27,0) 80%);
  animation-duration:22s; animation-direction:reverse;
}
@keyframes catalogGlow{
  0%,100%{ transform:scale(.9) translate3d(0,0,0); opacity:.55; }
  50%{ transform:scale(1.08) translate3d(16px,8px,0); opacity:.85; }
}
.catalog-suite__header{
  text-align:center; max-width:740px; margin:0 auto 3.25rem;
  display:flex; flex-direction:column; gap:1rem;
}
.catalog-suite__eyebrow{
  align-self:center; padding:.45rem 1.25rem; border-radius:999px;
  font-size:.75rem; letter-spacing:.22em; text-transform:uppercase; font-weight:700;
  background:rgba(9,20,40,.72); border:1px solid rgba(255,255,255,.16); color:rgba(236,241,255,.82);
  backdrop-filter:blur(12px);
}
.catalog-suite__header h2{ margin:0; font-size:clamp(2.25rem,3vw + .5rem,3.25rem); color:var(--brand-primary); }
.catalog-suite__header p{ margin:0; color:var(--muted); }
.catalog-grid{
  display:grid; gap:1.75rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.catalog-card{
  position:relative;
  padding:2.4rem 2.2rem;
  border-radius:1.75rem;
  background:linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,255,255,.75));
  border:1px solid rgba(11,31,59,.08);
  box-shadow:0 30px 60px -40px rgba(11,31,59,.4);
  overflow:hidden;
}
.catalog-card::before{
  content:''; position:absolute; inset:-40% -20% auto auto; height:60%;
  background:radial-gradient(circle at 40% 40%, rgba(245,184,27,.15), transparent 70%);
  opacity:.7; pointer-events:none; transition:transform .6s var(--spring), opacity .6s var(--spring);
}
.catalog-card:hover::before{ transform:translate3d(12px,-14px,0); opacity:1; }
.catalog-card__icon{
  width:62px; height:62px; border-radius:18px;
  background:linear-gradient(135deg, rgba(11,31,59,.95), rgba(27,65,118,.85));
  display:flex; align-items:center; justify-content:center;
  color:#fff; box-shadow:0 12px 35px -18px rgba(11,31,59,.65);
  margin-bottom:1.5rem; position:relative; z-index:1;
}
.catalog-card__icon svg{ width:36px; height:36px; fill:currentColor; }
.catalog-card__body{
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap:.85rem;
}
.catalog-card__body h3{ margin:0; font-size:1.35rem; color:var(--brand-primary); }
.catalog-card__subhead{ margin:0; font-size:.95rem; color:rgba(73,86,109,.85); line-height:1.6; }
.catalog-card ul{
  margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.55rem;
  color:rgba(60,74,95,.88); font-size:.93rem;
}
.catalog-card ul li{
  position:relative; padding-left:1.4rem;
}
.catalog-card ul li::before{
  content:''; position:absolute; left:0; top:.45rem; width:8px; height:8px; border-radius:50%;
  background:linear-gradient(135deg,var(--brand-accent),var(--accent-light));
  box-shadow:0 0 12px rgba(245,184,27,.55);
}
.catalog-card__actions{
  position:relative; z-index:1;
  margin-top:1.75rem; display:flex; flex-wrap:wrap; gap:.75rem;
}
.catalog-card__preview{
  padding:.75rem 1.4rem; border-radius:999px; border:1px solid rgba(11,31,59,.18);
  background:rgba(11,31,59,.04); color:var(--brand-primary); font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
  transition:all .35s var(--spring);
}
.catalog-card__preview:hover{ background:rgba(11,31,59,.1); transform:translateY(-2px); box-shadow:0 15px 35px -22px rgba(11,31,59,.6); }
.catalog-card__preview:focus-visible{ outline:3px solid var(--brand-accent); outline-offset:2px; }
.catalog-card__actions .button{ flex:1 1 auto; min-width:180px; }
.catalog-card .button-secondary{
  background:rgba(11,31,59,.06); color:var(--brand-primary); border-color:rgba(11,31,59,.15);
}
.catalog-card:hover .button-secondary{ background:var(--brand-primary); color:#fff; }
.catalog-card[data-preview] .catalog-card__preview{ display:inline-flex; align-items:center; justify-content:center; }
.catalog-card:not([data-preview]) .catalog-card__preview{ display:none; }


/* ===== SOFTWARE ===== */
.software-features{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1.5rem; margin-bottom:3rem;
}
.feature-item{
  padding:1.5rem; background:var(--bg); border-radius:var(--radius);
  border-left:4px solid var(--brand-accent); transition:all var(--transition);
}
.feature-item:hover{ transform:translateX(8px); border-left-width:8px; box-shadow:var(--shadow-lg); }
.code-panel{
  background:linear-gradient(135deg,var(--brand-primary) 0%, #051020 100%);
  color:var(--brand-accent); padding:2rem; border-radius:var(--radius-lg);
  font-family:var(--font-mono); font-size:.875rem; line-height:1.8; max-width:600px; margin:0 auto;
  box-shadow:var(--shadow-xl); position:relative; overflow:hidden;
}
.code-panel::before{
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(245,184,27,.1),transparent);
  animation:scan 3s infinite;
}
@keyframes scan{ 0%{left:-100%;} 100%{left:100%;} }
.typing-text::after{ content:'|'; animation:blink 1s infinite; }
@keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:0;} }

/* ===== INDUSTRIES ===== */
.industries-grid{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
.industry-pill{
  padding:1.5rem 2rem; background:var(--bg); border-radius:9999px; border:2px solid var(--brand-primary);
  cursor:pointer; transition:all .4s var(--spring); position:relative; overflow:hidden;
}
.industry-pill::before{
  content:attr(data-outcome); position:absolute; inset:0;
  background:linear-gradient(135deg,var(--brand-accent) 0%, var(--accent-dark) 100%);
  color:var(--brand-primary); display:flex; align-items:center; justify-content:center; font-weight:600;
  opacity:0; transform:translateY(100%) scale(.8); transition:all .4s var(--spring); border-radius:9999px;
}
.industry-pill:hover{ transform:translateY(-8px) scale(1.05); box-shadow:var(--shadow-xl); }
.industry-pill:hover::before{ opacity:1; transform:translateY(0) scale(1); }

/* ===== SLIDER (Case studies) ===== */
.slider-container{ position:relative; overflow:hidden; border-radius:var(--radius-lg); }
.slider{ display:flex; scroll-snap-type:x mandatory; overflow-x:auto; scroll-behavior:smooth; gap:2rem; padding:2rem 0; }
.slider::-webkit-scrollbar{ height:8px; }
.slider::-webkit-scrollbar-track{ background:rgba(11,31,59,.1); border-radius:4px; }
.slider::-webkit-scrollbar-thumb{
  background:linear-gradient(90deg,var(--brand-accent) 0%, var(--accent-dark) 100%); border-radius:4px;
}
.slide{
  flex:0 0 85%; scroll-snap-align:center; background:var(--bg);
  padding:2rem; border-radius:var(--radius-lg); box-shadow:var(--shadow); transition:all var(--transition);
}
.slide:hover{ transform:scale(1.02); box-shadow:var(--shadow-xl); }
.slide h3{ margin-bottom:1rem; }
.slide .metric{
  font-size:3rem; color:var(--brand-accent); font-weight:800; margin:1rem 0;
  background:linear-gradient(135deg,var(--brand-accent) 0%, var(--accent-dark) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.slide blockquote{ font-style:italic; color:var(--muted); border-left:4px solid var(--brand-accent); padding-left:1rem; margin:1rem 0; }
.slider-controls{ display:flex; gap:1rem; justify-content:center; margin-top:2rem; }
.slider-btn{
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg,var(--brand-accent) 0%, var(--accent-dark) 100%);
  color:var(--brand-primary); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; transition:all var(--transition); box-shadow:var(--shadow-lg);
}
.slider-btn:hover{ transform:scale(1.15) rotate(5deg); box-shadow:var(--shadow-xl); }

/* ===== TIMELINE ===== */
.timeline{ position:relative; max-width:900px; margin:0 auto; }
.timeline::before{
  content:''; position:absolute; left:50%; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--brand-accent) 0%, var(--brand-primary) 100%);
  transform:translateX(-50%); box-shadow:0 0 10px rgba(245,184,27,.5);
}
.timeline-item{ position:relative; margin-bottom:4rem; display:flex; align-items:center; }
.timeline-item:nth-child(odd){ justify-content:flex-start; }
.timeline-item:nth-child(even){ justify-content:flex-end; }
.timeline-content{
  width:45%; background:var(--bg); padding:2rem; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); position:relative; transition:all .4s var(--spring);
}
.timeline-content:hover{ transform:scale(1.05); box-shadow:var(--shadow-xl); }
.timeline-marker{
  position:absolute; left:50%; transform:translateX(-50%); width:50px; height:50px;
  background:linear-gradient(135deg, var(--brand-accent) 0%, var(--accent-dark) 100%);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--brand-primary); font-weight:800; font-size:1.25rem; box-shadow:0 0 20px rgba(245,184,27,.5);
  animation:pulse-marker 2s infinite;
}
@keyframes pulse-marker{
  0%,100%{ box-shadow:0 0 20px rgba(245,184,27,.5); }
  50%{ box-shadow:0 0 30px rgba(245,184,27,.8); }
}

/* ===== TECH GRID ===== */
.tech-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.5rem; text-align:center; }
.tech-item{
  padding:2rem 1.5rem; background:var(--bg); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  transition:all .4s var(--spring);
}
.tech-item:hover{
  transform:translateY(-10px) scale(1.05); box-shadow:var(--shadow-xl);
  background:linear-gradient(135deg, rgba(245,184,27,.05) 0%, rgba(11,31,59,.05) 100%);
}
.tech-item svg{ width:48px; height:48px; fill:var(--brand-accent); margin-bottom:1rem; transition:all var(--transition); }
.tech-item:hover svg{ transform:scale(1.2) rotate(10deg); }

/* ===== TESTIMONIALS ===== */
.testimonials-grid{ grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); }
.testimonial-card{ position:relative; }
.testimonial-card:hover{ box-shadow:0 0 40px rgba(245,184,27,.4); }
.testimonial-card::before{
  content:'"'; position:absolute; top:-20px; left:20px; font-size:6rem; color:var(--brand-accent);
  opacity:.2; line-height:1; font-family:Georgia,serif;
}
.testimonial-text{ font-style:italic; margin-bottom:1.5rem; color:var(--muted); }
.testimonial-author{ font-weight:600; color:var(--brand-primary); }

/* ===== CTA BAND ===== */
.cta-suite{
  position:relative;
  overflow:hidden;
  padding:clamp(4.5rem,6vw,6.5rem) 0;
  color:#f4f7ff;
  background:linear-gradient(160deg,#050b18 0%,#0b1f3b 55%,#071326 100%);
}
.cta-suite .container{ position:relative; z-index:2; }
.cta-suite__gridlines{
  position:absolute; inset:0; background:
    repeating-linear-gradient(to right, rgba(255,255,255,.06) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.06) 0 1px, transparent 1px 120px);
  opacity:.15; mix-blend-mode:screen; pointer-events:none;
}
.cta-suite__orb{
  position:absolute; border-radius:50%;
  filter:blur(0); pointer-events:none;
  opacity:.65; mix-blend-mode:screen;
}
.cta-suite__orb--primary{
  width:420px; height:420px; top:-18%; left:-10%;
  background:radial-gradient(circle, rgba(245,184,27,.6) 0%, rgba(245,184,27,.15) 45%, transparent 70%);
  animation:ctaOrbPulse 14s ease-in-out infinite;
}
.cta-suite__orb--secondary{
  width:520px; height:520px; bottom:-22%; right:-12%;
  background:radial-gradient(circle, rgba(59,130,246,.45) 0%, rgba(59,130,246,.12) 45%, transparent 70%);
  animation:ctaOrbPulse 18s ease-in-out infinite reverse;
}
@keyframes ctaOrbPulse{
  0%,100%{ transform:scale(.9) translate3d(0,0,0); opacity:.55; }
  50%{ transform:scale(1.08) translate3d(12px,-10px,0); opacity:.85; }
}
.cta-suite__layout{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(2rem,5vw,3.75rem);
  align-items:start;
}
.cta-suite__lead{
  grid-column:span 6;
  display:flex; flex-direction:column; gap:1.75rem;
  max-width:580px;
}
.cta-suite__badge{
  align-self:flex-start;
  padding:.45rem 1rem;
  border-radius:999px;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-weight:700;
  background:rgba(9,19,40,.7);
  color:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 35px -18px rgba(0,0,0,.75);
  backdrop-filter:blur(12px);
}
.cta-suite h2{
  margin:0;
  font-size:clamp(2.6rem,3vw + .75rem,3.6rem);
  color:#21314a;
  line-height:1.1;
}
.cta-suite p{
  margin:0;
  font-size:1.05rem;
  line-height:1.75;
  color:rgb(33 49 74);
}
.cta-suite__metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
}
.cta-suite__metric{
  padding:1.5rem 1.75rem;
  border-radius:1.25rem;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 25px 60px -35px rgba(0,0,0,.85);
  display:flex; flex-direction:column; gap:.35rem;
  color:#1e2f49;
}
.cta-suite__metric-value{
  font-size:clamp(2.2rem,2.4vw,2.8rem);
  font-weight:700;
}
.cta-suite__metric-label{
  font-size:.85rem;
  letter-spacing:.14em;
  text-transform:uppercase;
    color:rgb(33 49 73);
}
.cta-suite__actions{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}
.cta-suite__actions .button-secondary{
     background: rgb(38 58 90);
    color: #fdfdfb;
    border-color: rgb(42 52 68);

}
.cta-suite__panels{
  grid-column:span 6;
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}
.cta-suite__card{
  border-radius:1.5rem;
  padding:2.25rem;
  background:rgba(8,20,38,.86);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 30px 80px -40px rgba(0,0,0,.9);
  position:relative;
  overflow:hidden;
}
.cta-suite__card::after{
  content:'';
  position:absolute; inset:-40% -25% auto;
  height:60%;
  background:radial-gradient(circle at 20% 20%, rgba(245,184,27,.28), transparent 70%);
  opacity:.6; pointer-events:none;
}
.cta-suite__card h3{
  margin:0 0 1.5rem;
  font-size:1.125rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:rgba(255,255,255,.8);
}
.cta-suite__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  color:rgba(230,236,255,.82);
  font-size:.98rem;
}
.cta-suite__list li{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
}
.cta-suite__tick{
  width:16px; height:16px; border-radius:50%;
  background:linear-gradient(135deg,var(--brand-accent),var(--accent-light));
  margin-top:.2rem;
  box-shadow:0 0 22px rgba(245,184,27,.6);
  position:relative;
}
.cta-suite__tick::after{
  content:'';
  position:absolute; inset:4px;
  border-radius:50%;
  background:rgba(255,255,255,.85);
}
.cta-suite__card--timeline{
  background:rgba(10,28,54,.9);
  border-color:rgba(120,168,255,.22);
}
.cta-suite__card--timeline::after{
  background:radial-gradient(circle at 80% 20%, rgba(92,143,255,.25), transparent 70%);
}
.cta-suite__timeline{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:1.4rem;
  color:rgba(220,232,255,.82);
  font-size:.98rem;
}
.cta-suite__timeline li{
  display:flex;
  align-items:center;
  gap:.75rem;
  position:relative;
  padding-left:.25rem;
}
.cta-suite__dot{
  width:14px; height:14px;
  border-radius:50%;
  border:2px solid rgba(204,220,255,.7);
  background:rgba(255,255,255,.12);
  box-shadow:0 0 16px rgba(120,168,255,.65);
}
.cta-suite__timeline li::after{
  content:'';
  position:absolute;
  left:6px; top:calc(100% + .25rem);
  width:1px; height:28px;
  background:linear-gradient(180deg, rgba(180,205,255,.4), transparent);
}
.cta-suite__timeline li:last-child::after{ display:none; }
.cta-suite__progress{
  position:relative;
  margin-top:2rem;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  overflow:hidden;
}
.cta-suite__progress span{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(120,168,255,.75), rgba(245,184,27,.8));
  animation:ctaProgressSlide 3.5s ease-in-out infinite;
}
@keyframes ctaProgressSlide{
  0%{ transform:translateX(-45%) scaleX(.4); opacity:.65; }
  50%{ transform:translateX(0) scaleX(1); opacity:1; }
  100%{ transform:translateX(35%) scaleX(.5); opacity:.7; }
}

/* ===== FAQ ===== */
.faq-list{ max-width:800px; margin:0 auto; }
.faq-item{ background:var(--bg); border-radius:var(--radius); margin-bottom:1rem; overflow:hidden; box-shadow:var(--shadow); transition:all var(--transition); }
.faq-item:hover{ box-shadow:var(--shadow-lg); }
.faq-question{
  width:100%; text-align:left; padding:1.5rem; background:none; border:0; cursor:pointer; font-size:1.125rem;
  font-weight:600; color:var(--brand-primary); display:flex; justify-content:space-between; align-items:center; transition:all var(--transition);
}
.faq-question:hover{ background:rgba(245,184,27,.05); }
.faq-question::after{ content:'+'; font-size:1.5rem; transition:transform var(--transition); color:var(--brand-accent); }
.faq-item.active .faq-question::after{ transform:rotate(45deg); }
.faq-answer{ max-height:0; overflow:hidden; transition:max-height .4s var(--spring); padding:0 1.5rem; }
.faq-item.active .faq-answer{ max-height:500px; padding:0 1.5rem 1.5rem; }

/* ===== CONTACT (Form) ===== */
.form-container{ max-width:700px; margin:0 auto; background:var(--bg); padding:3rem; border-radius:var(--radius-lg); box-shadow:var(--shadow-xl); }
.form-step{ display:none; }
.form-step.active{ display:block; animation:fadeInScale .5s var(--spring); }
@keyframes fadeInScale{ from{opacity:0; transform:scale(.95);} to{opacity:1; transform:scale(1);} }
.form-group{ margin-bottom:1.5rem; }
.form-group label{ display:block; margin-bottom:.5rem; font-weight:600; color:var(--brand-primary); }
.form-group input,.form-group select,.form-group textarea{
  width:100%; padding:.875rem; border:2px solid rgba(11,31,59,.2); border-radius:var(--radius); font-family:inherit; font-size:1rem; transition:all var(--transition);
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none; border-color:var(--brand-accent); box-shadow:0 0 0 3px rgba(245,184,27,.1); transform:translateY(-2px);
}
.form-group textarea{ min-height:120px; resize:vertical; }
.form-progress{ display:flex; gap:.5rem; margin-bottom:2rem; }
.progress-dot{ flex:1; height:8px; background:rgba(11,31,59,.2); border-radius:4px; transition:all var(--transition); }
.progress-dot.active{ background:linear-gradient(90deg,var(--brand-accent) 0%, var(--accent-dark) 100%); box-shadow:0 0 10px rgba(245,184,27,.5); }
.form-buttons{ display:flex; gap:1rem; justify-content:space-between; margin-top:2rem; }
.form-status{ padding:1rem; border-radius:var(--radius); margin-top:1rem; text-align:center; font-weight:600; }
.form-status.success{ background:rgba(16,185,129,.1); color:var(--success); border:2px solid var(--success); }
.form-status.error{ background:rgba(239,68,68,.1); color:var(--danger); border:2px solid var(--danger); }

/* ===== WHATSAPP FLOAT ===== */
.whatsapp-float{
  position:fixed; bottom:2rem; left:2rem; width:60px; height:60px; background:#25D366; color:#fff;
  border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2rem;
  box-shadow:0 4px 20px rgba(37,211,102,.4); cursor:pointer; z-index:1000; transition:all .3s var(--spring); animation:pulse-whatsapp 2s infinite;
}
@keyframes pulse-whatsapp{
  0%,100%{ box-shadow:0 4px 20px rgba(37,211,102,.4); transform:scale(1); }
  50%{    box-shadow:0 4px 30px rgba(37,211,102,.7); transform:scale(1.05); }
}
.whatsapp-float:hover{ transform:scale(1.15) rotate(5deg); box-shadow:0 6px 30px rgba(37,211,102,.6); }
.whatsapp-float svg{ width:32px; height:32px; fill:#fff; }

/* ===== BACK TO TOP ===== */
.back-to-top{
  position:fixed; bottom:2rem; right:2rem; width:56px; height:56px;
  background:linear-gradient(135deg,var(--brand-accent) 0%, var(--accent-dark) 100%);
  color:var(--brand-primary); border:none; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; box-shadow:var(--shadow-xl); opacity:0; visibility:hidden; transform:translateY(100px); transition:all var(--transition); z-index:100;
}
.back-to-top.visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ transform:translateY(-8px) scale(1.1); }

/* ===== CONFETTI ===== */
.confetti{ position:fixed; width:10px; height:10px; background:var(--brand-accent); animation:confettiFall 3s linear forwards; }
@keyframes confettiFall{ to{ transform:translateY(100vh) rotate(720deg); opacity:0; } }

/* ===== ACCESSIBILITY ===== */
*:focus-visible{ outline:3px solid var(--brand-accent); outline-offset:2px; }

/* ===== SCROLL REVEAL ===== */
.reveal{
  opacity:0; transform:translateY(50px);
  transition:opacity .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1);
  transition-delay:var(--reveal-delay,0s);
}
.reveal.revealed{ opacity:1; transform:translateY(0); }

/* =======================================================================
   PRODUCT SHOWCASE (صور المنتجات) + LIGHTBOX — Consolidated & Final Tuning
}

/* Lightbox */
.ps-lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.85);
  display:none; align-items:center; justify-content:center; padding:2rem; z-index:9999;
}
.ps-lightbox.open{ display:flex; }
.ps-lightbox__inner{ max-width:min(92vw,1280px); max-height:90vh; text-align:center; }
.ps-lightbox__img{ max-width:100%; max-height:80vh; border-radius:12px; box-shadow:0 30px 60px rgba(0,0,0,.5); }
.ps-lightbox__caption{ color:#fff; margin-top:.75rem; font-size:.95rem; opacity:.9; }
.ps-lightbox__close{
  position:absolute; top:16px; right:16px; width:40px; height:40px;
  border:0; background:transparent; color:#fff; font-size:32px; line-height:1; cursor:pointer;
}

/* ===== FOOTER ===== */
footer{ background:linear-gradient(135deg,var(--brand-primary) 0%, #051020 100%); color:var(--bg); padding:4rem 0 1rem; }

/* ===== RESPONSIVE ===== */
@media (max-width:1024px){
  .nav-trigger{ display:block; }
  .site-nav{
    position:fixed; top:0; right:-100%; height:100vh;
    width:min(360px,85%); background:rgba(4,11,26,.96);
    box-shadow:-30px 0 60px -40px rgba(0,0,0,.65); border-left:1px solid rgba(120,168,255,.18);
    transition:right var(--transition); gap:0; align-items:stretch;
    overflow-y:auto; -webkit-overflow-scrolling:touch; z-index:1001;
  }
  .site-nav::before{
    content:''; position:absolute; inset:0;
    background:radial-gradient(120% 100% at 0% 0%, rgba(76,201,240,.25), transparent 60%);
    opacity:.75; pointer-events:none;
  }
  .site-nav__inner{
    position:relative; z-index:2;
    flex-direction:column; align-items:flex-start; gap:3rem;
    padding:6.5rem 2.5rem 2.75rem; height:100%;
    transform:translateX(24px); opacity:0;
    transition:transform var(--transition), opacity var(--transition);
  }
  .site-nav__links{
    flex-direction:column; align-items:flex-start; gap:1.5rem; width:100%;
  }
  .site-nav__links a{
    font-size:1.05rem; color:#f4f7ff; transform:none;
  }
  .site-nav__links a::after{ bottom:-8px; }
  .site-nav__cta{
    flex-direction:column; align-items:flex-start; width:100%; gap:1rem;
  }
  .site-nav__cta .button{ width:100%; justify-content:center; }
  .site-nav__cta p{ color:rgba(228,236,255,.78); }
  .site-nav.active{ right:0; }
  .site-nav.active .site-nav__inner{ transform:translateX(0); opacity:1; }
  .site-header.scrolled .site-nav__links a,
  .site-header.scrolled .site-nav__cta p{ color:#f4f7ff; }
  .site-header.scrolled .nav-trigger span{ background:#fff; }

  .hero-suite__layout{ grid-template-columns:1fr; }
  .hero-suite__copy{ grid-column:1 / -1; text-align:center; align-items:center; max-width:none; }
  .hero-suite__metrics{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero-suite__actions{ justify-content:center; }
  .hero-suite__visual{ grid-column:1 / -1; margin-top:3rem; min-height:360px; }
  .hero-suite__highlights{ align-items:center; }
  .hero-suite__highlights li{ padding-left:0; text-align:center; }
  .hero-suite__highlights li::before{ display:none; }

  .cta-suite__layout{ grid-template-columns:1fr; }
  .cta-suite__lead,
  .cta-suite__panels{ grid-column:1 / -1; }
  .cta-suite__lead{ max-width:none; }
  .cta-suite__metrics{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .catalog-grid{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
  .catalog-card{ padding:2.1rem 2rem; }
}

@media (max-width:768px){
  .hero-suite{ padding:4rem 0 3.25rem; }
  .hero-suite__copy{ gap:1.5rem; }
  .hero-suite__eyebrow{ align-self:center; }
  .hero-suite__highlights{ align-items:center; }
  .hero-suite__highlights li{ padding-left:0; text-align:center; }
  .hero-suite__highlights li::before{ display:none; }
  .hero-suite__visual{ min-height:auto; }
  .hero-suite__scene{ max-width:320px; }
  .hero-suite__device{
    position:relative; inset:auto; margin:.75rem auto 0;
    width:100%; max-width:280px; justify-content:center; animation:none;
  }

  .cta-suite{ padding:4rem 0; }
  .cta-suite__metrics{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem; }
  .cta-suite__actions{ flex-direction:column; }
  .cta-suite__actions .button{ width:100%; justify-content:center; }
  .cta-suite__panels{ grid-template-columns:1fr; }
  .catalog-card{ padding:1.9rem; }
  .catalog-card__actions{ flex-direction:column; }
  .catalog-card__actions .button{ width:100%; }

  .timeline::before{ left:20px; }
  .timeline-item{ justify-content:flex-end !important; }
  .timeline-content{ width:calc(100% - 60px); }
  .timeline-marker{ left:20px; }

  .form-container{ padding:2rem 1.5rem; }


  .whatsapp-float{ bottom:5rem; left:1rem; width:56px; height:56px; }
  .back-to-top{ bottom:5rem; right:1rem; }

  section{ padding:3rem 0; }

  /* Product showcase responsive columns */
}

@media (max-width:600px){
  .hero-suite__copy{ text-align:left; align-items:flex-start; }
  .hero-suite__eyebrow{ align-self:flex-start; }
  .hero-suite__highlights{ align-items:flex-start; }
  .hero-suite__highlights li{ text-align:left; padding-left:1.25rem; }
  .hero-suite__highlights li::before{ display:block; top:.35rem; }
  .hero-suite__device{ max-width:240px; font-size:.8rem; }
  .site-nav{ width:100%; max-width:none; border-left:0; }
  .site-nav__inner{ padding:6rem 1.75rem 2.5rem; }
  .site-nav__cta .button{ font-size:1rem; }
  .catalog-card{ padding:1.75rem; }
  .catalog-card__icon{ margin-bottom:1.25rem; }

  .cta-suite__metrics{ grid-template-columns:1fr; }
  .cta-suite__metric{ text-align:center; }
  .cta-suite__actions{ align-items:stretch; }
}

@media (max-width:480px){
  .slide{ flex:0 0 95%; }
  .slider-btn{ width:48px; height:48px; font-size:1.25rem; }
}
.showcase-suite{
  position:relative; overflow:hidden;
  padding:clamp(4.5rem,6vw,6.5rem) 0 clamp(3.5rem,5vw,5.5rem);
  color:#f4f7ff;
  background:linear-gradient(165deg, rgba(5,12,25,.96) 0%, rgba(6,15,32,.95) 48%, rgba(8,20,40,.9) 100%);
}
.showcase-suite .container{ position:relative; z-index:2; }
.showcase-suite__aurora{
  position:absolute; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(76,201,240,.35) 0%, rgba(76,201,240,0) 70%);
  filter:blur(0); opacity:.65; pointer-events:none;
  animation:showcaseAura 16s ease-in-out infinite;
}
.showcase-suite__aurora--alt{
  width:520px; height:520px; top:auto; bottom:-18%; right:-10%;
  background:radial-gradient(circle, rgba(245,184,27,.35) 0%, rgba(245,184,27,0) 70%);
  animation-duration:20s; animation-delay:-4s;
}
.showcase-suite__aurora:first-of-type{ top:-22%; left:-14%; }
@keyframes showcaseAura{
  0%,100%{ transform:scale(.9) translate3d(0,0,0); opacity:.55; }
  50%{ transform:scale(1.08) translate3d(16px,14px,0); opacity:.85; }
}
.showcase-suite__header{
  text-align:center; max-width:720px; margin:0 auto 3rem;
  display:flex; flex-direction:column; gap:1rem;
}
.showcase-suite__eyebrow{
  align-self:center;
  padding:.45rem 1.3rem; border-radius:999px;
  font-size:.75rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  background:rgba(9,20,40,.7); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(12px);
  color:rgba(230,236,255,.85);
}
.showcase-suite__header h2{ margin:0; font-size:clamp(2.25rem,3vw + .5rem,3.25rem); color:#fff; }
.showcase-suite__header p{ margin:0; color:rgba(226,234,255,.82); font-size:1.05rem; line-height:1.7; }
.showcase-suite__groups{ display:flex; flex-direction:column; gap:3rem; }

.showcase-group{
  position:relative; border-radius:1.75rem;
  padding:2.5rem 2.75rem;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 80px -45px rgba(0,0,0,.85);
  overflow:hidden;
}
.showcase-group::after{
  content:''; position:absolute; inset:-40% auto auto 45%;
  width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle, rgba(245,184,27,.18) 0%, transparent 70%);
  opacity:.5; pointer-events:none; filter:blur(0);
  transform:translate3d(0,0,0); transition:transform .8s var(--spring), opacity .8s var(--spring);
}
.showcase-group:hover::after{ transform:translate3d(20px,-10px,0); opacity:.75; }
.showcase-group__header{
  display:flex; flex-direction:column; gap:.75rem; margin-bottom:2rem;
  max-width:720px;
}
.showcase-group__badge{
  align-self:flex-start;
  padding:.35rem .9rem; border-radius:999px;
  font-size:.75rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  color:rgba(240,244,255,.85); backdrop-filter:blur(12px);
}
.showcase-group__header p{
  margin:0; color:rgba(231,237,255,.78); font-size:1rem; line-height:1.65;
}
.showcase-group__grid{
  display:grid; gap:1.75rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}

.showcase-item{
  position:relative; border-radius:1.5rem; overflow:hidden;
  background:rgba(6,16,34,.6); border:1px solid rgba(255,255,255,.1);
  box-shadow:0 25px 70px -40px rgba(0,0,0,.9);
  transition:transform .45s var(--spring), box-shadow .45s var(--spring);
  --surface:linear-gradient(135deg,#0B1F3B 0%, #1a3a5c 100%);
  --ring:rgba(76,201,240,.25);
  --chip:rgba(245,184,27,.35);
}
.showcase-item:hover{
  transform:translateY(-10px) scale(1.015);
  box-shadow:0 40px 90px -35px rgba(0,0,0,.85);
}
.showcase-item__media{
  position:relative; aspect-ratio:4/3; border-radius:1.25rem;
  overflow:hidden; background:var(--surface);
  display:flex; align-items:center; justify-content:center;
}
.showcase-item__media::after{
  content:''; position:absolute; inset:-30%;
  background:radial-gradient(circle, var(--ring) 0%, transparent 70%);
  opacity:.7; pointer-events:none;
}
.showcase-item__media img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  transition:transform .6s var(--spring);
}
.showcase-item:hover .showcase-item__media img{ transform:scale(1.08); }
.showcase-item__preview{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  gap:.5rem; border:0; background:rgba(5,12,26,.65);
  color:#fff; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer; opacity:0; transition:opacity .35s ease;
}
.showcase-item__preview span{ pointer-events:none; }
.showcase-item:hover .showcase-item__preview,
.showcase-item__preview:focus-visible{ opacity:1; }
.showcase-item__preview:focus-visible{ outline:3px solid var(--brand-accent); outline-offset:-3px; }
.showcase-item__caption{
  padding:1.25rem 1.5rem;
}
.showcase-item__caption p{
  margin:0; font-size:.95rem; color:rgba(231,237,255,.78);
}

.showcase-item[data-theme="navy"]{ --surface:linear-gradient(135deg,#0B1F3B 0%, #1a3a5c 100%); --ring:rgba(245,184,27,.25); }
.showcase-item[data-theme="amber"]{ --surface:linear-gradient(135deg,#2d1805 0%, #b36a0a 100%); --ring:rgba(245,184,27,.38); }
.showcase-item[data-theme="warm"]{ --surface:linear-gradient(135deg,#f0f0f0 0%, #ffffff 100%); --ring:rgba(245,184,27,.28); }
.showcase-item[data-theme="teal"]{ --surface:linear-gradient(135deg,#0b3a3d 0%, #1e7b7c 100%); --ring:rgba(64,224,208,.3); }
.showcase-item[data-theme="sky"]{ --surface:linear-gradient(135deg,#87CEEB 0%, #4682B4 100%); --ring:rgba(135,206,235,.35); }
.showcase-item[data-theme="aqua"]{ --surface:linear-gradient(135deg,#006994 0%, #003d5c 100%); --ring:rgba(64,224,255,.35); }
.showcase-item[data-theme="reef"]{ --surface:linear-gradient(135deg,#40E0D0 0%, #008B8B 100%); --ring:rgba(64,224,208,.35); }
.showcase-item[data-theme="sunrise"]{ --surface:linear-gradient(135deg,#451b06 0%, #d87c2c 100%); --ring:rgba(245,184,27,.35); }
.showcase-item[data-theme="violet"]{ --surface:linear-gradient(135deg,#1c0f33 0%, #6a3fd2 100%); --ring:rgba(114,92,255,.35); }

.showcase-item.reveal{ transition-delay:var(--reveal-delay,0s); }
.showcase-group__grid .showcase-item:nth-child(2){ --reveal-delay:.12s; }
.showcase-group__grid .showcase-item:nth-child(3){ --reveal-delay:.18s; }

.showcase-item__media img{ border-radius:inherit; }
.showcase-item__preview::before{
  content:''; position:absolute; width:68px; height:68px; border-radius:50%;
  border:2px solid rgba(255,255,255,.45);
  transform:scale(.7); opacity:0; transition:transform .4s ease, opacity .4s ease;
}
.showcase-item:hover .showcase-item__preview::before{ transform:scale(1); opacity:1; }
.showcase-item__preview span{ font-size:.8rem; letter-spacing:.18em; }

.showcase-group[data-reveal-group] .showcase-item{ --reveal-delay:0s; }

@media (max-width:1024px){
  .showcase-group{ padding:2.25rem; }
}
@media (max-width:768px){
  .showcase-suite{ padding:4rem 0 3.5rem; }
  .showcase-group{ padding:2rem; }
  .showcase-group__grid{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1.25rem; }
  .showcase-item__preview span{ font-size:.75rem; }
}
@media (max-width:600px){
  .showcase-group{ padding:1.75rem; }
  .showcase-group__header{ text-align:left; }
  .showcase-suite__header p{ font-size:1rem; }
  .showcase-group__grid{ grid-template-columns:1fr; }
  .showcase-item__caption{ padding:1rem 1.1rem 1.25rem; }
}