/* ============================================================
   IGNITIA INFOTECH — Global Design System
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  --bg-primary:       #0A0E1A;
  --bg-secondary:     #0D1426;
  --bg-card:          rgba(255,255,255,0.04);
  --bg-card-hover:    rgba(255,255,255,0.07);
  --border-glass:     rgba(255,255,255,0.08);
  --border-glow:      rgba(0,170,255,0.3);
  --accent-blue:      #00AAFF;
  --accent-blue-dark: #0080CC;
  --accent-blue-glow: rgba(0,170,255,0.15);
  --accent-amber:     #F59E0B;
  --accent-amber-dark:#D97706;
  --accent-amber-glow:rgba(245,158,11,0.15);
  --text-primary:     #F0F4FF;
  --text-secondary:   #94A3B8;
  --text-muted:       #64748B;
  --gradient-blue:    linear-gradient(135deg,#00AAFF 0%,#0066CC 100%);
  --gradient-amber:   linear-gradient(135deg,#F59E0B 0%,#D97706 100%);
  --gradient-mesh:    radial-gradient(ellipse at 20% 50%,rgba(0,170,255,.08) 0%,transparent 60%),
                      radial-gradient(ellipse at 80% 20%,rgba(245,158,11,.06) 0%,transparent 50%),
                      radial-gradient(ellipse at 50% 80%,rgba(0,102,204,.07) 0%,transparent 50%);
  --font-display:     'Space Grotesk', sans-serif;
  --font-body:        'Plus Jakarta Sans', sans-serif;
  --text-xs:   0.75rem; --text-sm: 0.875rem; --text-base: 1rem;
  --text-lg:   1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem;
  --text-3xl:  1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem;
  --text-6xl:  3.75rem; --text-7xl: 4.5rem;
  --radius-sm: .375rem; --radius-md:.75rem; --radius-lg:1rem;
  --radius-xl: 1.5rem;  --radius-2xl:2rem;  --radius-full:9999px;
  --shadow-md:    0 4px 16px rgba(0,0,0,.4);
  --shadow-lg:    0 8px 32px rgba(0,0,0,.5);
  --shadow-blue:  0 4px 24px rgba(0,170,255,.25);
  --shadow-amber: 0 4px 24px rgba(245,158,11,.25);
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
  --transition-spring: 400ms cubic-bezier(.34,1.56,.64,1);
  --z-nav:     200; --z-modal:100; --z-loading:300; --z-toast:400;
  --section-py: clamp(4rem,8vw,7rem);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:var(--font-body);
  background:var(--bg-primary);
  color:var(--text-primary);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,video,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
ul,ol { list-style:none; }
input,textarea,select,button { font-family:inherit; font-size:inherit; }
button { cursor:pointer; border:none; background:none; }

::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg-secondary); }
::-webkit-scrollbar-thumb { background:var(--accent-blue-dark); border-radius:var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background:var(--accent-blue); }

h1,h2,h3,h4,h5,h6 { font-family:var(--font-display); font-weight:700; line-height:1.2; }
h1 { font-size:clamp(1.875rem,4vw,3.25rem); }
h2 { font-size:clamp(2rem,4vw,3rem); }
h3 { font-size:clamp(1.5rem,3vw,1.875rem); }
h4 { font-size:clamp(1.25rem,2.5vw,1.5rem); }
p  { color:var(--text-secondary); line-height:1.75; }

.text-gradient-blue {
  background:var(--gradient-blue);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.text-gradient-amber {
  background:var(--gradient-amber);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.text-accent { color:var(--accent-blue); }
.text-amber  { color:var(--accent-amber); }
.text-muted  { color:var(--text-muted); }
.text-center { text-align:center; }

.container { width:100%; max-width:1280px; margin-inline:auto; padding-inline:clamp(1rem,5vw,3rem); }
.container-narrow { max-width:900px; margin-inline:auto; padding-inline:clamp(1rem,5vw,3rem); }
.section { padding-block:var(--section-py); position:relative; }
.section-dark { background:var(--bg-secondary); }
.section-mesh { background:var(--gradient-mesh), var(--bg-primary); }

.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.flex-center { display:flex; align-items:center; justify-content:center; }
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.flex-col { display:flex; flex-direction:column; }
.gap-4 { gap:1rem; } .gap-6 { gap:1.5rem; } .gap-8 { gap:2rem; }
.w-full { width:100%; } .mt-auto { margin-top:auto; }

.section-label {
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:var(--text-sm); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent-blue); margin-bottom:1rem;
}
.section-label::before {
  content:''; width:24px; height:2px;
  background:var(--gradient-blue); border-radius:var(--radius-full);
}
.section-title { font-size:clamp(1.75rem,3.5vw,2.625rem); font-weight:700; margin-bottom:1rem; line-height:1.15; }
.section-subtitle { font-size:var(--text-lg); color:var(--text-secondary); max-width:600px; line-height:1.75; }
.section-header { margin-bottom:clamp(3rem,6vw,5rem); }
.section-header.center { text-align:center; }
.section-header.center .section-label { justify-content:center; }
.section-header.center .section-subtitle { margin-inline:auto; }

.clip-wave-top { clip-path:polygon(0 5%,100% 0,100% 100%,0 100%); margin-top:-3rem; padding-top:calc(var(--section-py) + 3rem); }
.clip-wave-bottom { clip-path:polygon(0 0,100% 0,100% 95%,0 100%); padding-bottom:calc(var(--section-py) + 3rem); }
.clip-diagonal { clip-path:polygon(0 0,100% 4%,100% 100%,0 96%); padding-block:calc(var(--section-py) + 2rem); }

.badge { display:inline-flex; align-items:center; padding:.25rem .75rem; border-radius:var(--radius-full); font-size:var(--text-xs); font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.badge-blue  { background:var(--accent-blue-glow);  color:var(--accent-blue);  border:1px solid rgba(0,170,255,.2); }
.badge-amber { background:var(--accent-amber-glow); color:var(--accent-amber); border:1px solid rgba(245,158,11,.2); }
.badge-glass { background:var(--bg-card); color:var(--text-secondary); border:1px solid var(--border-glass); }

.tech-badge {
  display:inline-block; padding:4px 12px;
  background:rgba(0,170,255,.08); border:1px solid rgba(0,170,255,.18);
  border-radius:var(--radius-full); font-size:var(--text-xs); font-weight:500; color:var(--accent-blue); white-space:nowrap;
}

.divider { height:1px; background:linear-gradient(90deg,transparent,var(--border-glass),transparent); margin-block:2rem; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.hidden { display:none !important; }

@media (max-width:1024px) { .grid-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:768px) {
  .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; }
  :root { --section-py: clamp(3rem,6vw,5rem); }
}