/*
Theme Name: PR Shweta
Theme URI: https://prshweta.com
Author: PR Shweta Digital
Description: Premium digital marketing WordPress theme for PR Shweta. Elementor compatible.
Version: 2.0.0
Requires at least: 5.8
Tested up to: 6.5
License: GPL v2 or later
Text Domain: pr-shweta
Tags: business, elementor, animations, custom-colors, custom-logo
*/

/* ===================== VARIABLES ===================== */
:root {
  --navy:    #1B2F7E;
  --navy2:   #142366;
  --gold:    #F5A623;
  --gold2:   #E8950F;
  --dark:    #0C1220;
  --dark2:   #111827;
  --gray:    #F4F6FB;
  --border:  #E4E9F2;
  --text:    #2C3A5A;
  --muted:   #6B7A99;
  --white:   #FFFFFF;
  --radius:  10px;
  --radius-lg: 18px;
  --shadow:  0 4px 24px rgba(27,47,126,.10);
  --shadow-lg: 0 16px 56px rgba(27,47,126,.18);
  --trans:   all .35s cubic-bezier(.25,.46,.45,.94);
  --font-h:  'Plus Jakarta Sans', sans-serif;
  --font-b:  'Inter', sans-serif;
}

/* ===================== RESET ===================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: var(--font-b); color: var(--text); background: #fff; line-height: 1.65; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; transition: var(--trans); }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; }
h1,h2,h3,h4,h5 { font-family: var(--font-h); font-weight: 700; line-height: 1.2; color: var(--dark); }
h1 { font-size: clamp(2.2rem, 4.5vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); }
h3 { font-size: 1.2rem; }
p  { color: var(--muted); line-height: 1.75; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-h); font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 12px;
}
.eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--gold); border-radius: 2px; }

/* ===================== LAYOUT ===================== */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }
.sec  { padding: clamp(4rem, 8vw, 7rem) 0; }
.t-c  { text-align: center; }

/* ===================== BUTTONS ===================== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px; border-radius: 8px;
  font-family: var(--font-h); font-size: .875rem; font-weight: 600;
  border: none; transition: var(--trans); white-space: nowrap; position: relative; overflow: hidden;
}
.btn::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,.13); transform:scaleX(0); transform-origin:left; transition:transform .4s; }
.btn:hover::after { transform:scaleX(1); }
.btn-navy  { background: var(--navy); color: #fff; }
.btn-navy:hover  { background: var(--navy2); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(27,47,126,.3); }
.btn-gold  { background: var(--gold); color: #fff; }
.btn-gold:hover  { background: var(--gold2); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(245,166,35,.4); }
.btn-outline { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; }
.btn-outline-w { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.5); }
.btn-outline-w:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* ===================== KEYFRAMES ===================== */
@keyframes fadeUp    { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:none; } }
@keyframes fadeLeft  { from { opacity:0; transform:translateX(-30px); } to { opacity:1; transform:none; } }
@keyframes fadeRight { from { opacity:0; transform:translateX(30px); } to { opacity:1; transform:none; } }
@keyframes scaleIn   { from { opacity:0; transform:scale(.92); } to { opacity:1; transform:scale(1); } }
@keyframes float     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes spin      { to { transform:rotate(360deg); } }
@keyframes ticker    { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes ripple    { 0%{transform:scale(.6);opacity:.8} 100%{transform:scale(2.4);opacity:0} }
@keyframes cursorBlink { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes slideInLeft  { from{opacity:0;transform:translateX(-60px)} to{opacity:1;transform:none} }
@keyframes slideInRight { from{opacity:0;transform:translateX(60px)}  to{opacity:1;transform:none} }
@keyframes countUp   { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
@keyframes barGrow   { from{width:0} to{width:var(--w)} }
@keyframes orbitSpin { from{transform:rotate(0deg) translateX(110px) rotate(0deg)} to{transform:rotate(360deg) translateX(110px) rotate(-360deg)} }
@keyframes pulse     { 0%,100%{box-shadow:0 0 0 0 rgba(245,166,35,.4)} 70%{box-shadow:0 0 0 14px rgba(245,166,35,0)} }
@keyframes heroLine  { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes particleRise { 0%{transform:translateY(0) scale(1);opacity:.6} 100%{transform:translateY(-80px) scale(0);opacity:0} }

/* ===================== SCROLL REVEAL ===================== */
[data-anim] { opacity: 0; transition: opacity .65s ease, transform .65s ease; }
[data-anim="up"]    { transform: translateY(30px); }
[data-anim="left"]  { transform: translateX(-30px); }
[data-anim="right"] { transform: translateX(30px); }
[data-anim="scale"] { transform: scale(.93); }
[data-anim="fade"]  { transform: none; }
[data-anim].visible { opacity: 1; transform: none; }

/* ===================== TOPBAR ===================== */
.topbar { background: var(--navy); padding: 7px 0; font-size: .76rem; color: rgba(255,255,255,.75); }
.topbar .wrap { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.topbar-left { display:flex; gap:20px; align-items:center; }
.topbar-left a, .topbar-left span { color:rgba(255,255,255,.75); display:flex; align-items:center; gap:5px; }
.topbar-left a:hover { color:var(--gold); }
.topbar-social { display:flex; gap:7px; }
.topbar-social a { width:25px; height:25px; border-radius:50%; border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.7); font-size:.62rem; }
.topbar-social a:hover { background:var(--gold); border-color:var(--gold); color:#fff; }

/* ===================== HEADER ===================== */
.site-header { position:fixed; top:0; left:0; right:0; z-index:1000; transition:var(--trans); }
.header-bar { background:#fff; border-bottom:1px solid var(--border); transition:var(--trans); }
.site-header.scrolled .header-bar { box-shadow:var(--shadow); }
.site-header.scrolled .topbar { display:none; }
.header-bar .wrap { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-top:10px; padding-bottom:10px; }
.site-logo img { height:48px; width:auto; }
.nav { display:flex; align-items:center; gap:2px; }
.nav-item { position:relative; }
.nav-a { display:flex; align-items:center; gap:4px; padding:8px 13px; border-radius:var(--radius); font-family:var(--font-h); font-size:.84rem; font-weight:500; color:var(--text); white-space:nowrap; }
.nav-a:hover, .nav-a.active { color:var(--navy); background:var(--gray); }
.nav-a svg { transition:transform .25s; }
.nav-item:hover .nav-a svg { transform:rotate(180deg); }
.drop { position:absolute; top:calc(100% + 8px); left:0; background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); border:1px solid var(--border); padding:8px; min-width:200px; opacity:0; visibility:hidden; transform:translateY(8px); transition:var(--trans); z-index:200; }
.nav-item:hover .drop { opacity:1; visibility:visible; transform:translateY(0); }
.drop a { display:block; padding:8px 12px; font-size:.83rem; color:var(--text); border-radius:7px; transition:var(--trans); }
.drop a:hover { background:var(--gray); color:var(--navy); padding-left:16px; }
.mega { min-width:580px; max-width:calc(100vw - 40px); left:50%; margin-left:-290px; display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:16px; }
.mega-h { font-family:var(--font-h); font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--navy); padding:6px 12px 4px; }
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; }
.hamburger span { display:block; width:22px; height:2px; background:var(--navy); border-radius:2px; transition:var(--trans); }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* ===================== HERO ===================== */
.hero {
  min-height: 100vh;
  background: var(--dark);
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  padding-top: 130px; padding-bottom: 0;
}

/* Animated gradient background */
.hero-bg-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #0C1220 0%, #1a2a5e 40%, #0C1220 80%, #1a1a0d 100%);
  background-size: 300% 300%;
  animation: gradientShift 10s ease infinite;
}

/* Grid lines */
.hero-grid-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(245,166,35,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,166,35,.05) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Glowing orbs */
.hero-orb {
  position: absolute; border-radius: 50%;
  filter: blur(100px); pointer-events: none;
}
.orb-1 { width:700px; height:700px; top:-200px; right:-150px; background:radial-gradient(circle, rgba(27,47,126,.55) 0%, transparent 70%); }
.orb-2 { width:500px; height:500px; bottom:-100px; left:-100px; background:radial-gradient(circle, rgba(245,166,35,.12) 0%, transparent 70%); }
.orb-3 { width:300px; height:300px; top:40%; left:40%; background:radial-gradient(circle, rgba(27,47,126,.3) 0%, transparent 70%); animation:float 8s ease-in-out infinite; }

/* Floating particles */
.hero-particles { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hparticle {
  position:absolute; border-radius:50%;
  background:rgba(245,166,35,.5);
  animation: particleRise linear infinite;
}

.hero .wrap { position:relative; z-index:2; }
.hero-inner { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; padding-bottom:5rem; }

/* ---- Hero Left ---- */
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(245,166,35,.1); border:1px solid rgba(245,166,35,.25);
  border-radius:50px; padding:6px 16px 6px 6px; margin-bottom:1.5rem;
  animation: fadeUp .7s ease both;
}
.hero-eyebrow-dot {
  width:28px; height:28px; border-radius:50%; background:var(--gold);
  display:flex; align-items:center; justify-content:center; font-size:.7rem;
  position:relative; animation: pulse 2s ease-in-out infinite;
}
.hero-eyebrow-dot::after {
  content:''; position:absolute; inset:0; border-radius:50%; background:var(--gold); animation:ripple 2s ease-out infinite;
}
.hero-eyebrow span { font-family:var(--font-h); font-size:.74rem; font-weight:600; color:rgba(255,255,255,.85); letter-spacing:.05em; }

.hero-title {
  color:#fff; margin-bottom:1.3rem;
  animation: fadeUp .7s ease .1s both;
  font-size: clamp(2.4rem, 4.5vw, 4.2rem);
}
.hero-title .line-2 { display:block; position:relative; max-width:100%; }
.hero-title .typed-row {
  display:inline-flex; align-items:baseline; white-space:nowrap;
  font-size:clamp(1.7rem, 3.6vw, 2.6rem); max-width:100%; overflow:hidden;
}
.hero-title .accent { color:var(--gold); white-space:nowrap; }
.hero-title .line-underline {
  display:block; height:3px; border-radius:3px;
  background: var(--gold); margin-top:4px;
  transform-origin:left; animation: heroLine .8s ease .7s both;
}

.hero-sub { font-size:1rem; color:rgba(255,255,255,.62); max-width:460px; margin-bottom:2rem; line-height:1.8; animation: fadeUp .7s ease .2s both; }

.hero-ctas { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:2.5rem; animation: fadeUp .7s ease .3s both; }

/* Proof strip */
.hero-proof { display:flex; gap:2rem; padding-top:2rem; border-top:1px solid rgba(255,255,255,.1); animation: fadeUp .7s ease .4s both; flex-wrap:wrap; }
.hproof-n { font-family:var(--font-h); font-size:1.85rem; font-weight:800; color:var(--gold); line-height:1; }
.hproof-l { font-size:.73rem; color:rgba(255,255,255,.45); margin-top:3px; }

/* ---- Hero Right ---- */
.hero-visual { position:relative; animation: fadeRight .8s ease .2s both; }

.hero-illustration-wrap { position:relative; max-width:460px; margin:0 auto; }
.hero-illustration {
  position:relative; z-index:2; width:100%; height:auto; display:block;
  filter: drop-shadow(0 30px 55px rgba(0,0,0,.35));
  animation: heroFlow 7s ease-in-out infinite;
}
@keyframes heroFlow {
  0%   { transform: translateY(0) rotate(0deg); }
  25%  { transform: translateY(-14px) rotate(.6deg); }
  50%  { transform: translateY(-4px) rotate(-.5deg); }
  75%  { transform: translateY(-18px) rotate(.4deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* Big animated card */
.hero-card-main {
  background:rgba(255,255,255,.06); backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.12); border-radius:20px 20px 0 0;
  padding:28px; position:relative; overflow:hidden;
}
.hero-card-main::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--gold), transparent, var(--gold));
  animation: gradientShift 3s linear infinite; background-size:200%;
}
.hc-label { font-size:.76rem; color:rgba(255,255,255,.5); font-family:var(--font-h); margin-bottom:4px; }
.hc-big { font-family:var(--font-h); font-size:3rem; font-weight:800; color:#fff; line-height:1; }
.hc-chip { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:50px; background:rgba(52,199,89,.15); border:1px solid rgba(52,199,89,.3); color:#34C759; font-size:.72rem; font-weight:600; margin-top:8px; }

/* Skill bars inside card */
.skill-bars { margin-top:20px; display:flex; flex-direction:column; gap:10px; }
.skill-bar-row { display:flex; flex-direction:column; gap:4px; }
.skill-bar-info { display:flex; justify-content:space-between; font-size:.72rem; font-family:var(--font-h); }
.skill-bar-info span:first-child { color:rgba(255,255,255,.65); }
.skill-bar-info span:last-child { color:var(--gold); font-weight:700; }
.skill-bar-track { height:5px; background:rgba(255,255,255,.1); border-radius:5px; overflow:hidden; }
.skill-bar-fill { height:100%; border-radius:5px; background:linear-gradient(90deg, var(--navy), var(--gold)); width:0; transition:width 1.4s cubic-bezier(.25,.46,.45,.94); }

/* Floating mini cards */
.hero-mini-card {
  position:absolute; background:#fff; border-radius:12px;
  padding:12px 16px; box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:10px;
  font-size:.82rem; font-weight:600; color:var(--dark);
  white-space:nowrap; animation:float 4s ease-in-out infinite;
  z-index:3;
}
.hmc-icon { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.mc1 { top:10px;  left:-50px; animation-delay:0s; }
.mc2 { top:72%;  right:-40px; animation-delay:1.8s; }

/* Orbit ring */
.hero-orbit {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:340px; height:340px; border-radius:50%; z-index:1;
  border:1.5px dashed rgba(245,166,35,.2);
  animation:spin 20s linear infinite;
}

/* ===================== TICKER ===================== */
.ticker-bar { background:var(--gold); padding:10px 0; overflow:hidden; }
.ticker-track { display:flex; width:max-content; animation:ticker 30s linear infinite; }
.ticker-i { display:flex; align-items:center; gap:8px; padding:0 20px; font-family:var(--font-h); font-size:.8rem; font-weight:600; color:#fff; white-space:nowrap; }
.t-dot { width:4px; height:4px; background:rgba(255,255,255,.6); border-radius:50%; }

/* ===================== ABOUT ===================== */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.about-vis { position:relative; }
.about-img-bg { background:var(--gray); border-radius:var(--radius-lg); aspect-ratio:1; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.about-img-bg::after { content:''; position:absolute; bottom:0; right:0; width:55%; height:55%; background:var(--gold); border-radius:var(--radius-lg) 0 0 0; opacity:.07; }
.about-logo-large { max-width:200px; position:relative; z-index:1; }
.about-photo { width:100%; height:100%; object-fit:cover; position:relative; z-index:1; display:block; }
.about-stat-card { position:absolute; bottom:-20px; right:-20px; background:var(--navy); color:#fff; border-radius:var(--radius-lg); padding:18px 22px; box-shadow:var(--shadow-lg); animation:float 5s ease-in-out infinite; }
.asc-num { font-family:var(--font-h); font-size:2.4rem; font-weight:800; color:var(--gold); line-height:1; }
.asc-lbl { font-size:.73rem; opacity:.7; margin-top:2px; }
.about-ring { position:absolute; top:-18px; left:-18px; width:100px; height:100px; border-radius:50%; border:2px dashed rgba(245,166,35,.35); animation:spin 16s linear infinite; }
.about-points { margin-top:2rem; display:flex; flex-direction:column; gap:12px; }
.apoint { display:flex; align-items:flex-start; gap:14px; padding:16px; background:var(--gray); border-radius:var(--radius); border:1.5px solid var(--border); transition:var(--trans); }
.apoint:hover { border-color:var(--gold); background:#fff; box-shadow:var(--shadow); transform:translateX(6px); }
.apoint-icon { width:40px; height:40px; border-radius:10px; background:rgba(27,47,126,.08); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.apoint h4 { font-size:.9rem; margin-bottom:2px; }
.apoint p { font-size:.8rem; margin:0; }

/* ===================== STATS STRIP ===================== */
.stats-strip { background:var(--navy); padding:3.5rem 0; }
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.08); border-radius:var(--radius-lg); overflow:hidden; }
.s-cell { text-align:center; padding:2.2rem 1rem; background:rgba(255,255,255,.03); transition:var(--trans); }
.s-cell:hover { background:rgba(245,166,35,.08); }
.s-num { font-family:var(--font-h); font-size:2.8rem; font-weight:800; color:var(--gold); line-height:1; margin-bottom:6px; }
.s-lbl { font-size:.82rem; color:rgba(255,255,255,.55); }

/* ===================== SERVICES ===================== */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; }
.svc { display:block; background:#fff; border-radius:20px; overflow:hidden; position:relative; border:1px solid var(--border); box-shadow:0 10px 30px rgba(27,47,126,.07); transition:var(--trans); text-decoration:none; color:inherit; }
.svc:hover { transform:translateY(-6px); box-shadow:0 22px 50px rgba(27,47,126,.16); }
.svc::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--svc-accent, var(--gold)); z-index:2; }
.svc-img { position:relative; height:190px; background:#20232B; overflow:hidden; }
.svc-img svg { width:100%; height:100%; display:block; }
.svc-img .svc-photo { width:100%; height:100%; object-fit:cover; display:block; transition:var(--trans); }
.svc:hover .svc-img .svc-photo { transform:scale(1.06); }
.svc-badge { position:absolute; top:14px; left:14px; background:rgba(255,255,255,.92); font-family:var(--font-h); font-size:.68rem; font-weight:700; letter-spacing:.08em; color:var(--navy); padding:4px 11px; border-radius:20px; z-index:3; }
.svc-body { padding:1.6rem 1.8rem 1.9rem; }
.svc-body h3 { font-size:1.05rem; margin-bottom:.5rem; }
.svc-body p { font-size:.83rem; line-height:1.65; margin-bottom:1rem; color:var(--muted); }
.svc-tags { display:flex; flex-wrap:wrap; gap:5px; }
.svc-tag { padding:3px 10px; border-radius:20px; background:var(--gray); border:1px solid var(--border); font-size:.7rem; font-weight:500; color:var(--text); }
.svc:hover .svc-tag { background:rgba(27,47,126,.07); border-color:rgba(27,47,126,.15); }

/* ===================== PROJECTS ===================== */
.projects-sec { background:var(--dark2); }

.proj-tabs {
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:3rem;
}
.proj-tab {
  padding:9px 22px; border-radius:50px; border:1.5px solid rgba(255,255,255,.12);
  background:transparent; color:rgba(255,255,255,.55); font-family:var(--font-h);
  font-size:.82rem; font-weight:600; cursor:pointer; transition:var(--trans);
}
.proj-tab:hover { border-color:rgba(245,166,35,.4); color:rgba(255,255,255,.85); }
.proj-tab.active { background:var(--gold); border-color:var(--gold); color:#fff; }

.proj-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
}

.proj-card {
  display:block; border-radius:var(--radius-lg); overflow:hidden;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  transition:var(--trans); position:relative; text-decoration:none; color:inherit;
}
.proj-card:hover { transform:translateY(-6px); box-shadow:0 20px 60px rgba(0,0,0,.4); border-color:rgba(245,166,35,.25); }

/* Thumbnail / mockup area */
.proj-thumb {
  position:relative; overflow:hidden;
  aspect-ratio:16/10; background:linear-gradient(135deg, var(--navy), var(--dark));
  display:flex; align-items:center; justify-content:center;
}
.proj-thumb-inner {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  padding:20px; position:relative;
}
.proj-thumb-photo { background-size:cover; background-position:center; padding:0; transition:transform .5s ease; }
.proj-card:hover .proj-thumb-photo { transform:scale(1.06); }

/* Instagram mockup */
.ig-mockup {
  width:140px; background:#fff; border-radius:16px;
  padding:12px; box-shadow:0 12px 40px rgba(0,0,0,.4);
  transition:var(--trans);
}
.proj-card:hover .ig-mockup { transform:scale(1.04) rotate(-1deg); }
.ig-header { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.ig-avatar { width:22px; height:22px; border-radius:50%; background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366); }
.ig-handle { font-size:.55rem; font-weight:700; color:#111; font-family:var(--font-h); }
.ig-img { width:100%; aspect-ratio:1; border-radius:6px; margin-bottom:6px; }
.ig-actions { display:flex; gap:5px; font-size:.6rem; color:#555; margin-bottom:5px; }
.ig-caption { font-size:.5rem; color:#333; line-height:1.4; }
.ig-likes { font-size:.52rem; font-weight:700; color:#111; margin-top:3px; }

/* Web mockup */
.web-mockup {
  width:200px; background:#fff; border-radius:10px; overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.5); transition:var(--trans);
}
.proj-card:hover .web-mockup { transform:scale(1.04); }
.web-bar { background:#f1f3f4; padding:5px 8px; display:flex; align-items:center; gap:4px; border-bottom:1px solid #e0e0e0; }
.web-dot { width:5px; height:5px; border-radius:50%; }
.web-url { flex:1; background:white; border-radius:3px; height:8px; margin:0 4px; }
.web-body { padding:8px; }
.web-hero-block { height:40px; border-radius:5px; margin-bottom:6px; }
.web-row { display:flex; gap:4px; margin-bottom:4px; }
.web-block { height:8px; border-radius:3px; flex:1; }
.web-block.short { flex:.6; }
.web-cols { display:grid; grid-template-columns:1fr 1fr 1fr; gap:4px; margin-top:6px; }
.web-col-block { height:28px; border-radius:4px; }

/* Project badge */
.proj-badge {
  position:absolute; top:12px; left:12px; z-index:2;
  padding:4px 10px; border-radius:20px; font-size:.68rem; font-weight:700;
  font-family:var(--font-h);
}
.badge-ig { background:linear-gradient(45deg,#f09433,#e6683c,#dc2743); color:#fff; }
.badge-web { background:var(--navy); color:#fff; }
.badge-brand { background:var(--gold); color:#fff; }

/* Overlay on hover */
.proj-overlay {
  position:absolute; inset:0; background:rgba(27,47,126,.85);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:var(--trans);
}
.proj-card:hover .proj-overlay { opacity:1; }
.proj-overlay-btn {
  background:#fff; color:var(--navy); border:none; border-radius:8px;
  padding:10px 20px; font-family:var(--font-h); font-size:.82rem; font-weight:700;
  cursor:pointer; transform:translateY(10px); transition:var(--trans);
}
.proj-card:hover .proj-overlay-btn { transform:translateY(0); }

.proj-info { padding:16px 18px; }
.proj-info h4 { font-size:.95rem; color:#fff; margin-bottom:4px; font-family:var(--font-h); }
.proj-info p { font-size:.78rem; color:rgba(255,255,255,.45); margin:0 0 10px; }
.proj-meta { display:flex; gap:6px; flex-wrap:wrap; }

.proj-empty-state {
  grid-column:1/-1; text-align:center; padding:4rem 2rem; border:1.5px dashed rgba(255,255,255,.15);
  border-radius:var(--radius-lg); color:rgba(255,255,255,.5);
}
.proj-empty-state i { font-size:2rem; color:rgba(255,255,255,.25); margin-bottom:1rem; display:block; }
.proj-empty-state p { font-size:1rem; color:rgba(255,255,255,.7); margin-bottom:.4rem; }
.proj-empty-state span { font-size:.82rem; }
.proj-empty-state strong { color:var(--gold); }
.proj-tag { padding:3px 9px; border-radius:20px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); font-size:.68rem; color:rgba(255,255,255,.55); }

/* ===================== PROCESS ===================== */
.process-sec { background:var(--dark); }
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.06); border-radius:var(--radius-lg); overflow:hidden; margin-top:3rem; }
.proc { padding:2.5rem 1.8rem; background:rgba(255,255,255,.02); transition:var(--trans); }
.proc:hover { background:rgba(245,166,35,.05); }
.proc-n { font-family:var(--font-h); font-size:2.8rem; font-weight:800; color:rgba(245,166,35,.15); line-height:1; margin-bottom:1rem; transition:var(--trans); }
.proc:hover .proc-n { color:rgba(245,166,35,.35); }
.proc-icon { font-size:1.8rem; margin-bottom:1rem; }
.proc h3 { color:#fff; font-size:1rem; margin-bottom:.5rem; }
.proc p { font-size:.82rem; color:rgba(255,255,255,.45); margin:0; line-height:1.7; }

/* ===================== WHY US ===================== */
.why-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:4rem; align-items:center; }
.why-list { display:flex; flex-direction:column; gap:12px; margin-top:2rem; }
.why-item { display:flex; align-items:flex-start; gap:14px; padding:16px; border-radius:var(--radius); background:var(--gray); border:1.5px solid var(--border); transition:var(--trans); }
.why-item:hover { border-color:var(--navy); box-shadow:var(--shadow); background:#fff; }
.why-check { width:36px; height:36px; border-radius:8px; flex-shrink:0; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.9rem; }
.why-item h4 { font-size:.9rem; margin-bottom:2px; }
.why-item p { font-size:.8rem; margin:0; }
.why-vis { background:var(--navy); border-radius:var(--radius-lg); padding:3rem 2rem; text-align:center; position:relative; overflow:hidden; }
.why-vis::before { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px); background-size:20px 20px; }
.why-vis-logo { max-width:120px; margin:0 auto 1.5rem; filter:brightness(0) invert(1); opacity:.9; position:relative; z-index:1; }
.why-vis-title { font-family:var(--font-h); font-size:1.2rem; font-weight:700; color:#fff; margin-bottom:.4rem; position:relative; z-index:1; }
.why-vis-sub { font-size:.8rem; color:rgba(255,255,255,.5); position:relative; z-index:1; margin-bottom:1.8rem; }
.why-badges { display:flex; flex-direction:column; gap:10px; position:relative; z-index:1; }
.wy-badge { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius); padding:12px 14px; text-align:left; transition:var(--trans); }
.wy-badge:hover { background:rgba(245,166,35,.1); border-color:rgba(245,166,35,.3); }
.wy-badge-icon { font-size:1.3rem; flex-shrink:0; }
.wy-badge-text { font-family:var(--font-h); font-size:.82rem; color:rgba(255,255,255,.85); font-weight:600; }
.wy-badge-sub { font-size:.7rem; color:rgba(255,255,255,.4); margin-top:1px; }

.why-vis-photo-wrap { padding:0; background:none; }
.why-vis-photo-wrap::before { display:none; }
.why-vis-photo { width:100%; height:520px; object-fit:cover; border-radius:var(--radius-lg); display:block; }
.why-photo-badge {
  position:absolute; left:1.5rem; bottom:1.5rem; z-index:2; max-width:260px;
  display:flex; align-items:center; gap:12px; background:#fff; border-radius:var(--radius);
  padding:14px 16px; box-shadow:var(--shadow-lg);
}
.why-photo-badge .wy-badge-text { color:var(--dark); }
.why-photo-badge .wy-badge-sub { color:var(--muted); }
@media(max-width:600px) {
  .why-vis-photo { height:340px; }
  .why-photo-badge { position:static; margin-top:1rem; max-width:none; }
}

/* ===================== TESTIMONIALS ===================== */
.testi-sec { background:var(--gray); }
.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.tcard { background:#fff; border-radius:var(--radius-lg); padding:2rem; border:1.5px solid var(--border); transition:var(--trans); }
.tcard:hover { box-shadow:var(--shadow-lg); border-color:var(--navy); transform:translateY(-5px); }
.tcard-stars { display:flex; gap:3px; color:var(--gold); font-size:.85rem; margin-bottom:1rem; }
.tcard-text { font-size:.88rem; line-height:1.75; color:var(--muted); margin-bottom:1.5rem; }
.tcard-author { display:flex; align-items:center; gap:12px; }
.tcard-av { width:42px; height:42px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-h); font-size:.9rem; font-weight:700; flex-shrink:0; }
.tcard-name { font-family:var(--font-h); font-size:.88rem; font-weight:600; color:var(--dark); }
.tcard-role { font-size:.76rem; color:var(--muted); }

/* ===================== CTA BAND ===================== */
.cta-band { background:var(--navy); padding:5.5rem 0; position:relative; overflow:hidden; }
.cta-band::before { content:''; position:absolute; right:-120px; top:-120px; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle, rgba(245,166,35,.12) 0%, transparent 70%); }
.cta-band::after { content:''; position:absolute; left:-80px; bottom:-80px; width:350px; height:350px; border-radius:50%; background:radial-gradient(circle, rgba(245,166,35,.08) 0%, transparent 70%); }
.cta-inner { position:relative; z-index:1; text-align:center; }
.cta-inner h2 { color:#fff; margin-bottom:.9rem; }
.cta-inner p { color:rgba(255,255,255,.6); max-width:540px; margin:0 auto 2.2rem; font-size:.95rem; }
.cta-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ===================== CONTACT ===================== */
.contact-grid { display:grid; grid-template-columns:1fr 1.6fr; gap:4rem; align-items:start; }
.contact-cards { display:flex; flex-direction:column; gap:12px; }
.cc { display:flex; align-items:center; gap:14px; background:var(--gray); border:1.5px solid var(--border); border-radius:var(--radius); padding:16px; transition:var(--trans); }
.cc:hover { border-color:var(--navy); background:#fff; box-shadow:var(--shadow); transform:translateX(4px); }
.cc-icon { width:44px; height:44px; border-radius:10px; flex-shrink:0; background:var(--navy); display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.cc-label { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:2px; font-weight:600; }
.cc-val { font-family:var(--font-h); font-size:.92rem; font-weight:600; color:var(--dark); }
.cc-val a { color:inherit; }
.cc-val a:hover { color:var(--navy); }
.social-row { display:flex; gap:8px; flex-wrap:wrap; }
.soc-a { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.9rem; transition:var(--trans); }
.soc-a:hover { transform:translateY(-3px); box-shadow:0 6px 20px rgba(0,0,0,.2); }
.cf-wrap { background:#fff; border-radius:var(--radius-lg); padding:2.5rem; box-shadow:var(--shadow); border:1px solid var(--border); }
.cf-title { font-size:1.2rem; margin-bottom:1.5rem; }
.fg { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fi { display:flex; flex-direction:column; gap:5px; }
.fi.full { grid-column:1/-1; }
.fi label { font-size:.78rem; font-weight:600; color:var(--text); }
.fi input, .fi select, .fi textarea { width:100%; padding:11px 14px; border:1.5px solid var(--border); border-radius:var(--radius); font-family:var(--font-b); font-size:.875rem; color:var(--dark); background:var(--gray); outline:none; transition:var(--trans); }
.fi input:focus, .fi select:focus, .fi textarea:focus { border-color:var(--navy); background:#fff; box-shadow:0 0 0 3px rgba(27,47,126,.08); }
.fi textarea { resize:vertical; min-height:100px; }
.cf-submit { width:100%; padding:14px; margin-top:14px; background:var(--navy); color:#fff; border:none; border-radius:var(--radius); font-family:var(--font-h); font-size:.9rem; font-weight:700; transition:var(--trans); }
.cf-submit:hover { background:var(--gold); transform:translateY(-1px); box-shadow:0 6px 20px rgba(245,166,35,.3); }

/* ===================== FOOTER ===================== */
.site-footer { background:var(--dark); }
.footer-main { padding:4.5rem 0 2.5rem; border-bottom:1px solid rgba(255,255,255,.07); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:3rem; }
.fbrand img { height:48px; filter:brightness(0) invert(1); opacity:.85; margin-bottom:1rem; }
.fbrand img.footer-logo-custom { filter:none; opacity:1; }
.fbrand p { font-size:.84rem; color:rgba(255,255,255,.45); line-height:1.75; margin-bottom:1.3rem; }
.f-social { display:flex; gap:8px; }
.f-social a { width:34px; height:34px; border-radius:8px; border:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.6); font-size:.8rem; transition:var(--trans); }
.f-social a:hover { background:var(--gold); border-color:var(--gold); color:#fff; transform:translateY(-2px); }
.fcol h5 { font-family:var(--font-h); font-size:.8rem; font-weight:700; color:rgba(255,255,255,.85); text-transform:uppercase; letter-spacing:.08em; margin-bottom:1rem; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.07); }
.flinks { display:flex; flex-direction:column; gap:8px; }
.flinks a { font-size:.83rem; color:rgba(255,255,255,.45); display:flex; align-items:center; gap:6px; transition:var(--trans); }
.flinks a:hover { color:var(--gold); padding-left:4px; }
.flinks a::before { content:'›'; color:var(--gold); opacity:.6; }
.fnl p { font-size:.82rem; color:rgba(255,255,255,.45); margin-bottom:.8rem; }
.fnl-form { display:flex; gap:6px; }
.fnl-form input { flex:1; padding:9px 12px; border-radius:7px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:#fff; font-size:.82rem; outline:none; }
.fnl-form input::placeholder { color:rgba(255,255,255,.3); }
.fnl-form input:focus { border-color:var(--gold); }
.fnl-form button { padding:9px 16px; background:var(--gold); color:#fff; border:none; border-radius:7px; font-weight:700; font-size:.82rem; transition:var(--trans); }
.fnl-form button:hover { background:var(--gold2); }
.f-contact-list { margin-top:1rem; display:flex; flex-direction:column; gap:8px; }
.fci { display:flex; align-items:flex-start; gap:8px; font-size:.8rem; color:rgba(255,255,255,.45); }
.fci i { color:var(--gold); margin-top:2px; flex-shrink:0; font-size:.8rem; }
.fci a { color:inherit; }
.fci a:hover { color:var(--gold); }
.footer-bottom { padding:1.4rem 0; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.footer-bottom p { font-size:.78rem; color:rgba(255,255,255,.3); margin:0; }
.fbl { display:flex; gap:1.5rem; }
.fbl a { font-size:.78rem; color:rgba(255,255,255,.3); transition:var(--trans); }
.fbl a:hover { color:var(--gold); }

/* ===================== FLOAT BUTTONS ===================== */
.wapp-btn { position:fixed; bottom:88px; right:20px; width:50px; height:50px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.5rem; box-shadow:0 4px 18px rgba(37,211,102,.45); z-index:998; transition:var(--trans); text-decoration:none; }
.wapp-btn::before { content:''; position:absolute; inset:0; border-radius:50%; background:#25D366; animation:ripple 2s ease-out infinite; }
.wapp-btn i { position:relative; z-index:1; }
.wapp-btn:hover { transform:scale(1.1); }
.btt-btn { position:fixed; bottom:24px; right:20px; width:42px; height:42px; border-radius:50%; background:var(--navy); color:#fff; border:none; display:flex; align-items:center; justify-content:center; font-size:1rem; box-shadow:var(--shadow); z-index:997; opacity:0; transform:translateY(12px); transition:var(--trans); }
.btt-btn.show { opacity:1; transform:translateY(0); }
.btt-btn:hover { background:var(--gold); transform:translateY(-2px); }

/* ===================== TOAST ===================== */
.toast { position:fixed; bottom:2rem; left:50%; transform:translateX(-50%); padding:12px 24px; border-radius:50px; font-family:var(--font-h); font-size:.875rem; font-weight:600; color:#fff; box-shadow:var(--shadow-lg); z-index:9999; animation:fadeUp .35s ease both; }
.toast-ok  { background:#34C759; }
.toast-err { background:#FF3B30; }

/* cursor blink */
.cursor-blink { display:inline-block; width:2px; height:.85em; background:var(--gold); vertical-align:middle; margin-left:2px; animation:cursorBlink 1s step-end infinite; }

/* ===================== RESPONSIVE ===================== */
@media(max-width:1024px) {
  .hero-inner { grid-template-columns:1fr; }
  .hero-visual { display:none; }
  .about-grid { grid-template-columns:1fr; gap:2.5rem; }
  .about-vis { max-width:360px; }
  .why-grid { grid-template-columns:1fr; }
  .services-grid { grid-template-columns:1fr 1fr; }
  .process-grid { grid-template-columns:1fr 1fr; }
  .testi-grid { grid-template-columns:1fr 1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .stats-row { grid-template-columns:1fr 1fr; }
  .proj-grid { grid-template-columns:1fr 1fr; }
  .mega { min-width:460px; max-width:calc(100vw - 40px); grid-template-columns:1fr 1fr; margin-left:-230px; }
}
@media(max-width:768px) {
  .topbar { display:none; }
  .nav { display:none; }
  .hamburger { display:flex; }
  .header-bar .btn { display:none; }
  .services-grid { grid-template-columns:1fr; }
  .process-grid { grid-template-columns:1fr; }
  .testi-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .fg { grid-template-columns:1fr; }
  .stats-row { grid-template-columns:1fr 1fr; }
  .hero-proof { flex-wrap:wrap; gap:1.2rem; }
  .proj-grid { grid-template-columns:1fr; }

  /* Hero - phone fixes */
  .hero { min-height:auto; padding-top:110px; padding-bottom:3rem; }
  .hero-inner { padding-bottom:0; gap:2rem; }
  .hero-title { font-size:clamp(2rem, 7.5vw, 2.6rem); }
  .hero-title .typed-row { font-size:clamp(1.5rem, 6.5vw, 2rem); }
  .hero-sub { font-size:.92rem; max-width:100%; }
  .hero-ctas { flex-direction:column; }
  .hero-ctas .btn { width:100%; justify-content:center; }
  .hero-proof { gap:1.4rem 1rem; padding-top:1.6rem; }

  /* Mobile nav dropdown / mega menu */
  .nav-item { width:100%; }
  .nav-a { width:100%; justify-content:space-between; }
  .drop {
    position:static; opacity:1; visibility:hidden; height:0; overflow:hidden;
    box-shadow:none; border:none; padding:0; margin:0; transform:none;
    transition:height .3s ease;
  }
  .nav-item.open .drop { visibility:visible; height:auto; padding:4px 0 10px 8px; }
  .nav-item.open .nav-a svg { transform:rotate(180deg); }
  .mega { min-width:0; max-width:none; left:auto; margin-left:0; grid-template-columns:1fr; gap:0; padding:0; }
  .mega-h:not(:first-child) { margin-top:8px; }
}
@media(max-width:480px) {
  .stats-row { grid-template-columns:1fr; }
  .proj-tabs { gap:6px; }
  .proj-tab { padding:8px 14px; font-size:.76rem; }
  .hero { padding-top:100px; }
  .hero-title { font-size:clamp(1.8rem, 8vw, 2.2rem); }
  .hero-title .typed-row { font-size:clamp(1.35rem, 7vw, 1.7rem); }
  .hero-eyebrow span { font-size:.68rem; }
  .hero-proof { justify-content:space-between; gap:1rem .5rem; }
  .hero-proof > div { flex:1 1 40%; }
}

/* ===================== PAGE BANNER (inner pages) ===================== */
.page-banner {
  position:relative; overflow:hidden;
  background:var(--dark);
  padding:160px 0 4rem;
  text-align:center;
}
.page-banner .eyebrow { display:inline-block; margin-bottom:.8rem; }
.page-banner h1 { color:#fff; margin-bottom:.7rem; }
.page-banner p { color:rgba(255,255,255,.6); max-width:520px; margin:0 auto; font-size:1rem; }

/* ===================== GALLERY PAGE ===================== */
.gallery-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.gallery-item {
  position:relative; display:block; aspect-ratio:1; border-radius:var(--radius-lg);
  overflow:hidden; background:var(--gray); box-shadow:var(--shadow);
}
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:var(--trans); }
.gallery-item:hover img { transform:scale(1.08); }
.gallery-placeholder { display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.85); font-size:1.8rem; }
.gallery-zoom {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(12,18,32,.45); color:#fff; font-size:1.3rem; opacity:0; transition:var(--trans);
}
.gallery-item:hover .gallery-zoom { opacity:1; }

.gallery-lightbox {
  position:fixed; inset:0; background:rgba(12,18,32,.92); z-index:2000;
  display:none; align-items:center; justify-content:center; padding:2rem;
}
.gallery-lightbox.open { display:flex; }
.gallery-lightbox img { max-width:100%; max-height:90vh; border-radius:var(--radius); box-shadow:var(--shadow-lg); }
.gallery-lightbox-close {
  position:absolute; top:20px; right:24px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff;
  font-size:1.1rem; cursor:pointer; transition:var(--trans);
}
.gallery-lightbox-close:hover { background:var(--gold); border-color:var(--gold); }

.video-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; align-items:start; }
.video-card { border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); background:#fff; }
.video-embed { position:relative; width:100%; aspect-ratio:16/9; background:#000; }
.video-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-card-reel { max-width:360px; margin:0 auto; overflow:visible; box-shadow:none; background:transparent; }
.video-card-reel .instagram-media { margin:0 !important; width:100% !important; min-width:0 !important; border-radius:var(--radius-lg) !important; box-shadow:var(--shadow) !important; }
.video-placeholder {
  aspect-ratio:16/9; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem; background:linear-gradient(135deg,var(--navy),var(--navy2)); color:rgba(255,255,255,.85);
  font-family:var(--font-h); font-size:.82rem; font-weight:600;
}
.video-play {
  width:56px; height:56px; border-radius:50%; background:var(--gold); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}

@media(max-width:1024px) {
  .gallery-grid { grid-template-columns:repeat(3,1fr); }
  .video-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px) {
  .page-banner { padding:130px 0 3rem; }
  .gallery-grid { grid-template-columns:1fr 1fr; gap:.8rem; }
  .video-grid { grid-template-columns:1fr; }
}
@media(max-width:480px) {
  .gallery-grid { grid-template-columns:1fr 1fr; }
}

/* ===================== SERVICE PAGES ===================== */
.service-breadcrumb { font-size:.8rem; color:rgba(255,255,255,.5); margin-bottom:1.2rem; }
.service-breadcrumb a { color:rgba(255,255,255,.75); }
.service-breadcrumb a:hover { color:#fff; }
.service-breadcrumb span { margin:0 6px; }

.service-layout { display:grid; grid-template-columns:1fr 320px; gap:3.5rem; align-items:start; }

.service-content h2 { font-size:1.5rem; margin:2.2rem 0 1rem; }
.service-content h2:first-child { margin-top:0; }
.service-content p { margin-bottom:1rem; }
.service-content ul, .service-content ol { margin:0 0 1.5rem; padding-left:1.3rem; color:var(--muted); }
.service-content ul li, .service-content ol li { margin-bottom:.6rem; line-height:1.7; }
.service-content ul { list-style:none; padding-left:0; }
.service-content ul li { padding-left:1.7rem; position:relative; }
.service-content ul li::before {
  content:'\2713'; position:absolute; left:0; top:1px; color:var(--gold); font-weight:700;
}
.service-content ol { counter-reset:prs-step; }
.service-content ol li { list-style:none; position:relative; padding-left:2.4rem; }
.service-content ol li::before {
  counter-increment:prs-step; content:counter(prs-step);
  position:absolute; left:0; top:0; width:1.7rem; height:1.7rem; border-radius:50%;
  background:var(--navy); color:#fff; font-family:var(--font-h); font-size:.78rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.service-content strong { color:var(--dark); }

.faq-list { display:flex; flex-direction:column; gap:10px; }
.faq-item { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.faq-q {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:16px 20px; background:var(--gray); border:none; text-align:left; cursor:pointer;
  font-family:var(--font-h); font-weight:600; font-size:.92rem; color:var(--dark); transition:var(--trans);
}
.faq-q i { color:var(--gold); transition:transform .3s ease; flex-shrink:0; }
.faq-item.open .faq-q i { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a p { padding:16px 20px 0; margin:0; color:var(--muted); font-size:.9rem; line-height:1.75; }
.faq-item.open .faq-a { max-height:300px; }
.faq-item.open .faq-a p { padding-bottom:18px; }

.service-sidebar { display:flex; flex-direction:column; gap:1.5rem; position:sticky; top:110px; }
.service-side-card { background:var(--gray); border-radius:var(--radius-lg); padding:1.7rem; }
.service-side-card h4 { font-size:1rem; margin-bottom:1rem; }
.service-side-card ul { list-style:none; display:flex; flex-direction:column; gap:.7rem; }
.service-side-card ul li { font-size:.86rem; color:var(--text); display:flex; align-items:center; gap:8px; }
.service-side-card ul li i { color:var(--gold); font-size:.8rem; }
.service-related-links { display:flex; flex-direction:column; gap:2px; }
.service-related-links a {
  display:flex; align-items:center; justify-content:space-between; padding:10px 4px;
  font-size:.86rem; color:var(--text); border-bottom:1px solid var(--border); transition:var(--trans);
}
.service-related-links a:last-child { border-bottom:none; }
.service-related-links a i { font-size:.72rem; opacity:.4; transition:var(--trans); }
.service-related-links a:hover { color:var(--navy); padding-left:8px; }
.service-related-links a:hover i { opacity:1; transform:translateX(2px); }

@media(max-width:900px) {
  .service-layout { grid-template-columns:1fr; }
  .service-sidebar { position:static; flex-direction:row; flex-wrap:wrap; }
  .service-side-card { flex:1 1 260px; }
}