
  :root{
    --ink:#271916;
    --ink-soft:#5A413C;
    --red:#E0221F;
    --red-deep:#B5161A;
    --amber:#F7C24A;
    --amber-deep:#EFA82E;
    --rust:#E0221F;
    --green:#2F8F5B;
    --paper:#FFF9F1;
    --paper-dim:#FBEEDA;
    --slate:#7A6A63;
    --line:#EEDFC4;
    --white:#FFFFFF;
    --surface-dark:#271916;
    --on-dark:#FFF9F1;
    --radius:0.875rem;
    --shadow: 0 0.625rem 1.875rem -0.875rem rgba(224,34,31,0.22);
  }
  html.dark{
    --ink:#F3EEE7;
    --ink-soft:#CBC1B6;
    --green:#3ED67F;
    --paper:#15110D;
    --paper-dim:#1D1712;
    --slate:#988D82;
    --line:#3A322B;
    --white:#241D18;
    --shadow: 0 0.625rem 1.875rem -0.875rem rgba(0,0,0,0.55);
  }
  body, header, .cat-card, .svc-card, .testi, .modal, .field input, .field select, .why-feature, .why-card,
  .banner, .top-banner, .app-badge{
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  }
  body{
    margin:0;
    font-family:'Inter',sans-serif;
    background:var(--paper);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Space Grotesk',sans-serif;
    letter-spacing:-0.01em;
    margin:0;
  }
  .mono{
    font-family:'IBM Plex Mono',monospace;
    letter-spacing:0.02em;
  }
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  button{font-family:inherit;cursor:pointer;}
  .wrap{max-width:73.75rem;margin:0 auto;padding:0 1.5rem;}
  :focus-visible{outline:0.1875rem solid var(--amber-deep);outline-offset:0.1875rem;}

  /* ---------- Ticket / perforated motif ---------- */
  .ticket-edge{
    position:relative;
  }
  .ticket-edge::before{
    content:"";
    position:absolute;
    left:0; right:0; bottom:-0.0625rem;
    height:0.875rem;
    background-image: radial-gradient(circle at 0.625rem 0, transparent 0.5rem, var(--paper) 0.5312rem);
    background-size:1.25rem 0.875rem;
    background-repeat:repeat-x;
  }
  .dash-rule{
    border:none;
    border-top:0.125rem dashed var(--line);
    margin:0;
  }

  /* ---------- Top banner ---------- */
  .top-banner{
    background:var(--surface-dark); color:#FFF9F1; font-size:0.83rem; padding:0.625rem 1.5rem;
  }
  .top-banner .banner-wrap{
    max-width:73.75rem; margin:0 auto; position:relative;
    display:flex; align-items:center; justify-content:center; gap:0.5625rem; text-align:center;
    padding-right:1.75rem;
  }
  .top-banner svg{width:0.9375rem; height:0.9375rem; flex-shrink:0; color:var(--amber);}
  .top-banner strong{color:var(--amber); font-weight:600;}
  .top-banner .tb-close{
    position:absolute; right:0; top:50%; transform:translateY(-50%);
    background:none; border:none; color:#FFF9F1; opacity:0.65; font-size:1.05rem; line-height:1; padding:0.125rem 0.25rem;
  }
  .top-banner .tb-close:hover{opacity:1;}
  @media (max-width:40rem){
    .top-banner{font-size:0.75rem; padding:0.5625rem 2.5rem 0.5625rem 1rem;}
    .top-banner .banner-wrap{text-align:left; justify-content:flex-start;}
  }

  /* ---------- Header ---------- */
  header{
    position:sticky; top:0; z-index:100;
    background:var(--white);
    border-bottom:0.0625rem solid var(--line);
    box-shadow:0 0.0625rem 0 rgba(39,25,22,0.03);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:0.575rem 1.5rem;
    max-width:73.75rem; margin:0 auto;
    gap:1.25rem;
  }
  .logo{
    display:flex; align-items:center;
  }
  .logo img{
    height:2.125rem; width:auto; display:block;
    border-radius: 2px;
  }
  .footer-brand .logo img{height:2rem;}
  .nav-links{
    display:flex; gap:1.75rem; align-items:center;
    font-size:0.93rem; font-weight:500;
    list-style:none; margin:0; padding:0;
  }
  .nav-links a{
    position:relative; padding:0.25rem 0; color:var(--ink-soft);
    transition:color 0.15s ease;
  }
  .nav-links a:hover{color:var(--ink);}
  .nav-links a::after{
    content:""; position:absolute; left:0; bottom:-0.125rem; width:0; height:0.125rem;
    background:var(--amber-deep); transition:width 0.2s ease;
  }
  .nav-links a:hover::after{width:100%;}
  .nav-actions{display:flex; align-items:center; gap:0.875rem;}
  .theme-toggle{
    width:2.375rem; height:2.375rem; border-radius:50%; flex-shrink:0;
    border:0.0625rem solid var(--line); background:var(--paper-dim); color:var(--ink);
    display:flex; align-items:center; justify-content:center;
    transition:background 0.15s ease, border-color 0.15s ease;
  }
  .theme-toggle:hover{border-color:var(--red);}
  .theme-toggle svg{width:1.125rem; height:1.125rem; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
  .theme-toggle .icon-moon{display:none;}
  html.dark .theme-toggle .icon-sun{display:none;}
  html.dark .theme-toggle .icon-moon{display:block;}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
    padding:0.6875rem 1.25rem; border-radius:62.4375rem; border:0.125rem solid var(--ink);
    font-weight:600; font-size:0.9rem; background:transparent; color:var(--ink);
    transition:transform 0.15s ease, background 0.15s ease, color 0.15s ease;
    white-space:nowrap;
  }
  .btn:hover{transform:translateY(-0.0625rem);}
  .btn-solid{background:var(--red); border-color:var(--red); color:#fff;}
  .btn-solid:hover{background:var(--red-deep); border-color:var(--red-deep);}
  .btn-amber{background:var(--amber); border-color:var(--amber); color:var(--ink);}
  .btn-amber:hover{background:var(--amber-deep); border-color:var(--amber-deep);}
  .btn-sm{padding:0.5rem 1rem; font-size:0.82rem;}
  .hamburger{
    display:none; flex-direction:column; gap:0.3125rem; background:none; border:none; padding:0.375rem;
  }
  .hamburger span{width:1.5rem;height:0.125rem;background:var(--ink);display:block;border-radius:0.125rem;}

  .mobile-menu{
    display:none; flex-direction:column; gap:0.125rem; padding:0.375rem 1.5rem 1.125rem;
    border-bottom:0.0625rem solid var(--line); background:var(--paper);
  }
  .mobile-menu.open{display:flex;}
  .mobile-menu a{padding:0.75rem 0.25rem; border-bottom:0.0625rem dashed var(--line); font-weight:500; color:var(--ink-soft);}

  /* ---------- Hero ---------- */
  .hero{
    padding:2.5rem 0 1.75rem;
    overflow:hidden;
    position:relative;
  }
  .hero::before{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(circle at 88% -8%, rgba(224,34,31,0.12), transparent 42%),
      radial-gradient(circle at -8% 108%, rgba(247,194,74,0.22), transparent 42%),
      repeating-linear-gradient(0deg, rgba(39,25,22,0.05) 0, rgba(39,25,22,0.05) 0.0625rem, transparent 0.0625rem, transparent 2.25rem),
      repeating-linear-gradient(90deg, rgba(39,25,22,0.05) 0, rgba(39,25,22,0.05) 0.0625rem, transparent 0.0625rem, transparent 2.25rem);
    -webkit-mask-image: linear-gradient(180deg, black, transparent 88%);
    mask-image: linear-gradient(180deg, black, transparent 88%);
    pointer-events:none;
  }
  .hero .wrap{position:relative; z-index:1;}
  .hero-grid{
    display:grid; grid-template-columns:0.92fr 1.08fr; gap:3.5rem; align-items:center;
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap:0.5rem;
    font-family:'IBM Plex Mono',monospace; font-size:0.74rem; font-weight:600;
    text-transform:uppercase; letter-spacing:0.12em; color:var(--rust);
    background:#F7E4DA; padding:0.375rem 0.75rem; border-radius:62.4375rem; margin-bottom:1.125rem;
  }
  .eyebrow .dot{width:0.375rem;height:0.375rem;border-radius:50%;background:var(--rust);}
  .hero h1{
    font-size:clamp(2.2rem, 4.6vw, 3.5rem);
    font-weight:700; line-height:1.06; color:var(--ink);
    max-width:12ch;
  }
  .hero h1 .under{
    background:linear-gradient(transparent 62%, var(--amber) 62%);
    padding:0 0.125rem;
  }
  .hero p.lede{
    margin-top:1.25rem; font-size:1.08rem; color:var(--slate); max-width:44ch; line-height:1.6;
  }
  .hero-actions{display:flex; gap:0.875rem; margin-top:1.875rem; flex-wrap:wrap;}
  .loc-search{
    display:flex; align-items:center; gap:0.625rem;
    background:var(--white); border:0.0625rem solid var(--line); border-radius:62.4375rem;
    padding:0.375rem 0.5rem 0.375rem 1.125rem; margin-top:1.625rem; max-width:30rem;
    box-shadow:var(--shadow);
  }
  .loc-search svg{color:var(--red); flex-shrink:0;}
  .loc-search input{
    border:none; outline:none; flex:1; min-width:0;
    font-family:inherit; font-size:0.9rem; background:transparent; color:var(--ink);
  }
  .loc-search input::placeholder{color:var(--slate);}
  .loc-status{margin-top:0.625rem; font-size:0.78rem; color:var(--slate); min-height:1.2em;}
  .loc-status.active{color:var(--green); font-weight:600;}
  @media (max-width:30rem){
    .loc-search{flex-wrap:wrap; border-radius:1rem; padding:0.75rem 0.875rem;}
    .loc-search input{width:100%; order:2; padding:0.375rem 0;}
    .loc-search .btn{order:3; width:100%; justify-content:center;}
  }
  .trust-row{
    display:flex; gap:1.75rem; margin-top:2.5rem; flex-wrap:wrap;
  }
  .trust-item{display:flex; flex-direction:column;}
  .trust-item .num{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.5rem; color:var(--ink);}
  .trust-item .lbl{font-size:0.8rem; color:var(--slate);}

  /* service ticket visual */
  .ticket{
    background:var(--white);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    border:0.0625rem solid var(--line);
    padding:1.625rem 1.625rem 1.375rem;
    max-width:25rem;
    margin-left:auto;
    transform:rotate(1.2deg);
  }
  .ticket-top{display:flex; justify-content:space-between; align-items:flex-start;}
  .ticket-top .tag{
    font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--slate);
  }
  .ticket-top .status{
    font-family:'IBM Plex Mono',monospace; font-size:0.7rem; font-weight:600;
    background:#E4F3EA; color:var(--green); padding:0.25rem 0.625rem; border-radius:62.4375rem;
  }
  .ticket h3{font-size:1.32rem; margin-top:0.875rem; color:var(--ink);}
  .ticket .sub{color:var(--slate); font-size:0.92rem; margin-top:0.25rem;}
  .ticket-rule{margin:1.125rem 0;}
  .ticket-row{
    display:flex; justify-content:space-between; align-items:center;
    padding:0.5rem 0; font-size:0.88rem;
  }
  .ticket-row .k{color:var(--slate); font-family:'IBM Plex Mono',monospace; font-size:0.74rem; text-transform:uppercase; letter-spacing:0.06em;}
  .ticket-row .v{font-weight:600; color:var(--ink);}
  .pro-chip{
    display:flex; align-items:center; gap:0.625rem; margin-top:1rem;
    background:var(--paper); border-radius:0.625rem; padding:0.625rem 0.75rem;
  }
  .pro-chip .avatar{
    width:2.375rem; height:2.375rem; border-radius:50%; background:var(--red);
    display:flex; align-items:center; justify-content:center; color:#fff;
    font-weight:700; font-family:'Space Grotesk',sans-serif; font-size:0.9rem;
  }
  .pro-chip .name{font-weight:600; font-size:0.88rem;}
  .pro-chip .rating{font-size:0.78rem; color:var(--slate);}
  .ticket-stub{
    text-align:center; margin-top:1rem; padding-top:0.875rem;
    border-top:0.125rem dashed var(--line);
    font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--slate);
  }

  /* ---------- Hero photo collage + job chips ---------- */
  .hero-visual{
    position:relative; max-width:44rem; margin:0 auto 0 auto;
    padding:1.25rem 0.5rem;
  }
  .secure-seal-top{
    display:flex; justify-content:flex-end; margin-bottom:1rem;
  }
  .secure-seal-right{
    width:6.25rem; height:6.25rem; flex-shrink:0;
    filter:drop-shadow(0 0.625rem 0.9375rem rgba(39,25,22,0.35));
  }
  .secure-seal svg{width:100%; height:100%; display:block;}
  @media (max-width:30rem){
    .secure-seal-right{width:5rem; height:5rem;}
  }
  .photo-collage{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    grid-auto-rows:6.25rem;
    grid-auto-flow:dense;
    gap:0.75rem;
  }
  .cg-item{
    position:relative;
    border-radius:0.75rem; overflow:hidden; border:0.1875rem solid var(--white);
    box-shadow:0 0.75rem 1.5rem -0.75rem rgba(39,25,22,0.4);
  }
  .cg-item img{width:100%; height:100%; object-fit:cover; display:block;}
  .cg-big{grid-column:span 2; grid-row:span 2;}
  .cg-tall{grid-row:span 2;}
  .cg-wide{grid-column:span 2;}
  .cg-cap{
    position:absolute; left:0; right:0; bottom:0;
    background:linear-gradient(transparent, rgba(39,25,22,0.88));
    color:#FFF9F1; font-size:0.62rem; font-weight:700; letter-spacing:0.02em;
    padding:0.9rem 0.35rem 0.3rem; text-align:center;
  }
  @media (max-width:30rem){
    .photo-collage{grid-template-columns:repeat(3, 1fr); grid-auto-rows:4rem;}
    .cg-big{grid-column:span 2; grid-row:span 2;}
    .cg-cap{font-size:0.56rem;}
  }

  /* ---------- Sections ---------- */
  section{padding:3.25rem 0;}
  .section-head{
    display:flex; justify-content:space-between; align-items:flex-end; gap:1.25rem;
    margin-bottom:2.25rem; flex-wrap:wrap;
  }
  .section-head .kicker{
    font-family:'IBM Plex Mono',monospace; font-size:0.74rem; text-transform:uppercase;
    letter-spacing:0.12em; color:var(--rust); display:block; margin-bottom:0.625rem;
  }
  .section-head h2{font-size:clamp(1.6rem,3vw,2.3rem); color:var(--ink);}
  .section-head p{color:var(--slate); margin-top:0.5rem; max-width:46ch;}
  .see-all{font-size:0.86rem; font-weight:600; color:var(--ink-soft); border-bottom:0.125rem solid var(--amber); padding-bottom:0.125rem;}

  .cat-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(10rem, 1fr)); gap:1.125rem;
  }
  .cat-card{
    background:var(--white); border:0.0625rem solid var(--line); border-radius:var(--radius);
    padding:1.375rem 1.125rem 1.625rem; text-align:left;
    transition:transform 0.18s ease, box-shadow 0.18s ease;
    position:relative;
  }
  .cat-card:hover{transform:translateY(-0.25rem); box-shadow:var(--shadow);}
  .cat-card .icon{
    width:2.875rem; height:2.875rem; border-radius:0.75rem; background:var(--paper-dim);
    display:flex; align-items:center; justify-content:center; margin-bottom:1rem;
    color:var(--ink);
  }
  .cat-card h3{font-size:1.02rem; font-weight:600; color:var(--ink);}
  .cat-card .desc{font-size:0.82rem; color:var(--slate); margin-top:0.375rem; line-height:1.5;}
  .cat-card .from{
    margin-top:0.875rem; display:inline-flex; align-items:center; gap:0.375rem;
    font-family:'IBM Plex Mono',monospace; font-size:0.74rem; font-weight:700;
    color:#fff; background:var(--red); padding:0.4rem 0.75rem; border-radius:999px;
    transition:background 0.15s ease, transform 0.15s ease;
  }
  .cat-card:hover .from{background:var(--red-deep); transform:translateY(-1px);}

  .svc-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem;
  }
  .svc-card{
    background:var(--white); border-radius:var(--radius); overflow:hidden;
    border:0.0625rem solid var(--line);
    transition:transform 0.18s ease, box-shadow 0.18s ease;
    display:flex; flex-direction:column;
  }
  .svc-card:hover{transform:translateY(-0.25rem); box-shadow:var(--shadow);}
  .svc-img{
    height:9.375rem; position:relative; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    color:var(--white);
  }
  .svc-img .badge{
    position:absolute; top:0.625rem; left:0.625rem;
    background:var(--white); color:var(--ink);
    font-family:'IBM Plex Mono',monospace; font-size:0.68rem; font-weight:600;
    padding:0.25rem 0.5625rem; border-radius:62.4375rem;
  }
  .svc-body{padding:1rem 1rem 1.125rem;}
  .svc-body h3{font-size:0.96rem; font-weight:600; color:var(--ink);}
  .svc-meta{display:flex; align-items:center; gap:0.375rem; margin-top:0.5rem; font-size:0.8rem; color:var(--slate);}
  .svc-meta .star{color:var(--amber-deep);}
  .svc-price{
    display:flex; justify-content:space-between; align-items:center; margin-top:0.75rem;
  }
  .svc-price .amt{font-family:'IBM Plex Mono',monospace; font-weight:600; color:var(--ink);}
  .svc-price .book{
    font-size:0.76rem; font-weight:700; color:var(--ink);
    background:none; border:none; padding:0; cursor:pointer;
    border-bottom:0.125rem solid var(--amber);
  }

  /* how it works */
  .steps{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(11.875rem, 1fr)); gap:1.25rem;
  }
  .step{
    background:var(--white); border:0.0625rem solid var(--line); border-radius:var(--radius);
    padding:1.75rem 1.5rem; position:relative;
  }
  .step .num{
    font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:0.78rem;
    color:var(--amber-deep); background:var(--paper-dim);
    display:inline-block; padding:0.25rem 0.625rem; border-radius:62.4375rem; margin-bottom:1rem;
  }
  .step h3{font-size:1.08rem; font-weight:600; color:var(--ink);}
  .step p{font-size:0.88rem; color:var(--slate); margin-top:0.5rem; line-height:1.55;}

  /* why servizio — bento layout */
  .why-section{background:var(--surface-dark); position:relative; overflow:hidden;}
  .why-section::before{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(circle at 88% 8%, rgba(224,34,31,0.20), transparent 45%),
      radial-gradient(circle at 4% 95%, rgba(247,194,74,0.16), transparent 42%);
    pointer-events:none;
  }
  .why-section .wrap{position:relative; z-index:1;}
  .why-section .kicker{color:var(--amber);}
  .why-section .section-head h2{color:var(--on-dark);}
  .why-section .section-head p{color:rgba(247,243,236,0.68);}

  .why-bento{
    display:grid;
    grid-template-columns:1.05fr 1.2fr;
    gap:1rem; align-items:stretch;
  }
  .why-cards{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:1rem;
  }
  .why-cards .why-card:last-child{grid-column:1 / -1;}
  .why-feature{
    background:linear-gradient(160deg, rgba(255,249,241,0.07), rgba(255,249,241,0.02));
    border:0.0625rem solid rgba(255,249,241,0.14); border-radius:1.25rem;
    padding:1.75rem 1.625rem; display:flex; flex-direction:column; gap:1.125rem;
  }
  .why-feature .radius-viz{display:flex; justify-content:center; align-items:center;}
  .why-feature .radius-viz svg{width:7.875rem; height:7.875rem;}
  .why-feature .stat-row{display:flex; align-items:baseline; gap:0.5rem;}
  .why-feature .stat{font-family:'Space Grotesk',sans-serif; font-size:2.6rem; font-weight:700; color:var(--on-dark); line-height:1;}
  .why-feature .stat-label{font-size:0.92rem; font-weight:600; color:rgba(247,243,236,0.6);}
  .why-feature h3{font-size:1.05rem; font-weight:600; color:var(--on-dark); margin-top:0.125rem;}
  .why-feature p{font-size:0.84rem; color:rgba(247,243,236,0.65); margin-top:0.5rem; line-height:1.55;}
  .why-feature .hl-list{list-style:none; margin:0.375rem 0 0; padding:0; display:flex; flex-direction:column; gap:0.4375rem;}
  .why-feature .hl-list li{
    display:flex; align-items:flex-start; gap:0.5rem; font-size:0.8rem; color:rgba(247,243,236,0.78); line-height:1.5;
  }
  .why-feature .hl-list .mark{color:var(--amber); flex-shrink:0; font-weight:700;}

  .why-card{
    background:rgba(255,249,241,0.05); border:0.0625rem solid rgba(255,249,241,0.12);
    border-radius:1rem; padding:1.25rem 1.125rem; display:flex; flex-direction:column;
  }
  .why-card .num{
    font-family:'IBM Plex Mono',monospace; font-size:0.68rem; font-weight:600;
    color:rgba(247,243,236,0.4); letter-spacing:0.08em; margin-bottom:0.75rem;
  }
  .why-card .icon-chip{
    width:2.25rem; height:2.25rem; border-radius:0.5625rem; display:flex; align-items:center; justify-content:center;
    margin-bottom:0.75rem; color:#fff;
  }
  .why-card .icon-chip svg{width:1.125rem; height:1.125rem; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
  .why-card.tint-red .icon-chip{background:var(--red);}
  .why-card.tint-amber .icon-chip{background:var(--amber-deep);}
  .why-card h3{font-size:0.92rem; font-weight:600; color:var(--on-dark);}
  .why-card p{font-size:0.78rem; color:rgba(247,243,236,0.62); margin-top:0.375rem; line-height:1.5;}

  /* about servizio */
  .about-grid{
    display:grid; grid-template-columns:1.1fr 1fr; gap:3.25rem; align-items:center;
  }
  .about-text h2{font-size:clamp(1.6rem,3vw,2.15rem); color:var(--ink); margin-top:0.625rem;}
  .about-text p{color:var(--slate); margin-top:0.875rem; line-height:1.75; font-size:0.98rem;}
  .about-flow{display:flex; flex-direction:column; gap:0.75rem;}
  .flow-item{
    display:flex; gap:0.875rem; align-items:flex-start;
    background:var(--white); border:0.0625rem solid var(--line); border-radius:0.75rem; padding:1rem 1.125rem;
  }
  .flow-item .fn{
    font-family:'IBM Plex Mono',monospace; font-size:0.72rem; font-weight:700; color:var(--red);
    background:var(--paper-dim); width:1.75rem; height:1.75rem; border-radius:50%;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .flow-item h4{font-size:0.9rem; font-weight:600; color:var(--ink);}
  .flow-item p{font-size:0.8rem; color:var(--slate); margin-top:0.25rem; line-height:1.5;}
  @media (max-width:56.25rem){
    .about-grid{grid-template-columns:1fr; gap:2rem;}
  }

  /* problem / solution */
  .ps-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem;}
  .ps-card{border-radius:1.125rem; padding:1.875rem 1.75rem;}
  .ps-problem{background:var(--white); border:0.0625rem solid var(--line);}
  .ps-solution{background:var(--surface-dark); color:var(--on-dark);}
  .ps-card .ps-tag{
    font-family:'IBM Plex Mono',monospace; font-size:0.72rem; font-weight:600;
    text-transform:uppercase; letter-spacing:0.1em; margin-bottom:0.5rem; display:block;
  }
  .ps-problem .ps-tag{color:var(--red);}
  .ps-solution .ps-tag{color:var(--amber);}
  .ps-card h3{font-size:1.3rem; margin-bottom:0.375rem;}
  .ps-problem h3{color:var(--ink);}
  .ps-solution h3{color:var(--on-dark);}
  .ps-solution > p{color:rgba(247,243,236,0.72); font-size:0.9rem; margin-bottom:1rem; line-height:1.6;}
  .ps-group{margin-top:1.125rem;}
  .ps-group h4{
    font-family:'IBM Plex Mono',monospace; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em;
    margin-bottom:0.625rem;
  }
  .ps-problem .ps-group h4{color:var(--slate);}
  .ps-solution .ps-group h4{color:rgba(247,243,236,0.55);}
  .ps-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.5625rem;}
  .ps-list li{display:flex; align-items:flex-start; gap:0.5625rem; font-size:0.88rem; line-height:1.5;}
  .ps-problem .ps-list li{color:var(--ink-soft);}
  .ps-solution .ps-list li{color:rgba(247,243,236,0.85);}
  .ps-list .mark{flex-shrink:0; font-weight:700; margin-top:0.0625rem;}
  .ps-problem .ps-list .mark{color:var(--red);}
  .ps-solution .ps-list .mark{color:var(--amber);}
  @media (max-width:56.25rem){
    .ps-grid{grid-template-columns:1fr;}
  }

  /* audiences */
  .aud-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem;}
  .aud-card{
    border-radius:1.125rem; padding:1.75rem 1.625rem; border:0.0625rem solid var(--line);
  }
  .aud-card.consumer{background:var(--white);}
  .aud-card.pro{background:var(--paper-dim);}
  .aud-card .ps-tag{
    font-family:'IBM Plex Mono',monospace; font-size:0.72rem; font-weight:600;
    text-transform:uppercase; letter-spacing:0.1em; color:var(--red); margin-bottom:0.5rem; display:block;
  }
  .aud-card h3{font-size:1.15rem; color:var(--ink); margin-bottom:0.5rem;}
  .aud-card p{font-size:0.9rem; color:var(--slate); line-height:1.6; margin-bottom:1.125rem;}
  @media (max-width:47.5rem){
    .aud-grid{grid-template-columns:1fr;}
  }

  @media (max-width:56.25rem){
    .why-bento{grid-template-columns:1fr;}
  }
  @media (max-width:35rem){
    .why-cards{grid-template-columns:1fr;}
    .why-cards .why-card:last-child{grid-column:auto;}
    .why-feature{padding:1.5rem 1.25rem;}
  }

  /* CTA banner */
  .banner{
    background:var(--surface-dark); color:var(--on-dark); border-radius:1.25rem;
    padding:3.25rem 2.75rem; display:flex; justify-content:space-between; align-items:center; gap:1.875rem; flex-wrap:wrap;
    position:relative; overflow:hidden;
  }
  .banner::after{
    content:""; position:absolute; right:-3.75rem; top:-3.75rem; width:13.75rem; height:13.75rem;
    border-radius:50%; background:var(--amber); opacity:0.16;
  }
  .banner h2{font-size:clamp(1.5rem,3vw,2.1rem); max-width:16ch; position:relative;}
  .banner p{color:#C9D2DE; margin-top:0.625rem; max-width:40ch; position:relative;}
  .banner .actions{display:flex; gap:0.875rem; position:relative; flex-wrap:wrap;}

  /* testimonials */
  .testi-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem;
  }
  .testi{
    background:var(--white); border:0.0625rem solid var(--line); border-radius:var(--radius);
    padding:1.5rem; display:flex; flex-direction:column; gap:0.875rem;
  }
  .testi .stars{color:var(--amber-deep); font-size:0.9rem;}
  .testi p{font-size:0.92rem; color:var(--ink-soft); line-height:1.6;}
  .testi .who{display:flex; align-items:center; gap:0.625rem; margin-top:0.25rem;}
  .testi .who .av{
    width:2.125rem;height:2.125rem;border-radius:50%;background:var(--paper-dim);
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.8rem;color:var(--ink);
  }
  .testi .who .meta{font-size:0.78rem; color:var(--slate);}
  .testi .who .name{font-weight:600; font-size:0.86rem; color:var(--ink);}

  /* footer */
  footer{background:var(--paper-dim); border-top:0.0625rem solid var(--line); padding:3.5rem 0 1.625rem;}
  .footer-grid{
    display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:2rem;
  }
  .footer-brand p{color:var(--slate); font-size:0.86rem; margin-top:0.75rem; max-width:32ch; line-height:1.6;}
  .foot-col h4{font-size:0.82rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--slate); margin-bottom:0.875rem;}
  .foot-col a{display:block; font-size:0.88rem; color:var(--ink-soft); padding:0.375rem 0;}
  .foot-col a:hover{color:var(--ink);}
  .social-row{display:flex; gap:0.625rem; margin-top:0.375rem;}
  .social-row a{
    width:2.125rem; height:2.125rem; border-radius:50%; background:var(--white); border:0.0625rem solid var(--line);
    display:flex; align-items:center; justify-content:center; padding:0;
  }
  .social-row a:hover{border-color:var(--red);}
  .app-label{
    font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--slate);
    margin-top:1.625rem; margin-bottom:0.625rem;
  }
  .app-badges{display:flex; gap:0.625rem; flex-wrap:wrap;}
  .app-badge{
    display:flex; align-items:center; gap:0.5625rem;
    background:var(--surface-dark); color:#fff; border:0.0625rem solid var(--surface-dark);
    padding:0.5rem 0.875rem; border-radius:0.625rem;
    transition:transform 0.15s ease, background 0.15s ease;
  }
  .app-badge:hover{transform:translateY(-0.125rem); background:var(--red);}
  .app-badge svg{width:1.125rem;height:1.125rem;flex-shrink:0;}
  .app-badge .txt{display:flex; flex-direction:column; line-height:1.2;}
  .app-badge .txt .small{font-size:0.6rem; color:#E7DCD5;}
  .app-badge .txt .big{font-size:0.82rem; font-weight:600;}
  .foot-bottom{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.625rem;
    margin-top:2.75rem; padding-top:1.375rem; border-top:0.0625rem dashed var(--line);
    font-size:0.78rem; color:var(--slate);
  }

  /* reveal animation */
  .reveal{opacity:1; transform:none; transition:opacity 0.6s ease, transform 0.6s ease;}
  .reveal.pre{opacity:0; transform:translateY(1.125rem);}

  /* modal */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(18,42,70,0.5); z-index:1000;
    display:none; align-items:center; justify-content:center; padding:1.25rem;
  }
  .modal-overlay.open{display:flex;}
  .modal{
    background:var(--white); border-radius:1rem; max-width:26.25rem; width:100%;
    padding:1.75rem; position:relative;
  }
  .modal .close{
    position:absolute; top:1rem; right:1rem; background:none; border:none; font-size:1.3rem; color:var(--slate);
  }
  .modal h3{font-size:1.2rem; color:var(--ink);}
  .modal .sub{color:var(--slate); font-size:0.86rem; margin-top:0.375rem;}
  .modal-app{text-align:center; padding:0.375rem 0;}
  .modal-app .modal-icon{
    width:3.25rem; height:3.25rem; border-radius:0.875rem; background:var(--red); color:#fff;
    display:flex; align-items:center; justify-content:center; margin:0 auto 1rem;
  }
  .modal-app .modal-icon svg{width:1.5rem; height:1.5rem;}
  .modal-app h3{font-size:1.15rem;}
  .modal-app .sub{margin-top:0.5rem; line-height:1.55;}
  .modal-badges{justify-content:center; margin-top:1.375rem;}

  /* icon svg default */
  .icon svg{width:1.5rem;height:1.5rem;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}

  /* ---------- Responsive ---------- */
  @media (max-width:61.25rem){
    .svc-grid{grid-template-columns:repeat(2,1fr);}
    .steps{grid-template-columns:1fr;}
    .testi-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .hero-grid{grid-template-columns:1fr; gap:2.5rem;}
    .hero-visual{max-width:32rem; margin:0 auto;}
    .ticket{margin:0 auto; transform:rotate(0.6deg);}
  }
  @media (max-width:47.5rem){
    .nav-links{display:none;}
    .hamburger{display:flex;}
    .nav-actions .btn:not(.btn-amber){display:none;}
    .svc-grid{grid-template-columns:1fr 1fr;}
    .footer-grid{grid-template-columns:1fr;}
    .banner{padding:2.25rem 1.5rem; flex-direction:column; align-items:flex-start;}
    section{padding:2.375rem 0;}
    .hero{padding:2rem 0 1.375rem;}
    .trust-row{gap:1.375rem;}
  }
  @media (max-width:30rem){
    .svc-grid{grid-template-columns:1fr;}
    .hero-actions .btn{flex:1;}
  }

  /* ---------- Long-form document content (footer pages) ---------- */
  .doc-callout{
    display:inline-block; background:var(--paper-dim); border:1px solid var(--line);
    border-radius:999px; padding:0.5rem 1rem; font-size:0.85rem; color:var(--ink-soft);
    margin-top:0.75rem;
  }
  .doc-meta{color:var(--slate); font-size:0.9rem; margin-top:0.5rem;}
  .doc-content{max-width:46rem; margin-top:2rem; color:var(--ink-soft); line-height:1.7; font-size:0.96rem;}
  .doc-content h1{font-family:'Space Grotesk',sans-serif; font-size:1.4rem; color:var(--ink); margin-top:2.5rem; margin-bottom:0.75rem;}
  .doc-content h1:first-child{margin-top:0;}
  .doc-content h3{font-family:'Space Grotesk',sans-serif; font-size:1.05rem; color:var(--ink); margin-top:1.5rem; margin-bottom:0.5rem;}
  .doc-content p{margin:0.9rem 0;}
  .doc-content ul{margin:0.9rem 0; padding-left:1.25rem;}
  .doc-content li{margin:0.4rem 0;}
  .doc-content strong{color:var(--ink); font-weight:600;}
  .doc-content a{color:var(--red); text-decoration:underline; text-decoration-color:var(--line);}
  .doc-content blockquote{
    border-left:0.1875rem solid var(--amber); margin:1.25rem 0; padding:0.25rem 0 0.25rem 1rem;
    color:var(--slate); font-style:italic;
  }
  .doc-content table{
    width:100%; border-collapse:collapse; margin:1.25rem 0; font-size:0.88rem;
  }
  .doc-content th, .doc-content td{
    border:1px solid var(--line); padding:0.6rem 0.75rem; text-align:left; vertical-align:top;
  }
  .doc-content th{background:var(--paper-dim); color:var(--ink); font-weight:600;}
  .doc-content hr{border:none; border-top:1px dashed var(--line); margin:2rem 0;}
  .doc-content em{color:var(--slate);}
  .doc-placeholder{
    margin-top:2.5rem; padding:1rem 1.25rem; background:var(--paper-dim); border:1px dashed var(--line);
    border-radius:0.875rem; color:var(--slate); font-size:0.82rem; max-width:46rem;
  }
