/* ShivoasAI design system. Layered over the original site's responsive foundations. */
:root {
  --bg: #050610;
  --bg-mid: #090e1d;
  --panel: #0d1529;
  --panel-2: #101a2f;
  --pink: #bb4bff;
  --pink-2: #752cf3;
  --cyan: #02d7ff;
  --purple: #9650ff;
  --border: rgba(60, 178, 250, .14);
}
body { background: #050610; }
::selection { background: rgba(3,211,255,.22); }
.top-strip {
  background: #050916;
  color: #a8bcdb;
  border-bottom-color: rgba(55, 169, 255, .13);
}
.strip-pulse { background:#02d7ff; box-shadow:0 0 16px #02d7ff; }
.site-header { background:rgba(4,8,18,.91); border-bottom-color:rgba(42,166,255,.15); }
.nav-shell { min-height:85px; }
.brand { gap:10px; min-width:201px; }
.brand img { width:48px; height:48px; object-fit:cover; border-radius:11px; filter: drop-shadow(0 0 10px rgba(3,205,255,.2)); }
.brand-type strong { font:700 25px/1 var(--font-head); letter-spacing:-.06em; color:#f3f7ff; }
.brand-type strong span { color:#03d9ff; background:linear-gradient(110deg,#04e8ff,#c63aff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
.brand-type small { font-size:7px; letter-spacing:.15em; color:#9aafd2; }
.nav-cta { background:linear-gradient(120deg,#05d7ff,#8743fb); color:#020612; box-shadow:0 8px 24px rgba(0,174,255,.13); }
.nav-cta:hover { background:linear-gradient(120deg,#70edff,#b882ff); }
.desktop-nav a:hover,.desktop-nav a.is-active { color:#43e7ff; }
.hero {
  min-height:720px;
  background:radial-gradient(ellipse 47% 60% at 79% 48%,rgba(43,22,144,.18),transparent 79%),
             radial-gradient(ellipse 37% 70% at 76% 50%,rgba(5,192,255,.065),transparent 75%),
             #050610;
}
.hero::before { background-image:radial-gradient(rgba(78,122,216,.18) .75px,transparent .75px); background-size:28px 28px; opacity:.28; }
.hero-aurora { background:radial-gradient(ellipse,rgba(47,49,206,.18),rgba(4,196,255,.06) 44%,transparent 70%); left:49%; }
.hero-grid { grid-template-columns:1.02fr .98fr; gap:24px; min-height:620px; }
.hero-copy { padding-top:5px; }
.hero h1 { font-size:clamp(52px,5.2vw,78px); line-height:1.11; max-width:760px; letter-spacing:-.061em; }
.hero h1 .gradient-text { background-image:linear-gradient(100deg,#00e4ff 0%,#5eabff 39%,#c747ff 88%); }
.gradient-text { background-image:linear-gradient(110deg,#08dfff,#6889ff 55%,#e042ff); }
.eyebrow { color:#9fbbdf; }
.eyebrow-line { background:#00dfff; box-shadow:0 0 14px #00dfff; }
.hero-lede { font-size:16px; color:#aabbd6; }
.button-primary { background:linear-gradient(114deg,#00dfff,#4d79ff 54%,#9b4dff); color:#05101d; box-shadow:0 12px 36px rgba(0,180,255,.19); }
.button-primary:hover { box-shadow:0 14px 40px rgba(0,188,255,.27); }
.button-ghost { border-color:rgba(86,159,251,.23); background:rgba(24,42,76,.32); }
.button-ghost:hover { border-color:#3fe3ff; }
.proof-icon { background:#0d2137; color:#06dffd; border:1px solid rgba(0,218,255,.12); }
.hero-proof { margin-top:51px; }
.hero-art { height:558px; position:relative; display:flex; align-items:center; justify-content:center; }
.brand-halo { position:absolute; width:96%; height:82%; top:9%; left:2%; background:radial-gradient(ellipse,rgba(35,90,255,.25),rgba(171,38,231,.11) 40%,transparent 71%); filter:blur(52px); z-index:-1; }
.brand-portal { position:relative; width:min(108%,650px); margin-left:-7%; isolation:isolate; }
.brand-portal::before { content:""; position:absolute; inset:13% 10%; border-radius:50%; box-shadow:0 0 110px rgba(0,206,255,.14); }
.brand-portal img { position:relative; display:block; width:100%; height:auto; object-fit:contain; filter:drop-shadow(0 20px 38px rgba(26,18,70,.2)); }
.stage-corner { position:absolute; font-size:9px; font-weight:700; color:#748bb6; letter-spacing:.16em; }
.stage-corner-one { top:8%;left:5%; }
.stage-corner-two { top:8%;right:-4%; }
.brand-stage-caption { position:absolute;bottom:2%;width:100%;display:flex;justify-content:space-between;gap:16px; padding:12px 6px; color:#9eb4d6; border-top:1px solid rgba(53,166,247,.16); font-size:9px; font-weight:700; letter-spacing:.1em; }
.brand-stage-caption i { display:inline-block; width:7px;height:7px;background:#03e6ff;border-radius:50%;margin-right:7px;box-shadow:0 0 11px #00e2ff; }
.hero-bottom-rule { background:#05c9e8; }
.capability-strip { background:#090f20; border-block-color:rgba(3,203,255,.13); }
.capability-label { color:#3adeff; }
.section-kicker span { color:#00ddff; }
.muted-heading { color:#7b8eac; }
.services-section { background:linear-gradient(180deg,#090d19,#0b1020 88%); }
.service-card { background:linear-gradient(151deg,#121c32,#0b1425); border-color:rgba(82,171,255,.12); }
.service-card-featured { background:radial-gradient(ellipse at 100% 0%,rgba(16,124,255,.11),transparent 63%),linear-gradient(151deg,#162039,#0d142a); }
.service-card:before { background:linear-gradient(90deg,#00dfff,#a44cff); }
.service-card:hover { border-color:rgba(33,208,255,.45); box-shadow:0 20px 55px rgba(0,18,45,.39); }
.service-icon { color:#16d5ff; background:rgba(16,193,255,.075); border-color:rgba(16,193,255,.23); }
.expertise-section { background:#0a1223; }
.expertise-section:before { background:radial-gradient(circle,rgba(28,80,248,.17),transparent 70%); }
.expertise-console { border-color:rgba(53,158,246,.26); }
.expertise-tab.active { background:linear-gradient(105deg,#048caf,#743bef); border-color:rgba(72,228,255,.6); }
.panel-category { color:#37dfff; }
.statement-asterisk { color:#05dfff; }
.work-section { background:#070c17; }
.filter-chip.active,.filter-chip:hover { background:#087caa; border-color:#18c6f4; color:#fff; }
.work-type { color:#27d5fb; }
.process-section { background:#0a1020; }
.about-section { background:#080d1a; }
.about-graphic { height:480px; border-color:rgba(43,171,255,.18); background:#020205; box-shadow:0 25px 70px rgba(0,0,0,.22); }
.about-graphic::before { display:none; }
.about-graphic img { width:100%; max-width:100%; height:100%; object-fit:contain; filter:none; position:static; transform:none; }
.contact-section { background:radial-gradient(ellipse 72% 80% at 15% 50%,rgba(4,149,233,.115),transparent 68%),linear-gradient(145deg,#0c1429,#0b1428); border-top-color:rgba(41,190,255,.15); }
.contact-form { background:#111b31; border-color:rgba(70,172,245,.2); }
.form-title span:last-child { color:#01dfff; }
.footer-links span { color:#47dfff; }
.site-footer { background:#050914; }
.footer-bottom b { color:#06daff; }

@media (max-width:1100px) {
  .brand { min-width:190px; }
  .brand-type strong { font-size:23px; }
  .brand-type small { letter-spacing:.08em; }
  .hero-grid { gap:2px; }
  .stage-corner-two { right:3%; }
}
@media (max-width:900px) {
  .hero-grid { grid-template-columns:1fr; gap:10px; }
  .hero-art { height:500px; max-width:620px; width:100%; margin:0 auto; }
  .brand-portal { width:100%;margin:0; }
  .stage-corner { font-size:9px; }
  .about-graphic { height:480px; }
}
@media (max-width:600px) {
  .brand { min-width:0; gap:7px; }
  .brand img { width:39px; height:39px; border-radius:9px; }
  .brand-type strong { font-size:21px; }
  .brand-type small { font-size:6.2px; letter-spacing:.045em; }
  .top-strip { letter-spacing:.05em; font-size:8px; }
  .top-strip .strip-divider { margin-inline:3px; }
  .hero { padding-top:68px; }
  .hero h1 { font-size:clamp(42px,11.2vw,63px); margin:24px 0; }
  .hero-lede { font-size:14px; }
  .hero-proof { margin-top:31px; }
  .hero-art { width:100%; height:auto; aspect-ratio:1 / .88; transform:none; margin:0 auto 14px; }
  .brand-portal { width:115%; max-width:none; margin-left:-7.5%; }
  .stage-corner { display:none; }
  .brand-stage-caption { bottom:-7%; font-size:7.5px; padding:9px 0; letter-spacing:.05em; }
  .hero-bottom { margin-top:10px; }
  .about-graphic { height:auto; aspect-ratio:1; }
  .about-graphic img { width:100%; height:100%; }
}
@media (prefers-reduced-motion:reduce) { .brand-halo { filter:none; } }

/* Safari / iOS compatibility: prefixed equivalents for older WebKit. */
.site-header { -webkit-backdrop-filter:blur(22px); }
.hero::before { -webkit-mask-image:linear-gradient(to right,transparent 8%,black 75%); }
.about-graphic:before { -webkit-mask-image:radial-gradient(circle at center,transparent 24%,black 90%); }
.contact-form select { -webkit-appearance:none; }
/* iOS zooms the page when a focused field's text is under 16px. */
@media (hover:none) and (pointer:coarse) {
  .contact-form input,.contact-form textarea,.contact-form select { font-size:16px; }
}

/* Comfortable tap targets for nav, footer links and back-to-top. */
.desktop-nav a { padding-block:12px; }
.footer-links > div { gap:2px; }
.footer-links a { padding-block:6px; }
.footer-bottom a { padding-block:12px; }

/* Readable minimum sizes for small labels. */
.brand-type small { font-size:8px; }
.stage-corner,.brand-stage-caption,.graphic-label,.console-top small { font-size:9px; }

/* Tablet landscape: drop the tall desktop hero so content starts near the top. */
@media (max-width:1140px) {
  .hero { min-height:0; }
  .hero-grid { min-height:0; }
  .hero-art { transform:none; height:470px; }
}
@media (max-width:600px) {
  .brand-type small { font-size:7.5px; letter-spacing:.04em; }
  .top-strip { font-size:9px; }
  .hero-bottom { font-size:9px; }
  .brand-stage-caption { font-size:8.5px; }
  .hero-art { height:auto; }
}

/* Phones in landscape: short screens need the space for content, not chrome. */
@media (max-height:500px) and (orientation:landscape) {
  .top-strip { display:none; }
  .nav-shell { min-height:60px; }
  .brand img { width:36px; height:36px; }
  .hero { padding-top:22px; min-height:0; }
  .hero h1 { font-size:44px; margin:12px 0 14px; }
  .hero-lede { line-height:1.65; }
  .hero-proof { margin-top:24px; }
  html { scroll-padding-top:70px; }
}