/* ==========================================================================
   Simplicity Technologies — simplicitytech.co.za
   Brand: royal navy #031B3F, racing red #DA0000 (sampled from the logo).
   Navy carries the structure; red is the accent, used with restraint.
   ========================================================================== */

:root{
  --navy:      #031B3F;
  --navy-deep: #020E22;
  --navy-2:    #0A2A57;
  --navy-3:    #123A70;
  --red:       #DA0000;
  --red-lt:    #FF4040;
  --red-soft:  rgba(218,0,0,.10);

  --ink:       #0B1526;
  --body:      #3A4658;
  --muted:     #6B7A8F;
  --mist:      #F3F6FA;
  --mist-2:    #E8EDF4;
  --paper:     #FFFFFF;
  --line:      rgba(3,27,63,.10);
  --line-2:    rgba(3,27,63,.16);
  --on-dark:   rgba(255,255,255,.78);
  --on-dark-2: rgba(255,255,255,.56);
  --line-dark: rgba(255,255,255,.12);

  --display: "Poppins", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --sans:    "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 56px);
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --nav-h: 76px;

  --sh-sm: 0 1px 2px rgba(3,27,63,.06), 0 2px 8px rgba(3,27,63,.05);
  --sh:    0 14px 38px -14px rgba(3,27,63,.28), 0 4px 12px rgba(3,27,63,.06);
  --sh-lg: 0 40px 90px -30px rgba(2,14,34,.55), 0 10px 30px rgba(2,14,34,.18);
  --ease:  cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:var(--sans); font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; font-family:var(--display); color:var(--ink); font-weight:600; line-height:1.12; letter-spacing:-.02em; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
ul,ol{ margin:0; padding:0; }

.skip{ position:absolute; left:-9999px; top:0; z-index:999; background:var(--red); color:#fff; padding:.8rem 1.1rem; font-weight:600; border-radius:0 0 var(--r-sm) 0; }
.skip:focus{ left:0; }
:focus-visible{ outline:2px solid var(--red); outline-offset:3px; border-radius:4px; }

/* ---------- layout ---------- */
.wrap{ width:min(100% - var(--gutter) * 2, var(--wrap)); margin-inline:auto; }
.wrap--narrow{ width:min(100% - var(--gutter) * 2, 780px); margin-inline:auto; }
.section{ padding:clamp(72px, 10vw, 128px) 0; position:relative; }
.section--mist{ background:var(--mist); }
.section--dark{ background:var(--navy); color:var(--on-dark); }
.section--dark h2, .section--dark h3{ color:#fff; }

.kicker{
  display:inline-flex; align-items:center; gap:.6em; margin:0 0 1rem;
  font-family:var(--display); font-weight:600; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--red);
}
.kicker::before{ content:""; width:22px; height:2px; background:currentColor; border-radius:2px; }
.section--dark .kicker, .kicker--light{ color:var(--red-lt); }
.h-xl{ font-size:clamp(2.6rem, 6.2vw, 4.6rem); line-height:1.02; letter-spacing:-.035em; font-weight:700; }
.h-lg{ font-size:clamp(2rem, 4.2vw, 3.1rem); letter-spacing:-.03em; }
.h-md{ font-size:clamp(1.25rem, 2vw, 1.5rem); }
.lede{ font-size:clamp(1.05rem, 1.5vw, 1.2rem); line-height:1.65; color:var(--body); max-width:62ch; }
.section--dark .lede{ color:var(--on-dark); }
.sec-head{ max-width:720px; margin-bottom:clamp(40px, 5vw, 64px); }
.sec-head--center{ margin-inline:auto; text-align:center; }
.sec-head--center .kicker{ justify-content:center; }
.sec-head--center .kicker::before{ display:none; }
.sec-head .lede{ margin-top:1.1rem; }
.sec-head--center .lede{ margin-inline:auto; }
.accent{ color:var(--red); }

/* ---------- buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:.95rem 1.6rem; border-radius:999px; border:0; cursor:pointer;
  font-family:var(--display); font-weight:600; font-size:.95rem; letter-spacing:.005em; line-height:1;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .25s, color .25s;
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; flex:none; transition:transform .3s var(--ease); }
.btn:hover{ transform:translateY(-2px); }
.btn:hover svg.arrow{ transform:translateX(3px); }
.btn--red{ background:var(--red); color:#fff; box-shadow:0 12px 26px -12px rgba(218,0,0,.75); }
.btn--red:hover{ background:#c10000; box-shadow:0 18px 32px -12px rgba(218,0,0,.8); }
.btn--navy{ background:var(--navy); color:#fff; box-shadow:0 12px 26px -14px rgba(3,27,63,.8); }
.btn--navy:hover{ background:var(--navy-2); }
.btn--ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line-2); }
.btn--ghost:hover{ box-shadow:inset 0 0 0 1.5px var(--navy); }
.btn--ghost-light{ background:rgba(255,255,255,.06); color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.26); }
.btn--ghost-light:hover{ background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5); }
.btn--sm{ padding:.7rem 1.15rem; font-size:.86rem; }
.btn--block{ width:100%; }
.btn.is-busy{ opacity:.7; pointer-events:none; }

.link{ display:inline-flex; align-items:center; gap:.45em; font-family:var(--display); font-weight:600; color:var(--red); }
.link svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.link:hover svg{ transform:translateX(3px); }
.section--dark .link{ color:var(--red-lt); }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:100; height:var(--nav-h);
  background:rgba(255,255,255,.9); backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s;
}
.nav.stuck{ border-bottom-color:var(--line); box-shadow:0 8px 28px -20px rgba(3,27,63,.45); }
.nav-inner{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.nav-brand img{ height:40px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:.2rem; }
.nav-links a:not(.btn){
  position:relative; padding:.5rem .85rem; border-radius:999px;
  font-family:var(--display); font-weight:500; font-size:.93rem; color:var(--ink); transition:color .2s, background .2s;
}
.nav-links a:not(.btn):hover{ background:var(--mist); }
.nav-links a.active{ color:var(--red); }
.nav-links .btn{ margin-left:.6rem; }
.nav-toggle{
  display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--line-2); background:#fff; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{ width:18px; height:1.8px; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.8px) rotate(-45deg); }
@media (max-width: 920px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position:absolute; left:0; right:0; top:var(--nav-h); flex-direction:column; align-items:stretch; gap:0;
    padding:.75rem var(--gutter) 1.25rem; background:#fff; border-bottom:1px solid var(--line);
    box-shadow:0 24px 40px -24px rgba(3,27,63,.4);
    opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .25s, transform .25s var(--ease), visibility .25s;
  }
  .nav-links.open{ opacity:1; visibility:visible; transform:none; }
  .nav-links a:not(.btn){ padding:.9rem .25rem; border-radius:0; border-bottom:1px solid var(--line); font-size:1.02rem; }
  .nav-links a:not(.btn):hover{ background:transparent; color:var(--red); }
  .nav-links .btn{ margin:1rem 0 0; }
}

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--navy-deep); color:var(--on-dark);
  padding:clamp(56px, 8vw, 104px) 0 clamp(72px, 9vw, 120px);
}
.hero-bg{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.hero-bg::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.2px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 70% 70% at 60% 40%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 60% 40%, #000 30%, transparent 75%);
}
.glow{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.55; }
.glow--red{ width:520px; height:520px; right:-120px; top:-140px; background:radial-gradient(circle, rgba(218,0,0,.55), transparent 65%); animation:drift 18s ease-in-out infinite alternate; }
.glow--blue{ width:680px; height:680px; left:-260px; bottom:-320px; background:radial-gradient(circle, rgba(34,92,190,.55), transparent 65%); animation:drift 22s ease-in-out infinite alternate-reverse; }
@keyframes drift{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(-40px,30px,0) scale(1.08); } }

.hero-grid{ display:grid; grid-template-columns:1fr 1.08fr; gap:clamp(40px, 6vw, 80px); align-items:center; }
.hero h1{ color:#fff; }
.hero h1 .accent{ color:var(--red-lt); }
.hero .lede{ color:var(--on-dark); margin-top:1.4rem; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1.6rem;
  padding:.45rem .95rem .45rem .6rem; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  font-size:.82rem; font-weight:500; color:#fff;
}
.pulse{ position:relative; width:8px; height:8px; border-radius:50%; background:#2ED573; }
.pulse::after{ content:""; position:absolute; inset:0; border-radius:50%; background:#2ED573; animation:ping 2.2s var(--ease) infinite; }
@keyframes ping{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(3); opacity:0; } }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.2rem; }
.hero-proof{ display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; margin-top:2.2rem; font-size:.88rem; color:var(--on-dark-2); }
.hero-proof span{ display:inline-flex; align-items:center; gap:.45rem; }
.hero-proof svg{ width:16px; height:16px; color:var(--red-lt); }

/* device mock-ups */
.showcase{ position:relative; padding:0 0 8% 0; }
.showcase-tag{
  position:absolute; left:0; top:-42px; display:inline-flex; align-items:center; gap:.5rem;
  font-size:.8rem; color:var(--on-dark-2);
}
.showcase-tag a{ color:#fff; font-weight:600; border-bottom:1px solid rgba(255,255,255,.3); }
.showcase-tag a:hover{ border-bottom-color:var(--red-lt); }
.browser{
  position:relative; border-radius:14px; overflow:hidden; background:#0E1B30;
  box-shadow:var(--sh-lg), 0 0 0 1px rgba(255,255,255,.08);
  transform:perspective(1600px) rotateY(-7deg) rotateX(3deg); transform-origin:left center;
  transition:transform .8s var(--ease);
}
.showcase:hover .browser{ transform:perspective(1600px) rotateY(-3deg) rotateX(1deg); }
.browser-bar{ display:flex; align-items:center; gap:7px; height:34px; padding:0 14px; background:#16243C; border-bottom:1px solid rgba(255,255,255,.06); }
.browser-bar i{ width:10px; height:10px; border-radius:50%; background:#34435C; }
.browser-bar i:nth-child(1){ background:#FF5F57; } .browser-bar i:nth-child(2){ background:#FEBC2E; } .browser-bar i:nth-child(3){ background:#28C840; }
.browser-url{
  flex:1; max-width:300px; margin-left:12px; height:20px; border-radius:6px; background:#0E1B30;
  display:flex; align-items:center; padding:0 10px; font-size:.68rem; color:#8FA2BF; letter-spacing:.01em; overflow:hidden; white-space:nowrap;
}
.browser img{ width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; }
.phone{
  position:absolute; right:-2%; bottom:0; width:27%; min-width:130px;
  border-radius:28px; padding:7px; background:#0A1426;
  box-shadow:var(--sh-lg), 0 0 0 1px rgba(255,255,255,.1);
  animation:float 7s ease-in-out infinite;
}
.phone::before{ content:""; position:absolute; top:12px; left:50%; width:30%; height:14px; transform:translateX(-50%); border-radius:0 0 10px 10px; background:#0A1426; z-index:2; }
.phone img{ width:100%; aspect-ratio:390/844; object-fit:cover; object-position:top; border-radius:22px; }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
.chip{
  position:absolute; display:flex; align-items:center; gap:.7rem; padding:.7rem 1rem .7rem .7rem;
  background:#fff; color:var(--ink); border-radius:14px; box-shadow:var(--sh); font-size:.82rem; line-height:1.3;
  animation:float 8s ease-in-out infinite;
}
.chip b{ font-family:var(--display); font-weight:600; display:block; font-size:.86rem; }
.chip span.muted{ color:var(--muted); }
.chip-ico{ width:34px; height:34px; flex:none; border-radius:10px; display:grid; place-items:center; background:var(--red-soft); color:var(--red); }
.chip-ico svg{ width:18px; height:18px; }
.chip--1{ left:-7%; top:18%; animation-delay:-2s; }
.chip--2{ left:14%; bottom:-2%; animation-delay:-4.5s; }
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }
  .showcase{ margin-top:56px; max-width:640px; }
  .chip--1{ left:-2%; }
}
@media (max-width: 560px){
  .chip{ display:none; }
  .browser{ transform:none; }
  .showcase:hover .browser{ transform:none; }
  .phone{ width:34%; right:-3%; }
}

/* ---------- principles strip ---------- */
.strip{ background:var(--paper); border-bottom:1px solid var(--line); }
.strip-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.strip-item{ padding:clamp(24px,3vw,36px) clamp(16px,2vw,28px); border-left:1px solid var(--line); }
.strip-item:first-child{ border-left:0; padding-left:0; }
.strip-item strong{ display:flex; align-items:center; gap:.55rem; font-family:var(--display); font-weight:600; color:var(--ink); font-size:1.02rem; margin-bottom:.35rem; }
.strip-item strong svg{ width:18px; height:18px; color:var(--red); flex:none; }
.strip-item span{ font-size:.93rem; color:var(--muted); line-height:1.55; display:block; }
@media (max-width: 900px){
  .strip-grid{ grid-template-columns:repeat(2,1fr); }
  .strip-item{ border-left:0; border-top:1px solid var(--line); padding-left:0; }
  .strip-item:nth-child(-n+2){ border-top:0; }
  .strip-item:nth-child(even){ padding-left:clamp(16px,3vw,28px); border-left:1px solid var(--line); }
}
@media (max-width: 520px){
  .strip-grid{ grid-template-columns:1fr; }
  .strip-item, .strip-item:nth-child(even){ padding-left:0; border-left:0; border-top:1px solid var(--line); }
  .strip-item:first-child{ border-top:0; }
  .strip-item:nth-child(2){ border-top:1px solid var(--line); }
}

/* ---------- services ---------- */
.services{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px, 2vw, 24px); }
.service{
  position:relative; padding:clamp(26px,3vw,38px); border-radius:var(--r-lg); background:var(--paper);
  border:1px solid var(--line); overflow:hidden; transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
}
.service::after{
  content:""; position:absolute; right:-80px; top:-80px; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, var(--red-soft), transparent 70%); opacity:0; transition:opacity .45s;
}
.service:hover{ transform:translateY(-6px); box-shadow:var(--sh); border-color:transparent; }
.service:hover::after{ opacity:1; }
.service-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.4rem; }
.service-ico{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:var(--navy); color:#fff; transition:background .3s, transform .45s var(--ease); }
.service:hover .service-ico{ background:var(--red); transform:rotate(-6deg); }
.service-ico svg{ width:24px; height:24px; }
.service-num{ font-family:var(--display); font-weight:600; font-size:.85rem; color:var(--muted); letter-spacing:.08em; }
.service h3{ font-size:1.35rem; margin-bottom:.6rem; }
.service > p{ color:var(--body); font-size:.99rem; }
.ticks{ list-style:none; display:grid; gap:.5rem; margin-top:1.2rem; padding-top:1.2rem; border-top:1px dashed var(--line-2); }
.ticks li{ position:relative; padding-left:1.6rem; font-size:.93rem; color:var(--body); line-height:1.5; }
.ticks li::before{
  content:""; position:absolute; left:0; top:.28em; width:15px; height:15px; border-radius:50%;
  background:var(--red-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DA0000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat;
}
.section--dark .ticks{ border-top-color:var(--line-dark); }
.section--dark .ticks li{ color:var(--on-dark); }
@media (max-width: 760px){ .services{ grid-template-columns:1fr; } }

/* ---------- featured work ---------- */
.work{ position:relative; overflow:hidden; isolation:isolate; }
.work::before{
  content:""; position:absolute; z-index:-1; right:-200px; top:-200px; width:640px; height:640px; border-radius:50%;
  background:radial-gradient(circle, rgba(218,0,0,.22), transparent 62%); filter:blur(30px);
}
.work-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(40px,6vw,80px); align-items:center; }
/* Second project mirrored, so the blocks alternate down the page */
.work-grid--flip{ grid-template-columns:.85fr 1.15fr; }
.work-grid--flip .work-shot .browser{ transform-origin:right center; }
.work-grid--flip .work-shot .phone{ right:auto; left:-4%; }
.work-grid + .work-grid{
  margin-top:clamp(52px,7vw,92px); padding-top:clamp(52px,7vw,92px);
  border-top:1px solid var(--line-dark);
}
.work-shot{ position:relative; }
.work-shot .browser{ transform:none; }
.work-shot .phone{ width:24%; right:-4%; bottom:-8%; }
.work-client{ display:flex; align-items:center; gap:.9rem; margin-bottom:1.4rem; }
.work-client img{ width:56px; height:auto; background:#fff; border-radius:12px; padding:6px; }
.work-client span{ font-size:.82rem; color:var(--on-dark-2); line-height:1.4; }
.work-client b{ display:block; font-family:var(--display); color:#fff; font-size:1rem; font-weight:600; }
.work h3.h-lg{ color:#fff; }
.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin:2rem 0; border-radius:var(--r); overflow:hidden; background:var(--line-dark); border:1px solid var(--line-dark); }
.stat{ background:rgba(2,14,34,.55); padding:1.1rem 1.2rem; }
.stat b{ display:block; font-family:var(--display); font-weight:700; font-size:1.7rem; color:#fff; line-height:1.1; letter-spacing:-.02em; }
.stat b em{ font-style:normal; color:var(--red-lt); }
.stat span{ font-size:.84rem; color:var(--on-dark-2); line-height:1.4; display:block; margin-top:.25rem; }
@media (max-width: 980px){
  .work-grid, .work-grid--flip{ grid-template-columns:1fr; }
  .work-shot{ max-width:680px; margin-bottom:24px; }
  /* Stacked: picture above the words for both blocks */
  .work-grid--flip .work-shot{ order:-1; }
  .work-grid--flip .work-shot .phone{ left:auto; right:-4%; }
}

/* ---------- process ---------- */
.track{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.4vw,28px); counter-reset:step; position:relative; }
.track::before{ content:""; position:absolute; left:28px; right:28px; top:27px; height:2px; background:linear-gradient(90deg, var(--red), var(--line-2) 60%); z-index:0; }
.track li{ position:relative; z-index:1; }
.track-n{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center; margin-bottom:1.4rem;
  background:var(--paper); border:2px solid var(--red); color:var(--red);
  font-family:var(--display); font-weight:700; font-size:1.15rem; box-shadow:0 0 0 8px var(--mist);
}
.track h3{ font-size:1.18rem; margin-bottom:.55rem; }
.track p{ font-size:.96rem; }
@media (max-width: 920px){
  .track{ grid-template-columns:1fr 1fr; row-gap:40px; }
  .track::before{ display:none; }
}
@media (max-width: 560px){ .track{ grid-template-columns:1fr; } }

/* ---------- every build includes ---------- */
.includes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,20px); }
.include{ display:flex; gap:1rem; align-items:flex-start; padding:1.3rem 1.4rem; border-radius:var(--r); background:var(--paper); border:1px solid var(--line); transition:border-color .3s, transform .4s var(--ease); }
.include:hover{ border-color:var(--red); transform:translateY(-3px); }
.include-ico{ width:40px; height:40px; flex:none; border-radius:11px; display:grid; place-items:center; background:var(--red-soft); color:var(--red); }
.include-ico svg{ width:20px; height:20px; }
.include h3{ font-size:1rem; margin-bottom:.25rem; font-weight:600; }
.include p{ font-size:.9rem; color:var(--muted); line-height:1.55; }
@media (max-width: 900px){ .includes{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .includes{ grid-template-columns:1fr; } }

/* ---------- about ---------- */
.about-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(40px,6vw,80px); align-items:start; }
.about-grid .lede{ max-width:none; }
.about-grid p{ color:var(--body); }
.facts{ position:sticky; top:calc(var(--nav-h) + 24px); padding:clamp(24px,3vw,34px); border-radius:var(--r-lg); background:var(--navy); color:var(--on-dark); box-shadow:var(--sh); }
.facts img{ width:150px; margin-bottom:1.4rem; }
.facts h3{ color:#fff; font-size:1.05rem; margin-bottom:1rem; }
.facts dl{ margin:0; display:grid; gap:.95rem; }
.facts dt{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-2); font-weight:600; }
.facts dd{ margin:.15rem 0 0; color:#fff; font-size:.95rem; line-height:1.5; }
@media (max-width: 900px){ .about-grid{ grid-template-columns:1fr; } .facts{ position:static; } }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--line-2); }
.faq details{ border-bottom:1px solid var(--line-2); }
.faq summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.35rem 0; font-family:var(--display); font-weight:600; font-size:1.08rem; color:var(--ink); transition:color .2s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--red); }
.faq summary i{
  position:relative; width:30px; height:30px; flex:none; border-radius:50%; background:var(--mist); transition:background .25s, transform .35s var(--ease);
}
.faq summary i::before, .faq summary i::after{ content:""; position:absolute; left:50%; top:50%; width:12px; height:2px; background:var(--ink); border-radius:2px; transform:translate(-50%,-50%); transition:transform .35s var(--ease), background .25s; }
.faq summary i::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq details[open] summary i{ background:var(--red); transform:rotate(180deg); }
.faq details[open] summary i::before, .faq details[open] summary i::after{ background:#fff; }
.faq details[open] summary i::after{ transform:translate(-50%,-50%) rotate(0deg); }
.faq-body{ padding:0 3rem 1.5rem 0; color:var(--body); font-size:.99rem; animation:fadeIn .4s var(--ease); }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

/* ---------- contact ---------- */
.contact{ position:relative; overflow:hidden; isolation:isolate; }
.contact::before{ content:""; position:absolute; z-index:-1; left:-240px; bottom:-260px; width:640px; height:640px; border-radius:50%; background:radial-gradient(circle, rgba(34,92,190,.4), transparent 62%); filter:blur(30px); }
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px,5vw,64px); align-items:start; }
.channels{ display:grid; gap:12px; margin-top:2rem; }
.channel{
  display:flex; align-items:center; gap:1rem; padding:1.05rem 1.2rem; border-radius:var(--r);
  background:rgba(255,255,255,.05); border:1px solid var(--line-dark); color:#fff; transition:background .25s, border-color .25s, transform .35s var(--ease);
}
a.channel:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.28); transform:translateX(4px); }
.channel-ico{ width:44px; height:44px; flex:none; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.08); color:#fff; }
.channel-ico svg{ width:20px; height:20px; }
.channel--wa .channel-ico{ background:#25D366; }
.channel small{ display:block; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-2); font-weight:600; }
.channel b{ display:block; font-family:var(--display); font-weight:600; font-size:1rem; margin-top:.1rem; word-break:break-word; }
.channel em{ display:block; font-style:normal; font-size:.82rem; color:var(--on-dark-2); margin-top:.1rem; }

.form-card{ background:var(--paper); color:var(--body); border-radius:var(--r-lg); padding:clamp(24px,3.4vw,40px); box-shadow:var(--sh-lg); }
.form-card h3{ font-size:1.35rem; margin-bottom:.35rem; }
.form-card > p{ color:var(--muted); font-size:.94rem; margin-bottom:1.6rem; }
.form{ display:grid; gap:1rem; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width: 560px){ .form-row{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field label{ font-family:var(--display); font-weight:500; font-size:.84rem; color:var(--ink); }
.field label small{ color:var(--muted); font-weight:400; font-family:var(--sans); }
.field input, .field select, .field textarea{
  width:100%; padding:.85rem 1rem; border-radius:12px; border:1.5px solid var(--mist-2); background:var(--mist);
  font-size:.98rem; color:var(--ink); transition:border-color .2s, background .2s, box-shadow .2s;
}
.field textarea{ min-height:140px; resize:vertical; line-height:1.55; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:0; border-color:var(--navy); background:#fff; box-shadow:0 0 0 4px rgba(3,27,63,.08); }
.field .err{ display:none; font-size:.8rem; color:var(--red); }
.field.has-err input, .field.has-err textarea, .field.has-err select{ border-color:var(--red); background:#fff; }
.field.has-err .err{ display:block; }
.chips-select{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chips-select label{ position:relative; cursor:pointer; }
.chips-select input{ position:absolute; opacity:0; pointer-events:none; }
.chips-select span{
  display:inline-block; padding:.55rem .95rem; border-radius:999px; border:1.5px solid var(--mist-2); background:var(--mist);
  font-family:var(--display); font-size:.84rem; font-weight:500; color:var(--body); transition:all .2s;
}
.chips-select input:checked + span{ background:var(--navy); border-color:var(--navy); color:#fff; }
.chips-select input:focus-visible + span{ outline:2px solid var(--red); outline-offset:2px; }
.hp{ position:absolute !important; left:-10000px !important; width:1px; height:1px; overflow:hidden; }
.form-note{ font-size:.8rem; color:var(--muted); line-height:1.5; }
.form-msg{ display:none; padding:.9rem 1.1rem; border-radius:12px; font-size:.93rem; line-height:1.5; }
.form-msg.show{ display:block; animation:fadeIn .35s var(--ease); }
.form-msg.ok{ background:#E7F7EE; color:#136B3A; border:1px solid #BFE8CF; }
.form-msg.bad{ background:#FDECEC; color:#A20000; border:1px solid #F6C6C6; }
.form-msg a{ text-decoration:underline; }
@media (max-width: 920px){ .contact-grid{ grid-template-columns:1fr; } }

/* ---------- CTA band ---------- */
.cta{ padding:clamp(56px,8vw,96px) 0; background:var(--red); color:#fff; position:relative; overflow:hidden; isolation:isolate; }
.cta::before{ content:""; position:absolute; inset:0; z-index:-1; background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.2px); background-size:22px 22px; mask-image:linear-gradient(90deg, transparent, #000 60%); -webkit-mask-image:linear-gradient(90deg, transparent, #000 60%); }
.cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.cta h2{ color:#fff; max-width:18ch; }
.cta p{ color:rgba(255,255,255,.85); margin-top:.8rem; max-width:52ch; }
.cta .btn--navy{ box-shadow:0 14px 30px -14px rgba(0,0,0,.6); }

/* ---------- footer ---------- */
.foot{ background:var(--navy-deep); color:var(--on-dark-2); padding:clamp(56px,7vw,80px) 0 0; font-size:.92rem; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:clamp(28px,4vw,48px); padding-bottom:clamp(40px,5vw,56px); }
.foot-logo{ width:170px; margin-bottom:1.1rem; }
.foot h4{ font-family:var(--display); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-bottom:1rem; font-weight:600; }
.foot ul{ list-style:none; display:grid; gap:.6rem; }
.foot a{ transition:color .2s; }
.foot a:hover{ color:#fff; }
.foot-legal{ border-top:1px solid var(--line-dark); padding:1.4rem 0 1.8rem; display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; justify-content:space-between; font-size:.8rem; color:rgba(255,255,255,.42); }
@media (max-width: 900px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 520px){ .foot-grid{ grid-template-columns:1fr; } }

/* ---------- mobile action bar ---------- */
.mobile-bar{ display:none; }
@media (max-width: 760px){
  .mobile-bar{
    position:fixed; left:12px; right:12px; bottom:12px; z-index:90; display:flex; gap:6px; padding:6px;
    background:rgba(2,14,34,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-radius:18px; box-shadow:0 18px 40px -12px rgba(2,14,34,.6); border:1px solid rgba(255,255,255,.1);
  }
  .mobile-bar a{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:.55rem .25rem; border-radius:13px;
    font-family:var(--display); font-weight:500; font-size:.72rem; color:#fff;
  }
  .mobile-bar a svg{ width:20px; height:20px; }
  .mobile-bar a.primary{ background:var(--red); }
  .mobile-bar a.wa{ background:#25D366; }
  body{ padding-bottom:84px; }
}

/* back to top */
.to-top{
  position:fixed; right:clamp(14px,2vw,26px); bottom:clamp(14px,2vw,26px); z-index:80; width:46px; height:46px; border-radius:50%; border:0; cursor:pointer;
  display:grid; place-items:center; background:var(--navy); color:#fff; box-shadow:var(--sh);
  opacity:0; visibility:hidden; transform:translateY(10px); transition:all .35s var(--ease);
}
.to-top svg{ width:20px; height:20px; }
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--red); }
@media (max-width: 760px){ .to-top{ bottom:98px; } }

/* ---------- case study page ---------- */
.cs-hero{ background:var(--navy-deep); color:var(--on-dark); padding:clamp(48px,7vw,88px) 0 clamp(56px,7vw,96px); position:relative; overflow:hidden; isolation:isolate; }
.cs-hero .hero-bg::before{ mask-image:radial-gradient(ellipse 80% 70% at 50% 20%, #000 30%, transparent 75%); -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 20%, #000 30%, transparent 75%); }
.crumbs{ display:flex; flex-wrap:wrap; gap:.45rem; list-style:none; font-size:.84rem; color:var(--on-dark-2); margin-bottom:1.6rem; }
.crumbs a{ color:#fff; }
.crumbs a:hover{ color:var(--red-lt); }
.crumbs li+li::before{ content:"/"; margin-right:.45rem; opacity:.5; }
.cs-hero h1{ color:#fff; max-width:18ch; }
.cs-hero .lede{ color:var(--on-dark); margin-top:1.3rem; }
.cs-meta{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:clamp(32px,4vw,48px) 0; background:var(--line-dark); border:1px solid var(--line-dark); border-radius:var(--r); overflow:hidden; }
.cs-meta div{ background:rgba(2,14,34,.6); padding:1rem 1.2rem; }
.cs-meta dt{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-2); font-weight:600; }
.cs-meta dd{ margin:.25rem 0 0; color:#fff; font-family:var(--display); font-weight:500; font-size:.98rem; line-height:1.4; }
.cs-meta a{ border-bottom:1px solid rgba(255,255,255,.3); }
.cs-meta a:hover{ border-bottom-color:var(--red-lt); }
@media (max-width: 820px){ .cs-meta{ grid-template-columns:1fr 1fr; } }
.cs-shot{ position:relative; margin-top:clamp(8px,2vw,16px); padding-bottom:0; }
.cs-shot .browser{ transform:none; border-radius:16px; }
.cs-shot .browser img{ aspect-ratio:16/10; }

.cs-body{ display:grid; grid-template-columns:.62fr 1.38fr; gap:clamp(32px,5vw,72px); }
.cs-body + .cs-body{ margin-top:clamp(56px,7vw,88px); }
.cs-body h2{ font-size:clamp(1.5rem,2.6vw,2rem); position:sticky; top:calc(var(--nav-h) + 24px); }
.cs-body h2 .kicker{ display:flex; font-size:.72rem; margin-bottom:.7rem; }
.cs-body .prose p{ font-size:1.02rem; }
.cs-body .prose h3{ font-size:1.12rem; margin:1.8rem 0 .5rem; }
.cs-body .prose h3:first-child{ margin-top:0; }
@media (max-width: 860px){ .cs-body{ grid-template-columns:1fr; } .cs-body h2{ position:static; } }

.brief{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin:1.4rem 0; }
.brief li{ display:flex; align-items:center; gap:.7rem; padding:.8rem 1rem; border-radius:12px; background:var(--mist); font-family:var(--display); font-weight:500; font-size:.93rem; color:var(--ink); }
.brief li svg{ width:18px; height:18px; color:var(--red); flex:none; }
@media (max-width: 560px){ .brief{ grid-template-columns:1fr; } }

.detail-list{ display:grid; gap:14px; margin-top:1.4rem; }
.detail{ display:grid; grid-template-columns:auto 1fr; gap:1rem; padding:1.2rem 1.3rem; border-radius:var(--r); border:1px solid var(--line); background:var(--paper); }
.detail-ico{ width:42px; height:42px; border-radius:11px; display:grid; place-items:center; background:var(--navy); color:#fff; }
.detail-ico svg{ width:20px; height:20px; }
.detail h3{ font-size:1.02rem; margin-bottom:.3rem; }
.detail p{ font-size:.95rem; color:var(--body); }

.numbers{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,2vw,20px); }
.number{ padding:1.5rem 1.4rem; border-radius:var(--r); background:rgba(255,255,255,.05); border:1px solid var(--line-dark); }
.number b{ display:block; font-family:var(--display); font-weight:700; font-size:clamp(2rem,3.4vw,2.7rem); color:#fff; letter-spacing:-.03em; line-height:1; }
.number b em{ font-style:normal; color:var(--red-lt); }
.number span{ display:block; margin-top:.6rem; font-size:.9rem; color:var(--on-dark-2); line-height:1.45; }
@media (max-width: 860px){ .numbers{ grid-template-columns:1fr 1fr; } }

.shots{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,28px); }
.shots figure{ margin:0; }
.shots .browser{ transform:none; }
.shots figcaption{ margin-top:.8rem; font-size:.88rem; color:var(--muted); }
.shots .span-2{ grid-column:span 2; }
@media (max-width: 760px){ .shots{ grid-template-columns:1fr; } .shots .span-2{ grid-column:auto; } }
.stack{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.2rem; }
.stack span{ padding:.45rem .85rem; border-radius:999px; background:var(--mist); border:1px solid var(--line); font-family:var(--display); font-size:.82rem; font-weight:500; color:var(--ink); }

/* ---------- pricing ---------- */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,22px); align-items:stretch; }
.plan{
  position:relative; display:flex; flex-direction:column; padding:clamp(26px,3vw,34px); border-radius:var(--r-lg);
  background:var(--paper); border:1px solid var(--line); box-shadow:var(--sh-sm); transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.plan:hover{ transform:translateY(-6px); box-shadow:var(--sh); }
.plan--featured{ background:var(--navy); border-color:var(--navy); color:var(--on-dark); box-shadow:var(--sh-lg); }
.plan-flag{
  position:absolute; top:0; left:clamp(26px,3vw,34px); transform:translateY(-50%); padding:.4rem .85rem; border-radius:999px;
  background:var(--red); color:#fff; font-family:var(--display); font-weight:600; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; line-height:1;
}
.plan h3{ font-size:1.3rem; }
.plan--featured h3{ color:#fff; }
.plan-for{ font-size:.93rem; line-height:1.55; color:var(--muted); margin:.5rem 0 1.5rem; }
.plan--featured .plan-for{ color:var(--on-dark-2); }
.price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .5rem; padding-bottom:1.4rem; border-bottom:1px solid var(--line); }
.price small{ font-size:.8rem; font-weight:500; color:var(--muted); }
.price b{ font-family:var(--display); font-weight:700; font-size:clamp(2.2rem,3.2vw,2.75rem); line-height:1; letter-spacing:-.035em; color:var(--ink); }
.plan--featured .price{ border-bottom-color:var(--line-dark); }
.plan--featured .price small{ color:var(--on-dark-2); }
.plan--featured .price b{ color:#fff; }
.plan .ticks{ flex:1; margin-top:0; padding-top:1.4rem; border-top:0; }
.plan--featured .ticks li{ color:var(--on-dark); }
.plan--featured .ticks li::before{ background-color:rgba(255,64,64,.2); }
.plan .btn{ margin-top:1.8rem; }
.bespoke{
  position:relative; overflow:hidden; isolation:isolate; margin-top:clamp(18px,2.4vw,26px);
  display:grid; grid-template-columns:1.3fr .9fr auto; gap:clamp(20px,3.4vw,48px); align-items:center;
  padding:clamp(28px,3.4vw,42px); border-radius:var(--r-lg); color:var(--on-dark);
  background:linear-gradient(115deg, var(--navy-deep) 0%, var(--navy-2) 100%); box-shadow:var(--sh);
}
.bespoke::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.2px); background-size:22px 22px;
  mask-image:linear-gradient(90deg, transparent 30%, #000); -webkit-mask-image:linear-gradient(90deg, transparent 30%, #000);
}
.bespoke .kicker{ margin-bottom:.6rem; color:var(--red-lt); }
.bespoke h3{ color:#fff; font-size:clamp(1.35rem,2.2vw,1.65rem); margin-bottom:.6rem; }
.bespoke p{ font-size:.97rem; color:var(--on-dark); }
.bespoke .ticks{ margin:0; padding:0; border:0; }
.bespoke .ticks li{ color:var(--on-dark); }
.bespoke .ticks li::before{ background-color:rgba(255,64,64,.2); }
.bespoke-price small{ display:block; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-2); font-weight:600; }
.bespoke-price b{ display:block; font-family:var(--display); font-weight:700; color:#fff; font-size:1.6rem; letter-spacing:-.02em; line-height:1.15; margin:.25rem 0 1.1rem; }
.price-note{ margin:clamp(22px,3vw,32px) auto 0; max-width:72ch; text-align:center; font-size:.9rem; color:var(--muted); }
@media (max-width: 1080px){
  .bespoke{ grid-template-columns:1fr 1fr; }
  .bespoke-price{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; padding-top:1.4rem; border-top:1px solid var(--line-dark); }
  .bespoke-price b{ margin:0; }
}
@media (max-width: 900px){
  .plans{ grid-template-columns:1fr; gap:30px; max-width:560px; margin-inline:auto; }
  .bespoke{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; }
}

/* form fieldset (the "what do you need" chips) */
fieldset.field{ border:0; margin:0; padding:0; min-width:0; }
fieldset.field legend{ padding:0; margin-bottom:.45rem; font-family:var(--display); font-weight:500; font-size:.84rem; color:var(--ink); }

/* case-study details stack on phones; long addresses may wrap */
.cs-meta dd{ overflow-wrap:anywhere; }
@media (max-width: 560px){ .cs-meta{ grid-template-columns:1fr; } }

/* 404 intro sits on navy */
.nf .lede{ color:var(--on-dark); }

/* the white form card sits inside a dark section */
.section--dark .form-card h3{ color:var(--ink); }

/* the counter inside a stat/number keeps the big number styling */
.stat b span, .number b span{ display:inline; font-size:inherit; color:inherit; margin:0; line-height:inherit; }

/* ticks on dark panels: light chip, bright check */
.plan--featured .ticks li::before, .bespoke .ticks li::before, .section--dark .ticks li::before{
  background:rgba(255,255,255,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6B6B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat;
}

/* process ring matches a white section */
.track-n{ box-shadow:0 0 0 8px var(--paper); }

/* links inside dark panels */
.facts dd a{ color:#fff; border-bottom:1px solid rgba(255,255,255,.3); }
.facts dd a:hover{ border-bottom-color:var(--red-lt); }

/* pair of phone mock-ups on the case study */
.phones{ display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(24px,5vw,64px); margin-top:clamp(40px,5vw,64px); }
.phones figure{ margin:0; width:min(270px, 42%); }
.phones .phone{ position:relative; right:auto; bottom:auto; width:100%; min-width:0; animation:none; }
.phones figcaption{ margin-top:1rem; text-align:center; font-size:.88rem; color:var(--muted); }

/* 404 */
.nf{ min-height:calc(100vh - var(--nav-h)); display:grid; place-items:center; text-align:center; background:var(--navy-deep); color:var(--on-dark); position:relative; overflow:hidden; isolation:isolate; padding:64px 0; }
.nf b.code{ display:block; font-family:var(--display); font-weight:700; font-size:clamp(5rem,16vw,10rem); line-height:1; letter-spacing:-.05em; color:#fff; }
.nf b.code em{ font-style:normal; color:var(--red-lt); }
.nf h1{ color:#fff; font-size:clamp(1.5rem,3vw,2.2rem); margin:1rem 0 .8rem; }
.nf .hero-cta{ justify-content:center; }

/* ---------- reveal ---------- */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
  .glow, .phone, .chip, .pulse::after{ animation:none !important; }
  .browser, .showcase:hover .browser{ transform:none; }
}