/* ============================================================
   WEBSITE CREATOR — components.css
   Ready-made UI building blocks so you ASSEMBLE a site instead of
   authoring CSS. Everything reads tokens.css, so it reskins with a
   theme/brand swap. Pair with backgrounds.css for the atmosphere.
   ------------------------------------------------------------
   LOAD:  tokens.css -> backgrounds.css -> components.css (-> brands.css)
   See starter.html for a full page assembled from these.
   ============================================================ */

/* ---------- base ---------- */
*{box-sizing:border-box}
.wc{font-family:var(--font);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}
.wc a{color:var(--brand);text-decoration:none}
.wc a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}

/* ---------- layout primitives ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.container.narrow{max-width:var(--maxw-narrow)}
.section{padding-block:var(--sp-12)}
.section.tight{padding-block:var(--sp-8)}
.stack>*+*{margin-top:var(--sp-4)}
.stack.lg>*+*{margin-top:var(--sp-6)}
.center{text-align:center}
.center-x{margin-inline:auto}
.row{display:flex;gap:var(--sp-4);flex-wrap:wrap;align-items:center}
.row.between{justify-content:space-between}
.row.center{justify-content:center}
.grid{display:grid;gap:var(--sp-5)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
@media(max-width:860px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.row.stack-sm{flex-direction:column;align-items:stretch}}

/* ---------- typography ---------- */
.eyebrow{font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.32em;text-transform:uppercase;color:var(--brand);opacity:.9}
.h1{font-size:var(--h1);font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--heading)}
.h2{font-size:var(--h2);font-weight:700;line-height:1.05;letter-spacing:-.015em;color:var(--heading)}
.h3{font-size:var(--h3);font-weight:600;line-height:1.15;color:var(--heading)}
.lead{font-size:var(--lead);color:var(--text)}
.muted{color:var(--muted)}
.gradient-text{background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 26px rgba(124,58,237,.35))}
.serif{font-family:var(--serif)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font);font-weight:600;font-size:var(--text-base);
  cursor:pointer;border:1px solid transparent;border-radius:var(--r-pill);padding:.72em 1.4em;transition:var(--dur) var(--ease);
  background:var(--brand);color:var(--on-brand);text-decoration:none;white-space:nowrap}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-glow);text-decoration:none;filter:brightness(1.05)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.btn.grad{background:var(--brand-grad);color:#fff}
.btn.ghost{background:transparent;color:var(--heading);border-color:var(--border-strong)}
.btn.ghost:hover{border-color:var(--brand);box-shadow:none}
.btn.lg{font-size:var(--text-lg);padding:.9em 1.7em}
.btn.block{display:flex;width:100%;justify-content:center}
.btn svg{width:1.1em;height:1.1em}

/* ---------- surfaces / cards ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:var(--sp-5);
  transition:var(--dur) var(--ease)}
.card.hover:hover{transform:translateY(-3px);border-color:var(--brand);box-shadow:var(--shadow-glow)}
.glass{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow)}
.pad{padding:var(--sp-5)}
.pad-lg{padding:var(--sp-6)}
.pill{display:inline-flex;align-items:center;gap:.4em;font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.08em;
  text-transform:uppercase;padding:.4em .8em;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--border);color:var(--text)}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--border-strong),transparent);border:0;margin-block:var(--sp-6)}

/* ---------- navbar ---------- */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:var(--sp-5);
  padding:var(--sp-3) var(--gutter);background:var(--panel);border-bottom:1px solid var(--border);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nav .logo{display:flex;align-items:center;gap:.55em;font-weight:700;color:var(--heading);font-size:var(--text-lg)}
.nav .logo .dot{width:11px;height:11px;border-radius:50%;background:var(--brand-grad);box-shadow:0 0 12px var(--brand)}
.nav-links{display:flex;gap:var(--sp-5);margin-left:auto;align-items:center;flex-wrap:wrap}
.nav-links a{color:var(--text);font-size:var(--text-sm);font-weight:500}
.nav-links a:hover{color:var(--heading);text-decoration:none}
@media(max-width:720px){.nav-links{display:none}.nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--panel);padding:var(--sp-4) var(--gutter);border-bottom:1px solid var(--border)}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;display:grid;place-items:center;text-align:center;min-height:clamp(420px,72vh,760px)}
.hero .container{position:relative;z-index:6;padding-block:var(--sp-10)}
.hero .h1{margin-block:var(--sp-3)}
.hero .lead{max-width:60ch;margin-inline:auto}
.hero .row{justify-content:center;margin-top:var(--sp-5)}

/* ---------- feature ---------- */
.feature{text-align:left}
.f-ico{width:52px;height:52px;border-radius:var(--r);display:grid;place-items:center;margin-bottom:var(--sp-4);
  background:var(--surface-2);border:1px solid var(--border);color:var(--brand)}
.f-ico svg{width:26px;height:26px}
.feature .h3{margin-bottom:var(--sp-2)}

/* ---------- pricing ---------- */
.price{position:relative;text-align:center}
.price.featured{border-color:var(--brand);box-shadow:var(--shadow-glow)}
.price .amt{font-size:clamp(2.2rem,1.6rem+2vw,3rem);font-weight:700;color:var(--heading);line-height:1}
.price .amt small{font-size:var(--text-base);font-weight:500;color:var(--muted)}
.price ul{list-style:none;padding:0;margin:var(--sp-5) 0;text-align:left;display:grid;gap:var(--sp-2)}
.price li{display:flex;gap:.6em;align-items:flex-start;color:var(--text);font-size:var(--text-sm)}
.price li::before{content:"";flex:0 0 18px;height:18px;margin-top:2px;background:var(--brand);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- testimonial ---------- */
.quote{font-family:var(--serif);font-size:var(--text-xl);line-height:1.5;color:var(--heading)}
.quote::before{content:"\201C";color:var(--brand);font-size:1.4em;line-height:0;vertical-align:-.3em;margin-right:.1em}
.byline{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-4)}

/* ---------- forms ---------- */
.field{display:grid;gap:var(--sp-2)}
.label{font-size:var(--text-sm);font-weight:600;color:var(--heading)}
.input,.textarea,.select{width:100%;font-family:var(--font);font-size:var(--text-base);color:var(--heading);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:.7em .9em;transition:var(--dur)}
.input::placeholder,.textarea::placeholder{color:var(--muted)}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.textarea{min-height:130px;resize:vertical}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--border);padding-block:var(--sp-8);color:var(--muted);font-size:var(--text-sm)}
.footer a{color:var(--muted)}
.footer a:hover{color:var(--heading)}

/* ============================================================
   PLACEHOLDER MEDIA — use these instead of generating rough images.
   Real, clean stand-ins that keep layouts intact until the client's
   assets arrive. (Rule of thumb: ship placeholders, ask for real art.)
   ============================================================ */
.ratio{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r)}
.ratio-1{aspect-ratio:1}.ratio-4-3{aspect-ratio:4/3}.ratio-3-2{aspect-ratio:3/2}.ratio-21-9{aspect-ratio:21/9}
.ph{display:grid;place-items:center;position:relative;overflow:hidden;border-radius:var(--r);color:var(--muted);
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--brand) 22%,var(--surface-2)),var(--surface-2));
  border:1px solid var(--border)}
.ph::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 40 20 20 40 40M22 26 30 18 40 28' fill='none' stroke='%23888' stroke-opacity='0.25' stroke-width='1.5'/%3E%3Ccircle cx='11' cy='12' r='4' fill='none' stroke='%23888' stroke-opacity='0.25' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size:40px 40px}
.ph[data-label]::after{content:attr(data-label);position:relative;z-index:1;font-family:var(--mono);font-size:var(--text-xs);
  letter-spacing:.1em;padding:.3em .7em;border-radius:var(--r-pill);background:var(--panel);border:1px solid var(--border)}
.ph.solid{background:var(--surface-2)}
.ph.brand{background:var(--brand-grad);color:#fff}

/* avatar with initials (set text; recolors with brand) */
.ph-avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:var(--brand-grad);color:#fff;font-weight:700;font-family:var(--font);letter-spacing:.02em}
.ph-avatar.lg{width:72px;height:72px;font-size:var(--text-lg)}

/* logo frame stand-in (until the real logo is supplied) */
.ph-logo{display:inline-grid;place-items:center;padding:.5em 1em;border-radius:var(--r-sm);
  border:1.5px dashed var(--border-strong);color:var(--muted);font-family:var(--mono);font-size:var(--text-sm);letter-spacing:.1em}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){.btn,.card,.card.hover:hover,.btn:hover{transition:none;transform:none}}