/*
 * Pillgram — new design
 * Copyright (c) 2026 Amar Micro Inc.
 * Author: Jacques Amar
 *
 * All rights reserved. Proprietary software — see LICENSE for terms.
 *
 * Version: 1.0.0
 */

/* ==========================================================================
   Pillgram — stylesheet (single source of truth for every page)
   Principles: no px except tiny corners/hairlines · no fixed widths ·
   nothing declared in HTML · every value reused from a token.
   ========================================================================== */

/* --- Root scale: the whole design scales with the viewport, so no page
       ever needs a breakpoint or an assumed screen size. --- */
html { font-size: clamp(0.94rem, 0.88rem + 0.28vw, 1.16rem); }

:root {
  /* The site has no dark variant, so say so: without this a dark-mode browser
     renders native controls dark inside our white panels. */
  color-scheme: light;

  /* colour.  --c-ground is the masthead colour — every page's
     <meta name="theme-color"> must carry this value; keep the two in sync. */
  --c-ground:#f2f4f8; --c-surface:#fff; --c-surface-2:#fbfcfe;
  --c-ink:#2b3445; --c-body:#5a6478; --c-muted:#6b7688; --c-muted-2:#7d879b; --c-note:#a0a9bb;
  --c-crimson:#ef0d4e; --c-violet:#c0298f; --c-violet-band:#a03aa6; --c-violet-stat:#8a52c0;
  --c-blue:#4a90f2; --c-blue-text:#3b8ff0; --c-blue-dark:#8fc0f7; --c-footer:#232b3b;
  --c-stripe-a:#eef1f7; --c-stripe-b:#e4e9f2;
  --line:rgba(43,52,69,.09); --line-soft:rgba(43,52,69,.06); --line-input:rgba(43,52,69,.16);
  --line-dark:rgba(255,255,255,.18);

  /* keyboard focus — one ring for the whole site, two colours so it stays
     visible on the dark footer and modal as well as on the light ground.
     Deliberately a touch deeper than --c-blue: the brand blue is only 2.91:1
     against --c-ground and fails WCAG 1.4.11's 3:1 for non-text contrast,
     where this is 3.42:1 on the ground and 3.77:1 on white. */
  --c-focus:#3283ea; --c-focus-dark:var(--c-blue-dark);
  --focus-w:0.16em; --focus-off:0.14em;

  /* gradients */
  --g-head:linear-gradient(96deg,var(--c-crimson) 0%,var(--c-violet) 48%,var(--c-blue) 100%);
  --g-action:linear-gradient(96deg,var(--c-crimson),var(--c-blue));
  --g-band:linear-gradient(100deg,var(--c-crimson) 0%,var(--c-violet-band) 52%,var(--c-blue) 100%);

  /* fluid space scale */
  --s-1:0.5rem; --s-2:0.75rem; --s-3:1rem; --s-4:1.375rem; --s-5:1.75rem;
  --s-6:2.25rem; --s-7:2rem; --s-8:2.5rem;
  --gutter:clamp(1rem,3vw,2rem);
  --section:clamp(2.75rem,5vw,5rem);
  --section-tight:clamp(2.25rem,3.5vw,3.5rem);
  --section-head:clamp(1.75rem,3vw,3.25rem);   /* lead-in above the first section */
  --measure:38em;          /* long-form line length cap */
  --shell:78rem;           /* content cap — a max, never a fixed width */

  /* type */
  --f:Poppins,system-ui,sans-serif;
  --f-mono:ui-monospace,Menlo,monospace;
  --t-h1:clamp(1.95rem,4.5vw,3.75rem);
  --t-h2:clamp(1.9rem,3.6vw,3rem);
  --t-h3:clamp(1.5rem,2.6vw,2.4rem);
  --t-lead:clamp(1.15rem,1.6vw,1.45rem);
  --t-body:1.19rem;
  --t-small:0.97rem;

  /* corners — the one place px is allowed */
  --r-pill:9999px; --r-lg:2rem; --r-md:1.4rem; --r-sm:0.8rem; --r-hair:2px;

  --sh-action:0 0.6rem 1.6rem rgba(74,144,242,.28);
  --sh-float:0 0.75rem 1.9rem rgba(43,52,69,.1);
  --sh-hover:0 1.1rem 2.5rem rgba(43,52,69,.09);
}

*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  background:var(--c-ground); color:var(--c-ink);
  font:400 var(--t-body)/1.6 var(--f);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video { max-width:100%; height:auto; display:block; }
a { color:var(--c-blue-text); text-decoration:none; }
a:hover { color:var(--c-crimson); }
input,textarea,button,select { font-family:inherit; }
h1,h2,h3,p { margin:0; text-wrap:pretty; }

/* --- layout primitives, reused everywhere --------------------------------- */
.shell { width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }
.section { padding-block:var(--section); }
.section--tight { padding-block:var(--section-tight); }
.section--surface { background:var(--c-surface); }
.stack > * + * { margin-top:var(--s-4); }
.measure { max-width:var(--measure); }

/* auto-fit grids: they reflow on their own, so there are no media queries
   anywhere in this stylesheet. */
.cols { display:grid; gap:clamp(1.75rem,3vw,3rem); align-items:center;
        grid-template-columns:repeat(auto-fit,minmax(min(21rem,100%),1fr)); }
.cols--top { align-items:start; }
.cols--split { grid-template-columns:minmax(0,var(--measure)) minmax(min(19rem,100%),1fr); }
.grid-3 { display:grid; gap:var(--s-4); grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr)); }
.grid-cards { display:grid; gap:var(--s-4); grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr)); }

/* --- type roles ---------------------------------------------------------- */
.h1 { font-weight:700; font-size:var(--t-h1); line-height:1.0; letter-spacing:-.03em; }
.h2 { font-weight:700; font-size:var(--t-h2); line-height:1.12; letter-spacing:-.02em; }
.h3 { font-weight:600; font-size:var(--t-h3); line-height:1.2; }
.lead { font-weight:300; font-size:var(--t-lead); line-height:1.62; color:var(--c-body); }
.body { font-weight:300; line-height:1.65; color:var(--c-body); }
.small { font-weight:300; font-size:var(--t-small); line-height:1.7; color:var(--c-muted); }
.note { font:400 0.85rem/1.5 var(--f-mono); color:var(--c-note); }
.eyebrow { font-weight:500; font-size:0.83rem; letter-spacing:.09em; text-transform:uppercase; color:var(--c-blue-text); }
.center { text-align:center; margin-inline:auto; }

/* the signature: reserved for the page H1 */
.grad { background:var(--g-head); -webkit-background-clip:text; background-clip:text;
        -webkit-text-fill-color:transparent; color:transparent; }
@supports not ((-webkit-background-clip:text) or (background-clip:text)) {
  .grad { color:var(--c-crimson); -webkit-text-fill-color:currentColor; }
}

/* --- actions ------------------------------------------------------------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--s-1);
       padding:0.85em 1.9em; border-radius:var(--r-pill); border:none; cursor:pointer;
       font:600 1.02rem/1 var(--f); white-space:nowrap; transition:filter .2s,background-color .2s,color .2s,transform .2s; }
.btn--primary { background:var(--g-action); color:#fff; box-shadow:var(--sh-action); }
.btn--primary:hover { filter:brightness(1.08); color:#fff; }
.btn--outline { background:transparent; color:var(--c-ink); border:0.09em solid var(--c-ink); }
.btn--outline:hover { background:var(--c-ink); color:#fff; }
.btn--solid { background:var(--c-ink); color:#fff; }
.btn--solid:hover { background:var(--c-crimson); color:#fff; }
.btn--light { background:#fff; color:var(--c-crimson); }
.btn--light:hover { transform:translateY(-0.12rem); color:var(--c-crimson); }
/* Turnstile disables the contact submit until the challenge passes, so a
   disabled button has to look disabled — otherwise the form reads as broken. */
.btn:disabled { opacity:0.45; box-shadow:none; cursor:not-allowed; filter:none; transform:none; }
.btn__heart { color:var(--c-crimson); font-size:0.95em; }
.btn--solid .btn__heart,.btn--outline:hover .btn__heart { color:#fff; }

.pill-tag { display:inline-block; padding:0.45em 1em; border-radius:var(--r-pill);
            border:1px solid rgba(74,144,242,.4); background:rgba(255,255,255,.7); }

/* --- header -------------------------------------------------------------- */
.masthead { position:sticky; top:0; z-index:50; background:rgba(242,244,248,.88);
            backdrop-filter:blur(0.9rem); border-bottom:1px solid rgba(43,52,69,.07); }
.masthead__row { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3) var(--s-4);
                 padding-block:var(--s-3); }
.masthead__brand { display:flex; align-items:center; gap:var(--s-2); }
.masthead__icon { flex:none; height:1.7rem; width:auto; border-radius:0.35rem; }
.masthead__logo { flex:none; height:2.1rem; width:auto; cursor:pointer; }
.masthead__actions { display:flex; flex:none; flex-wrap:wrap; gap:var(--s-2); }
.nav { display:flex; flex-wrap:wrap; align-items:center;
       gap:var(--s-2) clamp(0.9rem,2.4vw,2.1rem); margin-left:auto; }
.nav__item { flex:none; background:none; border:none; padding:0; display:flex; flex-direction:column; align-items:center; gap:0.25rem;
             font:500 1rem/1.4 var(--f); color:var(--c-muted); white-space:nowrap; cursor:pointer; }
.nav__item:hover { color:var(--c-ink); }
.nav__item::after { content:""; display:block; width:100%; height:var(--r-hair);
                    border-radius:var(--r-hair); background:var(--g-action); opacity:0; }
.nav__item[aria-current="page"]::after { opacity:1; }
.nav__item[aria-current="page"] { color:var(--c-ink); }

/* --- hero ---------------------------------------------------------------- */
.hero { position:relative; display:flex; align-items:center; min-height:min(82vh,46rem); overflow:hidden; }
.hero__media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.34; }
.hero__scrim { position:absolute; inset:0;
  background:linear-gradient(105deg,var(--c-ground) 8%,rgba(242,244,248,.86) 46%,rgba(242,244,248,.42) 100%); }
.hero__inner { position:relative; width:100%; padding-block:var(--section); }
.hero__art { position:relative; justify-self:center; }
.hero__art img { animation:float 7s ease-in-out infinite; }
.badge { position:absolute; bottom:8%; left:-0.5rem; padding:0.8em 1.3em; border-radius:var(--r-pill);
         border:0.09em solid var(--c-blue); background:#fff; box-shadow:var(--sh-float); }
.badge__t { display:block; font:600 0.94rem/1.3 var(--f); color:var(--c-blue-text); }
.badge__s { display:block; font:300 0.82rem/1.4 var(--f); color:var(--c-muted); }

/* --- cards, steps, specs, placeholders ----------------------------------- */
.card { padding:clamp(1.4rem,2vw,1.9rem) clamp(1.2rem,1.8vw,1.6rem); border-radius:var(--r-md);
        border:1px solid var(--line); background:var(--c-surface-2);
        transition:transform .25s,box-shadow .25s; }
.card:hover { transform:translateY(-0.375rem); box-shadow:var(--sh-hover); }
.card__icon { height:3.6rem; width:auto; margin-bottom:var(--s-4); }
.card__t { font:600 1.06rem/1.3 var(--f); letter-spacing:.04em; text-transform:uppercase;
           color:var(--c-ink); margin-bottom:var(--s-2); }

.step__n { width:2.9rem; height:2.9rem; border-radius:50%; display:flex; align-items:center;
           justify-content:center; background:var(--g-action); color:#fff;
           font:600 1.2rem/1 var(--f); margin-bottom:var(--s-4); }

.panel { border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); background:var(--c-surface); }
.row { display:flex; flex-wrap:wrap; gap:var(--s-2); justify-content:space-between;
       padding:1.25em 1.6em; border-bottom:1px solid var(--line-soft); }
.row:last-child { border-bottom:none; }
.row__k { font-weight:500; }
.row__v { font-weight:300; color:var(--c-muted-2); }

.ph { aspect-ratio:4/3; border-radius:var(--r-md); border:1px dashed rgba(74,144,242,.5);
      background:repeating-linear-gradient(135deg,var(--c-stripe-a) 0 0.7rem,var(--c-stripe-b) 0.7rem 1.4rem);
      display:flex; align-items:center; justify-content:center; text-align:center; padding:var(--s-3); }

.figure { border-radius:var(--r-md); }
.portrait { width:8.25rem; height:8.25rem; border-radius:50%; object-fit:cover; margin-bottom:var(--s-3); }
.bio { padding:clamp(1.6rem,2.6vw,2.2rem); border-radius:var(--r-md); background:var(--c-surface);
       border:1px solid rgba(43,52,69,.08); }

.stats { display:flex; flex-wrap:wrap; gap:clamp(1.6rem,3.5vw,2.75rem); }
.stat__v { font:700 clamp(1.7rem,3vw,2.2rem)/1 var(--f); }
.stat__l { font:400 0.86rem/1.4 var(--f); color:var(--c-muted); margin-top:0.35rem; }

/* --- CTA band ------------------------------------------------------------ */
.band { border-radius:var(--r-lg); background:var(--g-band); color:#fff; text-align:center;
        padding:clamp(2.25rem,4vw,3.5rem) clamp(1.5rem,3vw,2.5rem); }
.band .h2,.band p { color:#fff; }
.band p { color:rgba(255,255,255,.9); }

/* --- accordion ----------------------------------------------------------- */
.faq { display:flex; flex-direction:column; gap:var(--s-3); }
.faq__item { border-radius:var(--r-sm); border:1px solid var(--line); background:var(--c-surface); overflow:hidden; }
.faq__q { display:flex; align-items:center; gap:var(--s-4); width:100%; text-align:left;
          padding:1.1em 1.4em; background:none; border:none; cursor:pointer;
          font:500 1.12rem/1.4 var(--f); color:var(--c-ink); }
.faq__sign { margin-left:auto; font:300 1.6rem/1 var(--f); color:var(--c-blue-text); }
.faq__a { display:grid; grid-template-rows:0fr; transition:grid-template-rows .25s ease; }
.faq__a > div { overflow:hidden; }
.faq__item[data-open="true"] .faq__a { grid-template-rows:1fr; }
.faq__a p { padding:0 1.4em 1.2em; }

/* --- forms --------------------------------------------------------------- */
.field { width:100%; padding:0.9em 1.2em; border-radius:var(--r-sm);
         border:0.09em solid var(--line-input); background:#fff; color:var(--c-ink);
         font:400 1.03rem/1.4 var(--f); }
.field:focus { border-color:var(--c-blue); }
.field--round { border-radius:var(--r-pill); }
.field--area { resize:vertical; }
.form { display:flex; flex-direction:column; gap:var(--s-2); max-width:32rem; }
.form__pair { display:flex; flex-wrap:wrap; gap:var(--s-2); }
.form__pair > * { flex:1 1 9rem; }
.form--wide { max-width:none; }
.form--inline { flex-direction:row; flex-wrap:wrap; align-items:center; }
.form--inline .field { flex:1 1 14rem; }
.form__ok { padding:1.2em 1.4em; border-radius:var(--r-sm); border:0.09em solid var(--c-blue);
            background:#fff; font-weight:500; color:var(--c-blue-text); }
/* Error styling derives from --c-crimson and matches the input radius, as the
   handoff asked. One box per form: the endpoint returns either a single
   message or a joined list of field problems. */
.form__err { padding:0.9em 1.2em; border-radius:var(--r-sm); border:0.09em solid var(--c-crimson);
             background:rgba(239,13,78,.06); color:var(--c-crimson); font-size:var(--t-small); }
.on-dark .form__err { background:rgba(239,13,78,.16); color:#ff8fae; border-color:rgba(239,13,78,.5); }
/* Honeypot. Off-screen rather than display:none — some bots skip anything
   hidden, and this one is meant to be filled in. Never focusable. */
.hp { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
      white-space:nowrap; }
[hidden] { display:none !important; }

/* --- keyboard focus ------------------------------------------------------
   One ring, every focusable thing, :focus-visible only — so it appears on Tab
   and not on a mouse click. Nothing anywhere may set `outline:none` without
   putting an equally visible treatment back. The outline follows each
   element's own border-radius, so pills and cards need no special case. --- */
:focus-visible { outline:var(--focus-w) solid var(--c-focus); outline-offset:var(--focus-off); }

/* Dark surfaces — footer and modal — need the light blue to stay visible. */
.footer :focus-visible,
.on-dark :focus-visible,
.modal :focus-visible { outline-color:var(--c-focus-dark); }

/* --- footer -------------------------------------------------------------- */
.footer { background:var(--c-footer); color:rgba(255,255,255,.62); padding-block:var(--s-5) var(--s-3); margin-top:var(--s-4); }
.footer a { color:rgba(255,255,255,.72); }
.footer a:hover { color:#fff; }
.footer__top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-2) var(--s-4); }
.footer__about { margin-top:var(--s-3); }
.footer__logo { height:1.9rem; width:auto; }
.footer__links { display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-4); align-items:center; font-size:0.97rem; }
.on-dark .h3 { color:#fff; }
.on-dark .field { background:rgba(255,255,255,.06); border:1px solid var(--line-dark); color:#fff; }
.on-dark .field::placeholder { color:rgba(255,255,255,.45); }
.on-dark .form__ok { background:rgba(255,255,255,.08); border:none; color:var(--c-blue-dark); }
.footer__legal { margin-top:var(--s-3); padding-top:var(--s-2); border-top:1px solid rgba(255,255,255,.1); font-size:0.86rem; color:rgba(255,255,255,.4); }

/* --- modal --------------------------------------------------------------- */
.modal { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
         padding:var(--s-4); background:rgba(35,43,59,.55); backdrop-filter:blur(0.4rem); }
.modal__panel { width:100%; max-width:33rem; max-height:90vh; overflow:auto; background:var(--c-footer); color:rgba(255,255,255,.62); border-radius:var(--r-lg); padding:clamp(1.6rem,3vw,2.5rem); animation:fade .3s ease both; }
.modal__head { display:flex; align-items:flex-start; gap:var(--s-3); }
.modal__note { margin-bottom:var(--s-4); color:rgba(255,255,255,.55); }
.modal__x:hover { color:#fff; }
.modal__x { margin-left:auto; background:none; border:none; cursor:pointer; font:300 1.9rem/0.8 var(--f); color:rgba(255,255,255,.5); }
body.is-locked { overflow:hidden; }

@keyframes fade { from{opacity:0;transform:translateY(0.9rem)} to{opacity:1;transform:none} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-0.55rem)} }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; }
}

/* --- Lead-in: the sticky header already separates the first section, so a
       page opens with a shorter run-up than a mid-page section gets. --- */
main > :first-child.section,
main > :first-child.section--tight { padding-block-start:var(--section-head); }
.hero__inner { padding-block:var(--section-head) var(--section-tight); }
.hero { min-height:min(70vh,38rem); }