#pg-hero{
  min-height:calc(100vh - 73px);
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);
  gap:4.5rem;
  align-items:center;
  padding:4.5rem 6vw 5rem;
}

.hero-left{padding-right:1.5rem}

.hero-title{
  font-family:var(--serif);
  font-size:clamp(3.6rem,5.1vw,6.2rem);
  font-weight:300;
  line-height:.95;
  letter-spacing:-.025em;
  margin:1.2rem 0 1.4rem;
  max-width:8ch;
}

.hero-title em{font-style:italic;color:var(--gold)}

.hero-desc{
  font-size:.98rem;
  line-height:2;
  color:var(--ink2);
  max-width:52ch;
  margin-bottom:2rem;
}

.hero-actions{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}

.hero-subnote{
  margin-top:1rem;
  font-size:.74rem;
  line-height:1.9;
  color:var(--ink3);
  max-width:54ch;
}

.hero-proof{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.6rem;
  margin-top:3rem;
  padding-top:2rem;
  border-top:1px solid rgba(23,21,15,.1);
}

.proof-item{padding-right:.75rem}

.proof-num{
  font-family:var(--serif);
  font-size:2.35rem;
  font-weight:300;
  line-height:.92;
  margin-bottom:.35rem;
  color:var(--ink);
}

.proof-label{
  font-size:.64rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink4);
}

.hero-right{
  position:relative;
  min-height:660px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.hero-right::before{
  content:'';
  position:absolute;
  inset:7% 0 4% 6%;
  background:
    radial-gradient(circle at top left,rgba(228,214,185,.65),transparent 30%),
    linear-gradient(180deg,rgba(239,234,226,.88),rgba(245,241,234,.36));
  border-radius:40px 40px 130px 40px;
}

.hero-composition{
  position:relative;
  width:min(100%,560px);
  height:610px;
}

.hero-note{
  position:absolute;
  top:2.2rem;
  left:-1.6rem;
  width:220px;
  display:flex;
  flex-direction:column;
  gap:.45rem;
  z-index:3;
}

.hero-note-kicker{
  font-size:.62rem;
  line-height:1.4;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink4);
}

.hero-note strong{
  font-family:var(--serif);
  font-size:1.02rem;
  font-weight:400;
  line-height:1.35;
  color:var(--ink);
}

.hero-note p{
  margin:0;
  font-size:.72rem;
  line-height:1.9;
  letter-spacing:.02em;
  color:var(--ink3);
}

.ph-screen{
  position:absolute;
  right:0;
  top:14%;
  width:min(84%,442px);
  background:#f7f1e7;
  border:1px solid rgba(23,21,15,.08);
  box-shadow:0 28px 80px rgba(23,21,15,.11);
}

.ph-screen.secondary{
  left:1.6rem;
  top:auto;
  bottom:1.8rem;
  width:min(62%,310px);
  opacity:.94;
  box-shadow:0 22px 54px rgba(23,21,15,.08);
}

.ph-bar{
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.72rem .9rem;
  border-bottom:1px solid rgba(23,21,15,.07);
}

.ph-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(23,21,15,.12);
}

.ph-url{
  flex:1;
  background:#efe4d3;
  min-height:18px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:.1rem .7rem;
  color:var(--ink3);
  font-size:.58rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.ph-body{padding:1.4rem}
.ph-body.compact{padding:1.2rem}

.ph-kicker{
  width:28%;
  height:7px;
  background:#d8bf92;
  border-radius:999px;
  margin-bottom:1rem;
}

.ph-line,.ph-img,.ph-block{background:rgba(23,21,15,.08);border-radius:3px}
.ph-line{height:8px;margin-bottom:.7rem}
.ph-img{height:142px;margin-bottom:1rem}
.ph-block{height:66px;margin-top:1rem}

.ph-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.6rem;
  margin-top:1rem;
}

.ph-grid span{
  display:block;
  height:44px;
  background:rgba(23,21,15,.06);
}

.showcase{
  padding:2rem 6vw 1rem;
}

.showcase-head{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:3rem;
  align-items:end;
  margin-bottom:3.5rem;
}

.cta-eyebrow{
  font-size:.6rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1.2rem;
}

.cta-title{
  font-family:var(--serif);
  font-size:clamp(2.6rem,4vw,4.4rem);
  font-weight:300;
  line-height:1.02;
}

.cta-title em{font-style:italic;color:var(--gold)}

.cta-desc{
  font-size:.94rem;
  line-height:2;
  color:var(--ink2);
  max-width:54ch;
}

.showcase-list{
  display:grid;
  gap:4.5rem;
}

.showcase-item{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:3rem;
  align-items:center;
  padding-top:2rem;
  border-top:1px solid rgba(23,21,15,.08);
}

.showcase-copy{max-width:42ch}

.showcase-type{
  display:block;
  margin-bottom:1rem;
  font-size:.62rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
}

.showcase-copy h3{
  font-family:var(--serif);
  font-size:clamp(2rem,2.7vw,3rem);
  font-weight:300;
  line-height:1.05;
  margin-bottom:1rem;
  color:var(--ink);
}

.showcase-copy p{
  font-size:.9rem;
  line-height:2;
  color:var(--ink2);
}

.showcase-frames{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.4rem;
  align-items:end;
}

.mini-browser{
  margin:0;
  background:#f4eee4;
  border:1px solid rgba(23,21,15,.08);
  box-shadow:0 20px 60px rgba(23,21,15,.08);
}

.mini-browser.after{
  transform:translateY(1.2rem);
  background:#f7f1e8;
}

.mini-browser figcaption{
  padding:.85rem 1rem 0;
  font-size:.6rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink4);
}

.mini-ui{
  display:flex;
  gap:.35rem;
  padding:.75rem 1rem;
}

.mini-ui span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(23,21,15,.12);
}

.mini-body{padding:0 1rem 1rem}

.mini-kicker{
  width:34%;
  height:7px;
  border-radius:999px;
  background:#d6be8f;
  margin-bottom:1rem;
}

.mini-hero{
  height:130px;
  background:linear-gradient(180deg,#d9d3ca,#efe8dd);
  margin-bottom:1rem;
}

.mini-hero.tall{height:168px}

.mini-line{
  height:8px;
  background:rgba(23,21,15,.1);
  margin-bottom:.72rem;
}

.mini-line.medium{width:62%}
.mini-line.long{width:88%}

.mini-block{
  height:58px;
  margin-top:.9rem;
  background:rgba(23,21,15,.07);
}

.mini-grid{
  height:52px;
  margin-bottom:.75rem;
  border-radius:2px;
  background:
    linear-gradient(rgba(23,21,15,.07),rgba(23,21,15,.07)),
    linear-gradient(rgba(23,21,15,.07),rgba(23,21,15,.07)),
    linear-gradient(rgba(23,21,15,.07),rgba(23,21,15,.07)),
    linear-gradient(rgba(23,21,15,.07),rgba(23,21,15,.07));
  background-repeat:no-repeat;
}

.mini-grid.two{
  background-size:calc(50% - .3rem) 100%,calc(50% - .3rem) 100%,0 0,0 0;
  background-position:left top,right top,0 0,0 0;
}

.mini-grid.three{
  background-size:calc(33.333% - .38rem) 100%,calc(33.333% - .38rem) 100%,calc(33.333% - .38rem) 100%,0 0;
  background-position:left top,center top,right top,0 0;
}

.mini-grid.four{
  background-size:calc(25% - .42rem) 100%,calc(25% - .42rem) 100%,calc(25% - .42rem) 100%,calc(25% - .42rem) 100%;
  background-position:left top,33.33% 0,66.66% 0,right top;
}

.mini-grid.spacious{height:82px}

.dense .mini-line,
.dense .mini-grid{
  background-image:
    linear-gradient(rgba(23,21,15,.11),rgba(23,21,15,.11)),
    linear-gradient(rgba(23,21,15,.11),rgba(23,21,15,.11)),
    linear-gradient(rgba(23,21,15,.11),rgba(23,21,15,.11)),
    linear-gradient(rgba(23,21,15,.11),rgba(23,21,15,.11));
}

.refined .mini-grid{
  background-image:
    linear-gradient(rgba(23,21,15,.075),rgba(23,21,15,.075)),
    linear-gradient(rgba(23,21,15,.075),rgba(23,21,15,.075)),
    linear-gradient(rgba(23,21,15,.075),rgba(23,21,15,.075)),
    linear-gradient(rgba(23,21,15,.075),rgba(23,21,15,.075));
}

.refined .mini-line{background:rgba(23,21,15,.075)}
.refined .mini-block{background:rgba(23,21,15,.075)}

.how{
  padding:8rem 6vw 2rem;
}

.how-hdr{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:3rem;
  align-items:end;
  margin-bottom:4rem;
}

.how-title{
  font-family:var(--serif);
  font-size:clamp(2.4rem,3.5vw,4rem);
  font-weight:300;
  line-height:1.02;
}

.how-sub{
  font-size:.92rem;
  color:var(--ink2);
  line-height:2;
  max-width:42ch;
}

.how-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2.5rem;
}

.how-item{
  padding-top:1.5rem;
  border-top:1px solid rgba(23,21,15,.1);
}

.how-n{
  font-family:var(--serif);
  font-size:4rem;
  font-weight:300;
  color:#ddcfb2;
  line-height:.9;
  margin-bottom:1.2rem;
  display:block;
}

.how-name{
  font-size:.98rem;
  font-weight:400;
  color:var(--ink);
  margin-bottom:.7rem;
}

.how-desc{
  font-size:.84rem;
  line-height:1.95;
  color:var(--ink2);
  max-width:28ch;
}

.examples{
  padding:5rem 6vw 6.5rem;
}

.examples-top{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:3rem;
  margin-bottom:2.5rem;
  align-items:end;
}

.ex-title{
  font-family:var(--serif);
  font-size:clamp(2rem,3vw,3.1rem);
  font-weight:300;
  line-height:1.04;
}

.ex-sub{
  font-size:.9rem;
  color:var(--ink2);
  line-height:2;
  max-width:50ch;
}

.ex-tags{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.75rem 1.2rem;
  padding-top:1.4rem;
  border-top:1px solid rgba(23,21,15,.08);
}

.ex-tag{
  font-size:.74rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink3);
  border:none;
  padding:.15rem 0;
  cursor:pointer;
  transition:all .25s;
  background:none;
  text-align:left;
}

.ex-tag:hover,
.ex-tag.active{
  color:var(--gold);
  transform:translateX(6px);
}

/* ── About section ── */
.about{
  padding:7rem 6vw 8rem;
  border-top:.5px solid rgba(23,21,15,.07);
}
.about-inner{max-width:1120px;margin:0 auto}
.about-head{
  display:grid;
  grid-template-columns:1fr 1.55fr;
  gap:3rem;
  align-items:end;
  margin-bottom:2rem;
}
.about-title{
  font-family:var(--serif);
  font-size:clamp(2.2rem,3.2vw,3.6rem);
  font-weight:300;
  line-height:1.06;
  color:var(--ink);
}
.about-title em{font-style:italic;color:var(--gold)}
.about-lead{
  font-size:.92rem;
  line-height:2;
  color:var(--ink2);
  max-width:72ch;
  margin-bottom:3.5rem;
}

/* ── Timeline ── */
.about-timeline{
  border-left:1px solid rgba(23,21,15,.1);
  margin-bottom:4rem;
}
.tl-item{
  display:grid;
  grid-template-columns:8rem 1fr;
  gap:2rem;
  padding:2rem 0 2rem 2.5rem;
  position:relative;
  border-bottom:.5px solid rgba(23,21,15,.06);
  transition:background .2s ease;
}
.tl-item:last-child{border-bottom:none}
.tl-item::before{
  content:'';
  position:absolute;
  left:-4px;
  top:2.6rem;
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(23,21,15,.2);
  transition:background .25s ease;
}
.tl-item--now::before{background:var(--gold)}
.tl-item:hover::before{background:var(--gold)}
.tl-yr{
  font-family:var(--serif);
  font-size:.95rem;
  font-weight:300;
  color:var(--ink4);
  padding-top:.2rem;
  line-height:1.5;
  letter-spacing:.01em;
  flex-shrink:0;
}
.tl-ttl{
  font-size:.93rem;
  font-weight:500;
  color:var(--ink);
  margin-bottom:.55rem;
  transition:color .2s ease;
}
.tl-item:hover .tl-ttl{color:var(--gold)}
.tl-txt{
  font-size:.84rem;
  line-height:1.95;
  color:var(--ink3);
  max-width:64ch;
}
.tl-tag{
  display:inline-block;
  margin-top:.85rem;
  font-size:.62rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink4);
  border:.5px solid rgba(23,21,15,.15);
  padding:.28em .75em;
  border-radius:2px;
}
.tl-tag--now{
  color:var(--gold);
  border-color:rgba(156,132,72,.35);
}

.about-stats{display:grid;grid-template-columns:1fr 1fr;gap:1.8rem 1.4rem;margin-bottom:4rem}
.about-stat{padding-top:1rem;border-top:.5px solid rgba(23,21,15,.12)}
.about-stat-num{
  font-family:var(--serif);
  font-size:2.6rem;
  font-weight:300;
  line-height:1;
  color:var(--ink);
  margin-bottom:.3rem;
}
.about-stat-label{
  font-size:.65rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink4);
}
.about-values{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2.5rem;
  padding-top:3rem;
  border-top:.5px solid rgba(23,21,15,.08);
}
.about-val{transition:opacity .2s ease}
.about-values:hover .about-val{opacity:.5}
.about-values:hover .about-val:hover{opacity:1}
.about-val-title{
  font-size:.94rem;
  font-weight:500;
  color:var(--ink);
  margin-bottom:.65rem;
  transition:color .2s ease;
}
.about-val:hover .about-val-title{color:var(--gold)}
.about-val-copy{font-size:.84rem;line-height:1.95;color:var(--ink3)}

@keyframes shimmer{0%,100%{opacity:.35}50%{opacity:.7}}

@media(max-width:1080px){
  #pg-hero,
  .showcase-head,
  .showcase-item,
  .how-hdr,
  .examples-top,
  .about-head{
    grid-template-columns:1fr;
  }
  .about-values{grid-template-columns:1fr 1fr}
  .tl-item{grid-template-columns:6rem 1fr;gap:1.5rem}

  #pg-hero{
    min-height:auto;
    padding-top:3rem;
  }

  .hero-left{padding-right:0}
  .hero-right{min-height:560px}
  .showcase-frames{max-width:760px}
  .ex-tags{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:760px){
  .hero-title{max-width:none}
  .hero-proof,
  .how-grid{
    grid-template-columns:1fr;
  }

  .showcase-frames{
    grid-template-columns:1fr;
  }

  .mini-browser.after{transform:none}
  .ex-tags{grid-template-columns:1fr 1fr}
  .about-values{grid-template-columns:1fr}
  .tl-item{
    grid-template-columns:1fr;
    gap:.4rem;
    padding-left:1.8rem;
  }
  .tl-yr{
    font-size:.82rem;
    color:var(--gold);
    font-weight:400;
  }
}

@media(max-width:560px){
  .hero-actions{
    align-items:stretch;
    flex-direction:column;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-quiet{
    width:100%;
    text-align:center;
  }

  .hero-composition{height:520px}

  .hero-note{
    position:relative;
    top:auto;
    left:auto;
    width:auto;
    max-width:250px;
    margin-bottom:1rem;
  }

  .ph-screen.secondary{left:0}
  .ex-tags{grid-template-columns:1fr}
}