/* New Era IT Website Styles */
:root{
  --bg: #0b1220;
  --panel: #0f172a;
  --muted: #94a3b8;
  --text: #e2e8f0;
  --brand: #3b82f6;
  --brand-2:#0ea5e9;
  --accent:#22d3ee;
  --card:#111827;
  --ring:rgba(59,130,246,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  background: radial-gradient(1000px 600px at 70% -10%, rgba(59,130,246,.15), transparent), var(--bg);
  color: var(--text);
  line-height: 1.6;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1120px, 92%);margin-inline:auto}
.section{padding:80px 0}
.section{scroll-margin-top:84px}
.section-alt{background: linear-gradient(180deg, rgba(2,6,23,.6), rgba(2,6,23,.2))}
.section-intro{color:var(--muted);max-width:720px}

/* Center the Value Proposition header and intro */
#services h2{ text-align:center }
#services .section-intro{ text-align:center; margin: 0 auto 6px }

/* Triad connector + cards */
.triad{position:relative;min-height:560px;margin:26px 0 16px;display:grid;place-items:center;border:1px solid rgba(148,163,184,.16);border-radius:18px;background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));overflow:hidden;box-shadow: 0 10px 30px rgba(0,0,0,.25);padding:12px}
.triad::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:70%;background: radial-gradient(600px 380px at 50% 20%, rgba(14,165,233,.20), transparent 60%);opacity:.6;pointer-events:none}
/* dynamic SVG overlay */
.triad-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.triad-center{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);z-index:1;color:transparent;font-weight:800;font-size:clamp(28px,4.6vw,56px);letter-spacing:.4px;line-height:1.1;text-align:center;pointer-events:none;white-space:normal;display:grid;gap:2px;background:linear-gradient(135deg, var(--brand), var(--accent), var(--brand));background-size:220% 220%;animation:triad-text-pan 12s linear infinite;-webkit-background-clip:text;background-clip:text;text-shadow:0 10px 28px rgba(14,165,233,.18)}
.triad-center span{display:block}
@keyframes triad-text-pan{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.triad-links .tri-stroke{stroke-dasharray:8 12;animation: triad-dash 14s linear infinite}
@keyframes triad-dash{to{stroke-dashoffset:-220}}
.triad-card{position:absolute;max-width:420px;padding:14px 18px;border-radius:16px;background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border:1px solid rgba(148,163,184,.22);backdrop-filter: blur(8px) saturate(120%);box-shadow: 0 6px 18px rgba(2,6,23,.45);
  display:flex;align-items:center;justify-content:center;text-align:center;min-height:56px;white-space:nowrap;z-index:1}
.triad-card .tri-anchor{position:absolute;width:0;height:0}
.triad-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from 140deg, var(--brand), var(--brand-2), var(--accent), var(--brand));-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite: xor;mask-composite: exclude;opacity:.45}
.triad-card h3{margin:0;font-weight:600}
.triad-card:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(2,6,23,.55)}
/* positions are set dynamically via JS for perfect corner alignment */
.triad-card.top .tri-anchor{bottom:-12px;left:50%;transform:translateX(-50%)}
.triad-card.left .tri-anchor{top:-12px;left:50%;transform:translateX(-50%)}
.triad-card.right .tri-anchor{top:-12px;left:50%;transform:translateX(-50%)}

@media (max-width: 960px){
  .triad{min-height:unset;gap:12px}
  .triad-connector{display:none}
  .triad-card{position:static;max-width:unset}
}

/* Header */
.site-header{
  position: sticky; top:0; z-index: 50;
  backdrop-filter: saturate(180%) blur(14px);
  background: rgba(2,6,23,.65);
  border-bottom:1px solid rgba(148,163,184,.15);
}
.header-inner{display:flex;align-items:center;gap:20px;justify-content:space-between;min-height:64px}
.brand img{height:36px;width:auto}
.nav-toggle{display:none;background:transparent;border:1px solid rgba(148,163,184,.25);color:var(--text);padding:8px 12px;border-radius:8px}
.menu{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.menu a{color:var(--muted)}
.menu a:hover{color:#fff}
.cta .btn{margin-left:8px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:12px;padding:12px 16px;border:1px solid rgba(148,163,184,.25);color:#fff}
.btn-primary{background: linear-gradient(135deg, var(--brand), var(--brand-2));border-color:transparent}
.btn-secondary{background: transparent}
.btn:focus{outline:2px solid var(--ring);outline-offset:2px}

/* Hero */
.hero{padding:96px 0 72px;background: radial-gradient(600px 420px at 20% 0%, rgba(14,165,233,.2), transparent)}
.hero-inner{display:grid;grid-template-columns: 1.1fr .9fr;gap:40px;align-items:center}
.hero h1{font-size: clamp(32px, 4vw, 48px);line-height:1.15;margin:0 0 14px}
.hero p{color:var(--muted);margin:0 0 22px}
.hero .actions{display:flex;gap:12px;margin:10px 0 24px}
.hero .trust{color:var(--muted)}
.hero-art{position:relative;min-height:320px}
.hero-art .hero-logo{position:absolute;inset:auto 40px 40px auto;width:240px;filter: drop-shadow(0 0 26px rgba(34,211,238,.22)) drop-shadow(0 0 52px rgba(59,130,246,.15));opacity:.95}
.hero-art .hero-logo img{width:100%;height:auto;display:block}
.hero-art .grid{position:absolute;inset:0;border-radius:20px;background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border:1px solid rgba(148,163,184,.18)}

/* Cards */
.grid-3{display:grid;grid-template-columns: repeat(3, 1fr);gap:18px;margin-top:24px}
.grid-2{display:grid;grid-template-columns: repeat(2, 1fr);gap:18px}
.card{background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid rgba(148,163,184,.18);border-radius:16px;padding:22px}
.card h3{margin:0 0 8px;font-size:18px}
.card p{margin:0;color:var(--muted)}

/* Partners */
.partners{text-align:center}
.logo-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;list-style:none;margin:24px 0 8px;padding:0}
.logo{padding:10px 16px;border-radius:12px;border:1px solid rgba(148,163,184,.18);color:#cbd5e1;background:rgba(148,163,184,.06)}
.note{color:var(--muted);font-size:14px}

/* Why Us */
.reasons .reason{background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid rgba(148,163,184,.18);border-radius:14px;padding:18px}
.pillars{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.pillar{border:1px dashed rgba(148,163,184,.25);border-radius:999px;padding:8px 14px;color:#cbd5e1}

/* Quotes */
.quotes{display:grid;grid-template-columns: repeat(3, 1fr);gap:18px;margin-top:16px}
.quote{background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid rgba(148,163,184,.18);border-radius:14px;padding:18px}
.quote p{margin:0 0 10px}
.quote footer{color:var(--muted);font-size:14px}

/* Accordion */
.accordion details{background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid rgba(148,163,184,.18);border-radius:14px;margin:12px 0;padding:12px 16px}
.accordion summary{cursor:pointer;list-style:none;font-weight:600}
.accordion summary::-webkit-details-marker{display:none}
.accordion .content{color:var(--muted);padding-top:8px}

/* Contact */
.section-contact{background: linear-gradient(180deg, rgba(14,165,233,.09), rgba(2,6,23,.25))}
.contact{display:grid;grid-template-columns: 1fr 1fr;gap:24px;align-items:start}
.contact-list{list-style:none;margin:14px 0 0;padding:0;color:#cbd5e1}
.contact-form{background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));border:1px solid rgba(148,163,184,.18);border-radius:16px;padding:18px}
.contact-form .row{display:block;margin-bottom:12px}
.contact-form .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input, textarea{width:100%;background:#0b1220;color:#fff;border:1px solid rgba(148,163,184,.35);border-radius:10px;padding:10px}
input:focus, textarea:focus{outline:2px solid var(--ring);outline-offset:2px}
.form-note{color:var(--muted);font-size:13px;margin:8px 0 0}

/* Footer */
.site-footer{border-top:1px solid rgba(148,163,184,.15);background:#070b13;padding:28px 0}
.footer-inner{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}
.footer-links{list-style:none;margin:0;padding:0;display:flex;gap:16px}
.foot-brand p{color:var(--muted);margin:6px 0 0}

/* Responsive */
@media (max-width: 960px){
  .hero-inner{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .quotes{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .menu{display:none;position:absolute;top:64px;right:12px;background:#0b1220;border:1px solid rgba(148,163,184,.18);border-radius:12px;padding:10px 12px;flex-direction:column;min-width:220px}
  .menu.open{display:flex}
  .nav-toggle{display:inline-flex}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
}