:root{
    --bg:#efe7d9; --ink:#2b2620; --muted:#7c7264; --line:#e0d5c4;
    --accent:#b0745c; --gold:#b98a4e; --card:#ffffff;
    --display:'Cormorant Garamond', Georgia, serif;
    --body:'Manrope','Helvetica Neue', Arial, sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  a{color:inherit}

  .top{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
    padding:16px 28px;pointer-events:none;background:rgba(239,231,217,.78);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line)}
  .tabs{display:flex;gap:clamp(18px,3vw,40px);pointer-events:auto}
  .tabs a{text-decoration:none;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
    color:var(--muted);position:relative;padding:6px 0;transition:color .2s}
  .tabs a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--accent);
    transform:scaleX(0);transform-origin:center;transition:transform .25s ease}
  .tabs a:hover{color:var(--ink)}
  .tabs a:hover:after{transform:scaleX(1)}
  @media(max-width:820px){
    .top{padding:12px 16px}
    .tabs{gap:14px;order:3;width:100%;justify-content:center;padding-top:4px}
    .tabs a{font-size:10.5px;letter-spacing:.1em}
  }
  .top .brand{font-family:var(--display);font-size:22px;font-weight:700;text-decoration:none;pointer-events:auto}
  .top .brand span{color:var(--accent)}
  .top .cta{pointer-events:auto;display:inline-block;background:var(--accent);color:#fff;text-decoration:none;padding:11px 22px;border-radius:999px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;transition:transform .15s,box-shadow .15s}
  .top .cta:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(176,116,92,.28)}

  #stage{position:relative;height:100vh}
  #pin{position:sticky;top:0;height:100vh;width:100%;overflow:hidden}
  #pin:before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(52% 48% at 50% 48%, rgba(255,251,243,.5), rgba(239,231,217,0) 72%)}
  #scene{position:absolute;inset:0;z-index:1;display:block}

  /* hover target sitting over the 3D object */
  /* three columns — each with its own 3D object above the title */
  .cols{position:absolute;left:0;right:0;top:28vh;bottom:15vh;z-index:3;display:grid;
    grid-template-columns:repeat(3,1fr);grid-template-rows:1fr auto;
    gap:clamp(16px,3vw,48px);padding:0 clamp(20px,5vw,80px)}
  /* subgrid ties every column to the same two rows, so the titles line up across
     all three no matter how long each column's copy is */
  .col{cursor:pointer;display:grid;grid-row:span 2;grid-template-rows:subgrid}
  /* reserved space the 3D object is positioned into — hovering here counts as the column */
  .col-art{min-height:0}
  /* step layout: big numeral on the left, title and copy beside it */
  .col-txt{will-change:opacity,transform;transition:opacity .4s ease, transform .4s ease;
    padding:14px 4px 0;display:flex;gap:clamp(10px,1.2vw,18px);align-items:flex-start;text-align:left}
  .col .num{font-family:var(--display);font-size:clamp(30px,3.4vw,50px);line-height:.86;
    color:#c6b9a1;flex:none;transition:color .3s ease}
  .col.hot .num,.col.on .num{color:var(--accent)}
  .col h2{font-family:var(--display);font-weight:600;font-size:clamp(18px,1.95vw,27px);line-height:1.12;margin-bottom:8px}
  .col p{color:var(--muted);font-size:clamp(12.5px,1.02vw,15px);line-height:1.55;
    max-width:32ch;transition:opacity .4s ease}
  .col.hot h2{color:var(--accent)}

  /* hero heading above the three steps */
  .hero-head{position:absolute;top:12vh;left:0;right:0;z-index:3;text-align:center;padding:0 24px}
  .hero-head .eyebrow{font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:12px}
  .hero-head h1{font-family:var(--display);font-weight:600;font-size:clamp(28px,4.2vw,54px);line-height:1.06}

  @media(max-width:900px){
    .hero-head{top:9vh}
    .cols{top:26vh;bottom:12vh;gap:8px;padding:0 12px}
    .col-txt{padding-top:10px;gap:8px}
    .col .num{font-size:22px}
    .col .eyebrow{font-size:9px;letter-spacing:.16em;margin-bottom:5px}
    .col h2{font-size:clamp(14px,3.6vw,20px)}
    .col p{display:none}
  }

  .hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:3;color:var(--muted);font-size:11px;letter-spacing:.26em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:10px;transition:opacity .4s}
  .hint .mouse{width:22px;height:34px;border:1.5px solid var(--muted);border-radius:12px;position:relative}
  .hint .mouse:after{content:"";position:absolute;left:50%;top:7px;width:3px;height:6px;border-radius:2px;background:var(--muted);transform:translateX(-50%);animation:sc 1.5s infinite}
  @keyframes sc{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(-50%,9px)}}
  .bar{position:fixed;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--accent),var(--gold));z-index:45;transition:width .1s linear}

  .after{position:relative;z-index:5;background:linear-gradient(180deg,#efe7d9,#f6f0e6)}
  section{padding:96px 24px}
  .wrap{max-width:1080px;margin:0 auto}
  .sec-head{text-align:center;max-width:620px;margin:0 auto 54px}
  .sec-head .eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:14px}
  .sec-head h3{font-family:var(--display);font-size:clamp(30px,5vw,48px);font-weight:600;line-height:1.1;margin-bottom:12px}
  .sec-head p{color:var(--muted);font-size:17px}

  /* live website demos */
  .work{display:grid;grid-template-columns:repeat(2,1fr);gap:34px}
  .demo{background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;
    box-shadow:0 14px 40px rgba(43,38,32,.07);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
  .demo:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(43,38,32,.13)}
  .chrome{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);background:#f7f2e9}
  .chrome i{width:10px;height:10px;border-radius:50%;background:#dcd2c2;flex:none}
  .chrome i:nth-child(1){background:#e0a89a}
  .chrome i:nth-child(2){background:#e3c9a0}
  .chrome i:nth-child(3){background:#c3cdb6}
  .chrome .url{flex:1;margin-left:8px;background:#fff;border:1px solid var(--line);border-radius:999px;
    padding:5px 14px;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .frame{position:relative;aspect-ratio:16/10;background:#efe7d9;overflow:hidden}
  .frame iframe{position:absolute;top:0;left:0;width:250%;height:250%;border:0;
    transform:scale(.4);transform-origin:0 0}
  /* transparent layer: keeps page scrolling natural, whole preview opens the site */
  .frame .hit{position:absolute;inset:0;z-index:2;cursor:pointer;display:block}
  .frame .live{position:absolute;z-index:3;top:12px;right:12px;background:rgba(43,38,32,.72);color:#fff;
    font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:5px 11px;border-radius:999px;
    display:flex;align-items:center;gap:6px;backdrop-filter:blur(4px)}
  .frame .live:before{content:"";width:6px;height:6px;border-radius:50%;background:#8fd08f;box-shadow:0 0 0 0 rgba(143,208,143,.7);animation:pulse 2s infinite}
  @keyframes pulse{70%{box-shadow:0 0 0 7px rgba(143,208,143,0)}100%{box-shadow:0 0 0 0 rgba(143,208,143,0)}}
  .demo .meta{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1}
  .demo .kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:9px}
  .demo h4{font-family:var(--display);font-size:29px;font-weight:600;margin-bottom:8px;line-height:1.1}
  .demo p{color:var(--muted);font-size:15px;margin-bottom:18px}
  .tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
  .tags span{font-size:11.5px;letter-spacing:.04em;color:var(--muted);border:1px solid var(--line);
    border-radius:999px;padding:5px 12px;background:#faf6ee}
  .demo .go{margin-top:auto;align-self:flex-start;text-decoration:none;padding:12px 24px;border-radius:999px;
    font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;background:var(--accent);color:#fff;transition:.15s}
  .demo .go:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(176,116,92,.3)}
  /* pricing */
  #pricing{border-top:1px solid var(--line)}
  .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
  .plan{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:34px 30px;
    display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(43,38,32,.05)}
  .plan.feature{border-color:var(--accent);box-shadow:0 22px 55px rgba(176,116,92,.16)}
  .plan .kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:10px}
  .plan h4{font-family:var(--display);font-size:30px;font-weight:600;margin-bottom:7px}
  /* min-height keeps the prices on the same line across both cards */
  .plan .desc{color:var(--muted);font-size:14.5px;line-height:1.55;margin-bottom:20px;min-height:3.1em}
  .plan .price{font-family:var(--display);font-size:38px;font-weight:600;line-height:1}
  .plan .price small{font-size:14px;color:var(--muted);font-family:var(--body)}
  .plan .price-note{font-size:12px;color:var(--muted);margin-bottom:24px}
  .plan ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:28px}
  .plan li{display:flex;gap:10px;font-size:14.5px;align-items:flex-start}
  .plan li:before{content:"✦";color:var(--accent);flex:none;font-size:12px;margin-top:3px}
  .plan li.soon{color:var(--muted)}
  .plan li.soon:before{content:"◷";color:var(--gold)}
  .plan .go{margin-top:auto;align-self:flex-start;text-decoration:none;padding:12px 24px;border-radius:999px;
    font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
    border:1px solid var(--line);color:var(--ink);transition:.15s}
  .plan .go:hover{border-color:var(--accent);color:var(--accent)}
  .plan.feature .go{background:var(--accent);color:#fff;border-color:var(--accent)}
  .plan.feature .go:hover{transform:translateY(-1px);color:#fff}
  @media(max-width:900px){.plans{grid-template-columns:1fr}}

  .work-note{text-align:center;margin-top:38px;color:var(--muted);font-size:15px}
  .work-note a{color:var(--accent);text-decoration:none;font-weight:600}
  @media(max-width:900px){.work{grid-template-columns:1fr;gap:26px}}

  .band{text-align:center;max-width:640px;margin:0 auto}
  .band h3{font-family:var(--display);font-size:clamp(30px,5vw,50px);font-weight:600;margin-bottom:14px}
  .band p{color:var(--muted);font-size:17px;margin-bottom:30px}
  .band .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .band a{display:inline-block;text-decoration:none;padding:13px 26px;border-radius:999px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
  .band .solid{background:var(--accent);color:#fff}
  .band .out{border:1px solid var(--line);color:var(--ink)}

  footer{text-align:center;padding:48px 24px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
  footer .brand{font-family:var(--display);font-size:20px;color:var(--ink);text-decoration:none}
  footer .brand span{color:var(--accent)}
  footer a{color:var(--accent);text-decoration:none}
  @media(prefers-reduced-motion:reduce){.hint .mouse:after{animation:none}}

  /* standalone subpages (pricing, contact) — clear the fixed header */
  .page{padding-top:clamp(96px,12vh,140px);min-height:70vh}
  .page .sec-head{margin-bottom:46px}
  .page-hero{text-align:center;max-width:680px;margin:0 auto 8px}
  .page-hero .eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:14px}
  .page-hero h1{font-family:var(--display);font-size:clamp(34px,5.5vw,58px);font-weight:600;line-height:1.06;margin-bottom:14px}
  .page-hero p{color:var(--muted);font-size:17px}

  /* contact page */
  .contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:760px;margin:0 auto}
  .ccard{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:32px 28px;text-align:center;
    box-shadow:0 10px 30px rgba(43,38,32,.05);text-decoration:none;display:block;transition:transform .18s,box-shadow .18s}
  .ccard:hover{transform:translateY(-3px);box-shadow:0 20px 46px rgba(43,38,32,.1)}
  .ccard .ic{font-size:24px;margin-bottom:12px}
  .ccard h3{font-family:var(--display);font-size:24px;font-weight:600;margin-bottom:6px}
  .ccard p{color:var(--muted);font-size:14.5px}
  .ccard .val{color:var(--accent);font-weight:600;margin-top:8px;font-size:15px}
  @media(max-width:760px){.contact-grid{grid-template-columns:1fr}}

  /* pricing: two one-offs on top, the monthly plan beneath them */
  .plans.two{grid-template-columns:repeat(2,1fr);max-width:820px;margin:0 auto}
  .perk{display:inline-flex;align-items:center;gap:7px;background:rgba(176,116,92,.10);
    border:1px solid rgba(176,116,92,.32);color:var(--accent);border-radius:999px;
    padding:7px 14px;font-size:12px;font-weight:700;letter-spacing:.04em;margin-bottom:20px}
  .perk:before{content:"★";font-size:11px}
  .sub-card{max-width:820px;margin:26px auto 0;background:var(--card);border:1px solid var(--accent);
    border-radius:20px;padding:36px 34px;display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(24px,4vw,46px);
    align-items:start;box-shadow:0 22px 55px rgba(176,116,92,.16)}
  .sub-card .kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:10px}
  .sub-card h4{font-family:var(--display);font-size:30px;font-weight:600;margin-bottom:12px}
  .sub-card .price{font-family:var(--display);font-size:38px;font-weight:600;line-height:1}
  .sub-card .price small{font-size:14px;color:var(--muted);font-family:var(--body)}
  .sub-card .price-note{font-size:12px;color:var(--muted);margin-bottom:20px}
  .sub-card .go{display:inline-block;text-decoration:none;padding:12px 24px;border-radius:999px;font-size:12px;
    letter-spacing:.08em;text-transform:uppercase;font-weight:700;background:var(--accent);color:#fff;transition:.15s}
  .sub-card .go:hover{transform:translateY(-1px)}
  .sub-list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:12px 20px}
  .sub-list li{display:flex;gap:10px;font-size:14.5px;align-items:flex-start}
  .sub-list li:before{content:"✦";color:var(--accent);flex:none;font-size:12px;margin-top:3px}
  @media(max-width:820px){
    .plans.two{grid-template-columns:1fr}
    .sub-card{grid-template-columns:1fr;padding:30px 24px}
    .sub-list{grid-template-columns:1fr}
  }

  /* why-us / AI advantage */
  #why{border-top:1px solid var(--line)}
  .edge{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .ecard{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:32px 28px;
    box-shadow:0 10px 30px rgba(43,38,32,.05);transition:transform .18s,box-shadow .18s}
  .ecard:hover{transform:translateY(-3px);box-shadow:0 20px 46px rgba(43,38,32,.1)}
  .ecard .ic{width:44px;height:44px;border-radius:12px;background:rgba(176,116,92,.10);
    display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:16px}
  .ecard h4{font-family:var(--display);font-size:23px;font-weight:600;margin-bottom:8px}
  .ecard p{color:var(--muted);font-size:14.5px;line-height:1.6}
  /* the face behind "designed by people" */
  .founder{max-width:820px;margin:0 auto 34px;background:var(--card);border:1px solid var(--line);
    border-radius:20px;padding:26px 30px;display:grid;grid-template-columns:150px 1fr;gap:clamp(20px,2.6vw,32px);
    align-items:center;box-shadow:0 10px 30px rgba(43,38,32,.05)}
  /* square crop reads as a real photo rather than an avatar */
  .founder-photo{border-radius:12px;overflow:hidden;background:#efe7d9;aspect-ratio:1/1;
    border:1px solid var(--line)}
  .founder-photo img{width:100%;height:100%;object-fit:cover;display:block}
  .founder-txt .eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);
    font-weight:600;margin-bottom:10px}
  .founder-txt h4{font-family:var(--display);font-size:26px;font-weight:600;line-height:1.1}
  .founder-txt .role{color:var(--muted);font-size:13px;letter-spacing:.04em;margin:2px 0 14px}
  .founder-txt p{color:var(--muted);font-size:14.5px;line-height:1.65}
  .founder-txt p+p{margin-top:10px}
  @media(max-width:700px){
    .founder{grid-template-columns:1fr;padding:24px;text-align:center;gap:16px}
    .founder-photo{width:140px;margin:0 auto}
  }
  .compare{max-width:820px;margin:38px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .compare div{border-radius:16px;padding:20px 22px;font-size:14.5px;line-height:1.55}
  .compare .old{background:rgba(43,38,32,.04);border:1px dashed var(--line);color:var(--muted)}
  .compare .new{background:rgba(176,116,92,.08);border:1px solid rgba(176,116,92,.35)}
  .compare b{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin-bottom:8px}
  .compare .old b{color:var(--muted)}
  .compare .new b{color:var(--accent)}
  @media(max-width:900px){.edge{grid-template-columns:1fr}.compare{grid-template-columns:1fr}}