/* XBASICX — Vitrin / Showcase (agency landing) */
:root{
  --bg:#0d0e10;
  --bg-2:#141519;
  --surface:#191b20;
  --ink:#f3f3f5;
  --ink-soft:#9a9da6;
  --hair:rgba(243,243,245,.12);
  --gold:#e0a15e;
  --gold-2:#f0bd82;
  --accent:var(--gold);              /* vitrin brand accent */
  --langsw-active-ink:#0d0e10;
  --font-display:"Space Grotesk","Inter",sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:1.02rem}
h1,h2,h3,.display{font-family:var(--font-display);font-weight:600;line-height:1.02;letter-spacing:-0.03em;text-wrap:balance}
.eyebrow{font-weight:600;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.lead{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--ink-soft);max-width:60ch;text-wrap:pretty}
.container{max-width:1240px}

/* nav */
.nav{padding:1.4rem 0}
.nav.scrolled{background:rgba(13,14,16,.85);box-shadow:0 1px 0 var(--hair);padding:.85rem 0}
.nav__row{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.brand{font-family:var(--font-display);font-size:1.32rem;font-weight:700;display:flex;align-items:center;gap:.55rem;letter-spacing:-0.02em}
.brand__mark{width:2rem;height:2rem;border-radius:8px;background:linear-gradient(135deg,var(--gold),var(--gold-2));
  display:grid;place-items:center;color:#0d0e10;font-weight:800;flex:none;font-size:1.05rem}
.brand b{font-weight:700}
.brand i{font-style:normal;color:var(--gold)}
.nav__right{display:flex;align-items:center;gap:1.1rem}
.nav__meta{color:var(--ink-soft);font-size:.85rem;white-space:nowrap}
.nav__link{color:var(--ink-soft);font-size:.88rem;text-decoration:none;white-space:nowrap;transition:color .25s}
.nav__link:hover{color:var(--gold)}

/* hero */
.hero{padding:9rem 0 3.5rem;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-30%;right:-10%;width:50rem;height:50rem;border-radius:50%;
  background:radial-gradient(circle,rgba(224,161,94,.14),transparent 62%);z-index:-1}
.hero h1{font-size:clamp(2.8rem,7vw,5.6rem);margin:1.2rem 0}
.hero h1 span{color:var(--gold)}
.hero__cta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.2rem;align-items:center}
.btn--gold{background:var(--gold);color:#0d0e10}
.btn--gold:hover{background:var(--gold-2)}
.btn--ghost{border:1px solid var(--hair);color:var(--ink)}
.btn--ghost:hover{border-color:var(--gold)}
.hstats{display:flex;gap:2.5rem;flex-wrap:wrap;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--hair)}
.hstats b{font-family:var(--font-display);font-size:1.9rem;color:var(--gold-2);display:block}
.hstats span{font-size:.85rem;color:var(--ink-soft)}

/* section head */
.grid__head{display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap;margin:2rem 0 2.4rem}
.grid__head h2{font-size:clamp(2rem,4.5vw,3rem)}

/* ---- Bento grid: alternating 2-up / 3-up rows for rhythm --- */
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.5rem;padding-bottom:5rem}
.demo{grid-column:span 2}                 /* default = third width */
.demo--wide{grid-column:span 3}           /* featured = half width */

.demo{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--surface);
  border:1px solid var(--hair);display:flex;flex-direction:column;
  transition:transform .35s var(--ease-out),border-color .35s,box-shadow .35s}
.demo:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 70%,transparent);
  box-shadow:0 40px 70px -45px rgba(0,0,0,.85),0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}
.demo__media{position:relative;aspect-ratio:16/10;overflow:hidden}
.demo--wide .demo__media{aspect-ratio:16/9}
.demo__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.demo:hover .demo__media img{transform:scale(1.06)}
.demo__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 38%,rgba(13,14,16,.55) 74%,rgba(13,14,16,.92))}
/* accent hairline that lights up on hover */
.demo__media::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:3;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.demo:hover .demo__media::before{transform:scaleX(1)}
.demo__no{position:absolute;top:1rem;left:1rem;z-index:2;font-family:var(--font-display);font-weight:700;
  font-size:.85rem;background:rgba(13,14,16,.6);border:1px solid color-mix(in srgb,var(--accent) 45%,var(--hair));
  color:var(--accent);padding:.3rem .7rem;border-radius:var(--r-pill);backdrop-filter:blur(6px)}
.demo__on{position:absolute;bottom:1rem;left:1.3rem;right:1.3rem;z-index:2;display:flex;justify-content:space-between;align-items:end;gap:1rem}
.demo__sector{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:600}
.demo__name{font-family:var(--font-display);font-size:1.55rem;font-weight:600;color:#fff;line-height:1.05}
.demo--wide .demo__name{font-size:1.9rem}
.demo__open{flex:none;width:2.7rem;height:2.7rem;border-radius:50%;background:var(--accent);color:#0d0e10;
  display:grid;place-items:center;font-size:1.15rem;transition:transform .3s var(--ease-out)}
.demo:hover .demo__open{transform:rotate(-45deg) scale(1.05)}
.demo__body{padding:1.25rem 1.35rem 1.4rem;display:flex;flex-direction:column;gap:1rem;flex:1}
.demo__desc{color:var(--ink-soft);font-size:.9rem;flex:1}
.demo__tags{display:flex;flex-wrap:wrap;gap:.4rem}
.tag{font-size:.71rem;color:var(--ink-soft);border:1px solid var(--hair);border-radius:var(--r-pill);
  padding:.25rem .65rem;transition:border-color .25s,color .25s}
.demo:hover .tag{border-color:color-mix(in srgb,var(--accent) 40%,var(--hair))}
.demo__link{position:absolute;inset:0;z-index:4;text-indent:-9999px;font-size:0}

/* about */
.about{padding:clamp(3rem,7vw,4.5rem) 0 0}
.about__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;margin-top:2.5rem}
.about__card{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);padding:1.8rem;transition:border-color .3s}
.about__card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--hair))}
.about__card h3{font-size:1.15rem;margin-bottom:.6rem}
.about__card p{color:var(--ink-soft);font-size:.92rem}

/* process */
.process{padding:clamp(3rem,7vw,4.5rem) 0 0}
.process__list{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:2.5rem}
.process__step{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);padding:1.7rem;transition:border-color .3s}
.process__step:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--hair))}
.process__no{font-family:var(--font-display);font-weight:700;color:var(--gold);font-size:1.3rem;display:block;margin-bottom:.8rem}
.process__step h3{font-size:1.05rem;margin-bottom:.5rem}
.process__step p{color:var(--ink-soft);font-size:.88rem}

/* pricing */
.pricing{background:var(--bg-2);border-top:1px solid var(--hair);padding:clamp(3.5rem,8vw,6rem) 0}
.pkg-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:2.5rem}
.pkg{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);padding:2rem;display:flex;flex-direction:column;gap:1.3rem}
.pkg--accent{border-color:color-mix(in srgb,var(--gold) 45%,var(--hair))}
.pkg__name{font-size:1.4rem}
.pkg__for{color:var(--ink-soft);font-size:.88rem;margin-top:-.7rem}
.pkg__plans{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.pkg__plan{border:1px solid var(--hair);border-radius:var(--r-md);padding:1.1rem}
.pkg__plan--alt{background:rgba(255,255,255,.03)}
.pkg__badge{display:inline-block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:.6rem}
.pkg__price{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;font-family:var(--font-display)}
.pkg__price b{font-size:1.6rem;white-space:nowrap}
.pkg__price span{color:var(--ink-soft);font-size:.8rem}
.pkg__setup,.pkg__note{color:var(--ink-soft);font-size:.82rem;margin-top:.5rem}
.pkg__cta{align-self:flex-start;margin-top:.3rem}
.pkg-inc{margin-top:3rem;display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem 1.5rem}
.pkg-inc h4{grid-column:1/-1;font-size:.85rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.1em;font-weight:600;margin-bottom:.4rem}
.pkg-inc li{list-style:none;display:flex;gap:.5rem;color:var(--ink-soft);font-size:.9rem}
.pkg-inc li::before{content:"✓";color:var(--gold)}
.pkg-foot{margin-top:2rem;color:var(--ink-soft);font-size:.8rem;max-width:70ch}

/* note */
.note{background:var(--bg-2);border-top:1px solid var(--hair)}
.note__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);padding:clamp(3.5rem,8vw,6rem) 0}
.note h3{font-size:1.5rem;margin-bottom:1rem}
.note ul{list-style:none;display:grid;gap:.7rem}
.note li{display:flex;gap:.6rem;color:var(--ink-soft);font-size:.95rem}
.note li::before{content:"→";color:var(--gold)}
.note__card{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);padding:1.8rem}

/* references */
.refs{background:var(--bg-2);border-top:1px solid var(--hair)}
.refs__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem}
.ref{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .3s,transform .3s var(--ease-out)}
.ref:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--hair));transform:translateY(-4px)}
.ref__top{display:flex;align-items:center;justify-content:space-between;padding:1.4rem 1.5rem 0}
.ref__status{display:flex;align-items:center;gap:.4rem;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);font-weight:600}
.ref__status::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 25%,transparent)}
.ref__body{padding:1rem 1.5rem 1.6rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.ref__name{font-family:var(--font-display);font-size:1.4rem;font-weight:600}
.ref__desc{color:var(--ink-soft);font-size:.9rem;flex:1}
.ref__tags{display:flex;flex-wrap:wrap;gap:.4rem}
.ref__link{align-self:flex-start;margin-top:.4rem}

.foot{padding:2.5rem 0;border-top:1px solid var(--hair);color:var(--ink-soft);font-size:.88rem}
.foot__row{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;width:100%}

/* responsive */
@media (max-width:960px){
  .grid{grid-template-columns:repeat(4,1fr)}
  .demo,.demo--wide{grid-column:span 2}
  .about__grid{grid-template-columns:1fr}
  .process__list{grid-template-columns:1fr 1fr}
  .pkg-grid{grid-template-columns:1fr}
  .pkg-inc{grid-template-columns:1fr 1fr}
  .refs__grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .grid{grid-template-columns:1fr;gap:1.2rem}
  .demo,.demo--wide{grid-column:span 1}
  .demo__name{font-size:1.4rem}
  .note__grid{grid-template-columns:1fr}
  .nav__meta,.nav__link{display:none}
  .process__list{grid-template-columns:1fr}
  .pkg__plans{grid-template-columns:1fr}
  .pkg-inc{grid-template-columns:1fr}
}

/* ---- testimonials (refs section) ---- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem}
.quote{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:1rem;margin:0}
.quote blockquote{margin:0;font-size:.98rem;line-height:1.55;color:var(--ink);font-style:italic}
.quote blockquote::before{content:"“";display:block;font-family:var(--font-display);font-size:2.2rem;line-height:.6;color:var(--gold);margin-bottom:.5rem;font-style:normal}
.quote figcaption{font-size:.84rem;color:var(--ink-soft)}
.quote figcaption b{color:var(--ink);font-weight:600}
@media (max-width:900px){.quotes{grid-template-columns:1fr}}
.quote__stars{color:var(--gold);font-size:.92rem;letter-spacing:.2em;line-height:1}
.quote .quote__stars + blockquote::before{display:none}