/* ==========================================================
   Arish IT Services -- Design tokens (v2: modern/bento refresh)
   ========================================================== */
:root{
  --navy-950: #030C1E;
  --navy-900: #071A31;
  --navy-800: #0C244A;
  --blue-600: #2F6FED;
  --blue-500: #4C86FF;
  --blue-100: #E7EFFF;
  --sky-50:  #F6F8FD;
  --teal-400:#17C3B2;
  --violet-500:#8B5CF6;
  --violet-400:#A78BFA;
  --coral-500:#FF6B6B;
  --slate-900:#0F1626;
  --slate-700:#3A4256;
  --slate-500:#6B7280;
  --slate-200:#E6E9F2;
  --white:   #FFFFFF;

  --grad-brand: linear-gradient(135deg, var(--blue-500) 0%, var(--violet-500) 100%);
  --grad-brand-deep: linear-gradient(135deg, var(--blue-600) 0%, var(--violet-500) 55%, var(--navy-900) 100%);
  --grad-warm: linear-gradient(135deg, var(--coral-500), var(--violet-500));

  --font-display: "Bodoni Moda", serif;;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-xl: 40px;

  --shadow-sm: 0 2px 10px rgba(11,37,69,.06);
  --shadow-md: 0 14px 34px rgba(11,37,69,.10);
  --shadow-lg: 0 30px 70px rgba(11,37,69,.16);
  --shadow-glow: 0 20px 60px rgba(139,92,246,.22);

  --glass-bg: rgba(255,255,255,.65);
  --glass-border: rgba(255,255,255,.5);

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--slate-700);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--navy-900);
  margin:0 0 .5em;
  line-height:1.12;
  letter-spacing:-0.02em;
}
p{ margin:0 0 1em; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--violet-500); color:#fff; }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--sky-50); }
::-webkit-scrollbar-thumb{ background:var(--blue-500); border-radius:10px; }

.container{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 24px;
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:.76rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:var(--grad-brand);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  padding:6px 14px 6px 6px;
  border:1px solid var(--slate-200);
  border-radius:100px;
}
.eyebrow::before{
  content:"";
  width:8px; height:8px;
  border-radius:50%;
  background:var(--grad-brand);
  display:inline-block;
}
.section {padding: 70px 0 130px;position: relative;}
.section-alt{ background:var(--sky-50); }
.section-head{ max-width:640px; margin-bottom:60px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(2rem,3.6vw,2.9rem); }
.section-head p{ color:var(--slate-500); font-size:1.08rem; font-family: "Bodoni Moda", serif; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 32px;
  border-radius:100px;
  font-weight:600; font-size:.95rem;
  border:1px solid transparent;
  transition:transform .35s var(--ease-spring), box-shadow .35s var(--ease), background .3s, color .3s;
  white-space:nowrap;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.btn-primary{
  background:var(--grad-brand);
  background-size:180% 180%;
  color:#fff;
  box-shadow:0 12px 28px rgba(47,111,237,.32);
}
.btn-primary::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .7s var(--ease);
}
.btn-primary:hover::before{ transform:translateX(120%); }
.btn-primary:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 20px 40px rgba(139,92,246,.38); }
.btn-ghost{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.35);
  color:#fff;
  backdrop-filter:blur(8px);
}
.btn-ghost:hover{ background:#fff; color:var(--navy-900); transform:translateY(-3px); }
.btn-outline{
  border-color:var(--blue-600); color:var(--blue-600); background:#fff;
}
.btn-outline:hover{ background:var(--grad-brand); border-color:transparent; color:#fff; transform:translateY(-3px); }
.btn svg{ width:18px; height:18px; transition:transform .3s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }

/* ==========================================================
   Header -- floating glass pill
   ========================================================== */
.site-header{
  position:fixed; top:16px; left:0; right:0; z-index:100;
  padding:0;
  transition:all .4s var(--ease);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(11,37,69,.32);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(18px) saturate(160%);
  border-radius:100px;
  padding:10px 14px 10px 22px;
  transition:all .4s var(--ease);
  max-width:1240px;
}
.site-header.scrolled{ top:12px; }
.site-header.scrolled .container{
  background:rgba(255,255,255,.78);
  border-color:rgba(11,37,69,.08);
  box-shadow:0 14px 40px rgba(11,37,69,.14);
}
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:1.2rem; color:#fff; transition:color .4s; }
.site-header.scrolled .brand{ color:var(--navy-900); }
.brand-mark{
  width:38px; height:38px; border-radius:11px;
  background:var(--grad-brand);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-family:var(--font-mono);
  box-shadow:0 6px 16px rgba(139,92,246,.4);
}
.brand-logo{
  height:38px; width:auto; max-width:160px;
  object-fit:contain; border-radius:8px;
}
.brand-logo-swap{ display:inline-grid; align-items:center; justify-items:start; }
.brand-logo-swap .brand-logo{ grid-area:1 / 1; transition:opacity .45s var(--ease); }
.brand-logo-swap .brand-logo-dark{ opacity:1; }
.brand-logo-swap .brand-logo-light{ opacity:0; }
.site-header.scrolled .brand-logo-swap .brand-logo-dark{ opacity:0; }
.site-header.scrolled .brand-logo-swap .brand-logo-light{ opacity:1; }
.main-nav ul{ display:flex; gap:8px; }
.main-nav a{
  font-size:.9rem; font-weight:500; color:rgba(255,255,255,.82);
  position:relative; padding:9px 16px; border-radius:100px; transition:color .3s, background .3s;
}
.site-header.scrolled .main-nav a{ color:var(--slate-700); }
.main-nav a:hover{ color:#fff; background:rgba(255,255,255,.12); }
.site-header.scrolled .main-nav a:hover{ color:var(--navy-900); background:var(--sky-50); }
.header-cta{ display:flex; align-items:center; gap:10px; }
.header-cta .btn{ padding:11px 22px; font-size:.86rem; }
.header-cta .btn-ghost{ border-color:rgba(255,255,255,.4); }
.site-header.scrolled .header-cta .btn-ghost{ background:transparent; border-color:var(--slate-200); color:var(--navy-900); }
.site-header.scrolled .header-cta .btn-ghost:hover{ background:var(--navy-900); color:#fff; }

.nav-toggle{ display:none; width:26px; height:20px; position:relative; background:none; border:0; }
.nav-toggle span{ position:absolute; left:0; right:0; height:2px; background:#fff; border-radius:2px; transition:all .3s; }
.site-header.scrolled .nav-toggle span{ background:var(--navy-900); }
.nav-toggle span:nth-child(1){ top:0; } .nav-toggle span:nth-child(2){ top:9px; } .nav-toggle span:nth-child(3){ top:18px; }
.nav-toggle.open span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

/* ==========================================================
   Hero -- aurora mesh + signature network canvas
   ========================================================== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  background:var(--navy-950);
  overflow:hidden;
  padding-top:150px;
  padding-bottom:90px;
}
.hero::before{
  content:""; position:absolute; inset:-10%; z-index:0;
  background:
    radial-gradient(600px 500px at 15% 15%, rgba(139,92,246,.35), transparent 60%),
    radial-gradient(700px 600px at 85% 10%, rgba(47,111,237,.4), transparent 60%),
    radial-gradient(800px 500px at 50% 100%, rgba(23,195,178,.18), transparent 60%);
  filter:blur(10px);
  animation:auroraShift 18s ease-in-out infinite alternate;
}
@keyframes auroraShift{
  0%{ transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(-2%,2%,0) scale(1.08); }
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, transparent 55%, var(--white) 100%);
  pointer-events:none;
}
#hero-canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; z-index:1; }
.hero-spotlight{
  position:absolute; z-index:1; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(139,92,246,.16), transparent 70%);
  pointer-events:none; transform:translate(-50%,-50%);
  transition:opacity .3s; opacity:0; left:0; top:0;
}
.hero .container{ position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; }
.hero-eyebrow{ color:var(--blue-500); font-family:var(--font-mono); letter-spacing:.1em; text-transform:uppercase; font-size:.95rem; margin-bottom:10px; display:inline-flex; align-items:center; gap:8px; }
.hero-eyebrow::before{ content:""; width:20px; height:1px; background:var(--blue-500); display:inline-block; }
.hero h1{
font-family: "Bodoni Moda", serif; font-size: 55px;  color:#fff; font-weight:600; margin-bottom:24px;
  background:linear-gradient(100deg, #fff 40%, var(--blue-500) 65%, var(--violet-400) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.lead{ color:rgba(255,255,255,.72); font-size:1.15rem; max-width:520px; margin-bottom:36px; font-family: "Bodoni Moda", serif; margin-top: -10px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap;     margin-top: -10px; }
.hero-side{ position:relative; }
.hero-card{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(24px);
  border-radius:var(--radius-lg);
  padding:36px;
  display:grid; grid-template-columns:1fr 1fr; gap:28px;
  box-shadow:var(--shadow-glow);
}
.hero-stat b{ display:block; font-family:var(--font-mono); font-size:2.15rem; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-stat span{ color:rgba(255,255,255,.62); font-size: 16px;
    font-family: "Bodoni Moda", serif; }
.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:rgba(255,255,255,.55); font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em;
  z-index:2;
}
.scroll-cue .line{ width:1px; height:34px; background:linear-gradient(#fff,transparent); animation:scrollcue 1.8s infinite; }
@keyframes scrollcue{ 0%{ transform:scaleY(0); transform-origin:top;} 50%{transform:scaleY(1); transform-origin:top;} 51%{transform-origin:bottom;} 100%{transform:scaleY(0); transform-origin:bottom;} }

/* ==========================================================
   Reveal-on-scroll utility
   ========================================================== */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in-view{ opacity:1; transform:translateY(0); }
[data-reveal="fade"]{ transform:none; }
[data-reveal-delay="1"]{ transition-delay:.1s; }
[data-reveal-delay="2"]{ transition-delay:.22s; }
[data-reveal-delay="3"]{ transition-delay:.34s; }
[data-reveal-delay="4"]{ transition-delay:.46s; }
[data-reveal-delay="5"]{ transition-delay:.58s; }

/* ==========================================================
   About
   ========================================================== */
.about-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:center; }
.about-media{ position:relative; }
.about-media::before{
  content:""; position:absolute; inset:-18px 20px 20px -18px; z-index:0;
  background:var(--grad-brand); border-radius:var(--radius-lg); opacity:.16; filter:blur(6px);
}
.about-media .frame{
  position:relative; z-index:1;
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg);
  aspect-ratio:4/5;
}
.about-media .frame img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.about-media:hover .frame img{ transform:scale(1.06); }
.about-badge{
  position:absolute; bottom:-28px; left:-28px; z-index:2;
  background:var(--white); border-radius:var(--radius-md); box-shadow:var(--shadow-md);
  padding:22px 26px; display:flex; gap:20px;
}
.about-badge div b{ display:block; font-family:var(--font-mono); font-size:1.6rem; color:var(--navy-900); }
.about-badge div span{ font-size:.8rem; color:var(--slate-500); font-family: "Bodoni Moda", serif; }
.about-copy p{ color:var(--slate-500); font-size:1.05rem; font-family: "Bodoni Moda", serif; text-align: justify; }
.mv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:34px; }
.mv-card{ background:var(--white); border:1px solid var(--slate-200); border-radius:var(--radius-md); padding:26px; transition:transform .35s var(--ease-spring), box-shadow .35s var(--ease), border-color .35s; position:relative; overflow:hidden; }
.mv-card::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--grad-brand); transform:scaleY(0); transform-origin:bottom; transition:transform .4s var(--ease); }
.mv-card:hover::after{ transform:scaleY(1); }
.mv-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent; }
.mv-card h4{ font-size:1.05rem; }
.mv-card p{ font-size:.92rem; color:var(--slate-500); margin:0; }

/* ==========================================================
   Progress / counters bar
   ========================================================== */
.progress-bar{
  background:var(--grad-brand-deep);
  border-radius:var(--radius-lg);
  padding:58px 40px;
  display:grid; grid-template-columns:repeat(4,1fr);
  position:relative; overflow:hidden;
  box-shadow:var(--shadow-glow);
}
.progress-bar::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(500px 300px at 10% 0%, rgba(255,255,255,.15), transparent 60%);
}
.progress-item{ text-align:center; position:relative; z-index:1; border-right:1px solid rgba(255,255,255,.14); }
.progress-item:last-child{ border-right:none; }
.progress-item b{ font-family:var(--font-mono); font-size:clamp(2rem,3.4vw,2.8rem); color:#fff; display:block; }
.progress-item span{ color:rgba(255,255,255,.65); font-size:.85rem; font-family: "Bodoni Moda", serif; }

/* ==========================================================
   Services -- bento grid
   ========================================================== */
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:22px; }
.service-card{
  background:var(--white); border:1px solid var(--slate-200); border-radius:var(--radius-md);
  position:relative; overflow:hidden;
  transition:transform .45s var(--ease-spring), box-shadow .45s var(--ease), border-color .4s;
  display:flex; flex-direction:column;
}
.service-card:hover{ box-shadow:var(--shadow-lg); border-color:transparent; transform:translateY(-8px); }
.service-cover{
  position:relative; display:block; width:100%; aspect-ratio:16/10; border:0; padding:0; margin:0;
  background:var(--sky-50); cursor:zoom-in; overflow:hidden; flex-shrink:0;
}
.service-cover img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.service-card:hover .service-cover img{ transform:scale(1.07); }
.cover-zoom-icon{
  position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%;
  background:rgba(11,37,69,.55); backdrop-filter:blur(6px); color:#fff;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.8); transition:opacity .3s, transform .3s; pointer-events:none;
}
.cover-zoom-icon svg{ width:16px; height:16px; }
.service-cover:hover .cover-zoom-icon, .folio-item:hover .cover-zoom-icon{ opacity:1; transform:scale(1); }
.service-card-body{ padding:38px 32px; display:flex; flex-direction:column; flex-grow:1; }
.service-card:nth-child(1){
  color:#030C1E;
}
.service-card:nth-child(1) .service-card-body{ padding:44px 40px; justify-content:space-between; }
.service-card:nth-child(1) h3, .service-card:nth-child(1) p{ color:#030C1E; }
.service-card:nth-child(1) p{ color:#030C1E; font-size:1rem; max-width:420px; }
.service-card:nth-child(1) .service-icon{ background:rgba(255,255,255,.14); box-shadow:none; width:64px; height:64px; }
.service-card:nth-child(1) .service-link{ }
.service-card:nth-child(1)::before{ background:radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); }
.service-icon{
  width:56px; height:56px; border-radius:14px; color:#fff;
  background:var(--grad-brand);
  display:flex; align-items:center; justify-content:center; margin-bottom:22px;
  box-shadow:0 10px 22px rgba(139,92,246,.28);
}
.service-icon svg{ width:26px; height:26px; }
.service-card h3{ font-size:1.2rem; }
.service-card p{ color:var(--slate-500); font-size:.94rem; flex-grow:1; font-family: "Bodoni Moda", serif; }
.service-link{ font-size:.85rem; font-weight:600; color:var(--blue-600); display:inline-flex; align-items:center; gap:6px; }
.service-link svg{ width:15px; height:15px; transition:transform .3s var(--ease); }
.service-card:hover .service-link svg{ transform:translateX(4px); }
.service-card::before{
  content:""; position:absolute; top:0; right:0; width:140px; height:140px; border-radius:50%;
  background:radial-gradient(circle, var(--blue-100), transparent 70%);
  transform:translate(30%,-40%); opacity:0; transition:opacity .4s; pointer-events:none;
}
.service-card:hover::before{ opacity:1; }

/* ==========================================================
   Portfolio -- bento grid
   ========================================================== */
.folio-filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:38px; }
.folio-filters button{
  padding:10px 22px; border-radius:100px; border:1px solid var(--slate-200); background:#fff;
  font-size:.85rem; font-weight:600; color:var(--slate-500); transition:all .3s;
}
.folio-filters button.active, .folio-filters button:hover{ background:var(--grad-brand); color:#fff; border-color:transparent; }
.folio-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.folio-item{
  position:relative; border-radius:var(--radius-md); overflow:hidden; aspect-ratio:1149/1369;
  box-shadow:var(--shadow-sm); border:1px solid var(--slate-200); cursor:zoom-in;
}
.folio-item:nth-child(3n+1){   grid-row:auto;
 }
.folio-item img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.folio-item:hover img{ transform:scale(1.1); }
.folio-overlay{
  position:absolute; inset:0; padding:26px; display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(180deg, transparent 35%, rgba(5,18,43,.94) 100%);
  opacity:0; transition:opacity .4s;
}
.folio-item:hover .folio-overlay{ opacity:1; }
.folio-overlay span{ color:var(--blue-500); font-size:.75rem; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.08em; }
.folio-overlay h4{ color:#fff; margin:6px 0 0; font-size:1.05rem; }

/* ==========================================================
   Blog -- cards, single-post article, and page hero
   ========================================================== */
.page-hero{
  padding:170px 0 70px; text-align:center; background:var(--navy-950); position:relative; overflow:hidden;
}
.page-hero::before{
  content:""; position:absolute; inset:-10%; z-index:0;
  background:
    radial-gradient(600px 400px at 15% 10%, rgba(139,92,246,.3), transparent 60%),
    radial-gradient(700px 500px at 85% 0%, rgba(47,111,237,.35), transparent 60%);
}
.page-hero .container{ position:relative; z-index:1; }
.page-hero h1{ color:#fff; font-size:clamp(2.2rem,4vw,3.2rem); margin:14px 0 10px; }
.page-hero p{ color:rgba(255,255,255,.72); max-width:560px; margin:0 auto; }
.blog-meta-row{ display:flex; align-items:center; justify-content:center; gap:10px; color:rgba(255,255,255,.6); font-size:.9rem; margin-top:6px; }

.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.blog-card{
  background:var(--white); border:1px solid var(--slate-200); border-radius:var(--radius-md);
  overflow:hidden; display:flex; flex-direction:column; color:inherit;
  transition:transform .45s var(--ease-spring), box-shadow .45s var(--ease), border-color .4s;
}
.blog-card:hover{ box-shadow:var(--shadow-lg); border-color:transparent; transform:translateY(-8px); }
.blog-cover{ aspect-ratio:16/10; overflow:hidden; background:var(--sky-50); position:relative; }
.blog-cover img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.blog-card:hover .blog-cover img{ transform:scale(1.07); }
.blog-video-badge{
  position:absolute; top:12px; right:12px;
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:20px;
  background:rgba(15, 23, 42, 0.82); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:#fff; font-size:.75rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  box-shadow:0 4px 12px rgba(0,0,0,0.25); z-index:2;
}
.blog-video-badge svg{ width:12px; height:12px; fill:var(--blue-400); }
.blog-card-body{ padding:28px 26px; display:flex; flex-direction:column; flex-grow:1; }
.blog-date{ font-size:.78rem; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--blue-600); margin-bottom:10px; }
.blog-card h3{ font-size:1.12rem; margin-bottom:10px; }
.blog-card p{ color:var(--slate-500); font-size:.92rem; flex-grow:1; margin-bottom:16px; font-family: "Bodoni Moda", serif; }

.blog-pagination{ display:flex; justify-content:center; gap:8px; margin-top:50px; }
.blog-pagination a{
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--slate-200); font-weight:600; font-size:.9rem; color:var(--slate-700); transition:all .3s;
}
.blog-pagination a:hover{ border-color:transparent; background:var(--sky-50); }
.blog-pagination a.active{ background:var(--grad-brand); color:#fff; border-color:transparent; }

.blog-article{ max-width:780px; margin:0 auto; }
.blog-media-wrap{ border-radius:var(--radius-md); overflow:hidden; margin-bottom:40px; box-shadow:var(--shadow-md); }
.blog-article-cover img{ width:100%; height:auto; display:block; }
.blog-video-wrap{ position:relative; width:100%; aspect-ratio:16/9; background:#000; }
.blog-video-wrap video,
.blog-video-wrap iframe{ width:100%; height:100%; border:none; display:block; object-fit:contain; }

/* Rich Text Content Typography */
.blog-article-body{ color:var(--slate-700); font-size:1.06rem; line-height:1.85; }
.blog-article-body p{ margin-bottom:20px; color:var(--slate-700); }
.blog-article-body h1,
.blog-article-body h2,
.blog-article-body h3,
.blog-article-body h4,
.blog-article-body h5,
.blog-article-body h6{
  color:var(--navy-900); font-family:var(--font-display); font-weight:700;
  line-height:1.3; margin-top:34px; margin-bottom:14px;
}
.blog-article-body h1{ font-size:2rem; }
.blog-article-body h2{ font-size:1.65rem; border-bottom:1px solid var(--slate-200); padding-bottom:10px; }
.blog-article-body h3{ font-size:1.35rem; }
.blog-article-body h4{ font-size:1.18rem; }
.blog-article-body h5{ font-size:1.05rem; }
.blog-article-body h6{ font-size:.95rem; text-transform:uppercase; letter-spacing:.05em; color:var(--slate-500); }

.blog-article-body ul,
.blog-article-body ol{ margin:16px 0 24px 28px; padding-left:12px; }
.blog-article-body ul li{ list-style-type:disc; margin-bottom:10px; color:var(--slate-700); }
.blog-article-body ol li{ list-style-type:decimal; margin-bottom:10px; color:var(--slate-700); }

.blog-article-body a{ color:inherit; text-decoration:none; font-weight:600; cursor:pointer; }
.blog-article-body a:hover,
.blog-article-body a:focus,
.blog-article-body a:active{ color:inherit; text-decoration:none; font-weight:600; cursor:pointer; }

.blog-article-body strong,
.blog-article-body b{ color:var(--navy-900); font-weight:700; }
.blog-article-body em,
.blog-article-body i{ font-style:italic; }
.blog-article-body u{ text-decoration:underline; }
.blog-article-body s,
.blog-article-body strike,
.blog-article-body del{ text-decoration:line-through; opacity:.75; }

.blog-article-body blockquote{
  margin:28px 0; padding:18px 24px;
  background:var(--sky-50); border-left:4px solid var(--blue-600);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-style:italic; color:var(--slate-800); font-size:1.12rem; line-height:1.7;
}
.blog-article-body pre{
  margin:24px 0; padding:18px 20px;
  background:#0f172a; color:#f8fafc;
  border-radius:var(--radius-sm); font-family:var(--font-mono);
  font-size:.92rem; overflow-x:auto; line-height:1.6;
}
.blog-article-body code{
  font-family:var(--font-mono); font-size:.88em;
  background:var(--slate-100); color:var(--blue-700);
  padding:2px 6px; border-radius:4px;
}
.blog-article-body pre code{ background:transparent; color:inherit; padding:0; border-radius:0; }

.blog-article-body img{ max-width:100%; height:auto; border-radius:var(--radius-sm); margin:24px 0; box-shadow:var(--shadow-sm); }
.blog-article-body hr{ margin:36px 0; border:0; border-top:1px solid var(--slate-200); }

/* Quill alignment classes support */
.blog-article-body .ql-align-center{ text-align:center; }
.blog-article-body .ql-align-right{ text-align:right; }
.blog-article-body .ql-align-justify{ text-align:justify; }
.blog-article-body .ql-align-left{ text-align:left; }

/* Blog FAQ Section */
.blog-faqs-section {
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid var(--slate-200);
}
.blog-faqs-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--navy-900);
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}
.blog-faqs-accordion {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.blog-faq-item {
  background: #ffffff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.blog-faq-item:hover {
  border-color: var(--blue-300, #93c5fd);
}
.blog-faq-item[open] {
  border-color: var(--blue-500, #3b82f6);
  box-shadow: 0 4px 14px rgba(15, 44, 89, 0.06);
}
.blog-faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--navy-900);
  background: var(--slate-50, #f8fafc);
  list-style: none;
  user-select: none;
  transition: background .2s, color .2s;
}
.blog-faq-question::-webkit-details-marker {
  display: none;
}
.blog-faq-item[open] .blog-faq-question {
  background: #ffffff;
  color: var(--blue-600, #2563eb);
  border-bottom: 1px solid var(--slate-100);
}
.faq-icon-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.08);
  color: var(--blue-600, #2563eb);
  transition: transform .25s ease, background .2s, color .2s;
  flex-shrink: 0;
}
.blog-faq-item[open] .faq-icon-toggle {
  transform: rotate(180deg);
  background: var(--blue-600, #2563eb);
  color: #ffffff;
}
.blog-faq-answer {
  padding: 18px 20px;
  color: var(--slate-700);
  line-height: 1.8;
  font-size: 1rem;
  background: #ffffff;
}
.blog-faq-answer p:last-child {
  margin-bottom: 0;
}

.blog-article-footer{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:50px; padding-top:34px; border-top:1px solid var(--slate-200); }

/* ==========================================================
   Testimonials -- glass card
   ========================================================== */
.testi-wrap{
  position:relative; max-width:820px; margin:0 auto; text-align:center;
  background:var(--white); border:1px solid var(--slate-200); border-radius:var(--radius-lg);
  padding:56px 60px; box-shadow:var(--shadow-md);
}
.testi-track{ position:relative; min-height:230px; }
.testi-slide{
  position:absolute; inset:0; opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease);
  pointer-events:none;
}
.testi-slide.active{ opacity:1; transform:translateY(0); pointer-events:auto; }
.testi-quote{ font-family:var(--font-display); font-size:1.5rem; color:var(--navy-900); line-height:1.5; margin-bottom:26px; }
.testi-stars{ background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; display:flex; justify-content:center; gap:3px; margin-bottom:16px; }
.testi-stars svg{ stroke:var(--blue-500); }
.testi-person{ display:flex; align-items:center; justify-content:center; gap:12px; }
.testi-avatar{
  width:48px; height:48px; border-radius:50%; background:var(--grad-brand); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700;
  overflow:hidden;
}
.testi-avatar img{ width:100%; height:100%; object-fit:cover; }
.testi-person b{ display:block; color:var(--navy-900); font-size:.95rem; }
.testi-nav{ display:flex; justify-content:center; gap:10px; margin-top:34px; }
.testi-dot{ width:9px; height:9px; border-radius:50%; background:var(--slate-200); border:none; transition:all .3s; }
.testi-dot.active{ width:26px; border-radius:6px; background:var(--grad-brand); }

/* ==========================================================
   Tech marquee
   ========================================================== */
.marquee{ overflow:hidden; position:relative; padding:38px 0; border-top:1px solid var(--slate-200); border-bottom:1px solid var(--slate-200); }
.marquee-track{ display:flex; gap:16px; width:max-content; animation:marquee 32s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{
  font-family:var(--font-mono); font-size:.95rem; color:var(--slate-700); white-space:nowrap; display:flex; align-items:center; gap:10px;
  padding:10px 22px; border:1px solid var(--slate-200); border-radius:100px; background:var(--sky-50);
}
.marquee-track span::before{ content:"◆"; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; font-size:.6rem; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ==========================================================
   Contact
   ========================================================== */
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; }
.contact-info{ background:var(--grad-brand-deep); color:#fff; border-radius:var(--radius-lg); padding:48px; position:relative; overflow:hidden; box-shadow:var(--shadow-glow); }
.contact-info::before{ content:""; position:absolute; inset:0; background:radial-gradient(400px 300px at 100% 0%, rgba(255,255,255,.18), transparent 60%); }
.contact-info > *{ position:relative; z-index:1; }
.contact-info p{ color:rgba(255,255,255,.68); font-family: "Bodoni Moda", serif; text-align: justify; }
.contact-item{ display:flex; gap:14px; align-items:flex-start; margin-top:22px; }
.contact-item .ico{ width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-item .ico svg{ width:18px; height:18px; }
.contact-item b{ display:block; font-size:.95rem; }
.contact-item span{ color:rgba(255,255,255,.65); font-size:.88rem; }
.social-row{ display:flex; gap:10px; margin-top:32px; }
.social-row a{ width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; transition:background .3s, transform .3s; }
.social-row a:hover{ background:#fff; color:var(--navy-900); transform:translateY(-3px); }
.social-row svg{ width:16px; height:16px; }

.field{ position:relative; margin-bottom:22px; }
.field input, .field select, .field textarea{
  width:100%; padding:16px 18px; border-radius:var(--radius-sm); border:1.5px solid var(--slate-200);
  font-family:var(--font-body); font-size:.95rem; color:var(--slate-900); background:#fff;
  transition:border-color .3s, box-shadow .3s;
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--violet-500); box-shadow:0 0 0 4px var(--blue-100);
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-note{ font-size:.82rem; color:var(--slate-500); margin-top:10px; }
.form-success, .form-error{
  padding:16px 20px; border-radius:var(--radius-sm); font-size:.9rem; margin-bottom:20px; display:none;
}
.form-success{ background:#EAFBF3; color:#0B815A; border:1px solid #B7ECD8; }
.form-error{ background:#FDECEC; color:#B42318; border:1px solid #F6C1BE; }

/* ==========================================================
   Footer
   ========================================================== */
.site-footer{ background:var(--navy-950); color:rgba(255,255,255,.6); padding:74px 0 30px; position:relative; }
.site-footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--grad-brand); }
.footer-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:50px; }
.footer-brand p{ max-width:320px; color:rgba(255,255,255,.55); font-size:.92rem; font-family: "Bodoni Moda", serif; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding-top:26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.82rem; }
.footer-bottom a{ color:rgba(255,255,255,.5); }
.back-to-top{
  position:fixed; right:26px; bottom:26px; width:48px; height:48px; border-radius:50%;
  background:var(--grad-brand); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-glow); opacity:0; pointer-events:none; transform:translateY(10px);
  transition:all .35s var(--ease-spring); z-index:90; border:none;
}
.back-to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.back-to-top:hover{ transform:translateY(-4px) scale(1.06); }
.back-to-top svg{ width:20px; height:20px; }

/* ==========================================================
   Lightbox
   ========================================================== */
.lightbox{
  position:fixed; inset:0; z-index:300;
  background:rgba(5,18,43,.94); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:70px 30px;
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease), visibility 0s linear .35s;
}
.lightbox.open{ opacity:1; visibility:visible; transition:opacity .35s var(--ease); }
.lightbox-content{ margin:0; max-width:min(92vw,1100px); display:flex; flex-direction:column; align-items:center; }
.lightbox-content img{
  max-width:100%; max-height:76vh; width:auto; height:auto; object-fit:contain;
  border-radius:var(--radius-md); box-shadow:var(--shadow-lg); background:var(--navy-900);
  transform:scale(.94); transition:transform .4s var(--ease-spring);
}
.lightbox.open .lightbox-content img{ transform:scale(1); }
.lightbox-content figcaption{ color:#fff; font-family:var(--font-display); font-size:1.1rem; margin-top:18px; text-align:center; }
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:fixed; width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .3s, transform .3s; backdrop-filter:blur(6px); z-index:2;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ background:rgba(255,255,255,.2); transform:scale(1.06); }
.lightbox-close svg, .lightbox-prev svg, .lightbox-next svg{ width:18px; height:18px; }
.lightbox-close{ top:26px; right:26px; }
.lightbox-prev{ left:26px; top:50%; transform:translateY(-50%); }
.lightbox-prev:hover{ transform:translateY(-50%) scale(1.06); }
.lightbox-next{ right:26px; top:50%; transform:translateY(-50%); }
.lightbox-next:hover{ transform:translateY(-50%) scale(1.06); }
@media (max-width: 640px){
  .lightbox{ padding:90px 16px 40px; }
  .lightbox-close{ top:14px; right:14px; width:40px; height:40px; }
  .lightbox-prev{ left:10px; width:40px; height:40px; }
  .lightbox-next{ right:10px; width:40px; height:40px; }
}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 980px){
  .hero .container{ grid-template-columns:1fr; }
  .about-grid, .contact-grid{ grid-template-columns:1fr; }
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .service-card:nth-child(1){ grid-column:span 2; grid-row:span 1; }
  .folio-grid{ grid-template-columns:repeat(2,1fr); }
  .blog-grid{ grid-template-columns:repeat(2,1fr); }
  .progress-bar{ grid-template-columns:repeat(2,1fr); gap:30px 0; }
  .progress-item:nth-child(2){ border-right:none; }
  .progress-item{ margin-bottom:10px; }
  .mv-grid{ grid-template-columns:1fr; }
  .testi-wrap{ padding:40px 28px; }
}
@media (max-width: 760px){
  .main-nav, .header-cta .btn-outline{ display:none; }
  .nav-toggle{ display:block; }
  .site-header .container{ border-radius:24px; }
  .site-header.nav-open .main-nav{
    display:flex; position:absolute; top:100%; left:0; right:0; margin-top:10px; background:#fff; flex-direction:column;
    padding:16px; border-radius:20px; box-shadow:var(--shadow-md); gap:0;
  }
  .site-header.nav-open .main-nav ul{ flex-direction:column; gap:0; }
  .site-header.nav-open .main-nav a{ display:block; padding:14px 12px; border-bottom:1px solid var(--slate-200); color:var(--slate-700); border-radius:0; }
  .services-grid, .folio-grid, .blog-grid{ grid-template-columns:1fr; }
  .service-card:nth-child(1){ grid-column:span 1; }
  .folio-item:nth-child(3n+1){ grid-row:auto; aspect-ratio:1149/1369; }
  .field-row{ grid-template-columns:1fr; }
  .about-badge{ position:static; margin-top:20px; }
  .section{ padding:80px 0; }
}