/* ==========================================================================
   ZIRA MEDIA — main.css
   ========================================================================== */

:root{
  --black:#070811;
  --dark:#0c0d18;
  --white:#ffffff;
  --soft-white:#f8f8fc;
  --text:#101018;
  --muted:#747487;
  --pink:#ff4fd8;
  --purple:#9c5cff;
  --blue:#4d75ff;
  --border:rgba(120,100,220,0.15);
  --gradient:linear-gradient(135deg,#ff4fd8 0%,#a85cff 50%,#4d75ff 100%);
  --font-display:'Plus Jakarta Sans','Manrope',sans-serif;
  --font-body:'Manrope','Inter',sans-serif;
  --header-h:88px;
  --container-w:1280px;
}

/* ---------- Base ---------- */
body{ font-family:var(--font-body); background:var(--white); }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:800; line-height:1.1; margin:0; letter-spacing:-0.02em; }
p{ margin:0; }

.container{ width:100%; max-width:var(--container-w); margin:0 auto; padding:0 32px; }

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

.eyebrow{
  font-size:13px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--pink); margin:0 0 14px;
}
.eyebrow--light{ color:var(--pink); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 28px; border-radius:100px; font-weight:700; font-size:13px;
  letter-spacing:0.04em; text-transform:uppercase; border:none;
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
  white-space:nowrap;
}
.btn i{ font-size:12px; }
.btn--black{ background:var(--black); color:var(--white); }
.btn--black:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(7,8,17,0.25); }
.btn--gradient{ background:var(--gradient); color:var(--white); padding:14px 26px; }
.btn--gradient:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(156,92,255,0.35); }
.btn--outline{
  background:transparent; color:var(--text); border:1.5px solid var(--border);
  padding:14px 24px;
}
.btn--outline:hover{ background:var(--soft-white); }
.btn--link{
  background:none; padding:0; text-transform:uppercase; font-size:13px; font-weight:700;
  color:var(--text); display:inline-flex; align-items:center; gap:14px;
}
.btn--link__icon{
  width:38px; height:38px; border-radius:50%; border:1.5px solid var(--border);
  display:inline-flex; align-items:center; justify-content:center; font-size:11px;
  transition:background .3s ease, color .3s ease;
}
.btn--link:hover .btn--link__icon{ background:var(--black); color:var(--white); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.skip-link.screen-reader-text{
  position:absolute; left:-9999px; top:0; background:var(--black); color:var(--white);
  padding:12px 20px; z-index:9999;
}
.skip-link.screen-reader-text:focus{ left:16px; top:16px; }

.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:height .35s ease, box-shadow .35s ease, border-color .35s ease;
  height:var(--header-h);
}
.site-header.is-scrolled{
  height:70px;
  border-color:var(--border);
  box-shadow:0 8px 30px rgba(10,10,30,0.06);
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  height:100%;
}
.site-logo{ display:flex; flex-direction:column; line-height:1; gap:4px; }
.site-logo__text{ font-family:var(--font-display); font-weight:800; font-size:22px; letter-spacing:0.14em; }
.site-logo__sub{ font-size:9px; letter-spacing:0.14em; color:var(--muted); font-weight:600; }

.main-nav__list{ display:flex; align-items:center; gap:40px; }
.main-nav__link{
  font-size:13px; font-weight:600; letter-spacing:0.02em; position:relative; padding:6px 0;
}
.main-nav__link::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--gradient); transition:width .3s ease;
}
.main-nav__link:hover::after, .current-menu-item .main-nav__link::after{ width:100%; }

.site-header__actions{ display:flex; align-items:center; gap:20px; }
.menu-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; background:none; border:none;
}
.menu-toggle span{ display:block; height:2px; width:22px; background:var(--text); transition:transform .3s ease, opacity .3s ease; }
.menu-toggle.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle.is-active span:nth-child(2){ opacity:0; }
.menu-toggle.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-drawer{
  position:fixed; inset:0; top:var(--header-h); z-index:999;
  background:var(--white); padding:40px 32px;
  transform:translateX(100%); transition:transform .4s ease;
  display:flex; flex-direction:column; gap:40px;
}
.mobile-drawer.is-open{ transform:translateX(0); }
.mobile-drawer__list{ display:flex; flex-direction:column; gap:26px; }
.mobile-drawer__list a{ font-size:24px; font-weight:700; font-family:var(--font-display); }
.mobile-drawer__cta{ align-self:flex-start; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; padding-top:calc(var(--header-h) + 60px); padding-bottom:100px;
  overflow:hidden; background:var(--white);
}
.hero__grid-bg{
  position:absolute; inset:0; z-index:0; opacity:0.5;
  background-image:
    linear-gradient(rgba(120,100,220,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,100,220,0.06) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 80% 60% at 60% 30%, black 10%, transparent 75%);
}
.hero__inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;
}
.hero__title{ font-size:clamp(38px, 4.6vw, 60px); margin:22px 0 24px; }
.hero__desc{ max-width:420px; color:var(--muted); font-size:16px; line-height:1.7; margin-bottom:36px; }
.hero__actions{ display:flex; align-items:center; gap:34px; flex-wrap:wrap; }

.hero__visual{ position:relative; min-height:520px; }
.globe-stage{
  position:relative; width:100%; height:520px; max-width:560px; margin:0 auto;
}
#globe-canvas{ width:100%; height:100%; display:block; }
.globe-fallback{
  position:absolute; inset:10%; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,79,216,0.35), rgba(156,92,255,0.28) 45%, rgba(77,117,255,0.18) 75%, transparent 80%);
  filter:blur(6px);
  z-index:-1;
}
.globe-stage.no-webgl .globe-fallback{ z-index:1; filter:blur(0); opacity:1; }
.globe-stage.no-webgl canvas{ display:none; }

.floating-cards{ position:absolute; inset:0; pointer-events:none; }
.floating-card{
  position:absolute; pointer-events:auto;
  display:flex; align-items:center; gap:12px;
  background:var(--white); border-radius:16px; padding:12px 16px;
  box-shadow:0 20px 40px rgba(20,20,60,0.10);
  will-change:transform;
}
.floating-card__icon{
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--soft-white);
}
.floating-card__icon svg{ width:18px; height:18px; }
.floating-card__icon.icon-web-design{ color:var(--purple); }
.floating-card__icon.icon-excel-date{ color:var(--blue); }
.floating-card__icon.icon-branding{ color:var(--pink); }
.floating-card__icon.icon-social-media{ color:var(--pink); }
.floating-card__icon.icon-ecommerce{ color:var(--purple); }
.floating-card__icon.icon-word-pdf{ color:var(--blue); }
.floating-card__icon.icon-graphic-design{ color:var(--purple); }
.floating-card__text{ display:flex; flex-direction:column; }
.floating-card__text strong{ font-size:12.5px; font-weight:700; }
.floating-card__text small{ font-size:10.5px; color:var(--muted); }

.card--1{ top:2%; left:38%; }
.card--2{ top:6%; right:0%; }
.card--3{ top:34%; left:0%; }
.card--4{ top:38%; right:4%; }
.card--5{ top:60%; left:6%; }
.card--6{ top:66%; right:0%; }
.card--7{ bottom:2%; left:32%; }

.hero__scroll-cue{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  background:none; border:none; color:var(--muted); font-size:16px;
  animation:bob 2.2s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,8px); } }

/* ==========================================================================
   ABOUT (dark)
   ========================================================================== */
.about{
  position:relative; background:var(--black); color:var(--white);
  padding:120px 0 0; overflow:hidden;
}
.about__inner{
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;
  padding-bottom:100px;
}
.about__title{ color:var(--white); font-size:clamp(28px,3.2vw,40px); margin-bottom:22px; }
.about__desc{ color:rgba(255,255,255,0.55); max-width:420px; line-height:1.75; font-size:15px; }

.about__stats{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.stat-card{
  background:var(--dark); border:1px solid rgba(255,255,255,0.06);
  border-radius:20px; padding:28px 22px; display:flex; flex-direction:column; gap:14px;
}
.stat-card__number{
  font-family:var(--font-display); font-weight:800; font-size:36px;
  background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-card__label{ font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:rgba(255,255,255,0.5); font-weight:600; }

.about__wave{ position:relative; height:160px; }
.about__wave canvas{ width:100%; height:100%; display:block; }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services{ padding:120px 0; background:var(--white); }
.services__inner{ display:grid; grid-template-columns:0.9fr 2fr; gap:60px; }
.services__heading{ display:flex; flex-direction:column; align-items:flex-start; gap:26px; }
.services__title{ font-size:clamp(26px,2.8vw,34px); }

.services__grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.service-card{
  background:var(--soft-white); border:1px solid var(--border); border-radius:20px;
  padding:26px 22px; display:flex; flex-direction:column; gap:14px;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.service-card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px rgba(20,20,60,0.08); border-color:transparent; }
.service-card__icon{
  width:44px; height:44px; border-radius:12px; background:var(--white);
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(20,20,60,0.06);
}
.service-card__icon svg{ width:20px; height:20px; }
.service-card:nth-child(4n+1) .service-card__icon{ color:var(--purple); }
.service-card:nth-child(4n+2) .service-card__icon{ color:var(--blue); }
.service-card:nth-child(4n+3) .service-card__icon{ color:var(--pink); }
.service-card:nth-child(4n+4) .service-card__icon{ color:var(--purple); }
.service-card__title{ font-size:16px; font-weight:700; }
.service-card__desc{ font-size:13px; color:var(--muted); line-height:1.55; }

/* ==========================================================================
   PORTFOLIO
   ========================================================================== */
.portfolio{ padding:0 0 120px; background:var(--soft-white); }
.portfolio__heading{
  display:flex; justify-content:space-between; align-items:flex-end; gap:30px;
  padding:100px 0 50px; flex-wrap:wrap;
}
.portfolio__title{ font-size:clamp(26px,2.8vw,34px); }
.portfolio__filters{ display:flex; gap:10px; flex-wrap:wrap; }
.filter-btn{
  background:var(--white); border:1px solid var(--border); border-radius:100px;
  padding:10px 18px; font-size:12px; font-weight:700; letter-spacing:0.03em; text-transform:uppercase;
  color:var(--muted); transition:all .3s ease;
}
.filter-btn.is-active, .filter-btn:hover{ background:var(--gradient); color:var(--white); border-color:transparent; }

.portfolio__grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;
  grid-auto-flow:dense;
}
.portfolio-card{
  position:relative; border-radius:22px; overflow:hidden; display:block;
  min-height:280px; background:var(--dark);
}
.portfolio-card:nth-child(3n+1){ grid-row:span 2; min-height:100%; }
.portfolio-card__media{ position:absolute; inset:0; }
.portfolio-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.portfolio-card:hover .portfolio-card__media img{ transform:scale(1.06); }
.portfolio-card__media--placeholder{ background:linear-gradient(135deg, rgba(255,79,216,0.35), rgba(77,117,255,0.35)); }
.portfolio-card.shade--dark .portfolio-card__media--placeholder{ background:linear-gradient(160deg,#1a1c2e,#0c0d18); }
.portfolio-card.shade--black .portfolio-card__media--placeholder{ background:linear-gradient(160deg,#14141c,#050509); }
.portfolio-card.shade--light .portfolio-card__media--placeholder{ background:linear-gradient(160deg,#e9e9f2,#cfcfe0); }
.portfolio-card.shade--pink .portfolio-card__media--placeholder{ background:linear-gradient(160deg,#ffd9f2,#ffb3e6); }
.portfolio-card__overlay{
  position:absolute; left:0; right:0; bottom:0; padding:22px;
  background:linear-gradient(0deg, rgba(0,0,0,0.55), transparent 70%);
  color:var(--white); display:flex; flex-direction:column; gap:4px;
}
.portfolio-card__cat{ font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; opacity:0.75; }
.portfolio-card__title{ font-size:19px; font-family:var(--font-display); font-weight:700; }
.portfolio__cta{ text-align:center; margin-top:50px; }

/* ==========================================================================
   PROCESS (dark)
   ========================================================================== */
.process{ position:relative; background:var(--black); color:var(--white); padding:120px 0; overflow:hidden; }
.process__bg{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(156,92,255,0.25) 1px, transparent 1.5px);
  background-size:26px 26px; opacity:0.3;
}
.process__heading{ position:relative; margin-bottom:70px; }
.process__title{ color:var(--white); font-size:clamp(28px,3.2vw,40px); }
.process__steps{
  position:relative; display:grid; grid-template-columns:repeat(6, 1fr); gap:18px;
}
.process-step{ position:relative; display:flex; flex-direction:column; gap:10px; }
.process-step__icon{
  width:54px; height:54px; border-radius:50%; border:1.5px solid rgba(255,79,216,0.4);
  display:flex; align-items:center; justify-content:center; font-size:18px;
  background:var(--dark); color:var(--pink); margin-bottom:6px;
}
.process-step__number{ font-size:12px; color:var(--muted); font-weight:700; }
.process-step__title{ color:var(--white); font-size:15px; font-weight:700; }
.process-step__desc{ font-size:12.5px; color:rgba(255,255,255,0.5); line-height:1.5; }
.process-step__connector{
  position:absolute; top:27px; left:calc(100% + 8px); width:calc(18px + 4px);
  height:1px; background:rgba(255,255,255,0.15);
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact{ padding:120px 0; background:var(--white); }
.contact__inner{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.contact__title{ font-size:clamp(26px,3vw,38px); margin-bottom:34px; }
.contact__details{ display:flex; flex-direction:column; gap:18px; margin-bottom:26px; }
.contact__details li{ display:flex; align-items:center; gap:14px; }
.contact__details i{
  width:40px; height:40px; border-radius:12px; background:var(--soft-white);
  display:flex; align-items:center; justify-content:center; color:var(--purple);
}
.contact__details span{ display:block; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; }
.contact__details strong{ font-size:14px; }
.contact__social{ display:flex; gap:12px; }
.contact__social a{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; transition:background .3s ease, color .3s ease;
}
.contact__social a:hover{ background:var(--gradient); color:var(--white); border-color:transparent; }

.contact__form-wrap{
  background:var(--soft-white); border:1px solid var(--border); border-radius:26px; padding:36px;
}
.contact-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.contact-form__field{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.contact-form__field label{ font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; }
.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea{
  border:1px solid var(--border); border-radius:12px; padding:13px 16px;
  font-family:inherit; font-size:14px; background:var(--white); color:var(--text);
  transition:border-color .3s ease, box-shadow .3s ease;
}
.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus{
  outline:none; border-color:var(--purple); box-shadow:0 0 0 4px rgba(156,92,255,0.12);
}
.contact-form__submit{ width:100%; justify-content:center; margin-top:6px; }
.contact-form__status{ margin-top:14px; font-size:13px; color:var(--muted); }
.contact-form__status.is-success{ color:#2fb872; }
.contact-form__status.is-error{ color:#ef4a6c; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:var(--black); color:rgba(255,255,255,0.65); padding:60px 0 30px; }
.site-footer__inner{
  display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:30px; align-items:start;
  border-bottom:1px solid rgba(255,255,255,0.08); padding-bottom:36px;
}
.site-footer__brand .site-logo__text{ color:var(--white); }
.site-footer__tagline{ font-size:11px; color:rgba(255,255,255,0.4); margin-top:6px; letter-spacing:0.06em; }
.site-footer__contact{ display:flex; flex-direction:column; gap:10px; font-size:13px; }
.site-footer__contact li{ display:flex; align-items:center; gap:10px; }
.site-footer__social{ display:flex; gap:12px; align-self:flex-start; }
.site-footer__social a{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,0.15);
  display:flex; align-items:center; justify-content:center; transition:background .3s ease;
}
.site-footer__social a:hover{ background:var(--gradient); border-color:transparent; }
.site-footer__copy{ text-align:center; font-size:12px; color:rgba(255,255,255,0.35); padding-top:24px; }

/* ==========================================================================
   Generic content (pagini/archive fallback)
   ========================================================================== */
.generic-content{ padding:calc(var(--header-h) + 60px) 0 100px; }
.page-content__title{ font-size:clamp(28px,3.4vw,42px); margin-bottom:24px; }
.page-content__thumb{ border-radius:22px; overflow:hidden; margin-bottom:36px; }
.page-content__body{ max-width:760px; line-height:1.8; font-size:16px; color:var(--text); }
.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.post-card{ border:1px solid var(--border); border-radius:18px; overflow:hidden; }
.post-card__media img{ width:100%; }
.post-card__title{ font-size:17px; padding:16px 18px 0; }
.post-card__excerpt{ padding:8px 18px 18px; color:var(--muted); font-size:14px; }