/* ==========================================================================
   YUKTI OPS — Production Infrastructure & Server Management
   Reusable stylesheet — CSS custom properties + utility classes
   ========================================================================== */

:root{
  /* Primary — Indigo (infrastructure / trust / "new-gen" SaaS) */
  --navy-900:#1E1B4B;   /* deep indigo (kept var name for internal consistency) */
  --navy-700:#4338CA;
  --navy-400:#818CF8;

  /* Accent — Electric Cyan (uptime / monitoring / growth) */
  --teal-700:#0891B2;
  --teal-500:#06B6D4;
  --teal-300:#67E8F9;

  /* Neutrals */
  --ink:#0F1222;
  --slate-600:#5B6478;
  --slate-300:#D6D9E8;
  --paper:#F5F6FC;
  --white:#FFFFFF;

  /* Typography — geometric, technical, "new generation" SaaS feel */
  --font-display:"Plus Jakarta Sans","Segoe UI",sans-serif;
  --font-body:"Inter","Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",monospace;

  /* Spacing / radius rhythm */
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --section-y:6rem;

  --shadow-card:0 10px 30px -12px rgba(30,27,75,0.18);
  --shadow-card-hover:0 20px 44px -16px rgba(67,56,202,0.30);
}

/* ---------- Base ---------- */
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display);font-weight:700;}
.font-mono{font-family:var(--font-mono);}

h1,.display-5,.display-6{letter-spacing:-0.03em;}
h2,h3{letter-spacing:-0.02em;}
.section-title{letter-spacing:-0.025em;}

::selection{background:var(--teal-300);color:var(--navy-900);}

a{color:var(--teal-700);text-decoration:none;}
a:hover{color:var(--navy-700);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--teal-500);
  outline-offset:2px;
}

/* ---------- Layout helpers ---------- */
.section{padding-block:var(--section-y);}
.section-tight{padding-block:3.5rem;}
.bg-paper{background:var(--paper);}
.bg-navy{background:linear-gradient(160deg,var(--navy-900) 0%,#150F3C 100%);color:var(--white);}
.bg-navy .text-muted-invert{color:var(--slate-300)!important;}

.eyebrow{
  font-family:var(--font-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.75rem;
  color:var(--teal-700);
  font-weight:600;
}
.bg-navy .eyebrow{color:var(--teal-300);}

.section-title{font-weight:700;color:var(--navy-900);}
.bg-navy .section-title{color:var(--white);}

.section-sub{color:var(--slate-600);max-width:640px;}

.divider-rule{height:1px;background:linear-gradient(90deg,var(--teal-500),transparent);width:64px;}

/* ---------- Buttons ---------- */
.btn-yukti-primary{
  background:linear-gradient(135deg,var(--teal-700),var(--navy-700));
  border:1px solid transparent;
  color:var(--white);
  font-weight:600;
  padding:.72rem 1.5rem;
  border-radius:var(--radius-sm);
  transition:all .2s ease;
}
.btn-yukti-primary:hover{
  filter:brightness(1.1);
  color:var(--white);
  transform:translateY(-1px);
  box-shadow:0 10px 24px -10px rgba(8,145,178,0.55);
}
.btn-yukti-outline{
  background:transparent;
  border:1px solid var(--slate-300);
  color:var(--white);
  font-weight:600;
  padding:.72rem 1.5rem;
  border-radius:var(--radius-sm);
  transition:all .2s ease;
}
.btn-yukti-outline:hover{border-color:var(--teal-300);color:var(--teal-300);}

/* ---------- Navbar ---------- */
.navbar-yukti{background:rgba(30,27,75,0.92);backdrop-filter:blur(10px);transition:padding .25s ease;}
.navbar-yukti .nav-link{color:var(--slate-300);font-weight:500;font-size:.925rem;margin-inline:.35rem;}
.navbar-yukti .nav-link:hover,.navbar-yukti .nav-link.active{color:var(--white);}

.brand-mark{font-family:var(--font-display);font-weight:800;font-size:1.35rem;color:var(--white);letter-spacing:-0.01em;}
.brand-mark .dot{color:var(--teal-500);}
.brand-mark .ops{font-weight:500;color:var(--teal-300);}

/* ---------- Cards ---------- */
.card-yukti{
  background:var(--white);
  border:1px solid var(--slate-300);
  border-radius:var(--radius-md);
  padding:1.75rem;
  height:100%;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-yukti:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);border-color:var(--teal-500);}

.icon-tile{
  width:48px;height:48px;
  border-radius:var(--radius-sm);
  background:rgba(8,145,178,0.1);
  color:var(--teal-700);
  display:flex;align-items:center;justify-content:center;
  font-size:1.35rem;
  margin-bottom:1rem;
}

.card-yukti-dark{
  background:rgba(255,255,255,0.04);
  color:var(--white);
  border-radius:var(--radius-md);
  padding:1.75rem;
  height:100%;
  border:1px solid rgba(255,255,255,0.1);
}
.card-yukti-dark .icon-tile{background:rgba(103,232,249,0.14);color:var(--teal-300);}

/* ---------- Problem cards (interactive) ---------- */
.problem-card{
  position:relative;
  background:var(--white);
  border:1px solid var(--slate-300);
  border-radius:var(--radius-md);
  padding:1.85rem 1.6rem;
  height:100%;
  overflow:hidden;
  cursor:default;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.problem-card::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(8,145,178,0.07),rgba(67,56,202,0.04));
  opacity:0;transition:opacity .3s ease;
}
.problem-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hover);border-color:var(--teal-500);}
.problem-card:hover::before{opacity:1;}

.problem-icon-circle{
  width:56px;height:56px;border-radius:50%;
  background:rgba(67,56,202,0.09);
  color:var(--navy-700);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;margin-bottom:1.1rem;
  position:relative;z-index:1;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), background .3s ease, color .3s ease;
}
.problem-card:hover .problem-icon-circle{
  transform:scale(1.12) rotate(-6deg);
  background:linear-gradient(135deg,var(--teal-700),var(--navy-700));
  color:var(--white);
}

.problem-tag{
  position:relative;z-index:1;display:inline-block;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--teal-700);
  background:rgba(8,145,178,0.08);border-radius:999px;
  padding:.2rem .65rem;margin-bottom:.75rem;
}
.problem-card h3,.problem-card p{position:relative;z-index:1;}

/* ---------- Pricing ---------- */
.price-card{
  border-radius:var(--radius-lg);
  padding:2.25rem 1.85rem;height:100%;
  border:1px solid var(--slate-300);
  position:relative;transition:all .25s ease;
}
.price-card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-4px);}
.price-card.featured{background:var(--navy-900);color:var(--white);border-color:var(--navy-900);}
.price-card.featured .price-note{color:var(--slate-300);}
.price-badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--teal-500);color:var(--navy-900);
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:.3rem .85rem;border-radius:999px;
}
.price-amount{font-family:var(--font-display);font-size:2rem;font-weight:700;}
.price-list{list-style:none;padding:0;margin:1.5rem 0;}
.price-list li{display:flex;gap:.6rem;align-items:flex-start;padding:.4rem 0;font-size:.925rem;}
.price-list .bi{color:var(--teal-500);}

/* ---------- Tech stack strip ---------- */
.tech-pill{
  border:1px solid var(--slate-300);border-radius:999px;
  padding:.55rem 1.1rem;font-family:var(--font-mono);font-size:.85rem;
  color:var(--navy-700);display:inline-flex;align-items:center;gap:.5rem;
  background:var(--white);
}
.tech-pill .bi{color:var(--teal-700);}

/* ---------- Who we serve ---------- */
.audience-chip{
  border:1px solid var(--slate-300);border-radius:var(--radius-sm);
  padding:1.1rem 1.35rem;display:flex;align-items:center;gap:.75rem;
  background:var(--white);white-space:nowrap;flex-shrink:0;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.audience-chip:hover{border-color:var(--teal-500);transform:translateY(-3px);box-shadow:var(--shadow-card);}
.audience-chip .bi{color:var(--navy-400);font-size:1.3rem;}

/* ---------- Marquee ---------- */
.marquee-wrap{
  overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee-track{display:flex;gap:1rem;width:max-content;animation:marquee-left 32s linear infinite;}
.marquee-track.reverse{animation-name:marquee-right;}
.marquee-wrap:hover .marquee-track{animation-play-state:paused;}
@keyframes marquee-left{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes marquee-right{from{transform:translateX(-50%);}to{transform:translateX(0);}}
@media (max-width:575.98px){.marquee-track{animation-duration:22s;}}

/* ---------- Stats strip ---------- */
.stat-num{font-family:var(--font-display);font-weight:700;font-size:2.4rem;color:var(--teal-300);line-height:1;}
.stat-label{color:var(--slate-300);font-size:.85rem;}

/* ---------- Contact ---------- */
.form-control-yukti{
  background:var(--white);border:1px solid var(--slate-300);
  border-radius:var(--radius-sm);padding:.75rem 1rem;font-size:.95rem;
}
.form-control-yukti:focus{border-color:var(--teal-500);box-shadow:0 0 0 3px rgba(6,182,212,0.15);}
.form-label-yukti{font-weight:600;font-size:.85rem;color:var(--navy-900);margin-bottom:.35rem;}
.form-label-yukti .optional-tag{font-weight:400;color:var(--slate-600);text-transform:none;letter-spacing:0;font-size:.78rem;}

.contact-info-item{display:flex;gap:1rem;align-items:flex-start;padding:1rem 0;border-bottom:1px solid rgba(255,255,255,0.1);}
.contact-info-item:last-child{border-bottom:none;}
.contact-info-item .bi{color:var(--teal-300);font-size:1.2rem;width:24px;}

#formStatus{display:none;border-radius:var(--radius-sm);}
#newsletterStatus{display:none;font-size:.8rem;margin-top:.4rem;}

/* ---------- Footer ---------- */
.footer-yukti{background:var(--navy-900);color:var(--slate-300);border-top:1px solid rgba(255,255,255,0.08);}
.footer-yukti a{color:var(--slate-300);}
.footer-yukti a:hover{color:var(--teal-300);}
.social-icon{
  width:36px;height:36px;border-radius:999px;
  border:1px solid rgba(255,255,255,0.15);
  display:flex;align-items:center;justify-content:center;
  color:var(--slate-300);transition:all .2s ease;
}
.social-icon:hover{background:var(--teal-500);color:var(--navy-900);border-color:var(--teal-500);}

/* ---------- Hero / vector animation ---------- */
.hero-visual{animation:float 6s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.pulse-dot{animation:pulse 2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.vector-illustration{max-width:100%;height:auto;}
.blob-decor{position:absolute;z-index:0;filter:blur(0px);opacity:0.5;pointer-events:none;}

/* ---------- Responsive ---------- */
@media (max-width:991.98px){
  :root{--section-y:4rem;}
  .price-card.featured{order:-1;}
}
@media (max-width:575.98px){
  .price-amount{font-size:1.6rem;}
}