/* ==========================================================================
   Nextrobic — redesign layer (v4)
   Elevates the existing components with dimensional depth, glassmorphism,
   animated cloud/DevOps motifs, and a richer light palette. Loads last so it
   refines app.css + it.css + animate.css without replacing them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Palette & depth tokens
   -------------------------------------------------------------------------- */
:root {
    --glass: rgba(255, 255, 255, .72);
    --glass-line: rgba(255, 255, 255, .8);
    --sky-1: #f5f9ff;
    --sky-2: #eef4fd;
    --halo-cyan: rgba(0, 183, 212, .18);
    --halo-blue: rgba(47, 107, 255, .16);
    --halo-violet: rgba(122, 60, 240, .18);
    --ring: 0 0 0 1px rgba(47, 107, 255, .08);
    --lift: 0 30px 60px -32px rgba(19, 47, 96, .45);
}

/* Page gets a soft aurora wash instead of flat white */
body {
    background:
        radial-gradient(60% 40% at 12% -5%, var(--halo-cyan), transparent 60%),
        radial-gradient(50% 40% at 100% 0%, var(--halo-violet), transparent 55%),
        var(--paper);
    background-attachment: fixed;
}

/* --------------------------------------------------------------------------
   Section rhythm — generous, with a hairline top divider option
   -------------------------------------------------------------------------- */
.section { position: relative; }
.section--sky { background: linear-gradient(180deg, var(--sky-1), var(--sky-2)); }
.section--glass {
    background: linear-gradient(180deg, rgba(242,246,251,.6), rgba(255,255,255,.2));
}

/* A faint grid overlay that reads as "engineering blueprint" */
.section--grid::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(47,107,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47,107,255,.045) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(80% 60% at 50% 40%, #000, transparent 80%);
    -webkit-mask-image: radial-gradient(80% 60% at 50% 40%, #000, transparent 80%);
}

/* --------------------------------------------------------------------------
   Eyebrows & headings — a touch more character
   -------------------------------------------------------------------------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: var(--grad-soft);
    border: 1px solid rgba(47,107,255,.16);
    color: var(--blue);
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
}
.eyebrow::before {
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--grad);
    box-shadow: 0 0 10px 1px rgba(47,107,255,.6);
    animation: eyebrow-pulse 2.4s ease-in-out infinite;
}
@keyframes eyebrow-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.7); } }

h1, h2, h3 { letter-spacing: -.025em; }
.section-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }

/* --------------------------------------------------------------------------
   Glass cards — used across services, products, why, industries
   -------------------------------------------------------------------------- */
.svc,
.pstep,
.ind,
.card.prod,
.cap {
    background: var(--glass);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    border: 1px solid var(--glass-line);
    box-shadow: var(--shadow-sm), var(--ring);
}

.svc:hover,
.card.prod:hover {
    box-shadow: var(--lift), var(--ring);
    border-color: rgba(47,107,255,.28);
}

/* Icon medallion: dimensional, glowing */
.svc__icon {
    position: relative;
    background:
        radial-gradient(120% 120% at 30% 20%, #fff, var(--sky-2));
    box-shadow:
        inset 0 1px 0 #fff,
        0 10px 22px -12px rgba(47,107,255,.5);
    border: 1px solid rgba(47,107,255,.14);
}
.svc__icon::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: var(--grad);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .3s ease;
}
.svc:hover .svc__icon::after { opacity: 1; }

/* --------------------------------------------------------------------------
   Hero — bigger, more dimensional
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    padding-top: clamp(40px, 7vw, 90px);
    padding-bottom: clamp(30px, 5vw, 60px);
    overflow: hidden;
}
.hero__badge {
    background: var(--glass);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-line);
    box-shadow: var(--shadow-sm);
}
.hero h1 {
    font-size: clamp(2.4rem, 5.4vw, 4rem);
    line-height: 1.03;
    font-weight: 800;
}
.grad-text {
    background: linear-gradient(105deg, var(--cyan), var(--blue) 45%, var(--violet));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 200% auto;
    animation: grad-pan 6s linear infinite;
}
@keyframes grad-pan { to { background-position: 200% center; } }

/* Floating cloud/devops glyph chips drifting behind the hero */
.hero__clouds { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.hero__clouds span {
    position: absolute;
    width: 60px; height: 60px;
    border-radius: 16px;
    background: var(--glass);
    border: 1px solid var(--glass-line);
    box-shadow: var(--shadow-sm);
    display: grid; place-items: center;
    opacity: .8;
    animation: drift 16s ease-in-out infinite;
}
.hero__clouds span:nth-child(1) { top: 14%; left: 6%;  animation-delay: 0s; }
.hero__clouds span:nth-child(2) { top: 62%; left: 12%; animation-delay: -4s; }
.hero__clouds span:nth-child(3) { top: 24%; right: 8%; animation-delay: -8s; }
.hero__clouds span:nth-child(4) { bottom: 12%; right: 16%; animation-delay: -12s; }
.hero__clouds img { width: 32px; height: 32px; }
@keyframes drift {
    0%,100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-22px) rotate(4deg); }
}

/* --------------------------------------------------------------------------
   Metrics — glass slab with gradient numerals
   -------------------------------------------------------------------------- */
.metrics {
    background: var(--glass);
    backdrop-filter: blur(14px);
    border: 1px solid var(--glass-line);
    border-radius: var(--r-lg);
    box-shadow: var(--lift), var(--ring);
    overflow: hidden;
}
.metric__value {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 800;
}

/* --------------------------------------------------------------------------
   DevOps pipeline animation band (reusable)
   -------------------------------------------------------------------------- */
.devops-flow {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 22px clamp(16px, 3vw, 34px);
    background: var(--carbon);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.devops-flow::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(40% 80% at 15% 50%, rgba(0,183,212,.25), transparent 60%),
        radial-gradient(40% 80% at 85% 50%, rgba(122,60,240,.28), transparent 60%);
}
.devops-flow__node {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #cdd8ea;
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .04em;
    text-align: center;
    flex: 1;
}
.devops-flow__dot {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: grid; place-items: center;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
}
.devops-flow__dot svg { width: 22px; height: 22px; }
.devops-flow__line {
    position: relative;
    z-index: 1;
    flex: 1;
    height: 2px;
    background: rgba(255,255,255,.12);
    border-radius: 2px;
    overflow: hidden;
    min-width: 20px;
}
.devops-flow__line::after {
    content: "";
    position: absolute;
    top: 0; left: -40%;
    width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    animation: flow 2.4s linear infinite;
}
@keyframes flow { to { left: 120%; } }

/* --------------------------------------------------------------------------
   Buttons — more depth, animated primary
   -------------------------------------------------------------------------- */
.btn--primary {
    background: var(--grad);
    background-size: 160% auto;
    box-shadow: 0 12px 26px -12px rgba(47,107,255,.7);
    transition: background-position .5s ease, transform .18s ease, box-shadow .3s ease;
}
.btn--primary:hover {
    background-position: right center;
    transform: translateY(-2px);
    box-shadow: 0 18px 34px -12px rgba(122,60,240,.75);
}
.btn--ghost {
    background: var(--glass);
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-line);
}
.btn--ghost:hover { border-color: rgba(47,107,255,.4); transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   Tech stack board — deeper, animated glow
   -------------------------------------------------------------------------- */
.stack { box-shadow: var(--lift); }
.stack__glow { animation: stack-breathe 8s ease-in-out infinite; }
@keyframes stack-breathe { 0%,100% { opacity: .8; } 50% { opacity: 1; transform: scale(1.05); } }
.stack__chip { backdrop-filter: blur(6px); }

/* --------------------------------------------------------------------------
   Why grid — gradient number badges pop
   -------------------------------------------------------------------------- */
.why { box-shadow: var(--shadow-md), var(--ring); border-radius: var(--r-lg); }
.why__cell { backdrop-filter: blur(6px); }
.why__num { box-shadow: 0 8px 18px -8px rgba(47,107,255,.6); }

/* --------------------------------------------------------------------------
   CTA — dimensional dark slab with animated aurora
   -------------------------------------------------------------------------- */
.cta__inner, .cta {
    position: relative;
    overflow: hidden;
}
.cta__aurora {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(40% 60% at 20% 20%, rgba(0,183,212,.4), transparent 60%),
        radial-gradient(40% 60% at 80% 80%, rgba(122,60,240,.45), transparent 60%);
    animation: aurora 12s ease-in-out infinite alternate;
}
@keyframes aurora { to { transform: translate3d(6%, -6%, 0) scale(1.1); } }

/* --------------------------------------------------------------------------
   Scroll reveal — add a subtle scale for depth
   -------------------------------------------------------------------------- */
.reveal { transform: translateY(22px) scale(.99); }
.reveal.is-in { transform: none; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .devops-flow { flex-wrap: wrap; gap: 16px; }
    .devops-flow__line { flex-basis: 100%; height: 2px; }
}
@media (prefers-reduced-motion: reduce) {
    .grad-text, .eyebrow::before, .hero__clouds span,
    .devops-flow__line::after, .stack__glow, .cta__aurora { animation: none !important; }
}

/* ============================================================================
   Fluid layout — v8

   Five stylesheets had accumulated fifteen media queries between them, each
   fixing one breakpoint. The result held together at the widths someone had
   checked and broke between them: a 1024px tablet, a 1440px laptop, a phone in
   landscape.

   What follows replaces breakpoint-by-breakpoint patching with sizing that is
   continuous. clamp() interpolates between a floor and a ceiling across the
   viewport, so every width in between is deliberate rather than inherited from
   whichever query happened to match.
   ============================================================================ */

:root {
  /* The page gutter scales with the viewport but never disappears on a phone
     or exceeds what the eye can track on a monitor. */
  --gutter: clamp(16px, 4vw, 64px);
  --stack: clamp(48px, 7vw, 112px);
  --measure: 68ch;
}

/* Every section shares one container, so nothing drifts out of alignment when
   a page is edited in isolation. */
.container,
.wrap,
.section > .inner {
  width: min(100% - (var(--gutter) * 2), 1240px);
  margin-inline: auto;
}

section,
.section { padding-block: var(--stack); }

/* Type that scales with the viewport rather than stepping at a breakpoint.
   The floors are the smallest size each is still comfortable at; the ceilings
   stop a 4K monitor rendering a headline the height of a hand. */
h1, .hero__title { font-size: clamp(2rem, 1.2rem + 3.4vw, 4rem); line-height: 1.08; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.55rem, 1.1rem + 1.9vw, 2.6rem); line-height: 1.15; letter-spacing: -0.02em; }
h3 { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); line-height: 1.25; }

p, li { font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.075rem); line-height: 1.65; }

/* Prose stops at a readable measure regardless of how wide the window is.
   A 2560px monitor otherwise produces 200-character lines, which are hard to
   read for reasons that have nothing to do with font size. */
.hero__lead,
.section__lead,
.prose p { max-width: var(--measure); }

/* Grids reflow on content width instead of a device guess. auto-fit means the
   column count follows the space available, so there is no width at which the
   layout is wrong - only wider or narrower. */
.grid,
.grid--2,
.grid--3,
.grid--4,
.cards {
  display: grid;
  gap: clamp(14px, 2vw, 28px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/* Four-column grids need a smaller floor or they drop to two columns far too
   early on a tablet. */
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

/* Nothing may exceed its container. One oversized image or a long unbroken
   string is all it takes to create a horizontal scrollbar on the whole page,
   and it is invisible on the machine of whoever added it. */
img, svg, video, canvas, iframe, table, pre {
  max-width: 100%;
  height: auto;
}

pre, code { overflow-x: auto; }

/* Long URLs and product names in a narrow card. */
h1, h2, h3, p, li, td { overflow-wrap: break-word; }

/* Tables scroll inside their own box rather than widening the page. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Touch targets. 44px is the smallest reliably hittable size on a phone, and
   a 32px button that works with a mouse does not work with a thumb. */
@media (pointer: coarse) {
  .btn, .nav a, .tag, button { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Landscape phones are short, not narrow - vertical padding is what needs to
   give, not the columns. */
@media (max-height: 480px) and (orientation: landscape) {
  section, .section { padding-block: clamp(24px, 6vh, 48px); }
  .hero { min-height: auto; }
}

/* Very wide screens: cap the content, keep it centred, and let the background
   run to the edges. */
@media (min-width: 1600px) {
  .container, .wrap, .section > .inner { width: min(100% - 128px, 1320px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}