/* ==========================================================================
   components.css — service cards, app showcase, stats, form, misc surfaces.
   ========================================================================== */

/* ── card base ──────────────────────────────────────────────────────────── */
.card{
  position:relative;
  display:flex; flex-direction:column;
  padding:var(--sp-6);
  border-radius:var(--radius-lg);
  border:1px solid var(--rule);
  background:linear-gradient(160deg,var(--surface-1) 0%,var(--surface-0) 100%);
  overflow:hidden;
  isolation:isolate;
  transition:transform var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
/* the glow follows the cursor — --mx/--my are written by js/animations.js */
.card::before{
  content:'';
  position:absolute; inset:0;
  z-index:-1;
  opacity:0;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(99,102,241,.16),transparent 62%);
  transition:opacity var(--dur) var(--ease);
}
.card:hover{
  transform:translateY(-4px);
  border-color:rgba(99,102,241,.36);
  box-shadow:var(--shadow-3);
}
.card:hover::before{ opacity:1; }

/* ── services ───────────────────────────────────────────────────────────── */
.services-grid{
  display:grid;
  gap:var(--sp-5);
  grid-template-columns:1fr;
}
@media (min-width:640px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){
  .services-grid{ grid-template-columns:repeat(3,1fr); gap:var(--gap); }
  /* five cards over three columns leaves a hole; the last two span wider
     halves of the final row so the grid stays balanced */
  .services-grid > .service:nth-child(4){ grid-column:span 2; }
}

.service__icon{
  display:grid; place-items:center;
  width:52px; height:52px;
  margin-bottom:var(--sp-5);
  border-radius:14px;
  border:1px solid rgba(99,102,241,.28);
  background:linear-gradient(150deg,rgba(99,102,241,.20),rgba(6,182,212,.10));
  color:var(--primary-light);
  flex:none;
  transition:transform var(--dur) var(--ease-spring),
             border-color var(--dur) var(--ease),
             color var(--dur) var(--ease);
}
.service:hover .service__icon{
  transform:scale(1.08) rotate(-4deg);
  border-color:rgba(99,102,241,.55);
  color:#c7d2fe;
}
.service__icon svg{ width:24px; height:24px; }

.service h3{ margin-bottom:var(--sp-3); }
.service p{ font-size:var(--t-sm); color:var(--ink-muted); }

.service__tags{
  display:flex; flex-wrap:wrap; gap:.4rem;
  margin-top:var(--sp-5);
}
.tag{
  padding:.28rem .6rem;
  border-radius:6px;
  border:1px solid var(--rule);
  background:rgba(148,163,184,.05);
  font-size:.6875rem; font-weight:500;
  letter-spacing:.02em;
  color:var(--ink-muted);
  white-space:nowrap;
}

/* ── apps showcase ──────────────────────────────────────────────────────── */
.apps-grid{
  display:grid;
  gap:var(--sp-6);
  grid-template-columns:1fr;
}
@media (min-width:720px){ .apps-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .apps-grid{ grid-template-columns:repeat(3,1fr); gap:var(--gap); } }

.app-card{ padding:0; }
.app-card:hover{ transform:translateY(-6px); }

.app-card__media{
  position:relative;
  aspect-ratio:16/10;
  display:grid; place-items:center;
  overflow:hidden;
  border-bottom:1px solid var(--rule);
  /* each card sets --a1/--a2 to its own accent pair */
  background:
    radial-gradient(120% 100% at 50% 0%,var(--a1,rgba(99,102,241,.28)) 0%,transparent 70%),
    linear-gradient(160deg,var(--a2,rgba(6,182,212,.14)) 0%,transparent 62%),
    var(--surface-2);
}
.app-card__media::after{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(180deg,#000,transparent 88%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 88%);
  pointer-events:none;
}

/* phone frame holding the screenshot (or the placeholder glyph) */
.phone{
  position:relative;
  width:min(38%,124px);
  aspect-ratio:9/19;
  border-radius:16px;
  padding:5px;
  background:linear-gradient(160deg,#334155,#1e293b);
  box-shadow:0 20px 44px -14px rgba(2,6,23,.9),0 0 0 1px rgba(255,255,255,.06);
  transform:translateY(9%);
  transition:transform var(--dur-slow) var(--ease-out);
  z-index:1;
}
.app-card:hover .phone{ transform:translateY(4%) scale(1.04); }
.phone__screen{
  width:100%; height:100%;
  border-radius:12px;
  overflow:hidden;
  display:grid; place-items:center;
  background:linear-gradient(170deg,var(--surface-1),var(--surface-0));
}
.phone__screen img{ width:100%; height:100%; object-fit:cover; }
.phone__glyph{ width:44%; height:auto; color:var(--primary-light); opacity:.85; }
/* notch */
.phone::before{
  content:'';
  position:absolute; top:9px; left:50%;
  transform:translateX(-50%);
  width:32%; height:5px;
  border-radius:99px;
  background:#0b1120;
  z-index:2;
}

.app-card__body{ display:flex; flex-direction:column; flex:1; padding:var(--sp-6); }

.app-card__head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--sp-3);
  margin-bottom:var(--sp-3);
}
.app-card__head h3{ letter-spacing:-.02em; }
.app-card__sub{
  display:block;
  font-family:var(--font-body);
  font-size:var(--t-xs);
  font-weight:400;
  color:var(--gray);
  margin-top:.2rem;
  letter-spacing:0;
}

.app-card > .app-card__body > p{ font-size:var(--t-sm); color:var(--ink-muted); }

.app-card__features{
  display:flex; flex-direction:column; gap:.55rem;
  margin:var(--sp-5) 0;
  font-size:var(--t-sm);
  color:var(--ink-soft);
}
.app-card__features li{ display:flex; align-items:flex-start; gap:.55rem; }
.app-card__features svg{
  width:15px; height:15px;
  margin-top:.32em;
  flex:none;
  color:var(--success);
}

.platforms{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:var(--sp-5); }
.platform{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.3rem .62rem;
  border-radius:99px;
  border:1px solid var(--rule);
  background:rgba(148,163,184,.05);
  font-size:.6875rem; font-weight:600;
  letter-spacing:.02em;
  color:var(--ink-muted);
}
.platform svg{ width:12px; height:12px; }

.app-card__foot{ margin-top:auto; padding-top:var(--sp-2); }

/* ── why-us ─────────────────────────────────────────────────────────────── */
.why-layout{
  display:grid;
  gap:var(--sp-8);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:960px){
  .why-layout{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:var(--sp-9); }
  .why-layout .section-head{ position:sticky; top:calc(var(--header-h) + 3rem); margin-bottom:0; }
}

.why-grid{
  display:grid;
  gap:var(--sp-4);
  grid-template-columns:1fr;
}
@media (min-width:560px){ .why-grid{ grid-template-columns:repeat(2,1fr); } }

.why-item{
  display:flex; gap:var(--sp-4);
  padding:var(--sp-5);
  border-radius:var(--radius);
  border:1px solid var(--rule);
  background:rgba(148,163,184,.035);
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease),
             transform var(--dur) var(--ease-out);
}
.why-item:hover{
  border-color:rgba(16,185,129,.34);
  background:rgba(16,185,129,.05);
  transform:translateY(-2px);
}
.why-item__check{
  display:grid; place-items:center;
  width:26px; height:26px;
  flex:none;
  border-radius:8px;
  border:1px solid rgba(16,185,129,.34);
  background:rgba(16,185,129,.12);
  color:var(--success);
}
.why-item__check svg{ width:14px; height:14px; }
.why-item h3{ font-size:var(--t-base); margin-bottom:.3rem; font-weight:600; }
.why-item p{ font-size:var(--t-sm); color:var(--ink-muted); line-height:1.55; }

/* ── stats ──────────────────────────────────────────────────────────────── */
.stats{
  position:relative;
  border-block:1px solid var(--rule);
  background:
    radial-gradient(70% 130% at 50% 50%,rgba(99,102,241,.11) 0%,transparent 70%),
    var(--surface-1);
}
.stats-grid{
  display:grid;
  gap:var(--sp-6) var(--sp-4);
  grid-template-columns:repeat(2,1fr);
  text-align:center;
}
@media (min-width:860px){ .stats-grid{ grid-template-columns:repeat(4,1fr); } }

.stat{ position:relative; }
@media (min-width:860px){
  .stat + .stat::before{
    content:'';
    position:absolute; left:0; top:12%; bottom:12%;
    width:1px;
    background:linear-gradient(180deg,transparent,var(--rule-strong),transparent);
  }
}
.stat__value{
  font-family:var(--font-display);
  font-size:var(--t-5xl);
  font-weight:500;
  line-height:1;
  letter-spacing:-.035em;
  background:var(--grad-ink);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  /* tabular figures stop the counter jittering as digits change width */
  font-variant-numeric:tabular-nums;
}
.stat__label{
  display:block;
  margin-top:var(--sp-3);
  font-size:var(--t-sm);
  color:var(--ink-muted);
  letter-spacing:.02em;
}

/* ── contact ────────────────────────────────────────────────────────────── */
.contact-layout{
  display:grid;
  gap:var(--sp-8);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:960px){
  .contact-layout{ grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:var(--sp-9); }
}

.contact-info__list{ display:flex; flex-direction:column; gap:var(--sp-5); margin-top:var(--sp-7); }
.contact-info__item{ display:flex; gap:var(--sp-4); align-items:flex-start; }
.contact-info__icon{
  display:grid; place-items:center;
  width:42px; height:42px; flex:none;
  border-radius:12px;
  border:1px solid var(--rule);
  background:rgba(99,102,241,.10);
  color:var(--primary-light);
}
.contact-info__icon svg{ width:18px; height:18px; }
.contact-info__item dt{
  font-size:var(--t-xs); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--gray);
  margin-bottom:.25rem;
}
.contact-info__item dd{ font-size:var(--t-sm); color:var(--ink); }
.contact-info__item dd a{ transition:color var(--dur) var(--ease); }
.contact-info__item dd a:hover{ color:var(--primary-light); }

/* ── form ───────────────────────────────────────────────────────────────── */
.form{
  padding:var(--sp-6);
  border-radius:var(--radius-lg);
  border:1px solid var(--rule);
  background:linear-gradient(160deg,var(--surface-1),var(--surface-0));
  box-shadow:var(--shadow-2);
}
@media (min-width:640px){ .form{ padding:var(--sp-7); } }

.form__row{
  display:grid;
  gap:var(--sp-4);
  grid-template-columns:1fr;
  margin-bottom:var(--sp-4);
}
@media (min-width:560px){ .form__row--2{ grid-template-columns:repeat(2,1fr); } }

.field{ display:flex; flex-direction:column; gap:.45rem; }
.field > label{
  font-size:var(--t-xs); font-weight:600;
  letter-spacing:.04em;
  color:var(--ink-soft);
}
.field .req{ color:var(--primary-light); margin-left:.15rem; }

.input,.select,.textarea{
  width:100%;
  padding:.8rem .95rem;
  border-radius:var(--radius-sm);
  border:1px solid var(--rule-strong);
  background:rgba(11,17,32,.7);
  color:var(--ink);
  font-size:var(--t-sm);
  transition:border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             background-color var(--dur) var(--ease);
}
.input::placeholder,.textarea::placeholder{ color:#516080; }
.input:hover,.select:hover,.textarea:hover{ border-color:rgba(148,163,184,.4); }
.input:focus,.select:focus,.textarea:focus{
  outline:none;
  border-color:var(--primary);
  background:rgba(11,17,32,.95);
  box-shadow:0 0 0 3px rgba(99,102,241,.2);
}
.textarea{ resize:vertical; min-height:8.5rem; line-height:1.6; }

.select{
  appearance:none;
  padding-right:2.4rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .9rem center;
  background-size:15px;
}
.select option{ background:var(--surface-1); color:var(--ink); }

/* validation — only after the field has been interacted with, so the form
   does not greet the reader in red */
.field.is-invalid .input,
.field.is-invalid .select,
.field.is-invalid .textarea{
  border-color:#f43f5e;
  box-shadow:0 0 0 3px rgba(244,63,94,.16);
}
.field__error{
  display:none;
  align-items:center; gap:.35rem;
  font-size:var(--t-xs);
  color:#fb7185;
}
.field.is-invalid .field__error{ display:flex; }
.field__error svg{ width:13px; height:13px; flex:none; }

.field__counter{
  align-self:flex-end;
  font-size:.6875rem;
  color:var(--gray);
  font-variant-numeric:tabular-nums;
}
.field__counter.is-near{ color:#fbbf24; }

.form__consent{
  display:flex; align-items:flex-start; gap:.7rem;
  margin:var(--sp-5) 0;
  font-size:var(--t-xs);
  color:var(--ink-muted);
  line-height:1.55;
}
.form__consent input{
  appearance:none;
  width:17px; height:17px;
  margin-top:.12em;
  flex:none;
  border-radius:5px;
  border:1px solid var(--rule-strong);
  background:rgba(11,17,32,.7);
  cursor:pointer;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.form__consent input:checked{
  background:var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E") center/12px no-repeat;
  border-color:var(--primary);
}
.form__consent a{ color:var(--primary-light); text-decoration:underline; text-underline-offset:2px; }

/* honeypot — off-screen rather than display:none, which some bots detect */
.hp-field{
  position:absolute!important;
  left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

.form__status{
  display:none;
  align-items:flex-start; gap:.6rem;
  margin-top:var(--sp-4);
  padding:.85rem 1rem;
  border-radius:var(--radius-sm);
  font-size:var(--t-sm);
  line-height:1.5;
}
.form__status.is-visible{ display:flex; }
.form__status svg{ width:17px; height:17px; flex:none; margin-top:.15em; }
.form__status--success{
  border:1px solid rgba(16,185,129,.4);
  background:rgba(16,185,129,.10);
  color:#6ee7b7;
}
.form__status--error{
  border:1px solid rgba(244,63,94,.4);
  background:rgba(244,63,94,.10);
  color:#fda4af;
}

/* button busy state */
.btn.is-busy{ pointer-events:none; opacity:.75; }
.btn__spinner{ display:none; width:1em; height:1em; flex:none; }
.btn.is-busy .btn__spinner{ display:block; animation:spin .7s linear infinite; }
.btn.is-busy .btn__label{ opacity:.85; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Turnstile widget slot — reserves height so nothing jumps when it mounts */
.cf-turnstile{ margin-bottom:var(--sp-4); min-height:65px; }

/* ── CTA band ───────────────────────────────────────────────────────────── */
.cta-band{
  position:relative;
  padding:clamp(2.5rem,6vw,4rem);
  border-radius:var(--radius-xl);
  border:1px solid rgba(99,102,241,.3);
  overflow:hidden;
  isolation:isolate;
  text-align:center;
  background:
    radial-gradient(90% 130% at 50% 0%,rgba(99,102,241,.24) 0%,transparent 68%),
    linear-gradient(160deg,var(--surface-2),var(--surface-0));
}
.cta-band::before{
  content:'';
  position:absolute; inset:0; z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(70% 80% at 50% 20%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(70% 80% at 50% 20%,#000,transparent 78%);
}
.cta-band h2{ font-size:var(--t-3xl); margin-bottom:var(--sp-4); }
.cta-band p{ color:var(--ink-muted); max-width:34rem; margin:0 auto var(--sp-6); }
.cta-band .hero__actions{ justify-content:center; }

/* ── prose (legal pages) ────────────────────────────────────────────────── */
.prose{ max-width:44rem; }
.prose > * + *{ margin-top:var(--sp-4); }
.prose h2{
  font-size:var(--t-2xl);
  margin-top:var(--sp-8);
  padding-top:var(--sp-6);
  border-top:1px solid var(--rule);
}
.prose h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.prose h3{ font-size:var(--t-lg); margin-top:var(--sp-6); }
.prose p,.prose li{ color:var(--ink-soft); font-size:var(--t-base); }
.prose ul,.prose ol{ padding-left:1.3rem; display:flex; flex-direction:column; gap:.6rem; }
.prose ul{ list-style:disc; }
.prose ol{ list-style:decimal; }
.prose li::marker{ color:var(--primary-light); }
.prose a{
  color:var(--primary-light);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  transition:color var(--dur) var(--ease);
}
.prose a:hover{ color:#a5b4fc; }
.prose strong{ color:var(--ink); font-weight:600; }
.prose code{
  padding:.15em .4em;
  border-radius:5px;
  border:1px solid var(--rule);
  background:rgba(148,163,184,.09);
  font-size:.9em;
}
.prose table{
  width:100%;
  /* below this the columns crush into unreadable slivers; the wrapper
     scrolls instead */
  min-width:30rem;
  border-collapse:collapse;
  font-size:var(--t-sm);
}
.prose th,.prose td{
  padding:.7rem .8rem;
  border:1px solid var(--rule);
  text-align:left;
  vertical-align:top;
}
.prose th{ background:rgba(148,163,184,.06); color:var(--ink); font-weight:600; }
/* Wide tables scroll inside themselves rather than widening the page. The
   right-edge fade is the only cue that there is more, so it only appears
   while the wrapper is actually scrollable. */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
@media (max-width:34rem){
  .table-wrap{
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
  }
  .table-wrap:focus-within{ -webkit-mask-image:none; mask-image:none; }
}

.legal-meta{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .8rem;
  border-radius:99px;
  border:1px solid var(--rule);
  background:rgba(148,163,184,.05);
  font-size:var(--t-xs);
  color:var(--ink-muted);
}

/* ── timeline (about page) ──────────────────────────────────────────────── */
.timeline{ position:relative; padding-left:2rem; }
.timeline::before{
  content:'';
  position:absolute; left:7px; top:.6rem; bottom:.6rem;
  width:1px;
  background:linear-gradient(180deg,var(--primary),var(--secondary),transparent);
}
.timeline__item{ position:relative; padding-bottom:var(--sp-7); }
.timeline__item:last-child{ padding-bottom:0; }
.timeline__item::before{
  content:'';
  position:absolute; left:-2rem; top:.5rem;
  width:15px; height:15px;
  border-radius:50%;
  border:2px solid var(--primary);
  background:var(--surface-0);
}
.timeline__year{
  font-size:var(--t-xs); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--primary-light);
  margin-bottom:.3rem;
}
.timeline__item h3{ font-size:var(--t-lg); margin-bottom:.4rem; }
.timeline__item p{ font-size:var(--t-sm); color:var(--ink-muted); }

/* ── value cards (about) ────────────────────────────────────────────────── */
.value-grid{
  display:grid;
  gap:var(--sp-5);
  grid-template-columns:1fr;
}
@media (min-width:640px){ .value-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .value-grid{ grid-template-columns:repeat(3,1fr); } }

/* ── process steps ──────────────────────────────────────────────────────── */
.steps{
  display:grid;
  gap:var(--sp-5);
  grid-template-columns:1fr;
  counter-reset:step;
}
@media (min-width:640px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .steps{ grid-template-columns:repeat(4,1fr); gap:var(--sp-4); } }

.step{
  position:relative;
  padding:var(--sp-5);
  border-radius:var(--radius);
  border:1px solid var(--rule);
  background:rgba(148,163,184,.035);
}
.step::before{
  counter-increment:step;
  content:'0' counter(step);
  display:block;
  font-family:var(--font-display);
  font-size:var(--t-2xl);
  font-weight:600;
  line-height:1;
  letter-spacing:-.03em;
  background:var(--grad-ink);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  opacity:.55;
  margin-bottom:var(--sp-4);
}
.step h3{ font-size:var(--t-base); margin-bottom:.4rem; }
.step p{ font-size:var(--t-sm); color:var(--ink-muted); line-height:1.55; }

/* ── 404 ────────────────────────────────────────────────────────────────── */
.error-page{
  min-height:100svh;
  display:grid; place-items:center;
  text-align:center;
  padding:calc(var(--header-h) + 3rem) 0 4rem;
  background:
    radial-gradient(60% 50% at 50% 30%,rgba(99,102,241,.15) 0%,transparent 70%),
    var(--surface-0);
}
.error-page__code{
  font-family:var(--font-display);
  font-size:clamp(5rem,20vw,11rem);
  font-weight:600;
  line-height:.9;
  letter-spacing:-.05em;
  background:var(--grad-ink);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom:var(--sp-4);
}

/* ── scroll reveal (driven by IntersectionObserver) ─────────────────────── */
.js .reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity 760ms var(--ease-out),transform 760ms var(--ease-out);
  transition-delay:var(--d,0ms);
}
.js .reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
  .card:hover,.app-card:hover,.btn:hover,.why-item:hover{ transform:none; }
  .app-card:hover .phone{ transform:translateY(9%); }
  .service:hover .service__icon{ transform:none; }
  .btn.is-busy .btn__spinner{ animation-duration:1.6s; }
}