/* =============================================
   SHIVRATNA TECHNOLOGY
   Full Design System — Dark & Light Themes
   ============================================= */

/* ─── THEME VARIABLES ─── */
:root {
  --bg:           #03060f;
  --bg-2:         #060c1a;
  --bg-3:         #091020;
  --bg-4:         #0d1628;
  --card:         #070d1c;
  --card-2:       #0a1222;
  --border:       rgba(255,255,255,0.07);
  --border-glow:  rgba(37,99,235,0.5);
  --text:         #d0d8f0;
  --text-muted:   #6070a0;
  --text-bright:  #ffffff;
  --primary:      #3b82f6;
  --primary-d:    #2563eb;
  --secondary:    #7c3aed;
  --accent:       #6d28d9;
  --p-glow:       rgba(59,130,246,0.28);
  --s-glow:       rgba(124,58,237,0.22);
  --gradient:     linear-gradient(135deg,#2563eb,#7c3aed);
  --gradient-r:   linear-gradient(135deg,#7c3aed,#2563eb);
  --gradient-2:   linear-gradient(135deg,#1d4ed8,#7c3aed);
  --gradient-3:   linear-gradient(135deg,#3b82f6,#6d28d9);
  --shadow:       0 25px 70px rgba(0,0,0,0.55);
  --shadow-sm:    0 8px 30px rgba(0,0,0,0.35);
  --glow-card:    0 0 40px rgba(59,130,246,0.12);
  --glow-strong:  0 0 60px rgba(59,130,246,0.25);
  --nav-bg:       rgba(3,6,15,0.88);
  --input-bg:     #060c1a;
  --scrollbar:    #3b82f6;
  --radius:       18px;
  --radius-sm:    12px;
  --radius-xs:    8px;
  --ease:         cubic-bezier(0.4,0,0.2,1);
  --t:            0.3s;
}

[data-theme="light"] {
  --bg:           #f0f4ff;
  --bg-2:         #e6eeff;
  --bg-3:         #ffffff;
  --bg-4:         #f5f8ff;
  --card:         #ffffff;
  --card-2:       #f8faff;
  --border:       rgba(0,0,0,0.07);
  --border-glow:  rgba(37,99,235,0.35);
  --text:         #1e2a4a;
  --text-muted:   #5a6a90;
  --text-bright:  #080f20;
  --primary:      #2563eb;
  --primary-d:    #1d4ed8;
  --secondary:    #7c3aed;
  --accent:       #6d28d9;
  --p-glow:       rgba(37,99,235,0.18);
  --s-glow:       rgba(124,58,237,0.18);
  --shadow:       0 20px 60px rgba(37,99,235,0.12);
  --shadow-sm:    0 6px 24px rgba(37,99,235,0.08);
  --glow-card:    0 0 30px rgba(37,99,235,0.08);
  --glow-strong:  0 0 50px rgba(37,99,235,0.15);
  --nav-bg:       rgba(255,255,255,0.95);
  --input-bg:     #f0f4ff;
  --scrollbar:    #2563eb;
}

/* ─── RESET & BASE ─── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  overflow-x:hidden;
  transition:background var(--t) var(--ease),color var(--t) var(--ease);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,textarea,select{font-family:inherit;outline:none;border:none;color:var(--text)}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg-2)}
::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:3px}
::selection{background:rgba(37,99,235,0.3);color:#fff}

/* ─── PRELOADER ─── */
#preloader{
  position:fixed;inset:0;background:var(--bg);z-index:9999;
  display:flex;align-items:center;justify-content:center;
  transition:opacity 0.6s var(--ease),visibility 0.6s var(--ease);
}
#preloader.hidden{opacity:0;visibility:hidden;pointer-events:none}
.preloader-inner{text-align:center}
.pl-logo{
  margin-bottom:2rem;
  filter:drop-shadow(0 0 20px var(--p-glow));
  animation:plPulse 1.4s ease-in-out infinite;
}
.pl-logo-img{
  height:110px;width:auto;object-fit:contain;display:block;margin:0 auto;
}
.pl-bar{width:220px;height:2px;background:var(--bg-4);border-radius:2px;overflow:hidden;margin:0 auto}
.pl-bar-inner{height:100%;background:var(--gradient);border-radius:2px;animation:plSlide 1.6s ease forwards}
.pl-dots{display:flex;justify-content:center;gap:6px;margin-top:1.2rem}
.pl-dot{width:6px;height:6px;border-radius:50%;background:var(--primary);animation:plDot 1.2s ease-in-out infinite}
.pl-dot:nth-child(2){animation-delay:0.2s}.pl-dot:nth-child(3){animation-delay:0.4s}
@keyframes plPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.7;transform:scale(0.97)}}
@keyframes plSlide{0%{width:0}100%{width:100%}}
@keyframes plDot{0%,100%{opacity:0.3;transform:scale(0.8)}50%{opacity:1;transform:scale(1.2)}}

/* ─── CURSOR ─── */
.cursor-dot{position:fixed;width:7px;height:7px;background:var(--primary);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%)}
.cursor-ring{position:fixed;width:34px;height:34px;border:1.5px solid rgba(124,92,252,0.5);border-radius:50%;pointer-events:none;z-index:9997;transform:translate(-50%,-50%);transition:width 0.3s,height 0.3s,border-color 0.3s,border-width 0.3s}
.cursor-ring.hov{width:54px;height:54px;border-color:var(--secondary);border-width:2px}
@media(hover:none){.cursor-dot,.cursor-ring{display:none}}

/* ─── THEME TOGGLE ─── */
.theme-toggle{
  width:42px;height:42px;border-radius:var(--radius-xs);
  background:var(--bg-4);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;color:var(--text-muted);
  transition:var(--t) var(--ease);cursor:pointer;flex-shrink:0;
}
.theme-toggle:hover{border-color:var(--primary);color:var(--primary);background:var(--p-glow)}
.theme-toggle .icon-sun,.theme-toggle .icon-moon{transition:opacity 0.3s,transform 0.3s}
[data-theme="light"] .icon-moon{display:none}
[data-theme="light"] .icon-sun{display:block}
:not([data-theme="light"]) .icon-moon{display:block}
:not([data-theme="light"]) .icon-sun{display:none}

/* ─── NAVBAR ─── */
#navbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease);
}
#navbar.scrolled{
  background:var(--nav-bg);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
}
.nav-container{max-width:1320px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;gap:1.5rem}
.nav-logo{display:flex;align-items:center;gap:0.8rem;flex-shrink:0}
.logo-img{
  height:48px;width:auto;object-fit:contain;flex-shrink:0;
  transition:transform var(--t) var(--ease),filter var(--t) var(--ease);
}
.nav-logo:hover .logo-img{transform:scale(1.06);filter:drop-shadow(0 4px 14px var(--p-glow))}
.nav-links{display:flex;align-items:center;gap:0.1rem;margin-left:auto}
.nav-links a{
  padding:0.5rem 0.95rem;font-size:0.86rem;font-weight:500;
  color:var(--text-muted);border-radius:var(--radius-xs);
  transition:color var(--t),background var(--t);position:relative;
}
.nav-links a::after{
  content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
  width:0;height:1.5px;background:var(--gradient);border-radius:1px;transition:width 0.3s;
}
.nav-links a:hover{color:var(--text-bright)}
.nav-links a:hover::after,.nav-links a.active::after{width:55%}
.nav-links a.active{color:var(--text-bright)}
.nav-right{display:flex;align-items:center;gap:0.75rem}
.nav-cta{
  padding:0.6rem 1.5rem;background:var(--gradient);
  border-radius:var(--radius-xs);font-size:0.86rem;font-weight:700;color:#fff;
  transition:var(--t) var(--ease);white-space:nowrap;
  box-shadow:0 4px 18px var(--p-glow);position:relative;overflow:hidden;
}
.nav-cta::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.18),transparent);
  opacity:0;transition:opacity 0.3s;
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 30px var(--p-glow)}
.nav-cta:hover::after{opacity:1}
.nav-toggle{display:none;flex-direction:column;gap:5px;padding:4px;width:36px}
.nav-toggle span{display:block;height:2px;background:var(--text);border-radius:2px;transition:var(--t) var(--ease)}
.mobile-menu{
  position:fixed;top:70px;left:0;right:0;
  background:var(--nav-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  z-index:999;padding:1.5rem 2rem;
  transform:translateY(-110%);opacity:0;transition:var(--t) var(--ease);
  border-bottom:1px solid var(--border);
}
.mobile-menu.open{transform:translateY(0);opacity:1}
.mobile-menu ul{display:flex;flex-direction:column;gap:0.4rem}
.mobile-menu a{display:block;padding:0.7rem 1rem;font-weight:500;color:var(--text-muted);border-radius:var(--radius-xs);transition:background var(--t),color var(--t)}
.mobile-menu a:hover,.mobile-menu a.active{background:rgba(124,92,252,0.1);color:var(--text-bright)}

/* ─── BUTTONS ─── */
.btn-primary{
  display:inline-flex;align-items:center;gap:0.55rem;
  padding:0.78rem 1.85rem;background:var(--gradient);
  border-radius:var(--radius-xs);font-weight:700;font-size:0.88rem;color:#fff;
  transition:var(--t) var(--ease);position:relative;overflow:hidden;
  box-shadow:0 4px 22px var(--p-glow);
}
.btn-primary::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,0.15);opacity:0;transition:opacity 0.3s}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 36px var(--p-glow)}
.btn-primary:hover::before{opacity:1}
.btn-primary.w-full{width:100%;justify-content:center}
.btn-ghost{
  display:inline-flex;align-items:center;gap:0.55rem;
  padding:0.78rem 1.85rem;background:transparent;
  border:1.5px solid var(--border);border-radius:var(--radius-xs);
  font-weight:600;font-size:0.88rem;color:var(--text);
  transition:var(--t) var(--ease);backdrop-filter:blur(8px);
}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary);background:rgba(124,92,252,0.07);transform:translateY(-2px)}
.btn-ghost.w-full{width:100%;justify-content:center}
.btn-light{
  display:inline-flex;align-items:center;gap:0.55rem;
  padding:0.78rem 1.85rem;background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.15);border-radius:var(--radius-xs);
  font-weight:600;font-size:0.88rem;color:#fff;transition:var(--t) var(--ease);
}
.btn-light:hover{background:rgba(255,255,255,0.18);transform:translateY(-2px)}
.btn-inline{
  display:inline-flex;align-items:center;gap:0.5rem;
  padding:0.75rem 2rem;background:transparent;
  border:1.5px solid var(--border);border-radius:var(--radius-xs);
  font-weight:600;font-size:0.88rem;color:var(--text);transition:var(--t) var(--ease);
}
.btn-inline:hover{border-color:var(--primary);color:var(--primary)}

/* ─── UTILS ─── */
.section{padding:6rem 0}
.container{max-width:1320px;margin:0 auto;padding:0 2rem}
.gradient-text{
  background:var(--gradient);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 12px var(--p-glow));
}
.section-tag{
  display:inline-block;padding:0.38rem 1rem;
  background:rgba(124,92,252,0.12);border:1px solid rgba(124,92,252,0.28);
  border-radius:50px;font-size:0.75rem;font-weight:700;
  color:var(--primary);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:0.9rem;
}
.section-title{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(1.9rem,3.5vw,2.75rem);font-weight:800;
  color:var(--text-bright);line-height:1.18;margin-bottom:1rem;
}
.section-sub{color:var(--text-muted);font-size:1rem;max-width:560px;margin:0 auto;line-height:1.8}
.section-header{text-align:center;margin-bottom:4rem}
.text-center{text-align:center}
.mt-2{margin-top:1.5rem}
.mt-3{margin-top:2.5rem}
.about-desc{color:var(--text-muted);line-height:1.9;font-size:0.95rem;margin-bottom:1rem}

/* ─── REVEAL ANIMATIONS ─── */
.reveal,.reveal-left,.reveal-right,.reveal-scale{
  opacity:0;transition:opacity 0.85s var(--ease),transform 0.85s var(--ease);
}
.reveal{transform:translateY(40px)}
.reveal-left{transform:translateX(-55px)}
.reveal-right{transform:translateX(55px)}
.reveal-scale{transform:scale(0.92)}
.reveal.on,.reveal-left.on,.reveal-right.on,.reveal-scale.on{opacity:1;transform:none}

/* ─── TECH GRID BG (reusable) ─── */
.tech-grid-bg{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
  background-image:
    linear-gradient(rgba(124,92,252,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,92,252,0.04) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}
[data-theme="light"] .tech-grid-bg{
  background-image:
    linear-gradient(rgba(100,80,240,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100,80,240,0.06) 1px, transparent 1px);
}

/* ─── HERO ─── */
.hero{
  min-height:100vh;display:flex;align-items:center;
  position:relative;overflow:hidden;padding-top:80px;
  background:var(--bg);
}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;opacity:0.8}
.hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(124,92,252,0.14) 0%,transparent 70%);
  pointer-events:none;
}
.hero-inner{
  position:relative;z-index:2;width:100%;
  max-width:1320px;margin:0 auto;padding:4rem 2rem;
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:0.6rem;
  padding:0.45rem 1.1rem;
  background:rgba(124,92,252,0.1);border:1px solid rgba(124,92,252,0.28);
  border-radius:50px;font-size:0.78rem;font-weight:700;color:var(--primary);
  margin-bottom:1.5rem;animation:heroFadeDown 0.8s var(--ease) both;
}
.hero-eyebrow span{width:7px;height:7px;background:var(--secondary);border-radius:50%;animation:pulse 1.6s ease infinite}
.hero-title{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(2.4rem,5.5vw,4rem);font-weight:900;
  color:var(--text-bright);line-height:1.1;
  margin-bottom:1.5rem;animation:heroFadeUp 0.8s var(--ease) 0.15s both;
}
.typed-wrap{display:block;min-height:1.15em}
.typed-text{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.typed-cursor{display:inline-block;width:3px;height:0.85em;background:var(--primary);margin-left:2px;vertical-align:middle;animation:blink 0.9s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.hero-sub{
  color:var(--text-muted);font-size:1.05rem;max-width:500px;
  line-height:1.85;margin-bottom:2.5rem;
  animation:heroFadeUp 0.8s var(--ease) 0.3s both;
}
.hero-actions{
  display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:3rem;
  animation:heroFadeUp 0.8s var(--ease) 0.45s both;
}
.hero-stats{
  display:flex;align-items:center;gap:2rem;
  animation:heroFadeUp 0.8s var(--ease) 0.6s both;
}
.hero-stat{text-align:center}
.hero-stat-num{
  font-family:'Space Grotesk',sans-serif;font-size:2.1rem;font-weight:900;
  color:var(--text-bright);display:inline;
}
.hero-stat-plus{color:var(--primary);font-size:1.4rem;font-weight:800}
.hero-stat-label{font-size:0.75rem;color:var(--text-muted);margin-top:2px;letter-spacing:0.3px}
.hero-stat-sep{width:1px;height:44px;background:var(--border)}
@keyframes heroFadeDown{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
@keyframes heroFadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* Hero Visual */
.hero-visual{display:flex;align-items:center;justify-content:center;animation:heroFadeRight 1s var(--ease) 0.3s both}
@keyframes heroFadeRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
.hero-device-wrap{position:relative;width:360px;height:440px}
.hero-phone{
  width:230px;height:400px;
  background:linear-gradient(160deg,var(--bg-3),var(--bg-4));
  border:1px solid var(--border);border-radius:36px;overflow:hidden;
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  box-shadow:var(--shadow),0 0 0 1px rgba(124,92,252,0.15),inset 0 0 40px rgba(124,92,252,0.04);
}
.phone-notch{width:72px;height:5px;background:rgba(255,255,255,0.1);border-radius:3px;margin:1rem auto 0.8rem}
.phone-screen-inner{padding:0.5rem 1rem}
.phone-header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.ph-label{font-size:0.7rem;font-weight:700;color:var(--text-muted)}
.ph-badge{font-size:0.65rem;font-weight:700;padding:2px 8px;background:rgba(0,229,184,0.15);color:var(--secondary);border-radius:50px}
.phone-cards{display:flex;gap:0.5rem;margin-bottom:0.8rem}
.ph-card{flex:1;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:700;color:#fff}
.ph-card-a{background:linear-gradient(135deg,#7c5cfc,#a855f7)}
.ph-card-b{background:linear-gradient(135deg,#00e5b8,#00b89c)}
.phone-chart{height:80px;display:flex;align-items:flex-end;gap:5px;padding:0 4px;margin-bottom:0.8rem}
.pc-bar{flex:1;border-radius:4px 4px 0 0;background:var(--gradient);animation:barPulse 2.2s ease infinite alternate}
@keyframes barPulse{0%{transform:scaleY(0.65)}100%{transform:scaleY(1)}}
.phone-list{display:flex;flex-direction:column;gap:5px}
.pl-row{height:10px;border-radius:5px;background:rgba(255,255,255,0.07)}
.pl-row.short{width:65%}
.pl-row.shorter{width:45%}
/* floating chips */
.fchip{
  position:absolute;display:flex;align-items:center;gap:0.5rem;
  padding:0.55rem 0.95rem;border-radius:12px;
  background:var(--card-2);border:1px solid var(--border);
  font-size:0.78rem;font-weight:700;color:var(--text-bright);
  white-space:nowrap;backdrop-filter:blur(12px);box-shadow:var(--shadow-sm),var(--glow-card);
}
.fchip i{font-size:0.9rem;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.fchip-1{top:8%;left:-44px;animation:fl1 3.2s ease-in-out infinite}
.fchip-2{bottom:22%;right:-48px;animation:fl2 3.8s ease-in-out infinite}
.fchip-3{bottom:4%;left:-24px;animation:fl1 4.5s ease-in-out 0.5s infinite}
@keyframes fl1{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes fl2{0%,100%{transform:translateY(0)}50%{transform:translateY(14px)}}
/* scroll hint */
.scroll-hint{
  position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:0.5rem;
  animation:fadeIn 1s ease 1.8s both;z-index:2;
}
.scroll-mouse{width:22px;height:34px;border:2px solid var(--border);border-radius:12px;display:flex;justify-content:center;padding-top:5px}
.scroll-wheel{width:3px;height:7px;background:var(--primary);border-radius:2px;animation:scrollW 1.6s ease-in-out infinite}
.scroll-hint span{font-size:0.65rem;color:var(--text-muted);letter-spacing:2px;text-transform:uppercase}
@keyframes scrollW{0%{transform:translateY(0);opacity:1}100%{transform:translateY(10px);opacity:0}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.6;transform:scale(0.85)}}

/* ─── TICKER ─── */
.ticker-wrap{
  background:var(--bg-2);border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);overflow:hidden;padding:1rem 0;
  position:relative;
}
.ticker-wrap::before,.ticker-wrap::after{
  content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;
}
.ticker-wrap::before{left:0;background:linear-gradient(to right,var(--bg-2),transparent)}
.ticker-wrap::after{right:0;background:linear-gradient(to left,var(--bg-2),transparent)}
.ticker-track{display:flex;width:max-content;animation:ticker 28s linear infinite}
.ticker-track:hover{animation-play-state:paused}
.ticker-track span{font-size:0.83rem;font-weight:600;color:var(--text-muted);white-space:nowrap;padding:0 1.5rem;transition:color 0.3s}
.ticker-track span:hover{color:var(--text-bright)}
.ticker-sep{color:var(--primary) !important;padding:0 !important;opacity:0.7}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ─── ABOUT TEASER GRID ─── */
.about-teaser-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.about-points{display:flex;flex-direction:column;gap:1rem;margin:1.5rem 0}
.about-point{display:flex;gap:1rem;align-items:flex-start;padding:0.85rem 1rem;border-radius:var(--radius-sm);border:1px solid transparent;transition:background var(--t),border-color var(--t)}
.about-point:hover{background:rgba(124,92,252,0.06);border-color:rgba(124,92,252,0.18)}
.ap-icon{
  width:42px;height:42px;border-radius:10px;flex-shrink:0;
  background:rgba(124,92,252,0.12);border:1px solid rgba(124,92,252,0.22);
  display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:0.95rem;
  transition:background var(--t),border-color var(--t),color var(--t);
}
.about-point:hover .ap-icon{background:var(--gradient);border-color:transparent;color:#fff}
.about-point h4{font-size:0.9rem;font-weight:700;color:var(--text-bright);margin-bottom:0.2rem}
.about-point p{font-size:0.82rem;color:var(--text-muted)}
/* Metrics grid */
.metrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.metric-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:1.75rem;text-align:center;
  transition:var(--t) var(--ease);position:relative;overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.metric-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(124,92,252,0.08) 0%,transparent 70%);
}
.metric-card:hover{border-color:var(--border-glow);transform:translateY(-5px);box-shadow:var(--glow-card)}
.mc-icon{
  width:46px;height:46px;border-radius:12px;
  background:rgba(124,92,252,0.12);border:1px solid rgba(124,92,252,0.2);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--primary);
  margin:0 auto 0.8rem;transition:background var(--t),border-color var(--t),color var(--t);
}
.metric-card:hover .mc-icon{background:var(--gradient);border-color:transparent;color:#fff}
.mc-num{
  font-family:'Space Grotesk',sans-serif;font-size:2rem;font-weight:900;
  background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;margin-bottom:0.2rem;
}
.mc-label{font-size:0.78rem;color:var(--text-muted);font-weight:500}

/* ─── SERVICES ─── */
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.service-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:2.25rem;
  position:relative;overflow:hidden;transition:var(--t) var(--ease);
  box-shadow:var(--shadow-sm);
}
.service-card::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:var(--gradient);transform:scaleX(0);transform-origin:left;
  transition:transform 0.4s var(--ease);
}
.service-card:hover{border-color:var(--border-glow);transform:translateY(-6px);box-shadow:var(--glow-card)}
.service-card:hover::after{transform:scaleX(1)}
.service-card.featured-service{
  border-color:rgba(124,92,252,0.3);
  background:linear-gradient(135deg,rgba(124,92,252,0.08),rgba(0,229,184,0.04));
}
.service-badge{
  position:absolute;top:1.1rem;right:1.1rem;
  padding:0.28rem 0.75rem;background:var(--gradient);
  border-radius:50px;font-size:0.68rem;font-weight:800;color:#fff;letter-spacing:0.5px;
}
.service-icon-wrap{
  width:54px;height:54px;border-radius:15px;
  background:rgba(124,92,252,0.12);border:1px solid rgba(124,92,252,0.22);
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;color:var(--primary);margin-bottom:1.25rem;
  transition:background var(--t),border-color var(--t),color var(--t),transform var(--t);
}
.service-card:hover .service-icon-wrap{background:var(--gradient);border-color:transparent;color:#fff;transform:scale(1.08) rotate(-5deg)}
.service-card h3{font-family:'Space Grotesk',sans-serif;font-size:1.15rem;font-weight:800;color:var(--text-bright);margin-bottom:0.75rem}
.service-card p{color:var(--text-muted);font-size:0.88rem;line-height:1.75;margin-bottom:1.5rem}
.service-link{display:inline-flex;align-items:center;gap:0.4rem;font-size:0.85rem;font-weight:700;color:var(--primary);transition:gap 0.3s,color 0.3s}
.service-link:hover{gap:0.7rem;color:var(--secondary)}

/* ─── TECH PILLS ─── */
.tech-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:0.75rem}
.tech-pill{
  display:flex;align-items:center;gap:0.5rem;
  padding:0.5rem 1.05rem;background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius-xs);
  font-size:0.83rem;font-weight:600;color:var(--text);
  transition:var(--t) var(--ease);cursor:default;
}
.tech-pill:hover{border-color:var(--primary);color:var(--text-bright);transform:translateY(-3px);box-shadow:0 6px 20px var(--p-glow)}
.tech-pill img{width:17px;height:17px;object-fit:contain}
.tech-categories{display:flex;flex-direction:column;gap:1.25rem}
.tech-cat{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:1.4rem 1.75rem;
  display:flex;align-items:center;gap:2rem;transition:border-color var(--t);
}
.tech-cat:hover{border-color:rgba(124,92,252,0.3)}
.tech-cat-label{font-size:0.82rem;font-weight:700;color:var(--text-muted);white-space:nowrap;display:flex;align-items:center;gap:0.5rem;min-width:130px}
.tech-cat-label i{color:var(--primary)}
.tech-items{display:flex;flex-wrap:wrap;gap:0.65rem}

/* ─── PROCESS ─── */
.process-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.process-step{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:2rem;
  position:relative;overflow:hidden;transition:var(--t) var(--ease);
  box-shadow:var(--shadow-sm);
}
.process-step:hover{border-color:var(--border-glow);transform:translateY(-5px);box-shadow:var(--glow-card)}
.step-number{
  position:absolute;top:0.5rem;right:1rem;
  font-family:'Space Grotesk',sans-serif;font-size:3.5rem;font-weight:900;
  color:rgba(124,92,252,0.06);line-height:1;
}
.step-icon{
  width:50px;height:50px;background:var(--gradient);border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;color:#fff;margin-bottom:1.25rem;
  box-shadow:0 8px 24px var(--p-glow);
  transition:transform var(--t);
}
.process-step:hover .step-icon{transform:scale(1.1) rotate(-6deg)}
.step-content h3{font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:800;color:var(--text-bright);margin-bottom:0.5rem}
.step-content p{color:var(--text-muted);font-size:0.85rem;line-height:1.75}

/* ─── WHY CHOOSE US ─── */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.why-points{display:flex;flex-direction:column;gap:1.1rem;margin-top:1.5rem}
.why-point{
  display:flex;gap:1rem;align-items:flex-start;
  padding:1rem 1.1rem;border-radius:var(--radius-sm);
  border:1px solid transparent;transition:var(--t) var(--ease);
}
.why-point:hover{background:rgba(124,92,252,0.06);border-color:rgba(124,92,252,0.18)}
.wp-icon{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  background:rgba(124,92,252,0.1);border:1px solid rgba(124,92,252,0.2);
  display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:1rem;
  transition:var(--t) var(--ease);
}
.why-point:hover .wp-icon{background:var(--gradient);border-color:transparent;color:#fff}
.wp-text h4{font-size:0.9rem;font-weight:700;color:var(--text-bright);margin-bottom:0.2rem}
.wp-text p{font-size:0.83rem;color:var(--text-muted)}
.why-cards{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.why-metric-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:1.75rem;text-align:center;
  transition:var(--t) var(--ease);box-shadow:var(--shadow-sm);
}
.why-metric-card:hover{border-color:var(--border-glow);transform:translateY(-5px);box-shadow:var(--glow-card)}
.wm-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;margin:0 auto 0.9rem;color:#fff}
.wm-icon.green{background:linear-gradient(135deg,#00e5b8,#00b89c)}
.wm-icon.blue{background:linear-gradient(135deg,#7c5cfc,#5a3adc)}
.wm-icon.purple{background:linear-gradient(135deg,#a855f7,#7c3aed)}
.wm-icon.orange{background:linear-gradient(135deg,#f97316,#ea580c)}
.wm-num{font-family:'Space Grotesk',sans-serif;font-size:1.8rem;font-weight:900;color:var(--text-bright);margin-bottom:0.25rem}
.wm-label{font-size:0.78rem;color:var(--text-muted)}

/* ─── TESTIMONIALS ─── */
.testi-bg{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(124,92,252,0.06) 0%,transparent 65%);pointer-events:none}
.testi-track{display:flex;gap:1.5rem;overflow:hidden}
.testi-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:2rem;
  min-width:calc(33.333% - 1rem);flex-shrink:0;
  transition:border-color var(--t);
}
.testi-card:hover{border-color:var(--border-glow)}
.testi-stars{color:#f59e0b;margin-bottom:0.9rem;font-size:0.85rem;display:flex;gap:3px}
.testi-quote{color:var(--text-muted);font-size:0.88rem;line-height:1.85;margin-bottom:1.5rem;font-style:italic;position:relative}
.testi-quote::before{content:'"';font-size:3rem;color:rgba(124,92,252,0.15);font-family:'Space Grotesk',sans-serif;line-height:0;position:absolute;top:12px;left:-6px}
.testi-author{display:flex;align-items:center;gap:1rem}
.testi-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:0.82rem;color:#fff;flex-shrink:0}
.ta-1{background:linear-gradient(135deg,#7c5cfc,#5a3adc)}
.ta-2{background:linear-gradient(135deg,#00e5b8,#00b89c)}
.ta-3{background:linear-gradient(135deg,#ff4d6d,#cc2244)}
.ta-4{background:linear-gradient(135deg,#f97316,#ea580c)}
.ta-5{background:linear-gradient(135deg,#a855f7,#7c3aed)}
.testi-author h4{font-size:0.88rem;font-weight:700;color:var(--text-bright)}
.testi-author span{font-size:0.78rem;color:var(--text-muted)}
.testi-controls{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:2rem}
.testi-prev,.testi-next{
  width:42px;height:42px;background:var(--card);border:1px solid var(--border);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:0.85rem;color:var(--text-muted);transition:var(--t) var(--ease);
}
.testi-prev:hover,.testi-next:hover{background:var(--gradient);border-color:transparent;color:#fff}
.testi-dots{display:flex;gap:0.5rem}
.testi-dot{width:7px;height:7px;background:var(--border);border-radius:50%;cursor:pointer;transition:var(--t) var(--ease)}
.testi-dot.active{background:var(--primary);width:20px;border-radius:4px}

/* ─── FAQ ─── */
.faq-grid{display:flex;flex-direction:column;gap:1rem;max-width:840px;margin:0 auto}
.faq-item{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;transition:border-color var(--t)}
.faq-item.active{border-color:rgba(124,92,252,0.4)}
.faq-question{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.5rem;cursor:pointer;transition:background 0.2s}
.faq-question:hover{background:rgba(124,92,252,0.04)}
.faq-question span{font-size:0.93rem;font-weight:600;color:var(--text-bright)}
.faq-question i{color:var(--primary);transition:transform 0.35s;flex-shrink:0;font-size:0.82rem}
.faq-item.active .faq-question i{transform:rotate(45deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.4s var(--ease),padding 0.3s}
.faq-answer.open{max-height:220px;padding:0 1.5rem 1.25rem}
.faq-answer p{color:var(--text-muted);font-size:0.88rem;line-height:1.85}

/* ─── PORTFOLIO ─── */
.portfolio-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:0.7rem;margin-bottom:3rem}
.pf-btn{padding:0.48rem 1.2rem;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xs);font-size:0.83rem;font-weight:600;color:var(--text-muted);transition:var(--t) var(--ease)}
.pf-btn:hover,.pf-btn.active{background:var(--gradient);border-color:transparent;color:#fff;box-shadow:0 4px 16px var(--p-glow)}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.portfolio-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;transition:var(--t) var(--ease);
  box-shadow:var(--shadow-sm);
}
.portfolio-card:hover{transform:translateY(-7px);border-color:var(--border-glow);box-shadow:var(--glow-card)}
.portfolio-card.hidden{display:none}
.pc-image{height:195px;position:relative;overflow:hidden}
.pc-img-1{background:linear-gradient(135deg,#0a0a20,#10103a,#1a1060)}
.pc-img-2{background:linear-gradient(135deg,#041a0a,#0a2a12,#0a5020)}
.pc-img-3{background:linear-gradient(135deg,#1a0a2a,#2a0a40,#4a1080)}
.pc-img-4{background:linear-gradient(135deg,#0a0c1a,#0e1020,#182040)}
.pc-img-5{background:linear-gradient(135deg,#1a0a04,#2a1008,#5e2a00)}
.pc-img-6{background:linear-gradient(135deg,#040a1a,#081020,#103060)}
.pc-img-7{background:linear-gradient(135deg,#041a08,#0a2210,#103a18)}
.pc-img-8{background:linear-gradient(135deg,#1a0408,#2a080e,#500a20)}
.pc-img-9{background:linear-gradient(135deg,#04040e,#08081a,#0a0a40)}
.pc-image::before{content:'';position:absolute;inset:0;background:var(--gradient);opacity:0.1}
.pc-emoji{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:3.5rem;opacity:0.2;filter:grayscale(0.5)}
.pc-overlay{position:absolute;inset:0;background:rgba(5,5,20,0.85);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.35s;z-index:2;backdrop-filter:blur(4px)}
.portfolio-card:hover .pc-overlay{opacity:1}
.pc-btn{padding:0.65rem 1.4rem;background:var(--gradient);border-radius:var(--radius-xs);font-size:0.85rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:0.5rem;transition:transform 0.2s}
.pc-btn:hover{transform:scale(1.04)}
.pc-info{padding:1.3rem}
.pc-tags{display:flex;gap:0.5rem;margin-bottom:0.7rem;flex-wrap:wrap}
.pc-tags span{padding:0.2rem 0.6rem;background:rgba(124,92,252,0.12);border-radius:5px;font-size:0.68rem;font-weight:700;color:var(--primary)}
.pc-info h3{font-size:0.97rem;font-weight:800;color:var(--text-bright);margin-bottom:0.45rem}
.pc-info p{font-size:0.83rem;color:var(--text-muted);line-height:1.65;margin-bottom:0.7rem}
.pc-meta{display:flex;flex-wrap:wrap;gap:0.75rem;font-size:0.73rem;color:var(--text-muted)}
.pc-meta i{color:var(--primary);margin-right:3px}

/* ─── BLOG ─── */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.blog-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:var(--t) var(--ease);box-shadow:var(--shadow-sm)}
.blog-card:hover{transform:translateY(-6px);border-color:var(--border-glow);box-shadow:var(--glow-card)}
.blog-image{height:175px;position:relative;overflow:hidden}
.featured-blog .blog-image{height:215px}
.bi-1{background:linear-gradient(135deg,#0a0820,#14103a)}
.bi-2{background:linear-gradient(135deg,#0a1508,#182814)}
.bi-3{background:linear-gradient(135deg,#1a0820,#2a1040)}
.bi-4{background:linear-gradient(135deg,#1a0808,#301010)}
.bi-5{background:linear-gradient(135deg,#081a1a,#103030)}
.bi-6{background:linear-gradient(135deg,#181808,#2a2a10)}
.bi-emoji{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:3rem;opacity:0.18}
.blog-cat{position:absolute;top:1rem;left:1rem;padding:0.28rem 0.75rem;background:var(--gradient);border-radius:6px;font-size:0.68rem;font-weight:800;color:#fff;letter-spacing:0.3px}
.blog-content{padding:1.4rem}
.blog-meta{font-size:0.75rem;color:var(--text-muted);margin-bottom:0.7rem}
.blog-meta i{color:var(--primary)}
.blog-content h3{font-size:0.93rem;font-weight:700;color:var(--text-bright);margin-bottom:0.55rem;line-height:1.5}
.blog-content p{font-size:0.83rem;color:var(--text-muted);margin-bottom:0.9rem;line-height:1.7}
.blog-link{display:inline-flex;align-items:center;gap:0.4rem;font-size:0.83rem;font-weight:700;color:var(--primary);transition:gap 0.3s,color 0.3s}
.blog-link:hover{gap:0.7rem;color:var(--secondary)}

/* ─── PRICING ─── */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:start}
.pricing-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:2.25rem;
  transition:var(--t) var(--ease);position:relative;box-shadow:var(--shadow-sm);
}
.pricing-card:hover{transform:translateY(-7px);border-color:var(--border-glow);box-shadow:var(--glow-card)}
.pricing-card.featured{
  border-color:rgba(124,92,252,0.45);
  background:linear-gradient(160deg,rgba(124,92,252,0.1),rgba(0,229,184,0.04));
  box-shadow:var(--glow-strong);
}
.pricing-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);padding:0.3rem 1.2rem;background:var(--gradient);border-radius:50px;font-size:0.72rem;font-weight:800;color:#fff;white-space:nowrap;box-shadow:0 4px 16px var(--p-glow)}
.pricing-icon{width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--primary);background:rgba(124,92,252,0.1);border:1px solid rgba(124,92,252,0.2);margin:0 auto 1rem;transition:var(--t) var(--ease)}
.pricing-card.featured .pricing-icon{background:var(--gradient);border-color:transparent;color:#fff}
.pricing-card:hover .pricing-icon{background:var(--gradient);border-color:transparent;color:#fff}
.pricing-header{text-align:center;margin-bottom:1.5rem}
.pricing-header h3{font-family:'Space Grotesk',sans-serif;font-size:1.25rem;font-weight:800;color:var(--text-bright);margin-bottom:0.4rem}
.pricing-header p{font-size:0.83rem;color:var(--text-muted)}
.pricing-price{text-align:center;margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid var(--border)}
.price-currency{font-size:1.1rem;font-weight:700;color:var(--text-muted);vertical-align:super;line-height:2.5}
.price-amount{font-family:'Space Grotesk',sans-serif;font-size:3rem;font-weight:900;color:var(--text-bright)}
.price-period{font-size:0.83rem;color:var(--text-muted)}
.pricing-features{display:flex;flex-direction:column;gap:0.7rem;margin-bottom:2rem}
.pricing-features li{display:flex;align-items:center;gap:0.6rem;font-size:0.85rem;color:var(--text)}
.pricing-features li .fa-check{color:var(--secondary);font-size:0.72rem}
.pricing-features li .fa-times{color:rgba(255,255,255,0.18);font-size:0.72rem}
.pricing-features li.off{color:var(--text-muted);opacity:0.5}

/* ─── CTA BANNER ─── */
.cta-banner{
  background:linear-gradient(135deg,#0c0830,#051a16);
  border-top:1px solid rgba(124,92,252,0.18);border-bottom:1px solid rgba(124,92,252,0.18);
  padding:5.5rem 0;position:relative;overflow:hidden;
}
.cta-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(124,92,252,0.14) 0%,transparent 65%);pointer-events:none}
[data-theme="light"] .cta-banner{background:linear-gradient(135deg,#ebe8ff,#e0f7f2)}
[data-theme="light"] .cta-banner::before{background:radial-gradient(ellipse at center,rgba(100,80,240,0.1) 0%,transparent 65%)}
[data-theme="light"] .btn-light{color:#1e2a4a;border-color:rgba(30,42,74,0.25);background:rgba(30,42,74,0.07)}
[data-theme="light"] .btn-light:hover{background:rgba(30,42,74,0.14)}
.cta-content{text-align:center;position:relative;z-index:1}
.cta-content h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.9rem,4vw,2.8rem);font-weight:900;color:var(--text-bright);margin-bottom:1rem}
[data-theme="light"] .cta-content h2{color:var(--text-bright)}
.cta-content p{color:var(--text-muted);font-size:1rem;max-width:540px;margin:0 auto 2.5rem;line-height:1.8}
.cta-actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}

/* ─── PAGE HERO ─── */
.page-hero{
  min-height:42vh;display:flex;align-items:center;
  position:relative;overflow:hidden;
  padding-top:100px;padding-bottom:3.5rem;
  background:var(--bg-2);
}
.page-hero #heroCanvas{position:absolute;inset:0;width:100%;height:100%;opacity:0.45}
.page-hero::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(124,92,252,0.14) 0%,transparent 65%);pointer-events:none}
.page-hero-content{position:relative;z-index:2;text-align:center;padding:0 2rem}
.breadcrumb{
  display:inline-flex;align-items:center;gap:0.5rem;
  font-size:0.78rem;color:var(--text-muted);margin-bottom:1rem;
  padding:0.35rem 1rem;background:rgba(124,92,252,0.08);
  border:1px solid rgba(124,92,252,0.2);border-radius:50px;
}
.breadcrumb a{color:var(--primary);transition:color 0.3s}
.breadcrumb a:hover{color:var(--text-bright)}
.breadcrumb i{font-size:0.62rem;opacity:0.5}
.page-hero-content h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(2.2rem,5.5vw,3.5rem);font-weight:900;color:var(--text-bright);margin-bottom:1rem;line-height:1.1}
.page-hero-content p{color:var(--text-muted);font-size:1rem;max-width:520px;margin:0 auto;line-height:1.8}

/* ─── ABOUT PAGE ─── */
.about-story-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.code-window-big{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.code-title-bar{display:flex;align-items:center;gap:6px;padding:0.75rem 1rem;border-bottom:1px solid var(--border);background:var(--bg-3)}
.dot{width:10px;height:10px;border-radius:50%}
.dot.red{background:#ff5f57}.dot.yellow{background:#febc2e}.dot.green{background:#28c840}
.code-filename{font-size:0.73rem;color:var(--text-muted);margin-left:auto;margin-right:auto}
.code-body{padding:1.75rem;font-family:'JetBrains Mono','Courier New',monospace;font-size:0.84rem;line-height:2}
.code-line{color:#abb2bf}.code-line.pl{padding-left:1.5rem}
.kw{color:#c678dd}.var{color:#e06c75}.key{color:#61dafb}.str{color:#98c379}.num{color:#d19a66}
.about-badges-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2rem}
.about-stat-badge{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:1.25rem;text-align:center;transition:var(--t) var(--ease);
}
.about-stat-badge:hover{border-color:var(--border-glow);transform:translateY(-3px)}
.about-stat-badge span{display:block;font-family:'Space Grotesk',sans-serif;font-size:1.6rem;font-weight:900;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.about-stat-badge p{font-size:0.72rem;color:var(--text-muted);margin-top:0.25rem}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.value-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:2rem;transition:var(--t) var(--ease);
  position:relative;overflow:hidden;box-shadow:var(--shadow-sm);
}
.value-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 100% 100%,rgba(124,92,252,0.07),transparent 60%)}
.value-card:hover{border-color:var(--border-glow);transform:translateY(-5px);box-shadow:var(--glow-card)}
.vc-icon{width:50px;height:50px;background:var(--gradient);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;color:#fff;margin-bottom:1.2rem;box-shadow:0 8px 24px var(--p-glow);transition:transform var(--t)}
.value-card:hover .vc-icon{transform:scale(1.1) rotate(-5deg)}
.value-card h3{font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:800;color:var(--text-bright);margin-bottom:0.55rem}
.value-card p{color:var(--text-muted);font-size:0.85rem;line-height:1.75}

/* ─── SERVICES PAGE ─── */
.service-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
.service-detail-grid.reverse > *:first-child{order:2}
.service-detail-grid.reverse > *:last-child{order:1}
.service-detail-icon{width:64px;height:64px;background:var(--gradient);border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:#fff;margin-bottom:1.2rem;box-shadow:0 12px 32px var(--p-glow)}
.service-detail-icon.alt{background:linear-gradient(135deg,#00e5b8,#00b89c)}
.service-features-list{display:flex;flex-direction:column;gap:1.1rem;margin:1.5rem 0}
.sf-item{display:flex;gap:0.9rem;align-items:flex-start}
.sf-item i{color:var(--secondary);font-size:1rem;margin-top:3px;flex-shrink:0}
.sf-item h4{font-size:0.9rem;font-weight:700;color:var(--text-bright);margin-bottom:0.2rem}
.sf-item p{font-size:0.83rem;color:var(--text-muted)}
.service-detail-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:1.75rem;position:sticky;top:100px;
  box-shadow:var(--shadow-sm);
}
.service-detail-card.featured-card{border-color:rgba(124,92,252,0.35);background:linear-gradient(135deg,rgba(124,92,252,0.08),rgba(0,229,184,0.04))}
.sd-card-header{display:flex;align-items:center;gap:0.6rem;font-size:0.88rem;font-weight:800;color:var(--text-bright);margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.sd-card-header i{color:var(--primary)}
.sd-card-timeline{display:flex;gap:1rem;margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--border)}
.sdct-item{flex:1;text-align:center}
.sdct-item span{display:block;font-size:0.73rem;color:var(--text-muted);margin-bottom:0.25rem}
.sdct-item strong{font-size:0.88rem;font-weight:700;color:var(--text-bright)}
.compliance-items{display:flex;flex-direction:column;gap:0.5rem}
.comp-item{display:flex;align-items:center;gap:0.6rem;font-size:0.85rem;color:var(--text);padding:0.45rem 0;border-bottom:1px solid rgba(255,255,255,0.04)}
.comp-item:last-child{border-bottom:none}
.comp-item i{color:var(--secondary);font-size:0.72rem;flex-shrink:0}
.custom-software-list{display:grid;grid-template-columns:1fr 1fr;gap:0.6rem}
.csl-item{display:flex;align-items:center;gap:0.6rem;padding:0.6rem 0.75rem;background:var(--bg-4);border-radius:var(--radius-xs);font-size:0.83rem;color:var(--text);transition:var(--t) var(--ease)}
.csl-item:hover{background:rgba(124,92,252,0.1);color:var(--text-bright)}
.csl-item i{color:var(--primary);font-size:0.85rem}

/* ─── CONTACT PAGE ─── */
.contact-info-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.contact-info-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:1.75rem;text-align:center;
  transition:var(--t) var(--ease);box-shadow:var(--shadow-sm);
}
.contact-info-card:hover{border-color:var(--border-glow);transform:translateY(-5px);box-shadow:var(--glow-card)}
.cic-icon{width:50px;height:50px;background:var(--gradient);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;color:#fff;margin:0 auto 1rem;box-shadow:0 8px 24px var(--p-glow);transition:transform var(--t)}
.contact-info-card:hover .cic-icon{transform:scale(1.1) rotate(-5deg)}
.contact-info-card h3{font-size:0.97rem;font-weight:700;color:var(--text-bright);margin-bottom:0.3rem}
.contact-info-card p{font-size:0.78rem;color:var(--text-muted);margin-bottom:0.4rem}
.contact-info-card a,.contact-info-card span{font-size:0.85rem;color:var(--text);display:block}
.contact-info-card a:hover{color:var(--primary)}
.contact-main-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:4rem;align-items:start}
.contact-form-wrap{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:2.5rem;box-shadow:var(--shadow-sm)}
.contact-form{display:flex;flex-direction:column;gap:1.2rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.form-group{display:flex;flex-direction:column;gap:0.45rem}
.form-group.full{grid-column:1/-1}
.form-group label{font-size:0.75rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.6px}
.form-group input,.form-group select,.form-group textarea{
  background:var(--input-bg);border:1px solid var(--border);
  border-radius:var(--radius-xs);padding:0.75rem 1rem;
  font-size:0.88rem;color:var(--text);transition:border-color var(--t),box-shadow var(--t);
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(124,92,252,0.12)}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-muted)}
.form-group select option{background:var(--bg-3);color:var(--text)}
.form-group textarea{resize:vertical;min-height:125px}
.form-success{display:none;align-items:center;gap:0.6rem;padding:1rem;background:rgba(0,229,184,0.1);border:1px solid rgba(0,229,184,0.28);border-radius:var(--radius-xs);font-size:0.85rem;color:var(--secondary)}
.form-success.show{display:flex}
.contact-right{display:flex;flex-direction:column;gap:1.5rem}
.map-placeholder{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;height:255px;position:relative;box-shadow:var(--shadow-sm)}
.map-inner{position:relative;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--bg-2),var(--bg-3))}
.map-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(124,92,252,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(124,92,252,0.06) 1px,transparent 1px);background-size:32px 32px}
.map-pin{font-size:2.5rem;color:var(--primary);position:relative;z-index:2;filter:drop-shadow(0 0 12px var(--p-glow));animation:fl1 2.5s ease-in-out infinite}
.map-label{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xs);padding:0.55rem 1rem;text-align:center;white-space:nowrap;z-index:2;box-shadow:var(--shadow-sm)}
.map-label strong{display:block;font-size:0.83rem;color:var(--text-bright)}
.map-label span{font-size:0.73rem;color:var(--text-muted)}
.quick-contact-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow-sm)}
.quick-contact-card h4{font-size:0.88rem;font-weight:700;color:var(--text-bright);margin-bottom:1rem}
.contact-social-big{display:grid;grid-template-columns:1fr 1fr;gap:0.7rem}
.csb-item{display:flex;align-items:center;gap:0.6rem;padding:0.7rem 1rem;border-radius:var(--radius-xs);font-size:0.85rem;font-weight:600;color:var(--text-bright);transition:var(--t) var(--ease)}
.csb-item:hover{transform:translateY(-2px)}
.csb-item.linkedin{background:rgba(10,102,194,0.18);border:1px solid rgba(10,102,194,0.28)}
.csb-item.twitter{background:rgba(29,161,242,0.15);border:1px solid rgba(29,161,242,0.25)}
.csb-item.github{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1)}
.csb-item.instagram{background:rgba(228,64,95,0.15);border:1px solid rgba(228,64,95,0.25)}
.response-card{
  background:linear-gradient(135deg,rgba(124,92,252,0.1),rgba(0,229,184,0.06));
  border:1px solid rgba(124,92,252,0.25);border-radius:var(--radius);
  padding:1.5rem;display:flex;align-items:flex-start;gap:1rem;
}
.rc-icon{width:42px;height:42px;background:var(--gradient);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.05rem;color:#fff;flex-shrink:0}
.response-card h4{font-size:0.9rem;font-weight:700;color:var(--text-bright);margin-bottom:0.3rem}
.response-card p{font-size:0.83rem;color:var(--text-muted);line-height:1.65}

/* ─── FOOTER ─── */
.footer{background:var(--bg-2);border-top:1px solid var(--border)}
.footer-top{padding:5rem 0 3rem}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:3rem}
.footer-brand p{color:var(--text-muted);font-size:0.85rem;line-height:1.85;margin:1rem 0 1.5rem}
.footer-social{display:flex;gap:0.55rem}
.footer-social a{width:35px;height:35px;background:var(--bg-4);border:1px solid var(--border);border-radius:var(--radius-xs);display:flex;align-items:center;justify-content:center;font-size:0.82rem;color:var(--text-muted);transition:var(--t) var(--ease)}
.footer-social a:hover{background:var(--gradient);border-color:transparent;color:#fff;transform:translateY(-2px)}
.footer-col h4{font-size:0.88rem;font-weight:700;color:var(--text-bright);margin-bottom:1.2rem}
.footer-col ul{display:flex;flex-direction:column;gap:0.6rem}
.footer-col ul li a{font-size:0.85rem;color:var(--text-muted);transition:color var(--t);display:flex;align-items:center;gap:0.35rem}
.footer-col ul li a::before{content:'→';font-size:0.7rem;color:var(--primary);opacity:0;transition:opacity 0.3s,transform 0.3s;transform:translateX(-6px)}
.footer-col ul li a:hover{color:var(--text-bright)}
.footer-col ul li a:hover::before{opacity:1;transform:translateX(0)}
.footer-contact{gap:0.8rem !important}
.footer-contact li{display:flex;align-items:flex-start;gap:0.6rem;font-size:0.85rem;color:var(--text-muted)}
.footer-contact li i{color:var(--primary);margin-top:3px;font-size:0.82rem;flex-shrink:0}
.footer-contact li a{color:var(--text-muted);transition:color var(--t)}
.footer-contact li a:hover{color:var(--text-bright)}
.footer-newsletter{margin-top:1.5rem}
.footer-newsletter h5{font-size:0.83rem;font-weight:700;color:var(--text-bright);margin-bottom:0.7rem}
.newsletter-form{display:flex;border:1px solid var(--border);border-radius:var(--radius-xs);overflow:hidden;transition:border-color var(--t)}
.newsletter-form:focus-within{border-color:var(--primary)}
.newsletter-form input{flex:1;background:var(--input-bg);padding:0.65rem 0.9rem;font-size:0.83rem;color:var(--text)}
.newsletter-form input::placeholder{color:var(--text-muted)}
.newsletter-form button{padding:0.65rem 1rem;background:var(--gradient);color:#fff;font-size:0.85rem;transition:opacity 0.3s}
.newsletter-form button:hover{opacity:0.85}
.footer-bottom{padding:1.5rem 0;border-top:1px solid var(--border)}
.footer-bottom .container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.footer-bottom p{font-size:0.83rem;color:var(--text-muted)}
.footer-links{display:flex;gap:1.5rem}
.footer-links a{font-size:0.83rem;color:var(--text-muted);transition:color var(--t)}
.footer-links a:hover{color:var(--text-bright)}

/* ─── BACK TO TOP ─── */
.back-to-top{
  position:fixed;bottom:2rem;right:2rem;
  width:44px;height:44px;background:var(--gradient);border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:0.88rem;
  box-shadow:0 8px 24px var(--p-glow);
  opacity:0;transform:translateY(16px);transition:var(--t) var(--ease);z-index:100;
}
.back-to-top.visible{opacity:1;transform:translateY(0)}
.back-to-top:hover{transform:translateY(-4px);box-shadow:0 12px 32px var(--p-glow)}

/* ─── RESPONSIVE ─── */
@media(max-width:1200px){
  .hero-inner{grid-template-columns:1fr;text-align:center;gap:3rem;padding-top:3rem}
  .hero-visual{justify-content:center}
  .hero-actions,.hero-stats{justify-content:center}
  .hero-sub{margin:0 auto 2.5rem}
  .about-teaser-grid,.about-story-grid,.why-grid,.contact-main-grid{grid-template-columns:1fr;gap:3rem}
  .footer-grid{grid-template-columns:1fr 1fr}
  .contact-info-cards{grid-template-columns:1fr 1fr}
}
@media(max-width:1024px){
  .services-grid{grid-template-columns:1fr 1fr}
  .process-steps{grid-template-columns:1fr 1fr}
  .pricing-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto}
  .pricing-card.featured{order:-1}
  .blog-grid{grid-template-columns:1fr 1fr}
  .portfolio-grid{grid-template-columns:repeat(2,1fr)}
  .service-detail-grid{grid-template-columns:1fr}
  .service-detail-grid.reverse > *{order:unset}
  .service-detail-card{position:static}
  .tech-cat{flex-direction:column;align-items:flex-start}
  .values-grid{grid-template-columns:1fr 1fr}
  .about-badges-row{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:flex}
  .section{padding:4rem 0}
  .services-grid{grid-template-columns:1fr}
  .portfolio-grid{grid-template-columns:1fr}
  .why-cards{grid-template-columns:1fr 1fr}
  .process-steps{grid-template-columns:1fr}
  .testi-card{min-width:100%}
  .hero-stats{gap:1.25rem}
  .hero-device-wrap{width:260px;height:330px}
  .hero-phone{width:185px;height:320px}
  .form-row{grid-template-columns:1fr}
  .metrics-grid{grid-template-columns:1fr 1fr}
  .blog-grid{grid-template-columns:1fr}
  .contact-info-cards{grid-template-columns:1fr 1fr}
  .contact-social-big{grid-template-columns:1fr 1fr}
  .values-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .container{padding:0 1.25rem}
  .hero-actions,.cta-actions{flex-direction:column;align-items:center}
  .footer-bottom .container{flex-direction:column;text-align:center}
  .contact-info-cards{grid-template-columns:1fr}
  .about-badges-row{grid-template-columns:1fr 1fr}
  .hero-stats{gap:0.75rem;flex-wrap:wrap;justify-content:center}
}