/* Daiviksoft Technologies — daiviksoft.com
 *
 * Carried over from the Blocksy/Elementor site so the migration is not also an
 * unannounced rebrand: Roboto Slab headings, #24417C headings, #355575 body,
 * #102136 for dark bands. The old site shipped ~336 KB of generated inline CSS
 * per page; this is the entire stylesheet.
 */

:root {
  --ink:      #355575;
  --ink-soft: #6a819b;
  --heading:  #24417c;
  --deep:     #102136;
  --accent:   #c53727;
  --rule:     #e2e9f1;
  --wash:     #f6f9fc;
  --bg:       #ffffff;
  --wrap:     1140px;
  --measure:  72ch;
  --serif:    "Roboto Slab", Georgia, serif;
  --sans:     Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow:   0 1px 2px rgba(16,33,54,.04), 0 8px 24px rgba(16,33,54,.06);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  color: var(--heading);
  line-height: 1.22;
  margin: 0 0 .7rem;
  text-wrap: balance;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 1.3rem + 2.9vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.05rem); }
h3 { font-size: 1.28rem; }
h4 { font-size: 1.08rem; }

p  { margin: 0 0 1.15rem; }
a  { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
strong { color: var(--heading); font-weight: 650; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 1.2rem; padding-left: 1.25rem; }
li { margin: .4rem 0; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 3rem 0; }

.skip-link { position: absolute; left: -9999px; background: var(--deep); color: #fff;
             padding: .6rem 1rem; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; top: 0; z-index: 100; }

:focus-visible { outline: 2px solid var(--heading); outline-offset: 2px; border-radius: 3px; }

/* ================================================================= header */
.site-header {
  border-bottom: 1px solid var(--rule);
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(8px);
  position: sticky; top: 0; z-index: 50;
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 72px; flex-wrap: wrap;
}
.brand { font-family: var(--serif); font-weight: 700; font-size: 1.22rem;
         color: var(--heading); text-decoration: none; letter-spacing: -.02em; }
.nav { display: flex; flex-wrap: wrap; gap: .1rem 1.35rem; align-items: center; }
.nav a { color: var(--ink); text-decoration: none; font-size: .93rem;
         font-weight: 500; padding: .4rem 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--heading); border-bottom-color: var(--accent); }
.nav .cta { background: var(--deep); color: #fff; padding: .55rem 1.25rem;
            border-radius: 999px; border-bottom: 0; font-weight: 600; }
.nav .cta:hover { background: var(--heading); color: #fff; border-bottom-color: transparent; }

/* ================================================================ layout */
main { display: block; }
main > * { max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }

/* the hero spans full width and sits on a tinted band */
main > .page-hero {
  max-width: none; padding: 3.4rem 24px 3rem;
  background: linear-gradient(180deg, var(--wash), #fff 92%);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2.8rem;
}
.page-hero > * { max-width: var(--wrap); margin-inline: auto; }
.page-hero h1 { margin-bottom: .6rem; }
.kicker {
  font-size: .76rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 .7rem;
}
.lede { font-size: 1.16rem; line-height: 1.6; color: var(--ink); max-width: 62ch; margin: 0; }

main > section { margin-bottom: 2.6rem; }
main > section > * { max-width: var(--measure); }
main > section > .card-grid,
main > section > dl { max-width: none; }

.hero-figure { max-width: var(--wrap); margin: -1rem auto 2.6rem; padding-inline: 24px; }
.hero-figure img { border-radius: 16px; box-shadow: var(--shadow); width: 100%; }

/* ---- case studies: narrative beside a fact panel ---- */
.with-aside {
  display: grid; gap: 2.5rem;
  grid-template-columns: minmax(0,1fr) 300px;
  align-items: start;
}
.with-aside .content > section { margin-bottom: 2.4rem; }
.with-aside .content > section > * { max-width: var(--measure); }
.fact-panel {
  position: sticky; top: 96px;
  background: var(--wash); border: 1px solid var(--rule);
  border-radius: 16px; padding: 1.4rem 1.5rem;
}
.fact-panel h2 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
                 color: var(--ink-soft); font-family: var(--sans); font-weight: 700; margin-bottom: 1rem; }
.fact-panel dl { margin: 0; border: 0; background: none; }

dl { margin: 1.5rem 0; }
dt { font-size: .72rem; letter-spacing: .11em; text-transform: uppercase;
     color: var(--ink-soft); font-weight: 700; margin-top: .9rem; }
dt:first-child { margin-top: 0; }
dd { margin: .15rem 0 0; font-weight: 600; color: var(--heading); }

/* ================================================================= cards */
.card-grid {
  display: grid; gap: 1.15rem;
  /* auto-FIT with a 250px floor, not auto-FILL at 290px. At the 1140px wrap the
     old rule gave exactly 3 columns, so the homepage's four cards wrapped 3+1 and
     looked like a mistake. 250px yields 4 columns at full width, and auto-fit
     makes a short final row stretch to fill rather than leaving dead track. */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  list-style: none; padding-left: 0; margin: 1.6rem 0 0;
}

/* A FOUR-item grid between ~800 and 1080px gets 3 columns from the rule above,
   which leaves a single orphan on the second row — it reads as a mistake rather
   than a layout. A CSS quantity query (an element that is both the first child
   and the fourth from last has exactly four siblings) forces 2x2 through that
   band only. Grids of 3, 41 or 39 cards are untouched. */
@media (min-width: 760px) and (max-width: 1080px) {
  .card-grid:has(li:first-child:nth-last-child(4)) { grid-template-columns: repeat(2, 1fr); }
}
.card-grid li { margin: 0; }
.card {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--rule); border-radius: 16px; padding: 1.4rem 1.5rem;
  text-decoration: none; background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.card:hover { border-color: #c3d3e6; box-shadow: var(--shadow); transform: translateY(-3px); }
.card h3 { margin: 0 0 .5rem; font-size: 1.06rem; }
.card p  { margin: 0; font-size: .94rem; color: var(--ink); line-height: 1.6; }
.card .meta { margin-top: .85rem; font-size: .78rem; color: var(--ink-soft); font-weight: 600; }

/* ---- logo walls (/technologies/) ----
 * No greyscale. These logos are already low-contrast marks on transparent
 * backgrounds; desaturating them rendered the wall almost invisible. A tinted
 * tile gives each one a surface to sit on instead. */
main section h2 + img, main section img + img {
  display: inline-block; vertical-align: middle;
  width: auto; height: 38px; box-sizing: content-box;
  margin: .45rem .7rem .45rem 0; padding: .7rem 1.1rem;
  background: var(--wash); border: 1px solid var(--rule); border-radius: 12px;
  transition: border-color .16s ease, transform .16s ease;
}
main section h2 + img:hover, main section img + img:hover {
  border-color: #c3d3e6; transform: translateY(-2px);
}

/* content images that are not the hero */
main section > img { border-radius: 14px; box-shadow: var(--shadow); margin: 1.4rem 0; }

/* ================================================================= forms */
.contact-form { max-width: 34rem; margin: 1.5rem 0 2.5rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .85rem; font-weight: 650;
               color: var(--heading); margin-bottom: .32rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: .68rem .85rem; border: 1px solid var(--rule);
  border-radius: 10px; font: inherit; color: var(--ink); background: #fff;
}
.field textarea { resize: vertical; }
.contact-form button {
  background: var(--deep); color: #fff; border: 0; padding: .75rem 1.8rem;
  border-radius: 999px; font: inherit; font-weight: 650; cursor: pointer;
}
.contact-form button:hover { background: var(--heading); }
.form-status { margin: .9rem 0 0; font-size: .92rem; min-height: 1.4em; }
.form-status.error { color: var(--accent); }
.form-status.ok { color: var(--heading); }

/* ================================================================ footer */
.site-footer { background: var(--deep); color: #b9cadd; margin-top: 4rem; padding: 3.2rem 0 1.6rem; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer h2 { color: #fff; font-size: .95rem; margin: 0 0 .8rem; font-family: var(--sans); }
.site-footer .brand { color: #fff; display: block; margin-bottom: .5rem; font-size: 1.1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: .35rem 0; }
.site-footer p { font-size: .92rem; line-height: 1.65; }
.cols { display: grid; gap: 2.4rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.legal { border-top: 1px solid rgba(255,255,255,.13); margin-top: 2.4rem;
         padding-top: 1.2rem; font-size: .85rem; color: #8aa0ba; }

/* ============================================================ responsive */
@media (max-width: 900px) {
  .with-aside { grid-template-columns: 1fr; }
  .fact-panel { position: static; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  main > .page-hero { padding: 2.4rem 20px 2.2rem; margin-bottom: 2rem; }
  .lede { font-size: 1.06rem; }
  .site-header .wrap { min-height: 60px; padding-block: .5rem; }
  .nav { gap: .1rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------ brand mark */
/* The mark is 1080x647 — roughly 1.67:1 — so height alone decides how legible the
   "DAIVIKSOFT" wordmark under it is. At 34px it rendered ~57px wide and could not
   be read at all. */
.brand { display: flex; align-items: center; }
.brand img { height: 48px; width: auto; display: block; }
.footer-logo { height: 54px; width: auto; margin-bottom: 1rem; }
@media (max-width: 640px) { .brand img { height: 40px; } }