/* ==========================================================================
   CATBYTE — homepage redesign
   Editorial dark layout: numbered sections, hairline dividers, large type.
   Shared pieces (nav, buttons, footer, CD music player) live in style.css.
   ========================================================================== */

:root, :root[data-theme="dark"]{ --tone-2:#050a16; --violet:#a78bfa; }
:root[data-theme="light"]{ --tone-2:#eaeef6; --violet:#7c3aed; }

.home{ background:var(--bg); }
.home main{ position:relative; z-index:2; }

/* ==========================================================================
   Loading screen
   ========================================================================== */
html.has-loader{ overflow:hidden; }
.loader{ display:none; }
html.has-loader .loader{
  display:flex;
  position:fixed; inset:0;
  z-index:1000;
  align-items:center; justify-content:center;
  color:#e2e8f0;
}
.loader__panel{
  position:absolute; left:0; right:0;
  height:50.5%;
  background:#03050b;
  transition:transform 1s cubic-bezier(.77,0,.18,1) .15s;
}
.loader__panel--top{ top:0; }
.loader__panel--bottom{ bottom:0; }
.loader__panel--top::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, #22d3ee 30%, #a78bfa 70%, transparent);
  opacity:0; transition:opacity .3s ease;
}
.loader__inner{
  position:relative;
  text-align:center;
  padding:0 24px;
  transition:opacity .45s ease, transform .5s ease, filter .45s ease;
}
.loader__brand{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Inter', sans-serif; font-weight:700;
  font-size:.8rem; letter-spacing:.34em;
  color:#e2e8f0;
}
.loader__sub{
  margin-top:12px;
  font-family:'JetBrains Mono', monospace;
  font-size:.66rem; letter-spacing:.42em;
  color:#64748b;
}
.loader__count{
  display:flex; align-items:flex-start; justify-content:center;
  margin-top:3.5vh;
  font-family:'Inter', sans-serif;
  font-weight:500;
  font-size:clamp(6rem, 24vw, 15rem);
  line-height:.9;
  letter-spacing:-.07em;
  font-variant-numeric:tabular-nums;
  color:#f8fafc;
}
.loader__pct{
  font-size:.26em;
  margin:.3em 0 0 .18em;
  letter-spacing:0;
  color:#22d3ee;
}
.loader__bar{
  width:min(320px, 64vw);
  height:1px;
  margin:2.2rem auto 0;
  background:rgba(255,255,255,.1);
  overflow:hidden;
}
.loader__bar span{
  display:block; height:100%;
  background:linear-gradient(90deg, #3b82f6, #22d3ee, #a78bfa);
  transform-origin:left center;
  transform:scaleX(0);
}
.loader__status{
  margin-top:1.1rem;
  font-family:'JetBrains Mono', monospace;
  font-size:.66rem; letter-spacing:.32em;
  color:#94a3b8;
  transition:color .3s ease;
}
.loader.is-ready .loader__status{ color:#67e8f9; }

/* exit: content dissolves, then the screen splits open along the cyan seam */
.loader.is-leaving .loader__inner{ opacity:0; transform:translateY(-14px) scale(.98); filter:blur(8px); }
.loader.is-leaving .loader__panel--top::after{ opacity:1; }
.loader.is-leaving .loader__panel--top{ transform:translateY(-101%); }
.loader.is-leaving .loader__panel--bottom{ transform:translateY(101%); }

/* hero + nav wait for the loader, then reveal in sequence */
[data-intro]{ transition:opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
html.has-loader body:not(.is-entered) [data-intro]{ opacity:0; transform:translateY(22px); }
html.has-loader body:not(.is-entered) .cb-nav{ opacity:0; transform:translateY(-12px); }
body.is-entered [data-intro="1"]{ transition-delay:.55s; }
body.is-entered [data-intro="2"]{ transition-delay:.7s; }
body.is-entered [data-intro="3"]{ transition-delay:.85s; }
body.is-entered [data-intro="4"]{ transition-delay:1s; }
body.is-entered [data-intro="5"]{ transition-delay:1.2s; }
.home .cb-nav{ transition:opacity .7s ease 1.3s, transform .7s ease 1.3s; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:110px 0 28px;
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 45% 50% at 70% 45%, rgba(37,99,235,.16), transparent 70%),
    radial-gradient(ellipse 30% 35% at 85% 70%, rgba(167,139,250,.08), transparent 70%);
  pointer-events:none;
}
.hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 65% 60% at 65% 45%, #000 15%, transparent 75%);
  mask-image:radial-gradient(ellipse 65% 60% at 65% 45%, #000 15%, transparent 75%);
  pointer-events:none;
}
.hero__inner{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:12px;
  align-items:center;
}
@media (min-width:1024px){
  .hero__inner{ grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:32px; }
}
.hero__meta{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.42rem .85rem;
  border:1px solid var(--border);
  border-radius:99px;
  font-family:'JetBrains Mono', monospace;
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-secondary);
}
.hero__title{ margin-top:1.6rem; color:var(--text); }
.hero__brand{
  display:block;
  font-family:'Inter', sans-serif;
  font-weight:800;
  font-size:clamp(3.4rem, 11vw, 7.6rem);
  line-height:.88;
  letter-spacing:-.06em;
}
.hero__role{
  display:block;
  margin-top:1rem;
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:clamp(1.75rem, 4.4vw, 3.1rem);
  line-height:1.04;
  letter-spacing:-.04em;
}
.hero__role em,
.contact__headline em{
  font-style:normal;
  background:linear-gradient(100deg, #60a5fa, #22d3ee 55%, var(--violet));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
:root[data-theme="light"] .hero__role em,
:root[data-theme="light"] .contact__headline em{ background:linear-gradient(100deg, #1d4ed8, #0e7490 60%, #6d28d9); -webkit-background-clip:text; background-clip:text; }
.hero__lead{
  margin-top:1.6rem;
  max-width:30rem;
  font-size:clamp(1.05rem, 1.5vw, 1.22rem);
  line-height:1.55;
  color:var(--text);
  opacity:.92;
}
.hero__th{ margin-top:.8rem; max-width:34rem; font-size:.9rem; line-height:1.75; color:var(--text-muted); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }
.hero__visual{ margin-top:8px; }
@media (min-width:1024px){ .hero__visual{ margin-top:0; } }

.hero__foot{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:1rem;
  margin-top:1.5rem;
  font-family:'JetBrains Mono', monospace;
  font-size:.64rem; letter-spacing:.3em;
  color:var(--text-muted);
}
.hero__foot-line{ flex:1; height:1px; background:var(--border); position:relative; overflow:hidden; }
.hero__foot-line::after{
  content:""; position:absolute; top:0; left:0; height:100%; width:18%;
  background:linear-gradient(90deg, transparent, #22d3ee, transparent);
  animation:footScan 4.5s ease-in-out infinite;
}
@keyframes footScan{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(560%); } }

/* ==========================================================================
   Section system — numbered head, hairline, large title
   ========================================================================== */
.sec{ position:relative; padding:clamp(80px, 12vw, 150px) 0; }
/* anchor jumps land below the floating nav */
.home section[id], #request-system{ scroll-margin-top:84px; }
.sec--alt{ background:var(--tone-2); }
.sec__head{
  display:flex; align-items:center; gap:1rem;
  margin-bottom:clamp(2rem, 5vw, 3.5rem);
  font-family:'JetBrains Mono', monospace;
  font-size:.7rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--text-muted);
}
.sec__num{ color:var(--accent); font-weight:700; }
.sec__rule{ flex:1; height:1px; background:linear-gradient(90deg, var(--accent), var(--border) 18%); opacity:.7; }
.sec__title-row{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:1.25rem 2rem;
  margin-bottom:clamp(2.5rem, 6vw, 4.5rem);
}
.sec__title{
  font-family:'Inter', sans-serif;
  font-weight:700;
  font-size:clamp(2.6rem, 7.4vw, 5.8rem);
  line-height:.95;
  letter-spacing:-.05em;
  color:var(--text);
}
.sec__intro{ max-width:24rem; font-size:.95rem; line-height:1.7; color:var(--text-muted); }
.sec__more{ display:flex; flex-wrap:wrap; gap:1rem 2rem; margin-top:3rem; }

/* ==========================================================================
   About
   ========================================================================== */
.about{ display:grid; gap:2rem; }
@media (min-width:1024px){ .about{ grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:4rem; align-items:end; } }
.about__statement{
  font-weight:600;
  font-size:clamp(1.75rem, 4.2vw, 3.3rem);
  line-height:1.32;
  letter-spacing:-.015em;
  color:var(--text);
}
.about__statement em{ font-style:normal; color:var(--accent); }
.about__text p{ font-size:.98rem; line-height:1.85; color:var(--text-secondary); }
.about__text p + p{ margin-top:1rem; }

.disciplines{ margin-top:clamp(3rem, 7vw, 5rem); border-top:1px solid var(--border); }
.discipline{
  display:grid;
  grid-template-columns:2.25rem minmax(0,1fr);
  gap:.35rem 1rem;
  align-items:baseline;
  padding:1.35rem 0;
  border-bottom:1px solid var(--border);
}
@media (min-width:768px){ .discipline{ grid-template-columns:3.5rem minmax(0,1.1fr) minmax(0,1fr); } }
.discipline__num{ font-family:'JetBrains Mono', monospace; font-size:.75rem; color:var(--text-muted); }
.discipline__name{
  font-family:'Inter', sans-serif; font-weight:600;
  font-size:clamp(1.55rem, 3.6vw, 2.6rem);
  letter-spacing:-.035em;
  color:var(--text);
  transition:transform .45s cubic-bezier(.2,.7,.2,1), color .3s ease;
}
.discipline__desc{ grid-column:2; font-size:.92rem; line-height:1.6; color:var(--text-muted); }
@media (min-width:768px){ .discipline__desc{ grid-column:auto; } }
.discipline:hover .discipline__name{ transform:translateX(10px); color:var(--accent); }

.facts{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.75rem 1.25rem; margin-top:3rem; }
@media (min-width:1024px){ .facts{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.facts > div{ border-left:1px solid var(--border); padding-left:1rem; }
.facts dt{ font-family:'Inter', sans-serif; font-weight:700; font-size:1.55rem; letter-spacing:-.035em; color:var(--text); }
.facts dd{ margin-top:.25rem; font-size:.82rem; color:var(--text-muted); }

/* ==========================================================================
   Projects — large alternating features + compact grid
   ========================================================================== */
.work{
  display:grid;
  gap:1.75rem;
  align-items:center;
  padding:clamp(2rem, 5vw, 4rem) 0;
  border-top:1px solid var(--border);
}
@media (min-width:1024px){
  .work{ grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:4rem; }
  .work--flip{ grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); }
  .work--flip .work__media{ order:2; }
}
.work__media,
.work-card__media{
  position:relative;
  display:block;
  aspect-ratio:16 / 10;
  overflow:hidden;
  border-radius:12px;
  border:1px solid var(--border);
  background:#0b1327;
}
.work__media{ box-shadow:0 40px 80px -40px rgba(0,0,0,.7); }
.work__media img,
.work-card__media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:left top;
  transition:transform .9s cubic-bezier(.2,.7,.2,1);
}
/* image wipes in from the left when scrolled into view — a cover panel slides
   away (the img itself is never clipped, so loading="lazy" still kicks in early) */
.work__media.reveal{ opacity:1; transform:none; }
.work__media.reveal::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:#0b1327;
  transform-origin:right center;
  transition:transform 1.2s cubic-bezier(.77,0,.18,1);
  pointer-events:none;
}
.work__media.reveal.in-view::after{ transform:scaleX(0); }
.work__media:hover img,
.work-card__media:hover img{ transform:scale(1.04); }

.work__index{
  display:flex; flex-wrap:wrap; gap:.25rem .8rem;
  font-family:'JetBrains Mono', monospace;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent);
}
.work__index span{ color:var(--text-muted); letter-spacing:.12em; }
.work__title{
  margin-top:.8rem;
  font-family:'Inter', sans-serif; font-weight:700;
  font-size:clamp(2rem, 4.2vw, 3.1rem);
  line-height:1;
  letter-spacing:-.045em;
  color:var(--text);
}
.work__desc{ margin-top:.75rem; line-height:1.7; color:var(--text-secondary); }
.work__tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.2rem; }
.work__tags li{
  padding:.3rem .6rem;
  border:1px solid var(--border);
  border-radius:6px;
  font-family:'JetBrains Mono', monospace;
  font-size:.68rem;
  color:var(--text-secondary);
}
.work__stack{ margin-top:1rem; font-family:'JetBrains Mono', monospace; font-size:.72rem; letter-spacing:.04em; color:var(--text-muted); }
.work__status{
  display:inline-flex; align-items:center; gap:.55rem;
  margin-top:.9rem;
  font-family:'JetBrains Mono', monospace;
  font-size:.68rem; letter-spacing:.06em;
  color:var(--text-secondary);
}
.work__links{ display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.5rem; margin-top:1.6rem; }

.work-grid{
  display:grid;
  gap:2.5rem 2rem;
  padding-top:clamp(2.5rem, 5vw, 4rem);
  border-top:1px solid var(--border);
}
@media (min-width:768px){ .work-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.work-card__media{ margin-bottom:1.1rem; }
.work-card__title{
  margin-top:.55rem;
  font-family:'Inter', sans-serif; font-weight:600;
  font-size:1.35rem; letter-spacing:-.03em;
  color:var(--text);
}
.work-card .work__desc{ font-size:.9rem; margin-top:.45rem; }
.work-card .work__links{ margin-top:1rem; }

/* ==========================================================================
   Services — typographic list
   ========================================================================== */
.services{ border-top:1px solid var(--border); }
.service{
  position:relative;
  display:grid;
  grid-template-columns:2.25rem minmax(0,1fr);
  gap:.35rem 1rem;
  align-items:baseline;
  padding:1.35rem 0;
  border-bottom:1px solid var(--border);
  overflow:hidden;
}
@media (min-width:768px){ .service{ grid-template-columns:3.5rem minmax(0,1.15fr) minmax(0,1fr); align-items:center; } }
.service::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(59,130,246,.09), transparent 70%);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}
.service:hover::before{ transform:scaleX(1); }
.service__num{ font-family:'JetBrains Mono', monospace; font-size:.75rem; color:var(--text-muted); }
.service__name{
  position:relative;
  font-family:'Inter', sans-serif; font-weight:600;
  font-size:clamp(1.5rem, 3.6vw, 2.7rem);
  line-height:1.05;
  letter-spacing:-.04em;
  color:var(--text-secondary);
  transition:color .3s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
.service:hover .service__name{ color:var(--text); transform:translateX(8px); }
.service__desc{ position:relative; grid-column:2; font-size:.9rem; line-height:1.6; color:var(--text-muted); }
@media (min-width:768px){ .service__desc{ grid-column:auto; } }

.process{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2rem; margin-top:3.5rem; }
.process__label{ font-family:'JetBrains Mono', monospace; font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:var(--accent); }
.process ol{ display:flex; flex-wrap:wrap; gap:.6rem 1.1rem; }
.process li{ font-family:'JetBrains Mono', monospace; font-size:.76rem; color:var(--text-secondary); }
.process li span{ margin-right:.45rem; color:var(--text-muted); }
.process li:not(:last-child)::after{ content:"→"; margin-left:1.1rem; color:var(--text-muted); }

/* ==========================================================================
   Stack — marquee + categorized list
   ========================================================================== */
.marquee{
  overflow:hidden;
  margin-bottom:clamp(3rem, 6vw, 4.5rem);
  padding:1.35rem 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track{ display:flex; width:max-content; animation:marquee 46s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track span{
  padding-right:3rem;             /* spacing via padding keeps the -50% loop seamless */
  font-family:'Inter', sans-serif; font-weight:600;
  font-size:clamp(1.4rem, 3.2vw, 2.3rem);
  letter-spacing:-.03em;
  white-space:nowrap;
  color:var(--text-muted);
  opacity:.55;
}
.marquee__track span:nth-child(3n+1){ color:var(--text); opacity:.9; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

.stack-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:2.25rem 1.5rem; }
@media (min-width:768px){ .stack-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:1280px){ .stack-grid{ grid-template-columns:repeat(6, minmax(0,1fr)); } }
.stack-col h3{
  margin-bottom:.9rem; padding-bottom:.7rem;
  border-bottom:1px solid var(--border);
  font-family:'JetBrains Mono', monospace;
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent);
}
.stack-col li{ display:flex; align-items:center; gap:.65rem; padding:.38rem 0; font-size:.92rem; color:var(--text-secondary); }
.stack-col li i{ width:1rem; text-align:center; color:var(--text-muted); transition:color .25s ease; }
.stack-col li:hover i{ color:var(--accent); }

/* ==========================================================================
   Contact
   ========================================================================== */
.sec--contact{ padding-bottom:clamp(90px, 12vw, 140px); }
.contact__headline{
  font-family:'Inter', sans-serif; font-weight:700;
  font-size:clamp(2.3rem, 6.6vw, 5.4rem);
  line-height:1;
  letter-spacing:-.05em;
  color:var(--text);
}
.contact__lead{ margin-top:1.4rem; max-width:36rem; line-height:1.75; color:var(--text-muted); }
.contact__channels{ margin-top:3rem; border-top:1px solid var(--border); }
.contact__channels a{
  display:grid;
  grid-template-columns:5.5rem minmax(0,1fr) auto;
  align-items:center; gap:1rem;
  padding:1.2rem 0;
  border-bottom:1px solid var(--border);
  color:var(--text);
}
@media (min-width:768px){ .contact__channels a{ grid-template-columns:9rem minmax(0,1fr) auto; } }
.contact__k{ font-family:'JetBrains Mono', monospace; font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--text-muted); }
.contact__v{
  font-family:'Inter', sans-serif; font-weight:600;
  font-size:clamp(1.2rem, 3vw, 2rem);
  letter-spacing:-.03em;
  overflow-wrap:anywhere;
  transition:color .25s ease;
}
.contact__channels i{ color:var(--text-muted); transition:transform .3s ease, color .25s ease; }
.contact__channels a:hover .contact__v{ color:var(--accent); }
.contact__channels a:hover i{ color:var(--accent); transform:translate(3px,-3px); }

.contact__grid{ display:grid; gap:3.5rem; margin-top:clamp(3.5rem, 8vw, 6rem); }
@media (min-width:1024px){ .contact__grid{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:4rem; } }
.contact__sub{ font-family:'Inter', sans-serif; font-weight:600; font-size:1.5rem; letter-spacing:-.02em; color:var(--text); }
.contact__note{ margin:.5rem 0 1.5rem; font-size:.88rem; line-height:1.6; color:var(--text-muted); }
.cb-form{
  padding:clamp(1.25rem, 3vw, 2rem);
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface-card-2);
}
.cb-form__grid{ display:grid; gap:1.1rem; }
@media (min-width:640px){ .cb-form__grid{ grid-template-columns:1fr 1fr; } }
.cb-form__full{ grid-column:1 / -1; }
.cb-form .cb-btn--block{ margin-top:1.6rem; }
.contact__demo-note{ margin-top:1rem; text-align:center; font-size:.75rem; color:var(--text-muted); }
.faq-list{ display:grid; gap:.6rem; margin-top:1.2rem; }
.faq-answer p{ font-size:.9rem; line-height:1.7; color:var(--text-muted); }

/* ==========================================================================
   Starting prices (Services) — data in assets/js/data/pricing.js
   ========================================================================== */
.pricing{ margin-top:clamp(3rem, 7vw, 5rem); }
.pricing[hidden]{ display:none; }
.pricing__title{ font-family:'Inter', sans-serif; font-weight:700; font-size:1.5rem; letter-spacing:-.02em; color:var(--text); }
.pricing__grid{ display:grid; gap:1rem; margin-top:1.4rem; }
@media (min-width:640px){ .pricing__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
/* one row on desktop for up to 4 packages */
@media (min-width:1180px){ .pricing__grid{ grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); } }
.price-card{ display:flex; flex-direction:column; padding:1.4rem; border:1px solid var(--border); border-radius:14px; background:var(--surface-card-2); }
.price-card h4{ font-weight:700; font-size:1.1rem; color:var(--text); }
.price-card__desc{ margin-top:.3rem; font-size:.86rem; line-height:1.6; color:var(--text-muted); }
.price-card__price{ margin-top:1rem; font-family:'Inter', sans-serif; font-weight:800; font-size:1.8rem; letter-spacing:-.03em; color:var(--text); }
.price-card__price span{ display:block; font-family:'Prompt', sans-serif; font-weight:500; font-size:.75rem; letter-spacing:0; color:var(--text-muted); }
.price-card__price small{ font-size:.8rem; font-weight:600; color:var(--text-muted); }
.price-card ul{ flex:1; display:grid; gap:.4rem; margin:1rem 0 1.2rem; }
.price-card li{ display:flex; gap:.55rem; align-items:baseline; font-size:.86rem; color:var(--text-secondary); }
.price-card li i{ color:var(--success); font-size:.75rem; }
.price-card__links{ display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; }
.pricing__note{ margin-top:1rem; font-size:.78rem; color:var(--text-muted); }

/* ==========================================================================
   Reviews + trust
   ========================================================================== */
/* mobile: one card at a time, horizontal swipe; tablet 2; desktop 3 */
.reviews{
  display:grid; gap:1rem;
  grid-auto-flow:column; grid-auto-columns:86%; align-items:start;
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:.75rem;
  scrollbar-width:thin;
}
@media (min-width:640px){
  .reviews{ grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.25rem; align-items:stretch; overflow:visible; padding-bottom:0; }
}
@media (min-width:1024px){ .reviews{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.review{
  scroll-snap-align:start;
  display:flex; flex-direction:column; gap:1rem;
  padding:clamp(1.3rem, 3vw, 1.75rem);
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface-card-2);
}
.review__stars{ display:flex; gap:3px; color:#fbbf24; font-size:.85rem; }
.review__stars .is-off{ color:var(--text-muted); opacity:.35; }
.review__text{ flex:1; font-size:1rem; line-height:1.75; color:var(--text); overflow-wrap:anywhere; }
.review__foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.4rem 1rem; padding-top:1rem; border-top:1px solid var(--border); }
.review__name{ font-weight:600; font-size:.9rem; color:var(--text); }
.review__src{ font-family:'JetBrains Mono', monospace; font-size:.66rem; letter-spacing:.06em; color:var(--text-muted); }
.reviews__empty{ padding:2rem; border:1px dashed var(--border); border-radius:14px; text-align:center; color:var(--text-muted); }
.reviews__cta{ margin-top:2rem; }
.trust{
  display:grid; gap:1px;
  margin-top:clamp(3rem, 7vw, 5rem);
  border:1px solid var(--border); border-radius:14px; overflow:hidden;
  background:var(--border);
}
@media (min-width:640px){ .trust{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1024px){ .trust{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.trust li{ display:grid; align-content:start; gap:.35rem; padding:1.4rem 1.3rem; background:var(--tone-2); }
.trust i{ color:var(--accent); font-size:1.05rem; margin-bottom:.4rem; }
.trust strong{ font-size:.95rem; color:var(--text); }
.trust span{ font-size:.84rem; line-height:1.6; color:var(--text-muted); }

/* ==========================================================================
   Software preview (homepage) — deliberately small; the store is store.html
   ========================================================================== */
.sec--compact{ padding:clamp(64px, 9vw, 110px) 0; }
.soft-preview{
  display:grid; gap:2rem;
  padding:clamp(1.4rem, 4vw, 2.5rem);
  border:1px solid var(--border); border-radius:18px;
  background:linear-gradient(135deg, rgba(37,99,235,.10), transparent 55%), var(--surface-card-2);
}
@media (min-width:1024px){ .soft-preview{ grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); align-items:center; gap:3rem; } }
.soft-preview__title{ font-family:'Inter', sans-serif; font-weight:700; font-size:clamp(1.7rem, 3.6vw, 2.6rem); line-height:1.1; letter-spacing:-.035em; color:var(--text); }
.soft-preview__copy p{ margin:.9rem 0 1.5rem; max-width:28rem; line-height:1.7; color:var(--text-muted); }
.soft-preview__list{ display:grid; gap:.75rem; }
@media (min-width:640px){ .soft-preview__list{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.soft-item{ display:flex; }
.soft-item a{ flex:1;
  display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:.9rem;
  padding:.75rem; border:1px solid var(--border); border-radius:12px;
  background:var(--bg); color:var(--text);
  transition:border-color .25s ease, transform .25s ease;
}
@media (min-width:640px){ .soft-item a{ grid-template-columns:1fr; } }
.soft-item a:hover{ border-color:rgba(6,182,212,.45); transform:translateY(-2px); }
.soft-item img{ width:64px; aspect-ratio:4 / 5; object-fit:contain; border-radius:6px; background:#050a1c; }
@media (min-width:640px){ .soft-item img{ width:100%; height:150px; aspect-ratio:auto; } }
.soft-item__name{ display:block; font-weight:600; font-size:.92rem; }
.soft-item__lic{ display:block; margin-top:.15rem; font-family:'JetBrains Mono', monospace; font-size:.66rem; letter-spacing:.06em; color:var(--text-muted); }
.soft-item__price{ display:block; margin-top:.35rem; font-family:'Inter', sans-serif; font-weight:700; color:var(--accent); }

/* ==========================================================================
   Mobile refinements
   ========================================================================== */
@media (max-width:639px){
  .hero{ padding-top:96px; }
  .hero__meta{ font-size:.72rem; letter-spacing:.1em; }
  /* readable small labels on phones (min ~11.5px) */
  .process__label, .work__index, .work__index span, .work__status, .work__tags li, .stack-col h3, .review__src, .soft-item__lic, .sec__head{ font-size:.72rem; }
  .work__index{ letter-spacing:.12em; }
  .hero__cta .cb-btn{ flex:1 1 auto; }
  .hero__foot{ display:none; }
  .work__links .cb-btn{ flex:1 1 auto; }
}