/* =====================================================================================
   Altered Atom Technologies Limited - altered-atom-technologies.com
   One stylesheet, no external fonts, no CDN. The whole site is static files served by
   nginx, so every byte here ships in the release and nothing can fail to load.
   Brand values are lifted from the printed sales pack (demo/build-rate-card.js) so the
   site and the leave-behind PDF are visibly the same company.
   ===================================================================================== */

:root {
  --navy: #0b2b5b;
  --navy-deep: #061426;
  --navy-mid: #12335f;
  --blue: #63a4ff;
  --blue-soft: #c2d4ea;
  --red: #b0242c;
  --gold: #c9a24a;

  --ink: #16181d;
  --ink-2: #39424f;
  --ink-3: #5a6472;
  --ink-4: #7c8798;

  --bg: #ffffff;
  --bg-2: #f6f8fb;
  --bg-3: #eef2f7;
  --line: #dfe5ec;
  --line-2: #eef1f5;

  --wrap: 1180px;
  --r: 10px;
  --shadow: 0 2px 10px rgba(11, 43, 91, .07);
  --shadow-lg: 0 10px 34px rgba(11, 43, 91, .14);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--navy); }

h1, h2, h3, h4, h5 { line-height: 1.14; letter-spacing: -.02em; margin: 0 0 .5em; color: var(--navy); }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.35rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
h4 { font-size: 1.06rem; }
p  { margin: 0 0 1em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 820px; }

.section { padding: clamp(52px, 7vw, 92px) 0; }
.section--tint { background: var(--bg-2); }
.section--navy { background: var(--navy-deep); color: #fff; }
.section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }

.eyebrow {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 700; color: var(--red); margin: 0 0 10px;
}
.section--navy .eyebrow { color: var(--blue); }

.lede { font-size: clamp(1rem, 1.5vw, 1.14rem); color: var(--ink-3); max-width: 66ch; }
.section--navy .lede { color: var(--blue-soft); }

.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 24px; border-radius: 8px; border: 1.5px solid transparent;
  font-weight: 700; font-size: .95rem; text-decoration: none; cursor: pointer;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
  line-height: 1.2;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--navy); color: #fff; box-shadow: var(--shadow); }
.btn--primary:hover { background: #0d3670; }
.btn--wa { background: #25d366; color: #05341a; }
.btn--wa:hover { background: #1fbe5b; }
.btn--ghost { border-color: var(--line); color: var(--navy); background: #fff; }
.btn--ghost:hover { border-color: var(--navy); }
.btn--onnavy { border-color: rgba(255,255,255,.4); color: #fff; background: transparent; }
.btn--onnavy:hover { background: rgba(255,255,255,.1); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn-row--center { justify-content: center; }

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.94); backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 26px; height: 70px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.brand img { height: 34px; width: auto; }
.brand-txt { line-height: 1.05; }
.brand-txt b { display: block; font-size: .92rem; color: var(--navy); letter-spacing: .01em; }
.brand-txt span { font-size: .58rem; letter-spacing: .16em; color: var(--ink-4); text-transform: uppercase; }

.nav-links { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav-links a {
  text-decoration: none; color: var(--ink-2); font-size: .93rem; font-weight: 600;
  padding: 8px 12px; border-radius: 6px;
}
.nav-links a:hover { background: var(--bg-3); color: var(--navy); }
.nav-links a.is-active { color: var(--navy); background: var(--bg-3); }
.nav-links a.nav-cta { margin-left: 10px; padding: 10px 18px; color: #fff; }
.nav-links a.nav-cta:hover { background: #0d3670; color: #fff; }

.nav-toggle {
  display: none; margin-left: auto; background: none; border: 1px solid var(--line);
  border-radius: 7px; width: 42px; height: 40px; cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 19px; height: 2px; background: var(--navy); border-radius: 2px;
  position: relative; transition: transform .18s ease, opacity .18s ease;
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed; inset: 70px 0 auto; background: #fff; flex-direction: column;
    align-items: stretch; gap: 0; padding: 12px 22px 26px; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg); display: none;
  }
  .nav-open .nav-links { display: flex; }
  .nav-links a { padding: 13px 6px; border-bottom: 1px solid var(--line-2); border-radius: 0; }
  .nav-links a.nav-cta { margin: 14px 0 0; justify-content: center; border-bottom: 0; }
}

/* ---------------------------------------------------------------- hero */
.hero { position: relative; background: var(--navy-deep); color: #fff; overflow: hidden; }
.hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9;
}
.hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(6,17,33,.97) 0%, rgba(6,17,33,.92) 46%, rgba(6,17,33,.42) 88%);
}
.hero__inner {
  position: relative;
  /* padding-top/bottom only: this element is ALSO a .wrap, and the shorthand would
     zero the wrap's horizontal padding and run the hero text into the screen edge. */
  padding-top: clamp(60px, 9vw, 118px); padding-bottom: clamp(46px, 6vw, 76px);
}
.hero h1 { color: #fff; max-width: 15ch; }
.hero h1 em { font-style: normal; color: var(--blue); }
.hero__lede { color: var(--blue-soft); font-size: clamp(1.02rem, 1.6vw, 1.19rem); max-width: 60ch; }

.kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
  border-top: 1px solid rgba(255,255,255,.2); margin-top: 40px; padding-top: 24px; max-width: 720px;
}
.kpi .n { font-size: clamp(1.6rem, 3.4vw, 2.1rem); font-weight: 700; line-height: 1; color: #fff; }
.kpi .l {
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
  color: #8fb3d9; margin-top: 7px; line-height: 1.36;
}
@media (max-width: 620px) { .kpis { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; } }

/* ---------------------------------------------------------------- page head (inner pages) */
.pagehead { background: var(--navy-deep); color: #fff; padding: clamp(46px, 6vw, 76px) 0 clamp(40px, 5vw, 60px); }
.pagehead h1 { color: #fff; margin-bottom: 14px; }
.pagehead p { color: var(--blue-soft); max-width: 68ch; font-size: clamp(1rem, 1.5vw, 1.1rem); margin: 0; }
.pagehead .eyebrow { color: var(--blue); }

/* ---------------------------------------------------------------- trust strip */
.trust { background: var(--bg-2); border-bottom: 1px solid var(--line); padding: 20px 0; }
.trust__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 30px; justify-content: center; }
.trust__row .t {
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4);
  font-weight: 700; width: 100%; text-align: center; margin-bottom: 2px;
}
.trust__row span.c { font-size: .88rem; color: var(--ink-3); font-weight: 600; }

/* ---------------------------------------------------------------- grids + cards */
.grid { display: grid; gap: 22px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 940px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 660px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 24px 22px; box-shadow: var(--shadow);
}
.card h3, .card h4 { margin-bottom: 8px; }
.card p { color: var(--ink-2); font-size: .94rem; margin: 0; }
.card__icon {
  width: 40px; height: 40px; border-radius: 9px; background: var(--bg-3);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.card__icon svg { width: 21px; height: 21px; stroke: var(--navy); fill: none; stroke-width: 1.7; }

.card--navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.card--navy h3, .card--navy h4 { color: #fff; }
.card--navy p { color: var(--blue-soft); }

.rule-card { border-left: 3px solid var(--navy); background: var(--bg-2); padding: 18px 22px; border-radius: 0 8px 8px 0; }
.rule-card h4 { margin-bottom: 6px; }
.rule-card p { margin: 0; color: var(--ink-2); font-size: .93rem; }
.rule-card--red { border-left-color: var(--red); background: #fdf6f6; }

/* ---------------------------------------------------------------- browser frame */
.win {
  border: 1px solid var(--line); border-radius: 9px; overflow: hidden;
  box-shadow: var(--shadow); background: #fff;
}
.win__bar {
  background: var(--bg-3); border-bottom: 1px solid var(--line);
  padding: 7px 11px; display: flex; align-items: center; gap: 5px;
}
.win__bar i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.win__bar .r { background: #f45f57; } .win__bar .y { background: #fabd2f; } .win__bar .g { background: #28c840; }
.win__url {
  margin-left: 9px; background: #fff; border: 1px solid var(--line); border-radius: 20px;
  padding: 2px 12px; font-size: .72rem; color: #48566b; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.win__url.priv { color: var(--ink-4); font-style: italic; }
.win img { width: 100%; display: block; }
.win--crop img { max-height: 300px; object-fit: cover; object-position: top center; }

/* ---------------------------------------------------------------- work items */
.work {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 46px);
  align-items: center; padding: clamp(30px, 4vw, 44px) 0; border-top: 1px solid var(--line);
}
.work:first-of-type { border-top: 0; padding-top: 4px; }
/* Full-page captures are up to 3x taller than they are wide, which left an acre of
   whitespace beside a four-line description. Cropping to the top of each site shows the
   part a visitor would actually judge it on and keeps the two columns balanced. */
.work .win img { max-height: 430px; object-fit: cover; object-position: top center; }
.work--flip .work__txt { order: -1; }
.work__client {
  font-size: .7rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--red); font-weight: 700; margin-bottom: 7px;
}
.work__txt h3 { margin-bottom: 10px; }
.work__txt p { color: var(--ink-2); font-size: .96rem; }
@media (max-width: 860px) {
  .work { grid-template-columns: 1fr; }
  .work--flip .work__txt { order: 0; }
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.chips span {
  background: var(--bg-3); color: var(--ink-2); font-size: .74rem;
  padding: 4px 10px; border-radius: 5px; font-weight: 600;
}
.section--navy .chips span { background: rgba(255,255,255,.12); color: var(--blue-soft); }

/* ---------------------------------------------------------------- pricing */
.price-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 8px; }
table.price {
  width: 100%; border-collapse: collapse; min-width: 640px; font-size: .93rem;
  background: #fff;
}
table.price th {
  text-align: left; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 700; padding: 10px 14px 10px 0;
  border-bottom: 1.5px solid var(--line); white-space: nowrap;
}
table.price td { padding: 15px 14px 15px 0; border-bottom: 1px solid var(--line-2); vertical-align: top; }
table.price tr:hover td { background: var(--bg-2); }
table.price td.nm { font-weight: 700; color: var(--ink); width: 20%; }
table.price td.pr { font-weight: 700; color: var(--navy); white-space: nowrap; width: 19%; }
table.price td.sc { color: var(--ink-2); }
table.price td.tl { color: var(--navy); font-weight: 700; font-size: .84rem; white-space: nowrap; width: 13%; }
table.price td.pr .was {
  display: block; font-weight: 400; color: var(--ink-4);
  text-decoration: line-through; font-size: .8rem;
}

.pricegroup { margin-bottom: 46px; }
.pricegroup__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  border-bottom: 2px solid var(--navy); padding-bottom: 9px; margin-bottom: 4px;
}
.pricegroup__head h2 { margin: 0; font-size: clamp(1.25rem, 2.3vw, 1.6rem); }
.pricegroup__head span { color: var(--ink-4); font-size: .89rem; }

.note {
  background: var(--bg-2); border-left: 3px solid var(--ink-4); padding: 15px 20px;
  font-size: .89rem; color: var(--ink-2); border-radius: 0 8px 8px 0; margin: 14px 0 0;
}
.note b { color: var(--ink); }
.note p:last-child { margin-bottom: 0; }

.banner {
  background: var(--navy); color: #fff; padding: 16px 22px; border-radius: var(--r);
  margin: 26px 0; font-size: .96rem;
}
.banner b { color: #fff; }

.terms { background: var(--bg-2); border-left: 3px solid var(--navy); padding: 22px 26px; border-radius: 0 var(--r) var(--r) 0; }
.terms ol { margin: 0; padding-left: 20px; }
.terms li { margin-bottom: 9px; color: var(--ink-2); font-size: .93rem; }
.terms li b { color: var(--ink); }

/* ---------------------------------------------------------------- founder band */
.founder {
  display: grid; grid-template-columns: 168px 1fr; gap: 30px; align-items: center;
  background: var(--navy); border-radius: var(--r); padding: 30px 34px; color: #fff;
}
.founder img { width: 168px; height: 168px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,.3); }
.founder .t { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.founder h3 { color: #fff; margin: 5px 0 9px; }
.founder p { color: var(--blue-soft); font-size: .95rem; margin: 0; }
.founder p b { color: #fff; }
@media (max-width: 660px) {
  .founder { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 26px 22px; }
}

/* ---------------------------------------------------------------- stat row */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat { background: var(--navy); color: #fff; border-radius: var(--r); padding: 20px 22px; }
.stat .n { font-size: 1.85rem; font-weight: 700; line-height: 1; }
.stat .l { font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; color: #a9c6e8; margin-top: 7px; }
@media (max-width: 880px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------------------------------------------------------------- steps */
.steps { counter-reset: s; display: grid; gap: 18px; }
.step { display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start; }
.step__n {
  counter-increment: s; width: 44px; height: 44px; border-radius: 50%;
  background: var(--navy); color: #fff; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 1.02rem;
}
.step__n::before { content: counter(s); }
.step h4 { margin-bottom: 4px; }
.step p { margin: 0; color: var(--ink-2); font-size: .94rem; }

/* ---------------------------------------------------------------- faq */
.faq details {
  border-bottom: 1px solid var(--line); padding: 4px 0;
}
.faq summary {
  cursor: pointer; font-weight: 700; color: var(--navy); padding: 16px 34px 16px 0;
  position: relative; list-style: none; font-size: 1.01rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; font-weight: 400; color: var(--ink-4); line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--ink-2); font-size: .95rem; padding-right: 20px; }

/* ---------------------------------------------------------------- contact form */
.form { display: grid; gap: 16px; }
.field label {
  display: block; font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px;
  font: inherit; font-size: .95rem; color: var(--ink); background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(11,43,91,.1);
}
.field textarea { min-height: 128px; resize: vertical; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }
.form__hint { font-size: .84rem; color: var(--ink-4); margin: 0; }

.contact-list { display: grid; gap: 20px; }
.contact-item { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.contact-item svg { width: 21px; height: 21px; stroke: var(--navy); fill: none; stroke-width: 1.7; margin-top: 4px; }
.contact-item b { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.contact-item a, .contact-item span { color: var(--ink); font-weight: 600; text-decoration: none; }
.contact-item a:hover { color: var(--navy); text-decoration: underline; }

/* ---------------------------------------------------------------- cta band */
.cta-band { background: var(--navy); color: #fff; border-radius: var(--r); padding: clamp(30px, 4vw, 46px); }
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--blue-soft); max-width: 62ch; }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--navy-deep); color: var(--blue-soft); padding: 56px 0 26px; font-size: .9rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 34px; }
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h5 {
  color: #fff; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px;
}
.site-footer a { color: var(--blue-soft); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.footer-brand img { height: 40px; filter: brightness(0) invert(1); margin-bottom: 14px; }
.footer-brand p { color: #8fb3d9; font-size: .88rem; max-width: 34ch; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14); margin-top: 40px; padding-top: 20px;
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  color: #7fa8dd; font-size: .8rem;
}

/* ---------------------------------------------------------------- floating whatsapp */
.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 70;
  width: 56px; height: 56px; border-radius: 50%; background: #25d366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.26); text-decoration: none;
  transition: transform .15s ease;
}
.wa-float:hover { transform: scale(1.07); }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }

/* ---------------------------------------------------------------- misc */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-s { margin-top: 18px; } .mt-m { margin-top: 32px; } .mt-l { margin-top: 48px; }
.small { font-size: .84rem; color: var(--ink-4); }
hr.sep { border: 0; border-top: 1px solid var(--line); margin: 44px 0; }

@media print {
  .site-header, .wa-float, .site-footer, .btn-row { display: none !important; }
  body { font-size: 11pt; }
}