:root{
    --ink:#17121D;
    --ink-2:#1F1928;
    --ink-3:#281F34;
    --paper:#FAF6FB;
    --paper-dim:#EFE7F2;
    --gold:#E0119A;
    --gold-dim:#B70F7E;
    --rust:#8B3FC4;
    --terrace:#5B2A8C;
    --stone:#A79DB3;
    --text-on-paper:#1C1620;
    --text-on-paper-dim:#6B6274;
    --wood-a:#8C6A48;
    --wood-b:#5E4530;
    --radius:6px;
    --nav-h:76px;
    --maxw:1180px;
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--ink);
    color:var(--paper);
    font-family:'Inter',sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  section[id]{ scroll-margin-top: calc(var(--nav-h) + 12px); }

  h1,h2,h3{ font-family:'Fraunces',serif; font-weight:600; margin:0; letter-spacing:-0.01em; }
  p{ margin:0; }
  a{ color:inherit; text-decoration:none; }
  img,svg{ display:block; max-width:100%; }
  button{ font-family:inherit; cursor:pointer; }

  .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
  .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:12.5px;
    letter-spacing:.14em;
    text-transform:uppercase;
    font-weight:500;
  }

  /* grain overlay */
  body::before{
    content:"";
    position:fixed; inset:0;
    pointer-events:none;
    opacity:.05;
    z-index:2000;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  :focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

  /* ---------- nav ---------- */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:1000;
    height:var(--nav-h);
    display:flex; align-items:center;
    background:linear-gradient(180deg, rgba(27,36,48,.92), rgba(27,36,48,.75));
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(250,246,251,.08);
  }
  .nav .wrap{ display:flex; align-items:center; justify-content:space-between; width:100%; }
  .brand{ display:flex; align-items:center; gap:11px; }
  .brand__mark{
    width:42px; height:42px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
    background:#fff; border-radius:10px; padding:5px;
    box-shadow:0 4px 12px rgba(224,17,154,.18);
  }
  .brand__mark img{ width:100%; height:100%; object-fit:contain; border-radius:4px; }
  .footer__mark{
    width:34px; height:34px; display:flex; align-items:center; justify-content:center;
    background:#fff; border-radius:8px; padding:4px;
  }
  .footer__mark img{ width:100%; height:100%; object-fit:contain; border-radius:3px; }
  .brand__name{ font-family:'Fraunces',serif; font-weight:600; font-size:17.5px; letter-spacing:-.01em; }
  .brand__sub{ display:block; font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--stone); letter-spacing:.1em; margin-top:1px; }

  .nav__links{ display:flex; align-items:center; gap:34px; }
  .nav__links a{
    font-size:14.5px; font-weight:500; color:var(--paper); opacity:.82;
    position:relative; padding:4px 0;
  }
  .nav__links a:hover{ opacity:1; }
  .nav__links a::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
    background:var(--gold); transform:scaleX(0); transform-origin:left;
    transition:transform .25s ease;
  }
  .nav__links a:hover::after{ transform:scaleX(1); }

  .nav__call{
    display:flex; align-items:center; gap:8px;
    background:var(--gold); color:#fff;
    font-weight:600; font-size:13.5px;
    padding:9px 16px; border-radius:999px;
    white-space:nowrap;
    transition:background .2s ease, transform .2s ease;
  }
  .nav__call:hover{ background:#F13DB0; transform:translateY(-1px); }
  .nav__call svg{ width:14px; height:14px; }

  .nav__toggle{ display:none; background:none; border:0; width:40px; height:40px; }
  .nav__toggle span{ display:block; width:22px; height:2px; background:var(--paper); margin:5px auto; transition:.25s; }

  /* ---------- ridge dividers ---------- */
  .ridge{ display:block; width:100%; height:46px; margin-bottom:-1px; }

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    padding:calc(var(--nav-h) + 64px) 0 90px;
    overflow:hidden;
    background:
      radial-gradient(ellipse 900px 500px at 82% 10%, rgba(224,17,154,.10), transparent 60%),
      radial-gradient(ellipse 700px 500px at 10% 90%, rgba(91,42,140,.14), transparent 60%),
      var(--ink);
  }
  .hero .wrap{
    display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
  }
  .hero__eyebrow{ color:var(--gold); margin-bottom:18px; }
  .hero__title{
    font-size:clamp(2.15rem, 4.1vw, 3.55rem);
    line-height:1.06;
    color:var(--paper);
  }
  .hero__title em{ font-style:italic; color:var(--gold); font-weight:500; }
  .hero__sub{
    margin-top:22px; max-width:46ch;
    font-size:17px; color:var(--stone);
  }
  .hero__ctas{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
  .btn{
    display:inline-flex; align-items:center; gap:9px;
    font-weight:600; font-size:14.5px;
    padding:13px 22px; border-radius:999px;
    transition:transform .2s ease, background .2s ease, border-color .2s ease;
  }
  .btn--solid{ background:linear-gradient(100deg, var(--terrace) 0%, var(--gold) 55%, var(--rust) 100%); color:#fff; }
  .btn--solid:hover{ filter:brightness(1.08); transform:translateY(-2px); }
  .btn--ghost{ border:1px solid rgba(250,246,251,.28); color:var(--paper); }
  .btn--ghost:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }
  .btn svg{ width:15px; height:15px; }

  .hero__note{
    margin-top:30px; display:flex; gap:10px; align-items:center;
    font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--stone); letter-spacing:.03em;
  }
  .hero__note .dot{ width:6px; height:6px; border-radius:50%; background:var(--terrace); box-shadow:0 0 0 3px rgba(91,42,140,.25); }

  /* ---------- signpost ---------- */
  .signpost{
    position:relative; width:100%; max-width:360px; height:520px; margin:0 auto;
    justify-self:center;
  }
  .signpost__ground{
    position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
    width:96px; height:14px; border-radius:50%;
    background:radial-gradient(ellipse, rgba(0,0,0,.35), transparent 70%);
  }
  .signpost__post{
    position:absolute; left:50%; top:36px; bottom:14px; width:15px; transform:translateX(-50%);
    background:linear-gradient(90deg, var(--wood-b), var(--wood-a) 45%, var(--wood-b));
    border-radius:3px;
    box-shadow:inset -2px 0 0 rgba(0,0,0,.25);
  }
  .signpost__cap{
    position:absolute; left:50%; top:0; transform:translateX(-50%);
    padding:9px 16px; border-radius:5px;
    background:var(--ink-3); border:1px solid rgba(250,246,251,.14);
    text-align:center; z-index:5;
  }
  .signpost__cap b{ font-family:'Fraunces',serif; font-size:14px; letter-spacing:.01em; color:var(--paper); display:block; }
  .signpost__cap span{ font-family:'IBM Plex Mono',monospace; font-size:9px; color:var(--gold); letter-spacing:.14em; }

  .signpost__arm{
    position:absolute; display:flex; flex-direction:column; justify-content:center; gap:2px;
    width:210px; padding:10px 20px;
    font-family:'IBM Plex Mono',monospace;
    animation:sway 6.5s ease-in-out infinite;
    transition:filter .2s ease, transform .2s ease;
    box-shadow:0 6px 14px rgba(0,0,0,.28);
  }
  .signpost__arm b{
    font-family:'Fraunces',serif; font-weight:600; font-size:15.5px; color:var(--ink);
    letter-spacing:-.01em; line-height:1.15;
  }
  .signpost__arm span{ font-size:10px; color:rgba(23,18,29,.72); letter-spacing:.04em; }
  .signpost__arm:hover, .signpost__arm:focus-visible{ filter:brightness(1.08); }

  .signpost__arm.right{ left:50%; margin-left:6px; clip-path:polygon(0 0,88% 0,100% 50%,88% 100%,0 100%); transform-origin:0% 50%; }
  .signpost__arm.left{ right:50%; margin-right:6px; text-align:right; align-items:flex-end; clip-path:polygon(100% 0,12% 0,0 50%,12% 100%,100% 100%); transform-origin:100% 50%; }

  .signpost__arm:nth-child(2){ top:78px;  background:var(--terrace);  rotate:-2deg; animation-delay:.1s; }
  .signpost__arm:nth-child(3){ top:168px; background:var(--rust);     rotate:2.5deg; animation-delay:.6s; }
  .signpost__arm:nth-child(4){ top:258px; background:var(--gold);     rotate:-1.5deg; animation-delay:1.1s; }
  .signpost__arm:nth-child(5){ top:348px; background:var(--stone);    rotate:2deg; animation-delay:.35s; }
  .signpost__arm:nth-child(6){ top:438px; background:var(--gold-dim); rotate:-2.5deg; animation-delay:.85s; }
  .signpost__arm:nth-child(2) b, .signpost__arm:nth-child(3) b, .signpost__arm:nth-child(4) b, .signpost__arm:nth-child(6) b{ color:var(--paper); }
  .signpost__arm:nth-child(2) span, .signpost__arm:nth-child(3) span, .signpost__arm:nth-child(4) span, .signpost__arm:nth-child(6) span{ color:rgba(250,246,251,.75); }

  @keyframes sway{
    0%,100%{ rotate: var(--r, 0deg); }
    50%{ rotate: calc(var(--r, 0deg) + 1.1deg); }
  }

  /* ---------- section shells ---------- */
  .section{ padding:96px 0; position:relative; }
  .section--dark{ background:var(--ink); }
  .section--paper{ background:var(--paper); color:var(--text-on-paper); }
  .section--paper .eyebrow{ color:var(--rust); }
  .section--paper h2{ color:var(--text-on-paper); }
  .section--paper p{ color:var(--text-on-paper-dim); }

  .section__head{ max-width:640px; margin-bottom:56px; }
  .section__head h2{ font-size:clamp(1.7rem,3vw,2.4rem); margin-top:14px; line-height:1.15; }
  .section--dark .eyebrow{ color:var(--gold); }

  /* ---------- services ---------- */
  .services__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .service-card{
    position:relative; padding:30px 26px 26px; border-radius:10px;
    background:var(--ink-2); border:1px solid rgba(250,246,251,.09);
    transition:transform .28s ease, border-color .28s ease;
  }
  .service-card:hover{ transform:translateY(-5px); border-color:rgba(224,17,154,.35); }
  .service-card__peg{
    width:34px; height:5px; border-radius:3px; margin-bottom:20px;
  }
  .service-card:nth-child(1) .service-card__peg{ background:var(--gold); }
  .service-card:nth-child(2) .service-card__peg{ background:var(--terrace); }
  .service-card:nth-child(3) .service-card__peg{ background:var(--rust); }
  .service-card h3{ font-size:20px; color:var(--paper); margin-bottom:12px; }
  .service-card p{ color:var(--stone); font-size:14.5px; }
  .service-card__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
  .service-card__tags span{
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.03em;
    padding:5px 10px; border-radius:999px; border:1px solid rgba(250,246,251,.16); color:var(--stone);
  }

  /* ---------- builds ---------- */
  .builds__list{ display:flex; flex-direction:column; gap:76px; }
  .build{ display:grid; grid-template-columns:.95fr 1.05fr; gap:52px; align-items:center; }
  .build--reverse .build__mock{ order:2; }
  .build--reverse .build__copy{ order:1; }
  .build__tag{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.08em;
    padding:6px 12px; border-radius:999px; margin-bottom:18px;
  }
  .build__tag .dot{ width:6px; height:6px; border-radius:50%; }
  .build--shopshahar .build__tag{ background:rgba(91,42,140,.15); color:var(--terrace); }
  .build--shopshahar .build__tag .dot{ background:var(--terrace); }
  .build--restrosathi .build__tag{ background:rgba(139,63,196,.13); color:var(--rust); }
  .build--restrosathi .build__tag .dot{ background:var(--rust); }
  .build h3{ font-size:clamp(1.5rem,2.4vw,2rem); color:var(--text-on-paper); margin-bottom:16px; }
  .build p{ color:var(--text-on-paper-dim); font-size:15.5px; max-width:46ch; }
  .build__meta{ display:flex; gap:26px; margin-top:26px; flex-wrap:wrap; }
  .build__meta div b{ display:block; font-family:'Fraunces',serif; font-size:19px; color:var(--text-on-paper); }
  .build__meta div span{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-on-paper-dim); letter-spacing:.04em; }

  .seller-callout{
    display:flex; align-items:center; gap:14px; justify-content:space-between;
    margin-top:26px; padding:16px 18px; border-radius:10px;
    background:linear-gradient(100deg, rgba(91,42,140,.09), rgba(224,17,154,.09));
    border:1px solid rgba(139,63,196,.25);
    transition:transform .2s ease, border-color .2s ease;
  }
  .seller-callout:hover{ transform:translateY(-2px); border-color:var(--magenta,var(--gold)); }
  .seller-callout span{ font-size:13.5px; color:var(--text-on-paper); line-height:1.5; }
  .seller-callout b{ font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:12.5px; color:var(--gold); }
  .seller-callout svg{ width:17px; height:17px; flex:0 0 auto; color:var(--gold); }

  /* browser mock */
  .mock{
    background:#fff; border-radius:12px; overflow:hidden;
    box-shadow:0 24px 50px -18px rgba(27,36,48,.35), 0 2px 8px rgba(27,36,48,.08);
    border:1px solid rgba(70,63,50,.08);
  }
  .mock__bar{ display:flex; align-items:center; gap:8px; padding:11px 14px; background:#F1E9F5; border-bottom:1px solid rgba(70,63,50,.08); }
  .mock__bar i{ width:9px; height:9px; border-radius:50%; background:#D8CBE0; }
  .mock__url{
    flex:1; margin-left:8px; font-family:'IBM Plex Mono',monospace; font-size:10.5px;
    color:#8A7E96; background:#fff; padding:5px 10px; border-radius:5px;
  }
  .mock__body{ padding:20px; }

  .stall-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
  .stall{
    border:1px solid #E6DCEF; border-radius:8px; padding:12px 10px; text-align:center;
    background:#FBF7FC;
  }
  .stall svg{ width:22px; height:22px; margin:0 auto 8px; }
  .stall span{ font-size:11px; color:#4A3F55; font-weight:600; }

  .table-list{ display:flex; flex-direction:column; gap:9px; }
  .table-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:11px 13px; border-radius:7px; background:#FBF7FC; border:1px solid #E6DCEF;
  }
  .table-row .t-left{ display:flex; align-items:center; gap:10px; }
  .table-row .t-dot{ width:8px; height:8px; border-radius:50%; }
  .table-row .t-dot.gold{ background:var(--gold); }
  .table-row .t-dot.terrace{ background:var(--terrace); }
  .table-row .t-dot.rust{ background:var(--rust); }
  .table-row b{ font-size:12.5px; color:#241D2C; }
  .table-row span{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:#8A7E96; }

  /* ---------- about ---------- */
  .about{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
  .about p{ color:var(--stone); font-size:15.5px; max-width:48ch; margin-top:18px; }
  .about p + p{ margin-top:14px; }
  .map{
    background:var(--ink-2); border:1px solid rgba(250,246,251,.09); border-radius:12px;
    padding:26px; position:relative; overflow:hidden;
  }
  .map svg{ width:100%; height:auto; }

  /* ---------- contact ---------- */
  .contact__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:start; }
  .contact-cards{ display:flex; flex-direction:column; gap:16px; }
  .contact-card{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    background:#fff; border:1px solid #E6DCEF; border-radius:10px; padding:20px 22px;
    transition:transform .22s ease, box-shadow .22s ease;
  }
  .contact-card:hover{ transform:translateY(-3px); box-shadow:0 16px 30px -18px rgba(27,36,48,.25); }
  .contact-card__name{ font-family:'Fraunces',serif; font-size:18px; color:var(--text-on-paper); }
  .contact-card__role{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--text-on-paper-dim); letter-spacing:.05em; margin-top:3px; }
  .contact-card__call{
    display:flex; align-items:center; gap:8px;
    background:var(--ink); color:var(--paper); font-weight:600; font-size:13px;
    padding:10px 16px; border-radius:999px; white-space:nowrap;
  }
  .contact-card__call svg{ width:13px; height:13px; }
  .contact-card__call:hover{ background:var(--rust); }

  .address-block{
    background:var(--ink); color:var(--paper); border-radius:12px; padding:30px;
  }
  .address-block .eyebrow{ color:var(--gold); }
  .address-block h3{ font-size:20px; margin-top:12px; color:var(--paper); }
  .address-block p{ color:var(--stone); margin-top:10px; font-size:14.5px; }

  /* ---------- footer ---------- */
  .footer{ padding:50px 0 36px; background:var(--ink); border-top:1px solid rgba(250,246,251,.08); }
  .footer .wrap{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
  .footer__brand{ display:flex; align-items:center; gap:10px; }
  .footer__brand b{ font-family:'Fraunces',serif; font-size:15px; }
  .footer small{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--stone); letter-spacing:.03em; }

  /* ---------- reveal ---------- */
  .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
  .reveal.is-in{ opacity:1; transform:translateY(0); }

  /* ---------- responsive ---------- */
  @media (max-width: 980px){
    .hero .wrap{ grid-template-columns:1fr; }
    .signpost{ order:-1; margin-bottom:8px; }
    .services__grid{ grid-template-columns:1fr; }
    .build, .build--reverse{ grid-template-columns:1fr; }
    .build--reverse .build__mock, .build--reverse .build__copy{ order:initial; }
    .about{ grid-template-columns:1fr; }
    .contact__grid{ grid-template-columns:1fr; }
  }
  @media (max-width: 720px){
    .nav__links, .nav__call{ display:none; }
    .nav__toggle{ display:block; }
    .nav.is-open .nav__links{
      display:flex; position:absolute; top:var(--nav-h); left:0; right:0;
      flex-direction:column; background:var(--ink-2); padding:20px 28px 26px; gap:18px;
      border-bottom:1px solid rgba(250,246,251,.1);
    }
    .nav.is-open .nav__call{ display:inline-flex; margin-top:4px; align-self:flex-start; }
    .signpost{ height:auto; max-width:420px; }
    .signpost__post, .signpost__ground{ display:none; }
    .signpost__cap{ position:static; transform:none; margin-bottom:14px; width:fit-content; }
    .signpost__arm{
      position:static; width:100%; clip-path:none !important; border-radius:8px;
      margin-bottom:10px; rotate:0deg !important; animation:none; text-align:left !important;
      align-items:flex-start !important;
    }
    .contact-card{ flex-direction:column; align-items:flex-start; }
  }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .signpost__arm{ animation:none; }
    .reveal{ opacity:1; transform:none; transition:none; }
    .btn, .service-card, .contact-card{ transition:none; }
  }