*{margin:0; padding:0}
  /* ===== BẢNG MÀU GPT GROUP: Đỏ cherry (chủ đạo) · Hồng · Nâu · Vàng ===== */
  :root{
    --paper:#F9F4F2; --surface:#FFFCFB; --surface-2:#F4EBE8;
    --ink:#2B1A16; --ink-soft:#6A5049; --ink-faint:#95776E;
    --line:#E8D9D3; --line-soft:#F1E5E0;
    --cherry:#8E1B2E; --cherry-solid:#8E1B2E; --cherry-2:#6E1423;
    --cherry-bg:#F7E6E8; --cherry-line:#E7C4C9;
    --gold:#9C6F14; --gold-bg:#FBF2DC; --gold-line:#E9D5A2;
    --brown:#6B4436; --pink:#E9A8B0;
    --hero:#2A1512; --hero-2:#5C0F23; --hero-ink:#FAF0EC; --hero-soft:#C9ADA5;
    --shadow:0 1px 2px rgba(43,26,22,.05),0 8px 26px rgba(43,26,22,.07);
    --radius:14px;
  }
  @media (prefers-color-scheme:dark){
    :root{
      --paper:#150E0C; --surface:#1F1613; --surface-2:#291D19;
      --ink:#F5E9E4; --ink-soft:#B7A099; --ink-faint:#8A736B;
      --line:#33241F; --line-soft:#2A1D19;
      --cherry:#F0798C; --cherry-solid:#B81B36; --cherry-2:#D42746;
      --cherry-bg:#2E1418; --cherry-line:#48212A;
      --gold:#DDB44A; --gold-bg:#2A2114; --gold-line:#463823;
      --brown:#7A4F3E; --pink:#EDA9B2;
      --hero:#120A09; --hero-2:#3E0C17; --hero-ink:#F7EDE9; --hero-soft:#B39A93;
      --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.32);
    }
  }
  :root[data-theme="light"]{
    --paper:#F9F4F2; --surface:#FFFCFB; --surface-2:#F4EBE8;
    --ink:#2B1A16; --ink-soft:#6A5049; --ink-faint:#95776E;
    --line:#E8D9D3; --line-soft:#F1E5E0;
    --cherry:#8E1B2E; --cherry-solid:#8E1B2E; --cherry-2:#6E1423;
    --cherry-bg:#F7E6E8; --cherry-line:#E7C4C9;
    --gold:#9C6F14; --gold-bg:#FBF2DC; --gold-line:#E9D5A2;
    --brown:#6B4436; --pink:#E9A8B0;
    --hero:#2A1512; --hero-2:#5C0F23; --hero-ink:#FAF0EC; --hero-soft:#C9ADA5;
    --shadow:0 1px 2px rgba(43,26,22,.05),0 8px 26px rgba(43,26,22,.07);
  }
  :root[data-theme="dark"]{
    --paper:#150E0C; --surface:#1F1613; --surface-2:#291D19;
    --ink:#F5E9E4; --ink-soft:#B7A099; --ink-faint:#8A736B;
    --line:#33241F; --line-soft:#2A1D19;
    --cherry:#F0798C; --cherry-solid:#B81B36; --cherry-2:#D42746;
    --cherry-bg:#2E1418; --cherry-line:#48212A;
    --gold:#DDB44A; --gold-bg:#2A2114; --gold-line:#463823;
    --brown:#7A4F3E; --pink:#EDA9B2;
    --hero:#120A09; --hero-2:#3E0C17; --hero-ink:#F7EDE9; --hero-soft:#B39A93;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.32);
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0; background:var(--paper); color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"Helvetica Neue",Arial,sans-serif;
    line-height:1.6; -webkit-font-smoothing:antialiased;}
  .mono{font-family:"SF Mono","JetBrains Mono","Cascadia Code",Consolas,monospace}
  .wrap{max-width:1140px; margin:0 auto; padding:0 clamp(16px,4vw,36px)}
  a{color:inherit}
  h1,h2,h3{letter-spacing:-.015em; text-wrap:balance; margin:0}
  .eyebrow{font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--cherry)}
  .btn{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:15px;
    padding:13px 22px; border-radius:10px; border:1px solid transparent; cursor:pointer; text-decoration:none;
    transition:transform .15s ease, background .2s ease}
  .btn:hover{transform:translateY(-1px)}
  .btn-primary{background:var(--cherry-solid); color:#fff}
  .btn-primary:hover{background:var(--cherry-2)}
  .btn-ghost{background:transparent; border-color:var(--line); color:var(--ink)}
  .btn-lg{padding:15px 26px; font-size:16px}

  /* ---------- Header ---------- */
  header{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--paper) 88%,transparent);
    backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
  .nav{display:flex; align-items:center; justify-content:space-between; height:64px}
  .brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; letter-spacing:-.02em}
  .brand .mk{display:grid; place-items:center; width:34px; height:34px; border-radius:8px;
    background:var(--cherry-solid); color:#fff; font-weight:800; font-size:15px; letter-spacing:0}
  .brand small{display:block; font-size:10px; font-weight:600; letter-spacing:.14em; color:var(--ink-faint); text-transform:uppercase}
  .brand-logo{height:46px; width:auto; display:block}
  @media (max-width:620px){ .brand-logo{height:38px} }
  .menu{display:flex; align-items:center; gap:26px; list-style:none; margin:0; padding:0}
  .menu a{font-size:14.5px; font-weight:600; color:var(--ink-soft); text-decoration:none}
  .menu a:hover{color:var(--cherry)}
  .nav-right{display:flex; align-items:center; gap:14px}
  .navtel{font-size:15px; font-weight:800; color:var(--cherry); text-decoration:none; white-space:nowrap}
  .navtel:hover{color:var(--cherry-2)}
  /* Nút chuyển ngôn ngữ VI | EN - vùng bấm đủ to cho ngón tay */
  .lang{font-size:12px; font-weight:700; border:1px solid var(--line); border-radius:8px;
    display:inline-flex; align-items:stretch; overflow:hidden; background:var(--surface)}
  .lang b,.lang a{padding:14px 13px; line-height:1; display:flex; align-items:center; text-decoration:none}
  .lang b{color:var(--cherry); background:var(--cherry-bg)}
  .lang a{color:var(--ink-faint)}
  .lang > * + *{border-left:1px solid var(--line)}
  .lang a:hover,.lang a:focus-visible{color:var(--cherry); background:var(--cherry-bg)}
  .hamb{display:none; background:none; border:1px solid var(--line); border-radius:8px; width:40px; height:38px; cursor:pointer; color:var(--ink); font-size:18px}

  /* ---------- Hero ---------- */
  .hero{background:linear-gradient(160deg,var(--hero),var(--hero-2)); color:var(--hero-ink); position:relative; overflow:hidden}
  .hero::before{content:""; position:absolute; inset:0;
    background-image:linear-gradient(var(--hero-soft) 1px,transparent 1px),linear-gradient(90deg,var(--hero-soft) 1px,transparent 1px);
    background-size:44px 44px; opacity:.05}
  .hero-in{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; padding:clamp(48px,7vw,88px) 0}
  .hero h1{font-size:clamp(32px,5.4vw,54px); line-height:1.05; font-weight:800}
  .hero h1 .hl{color:#E8B44C}
  .hero p.lead{color:var(--hero-soft); font-size:clamp(16px,2vw,19px); max-width:52ch; margin:20px 0 0}
  .hero .cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
  .hero .trust{display:flex; gap:26px; margin-top:34px; flex-wrap:wrap}
  .hero .trust div{border-left:2px solid #E8B44C; padding-left:12px}
  .hero .trust b{display:block; font-size:26px; font-weight:800; font-variant-numeric:tabular-nums}
  .hero .trust b.need{color:#E8B44C; letter-spacing:2px}
  .hero .trust span{font-size:12.5px; color:var(--hero-soft)}
  .hero .trust em{font-style:normal; font-size:11.5px}
  .hero-img{aspect-ratio:4/3; border-radius:16px; border:1px solid rgba(255,255,255,.14);
    background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 14px,rgba(255,255,255,.06) 14px 28px);
    display:grid; place-items:center; text-align:center; color:var(--hero-soft)}
  .ph-label{font-size:13px; font-weight:600; letter-spacing:.02em; padding:0 20px}
  .ph-label .ic{font-size:30px; display:block; margin-bottom:8px; opacity:.7}

  /* ---------- Section frame ---------- */
  section.blk{padding:clamp(52px,7vw,84px) 0}
  .sec-top{max-width:64ch; margin-bottom:40px}
  .sec-top h2{font-size:clamp(24px,3.6vw,34px); font-weight:800; margin-top:10px}
  .sec-top p{color:var(--ink-soft); font-size:16.5px; margin:12px 0 0}
  .alt{background:var(--surface-2)}

  /* ---------- Services ---------- */
  .svc{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
  .card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
  .card .ic{width:44px; height:44px; border-radius:10px; background:var(--cherry-bg); color:var(--cherry);
    display:grid; place-items:center; font-size:22px; margin-bottom:14px; border:1px solid var(--cherry-line)}
  .card h3{font-size:18px; font-weight:700}
  .card p{color:var(--ink-soft); font-size:14.5px; margin:8px 0 0}

  /* ---------- Portfolio ---------- */
  .filters{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:22px}
  .chip{font-size:13.5px; font-weight:600; padding:8px 15px; border-radius:999px; cursor:pointer;
    background:var(--surface); border:1px solid var(--line); color:var(--ink-soft)}
  .chip.active{background:var(--ink); color:var(--paper); border-color:var(--ink)}
  .gal{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
  .proj{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow)}
  .proj .img{aspect-ratio:4/3; background:repeating-linear-gradient(135deg,var(--surface-2) 0 12px,var(--line-soft) 12px 24px);
    display:grid; place-items:center; color:var(--ink-faint); text-align:center}
  .proj .cap{padding:13px 15px}
  .proj .cap b{font-size:14.5px} .proj .cap span{display:block; font-size:12.5px; color:var(--ink-faint); margin-top:2px}
  .tagline{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--cherry)}

  /* ---------- Về chúng tôi / Hệ sinh thái ---------- */
  .about{display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center}
  .eco{display:flex; flex-direction:column; gap:12px}
  .eco-i{display:flex; gap:14px; background:var(--surface); border:1px solid var(--line);
    border-left:3px solid var(--cherry); border-radius:12px; padding:18px; box-shadow:var(--shadow)}
  .eco-i .n{font-size:12px; font-weight:800; color:var(--gold); letter-spacing:.06em; flex:none; padding-top:3px}
  .eco-i b{display:block; font-size:16px; margin-bottom:4px}
  .eco-i span{font-size:13.5px; color:var(--ink-soft)}

  /* ---------- Dự án tiêu biểu ---------- */
  .spec{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
    border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:24px}
  .spec div{background:var(--surface); padding:16px 18px}
  .spec span{display:block; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--ink-faint); font-weight:700; margin-bottom:5px}
  .spec b{font-size:15px; font-weight:700}
  .proj-desc{color:var(--ink-soft); font-size:16px; max-width:78ch; margin:0 0 28px}

  .shots{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
  .shot{margin:0; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
    background:repeating-linear-gradient(135deg,var(--surface-2) 0 12px,var(--line-soft) 12px 24px);
    position:relative; box-shadow:var(--shadow)}
  .shot.wide{grid-column:span 2; grid-row:span 2}
  .shot img{width:100%; height:100%; object-fit:cover; display:block; position:relative; z-index:1;
    aspect-ratio:3/4}
  .shot.wide img{aspect-ratio:1/1}
  .shot .hint{position:absolute; inset:0; display:grid; place-items:center; text-align:center;
    font-size:11.5px; font-weight:600; color:var(--ink-faint); padding:10px; z-index:0}
  .shot figcaption{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:22px 14px 12px;
    font-size:12.5px; font-weight:600; color:#fff; line-height:1.35;
    background:linear-gradient(transparent,rgba(20,8,10,.82))}
  .shot:not(:has(img)) figcaption{position:static; background:none; color:var(--ink-soft); padding:10px 12px 12px}
  .shot:not(:has(img)){min-height:210px; display:flex; flex-direction:column; justify-content:flex-end}
  .shot figcaption em{font-style:normal; color:#E8B44C}
  .shot:not(:has(img)) figcaption em{color:var(--gold)}

  /* ---------- Tin tức / Cẩm nang ---------- */
  .news{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
  .post{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--surface);
    box-shadow:var(--shadow); text-decoration:none; display:block; transition:transform .15s ease}
  .post:hover{transform:translateY(-3px)}
  .post .img{aspect-ratio:16/9; background:repeating-linear-gradient(135deg,var(--surface-2) 0 12px,var(--line-soft) 12px 24px);
    display:grid; place-items:center; color:var(--ink-faint); text-align:center}
  .post .pc{padding:14px 16px 16px}
  .post .pc b{display:block; font-size:15px; margin:5px 0 6px; line-height:1.4; text-wrap:balance}
  .post .meta{font-size:12.5px; color:var(--ink-faint)}

  /* ---------- Đối tác ---------- */
  .brands{display:grid; grid-template-columns:repeat(6,1fr); gap:14px}
  .bl{aspect-ratio:3/2; border:1px dashed var(--line); border-radius:12px; background:var(--surface);
    display:grid; place-items:center; font-size:12px; font-weight:600; color:var(--ink-faint); text-align:center; padding:8px}

  /* ---------- Calculator ---------- */
  .calc{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--shadow)}
  .calc-form{background:var(--surface); padding:clamp(24px,3vw,34px)}
  .calc-out{background:linear-gradient(160deg,var(--hero),var(--hero-2)); color:var(--hero-ink); padding:clamp(24px,3vw,34px); position:relative}
  .fld{margin-bottom:18px}
  .fld label{display:block; font-size:13.5px; font-weight:700; margin-bottom:7px}
  .fld input,.fld select{width:100%; padding:12px 13px; border-radius:10px; border:1px solid var(--line);
    background:var(--paper); color:var(--ink); font-size:15px; font-family:inherit}
  .fld input:focus,.fld select:focus{outline:2px solid var(--cherry); outline-offset:1px; border-color:var(--cherry)}
  .pkg{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
  .pkg label{position:relative; border:1px solid var(--line); border-radius:10px; padding:11px 8px; text-align:center; cursor:pointer; font-size:13px; font-weight:600; background:var(--paper)}
  .pkg input{position:absolute; top:0; left:0; width:100%; height:100%; margin:0; padding:0; opacity:0; pointer-events:none}
  .pkg input:checked + span{color:var(--cherry)}
  .pkg label:has(input:checked){border-color:var(--cherry); background:var(--cherry-bg)}
  .pkg small{display:block; font-size:11px; color:var(--ink-faint); font-weight:500; margin-top:3px}
  .calc-out .eyebrow{color:#E8B44C}
  .res-num{font-size:clamp(30px,5vw,46px); font-weight:800; font-variant-numeric:tabular-nums; margin:10px 0 4px; line-height:1.05}
  .res-sub{color:var(--hero-soft); font-size:13.5px}
  .brk{margin-top:22px; border-top:1px solid rgba(255,255,255,.14); padding-top:16px; display:flex; flex-direction:column; gap:9px}
  .brk .row{display:flex; justify-content:space-between; font-size:14px}
  .brk .row span{color:var(--hero-soft)} .brk .row b{font-variant-numeric:tabular-nums}
  .disc{font-size:11.5px; color:var(--hero-soft); margin-top:18px; opacity:.85}

  /* ---------- Price table ---------- */
  .prices{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
  .price{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; text-align:center; box-shadow:var(--shadow)}
  .price.feat{border-color:var(--cherry); position:relative}
  .price.feat::before{content:"Phổ biến nhất"; position:absolute; top:-11px; left:50%; transform:translateX(-50%);
    background:var(--cherry-solid); color:#fff; font-size:11px; font-weight:700; padding:3px 12px; border-radius:999px}
  .price .pname{font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft)}
  .price .from{font-size:12px; font-weight:600; color:var(--gold); margin-top:10px}
  .price .amt{font-size:32px; font-weight:800; margin:2px 0; color:var(--cherry); font-variant-numeric:tabular-nums}
  .price .amt small{font-size:14px; color:var(--ink-faint); font-weight:600}
  .price ul{list-style:none; padding:0; margin:16px 0 0; text-align:left; display:flex; flex-direction:column; gap:8px}
  .price li{font-size:13.5px; color:var(--ink-soft); padding-left:22px; position:relative}
  .price li::before{content:"✓"; position:absolute; left:0; color:var(--gold); font-weight:800}

  /* ---------- Process ---------- */
  .steps{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; counter-reset:s}
  .step{position:relative; padding-top:8px}
  .step .n{counter-increment:s; width:38px; height:38px; border-radius:10px; background:var(--brown); color:#fff;
    display:grid; place-items:center; font-weight:800; margin-bottom:12px}
  .step .n::before{content:counter(s,decimal-leading-zero)}
  .step h4{font-size:15.5px; font-weight:700} .step p{font-size:13px; color:var(--ink-soft); margin:6px 0 0}

  /* ---------- Commit / trust strip ---------- */
  .commit{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
  .ci{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
  .ci .ic{font-size:24px} .ci h4{font-size:15.5px; font-weight:700; margin:10px 0 4px} .ci p{font-size:13px; color:var(--ink-soft); margin:0}

  /* ---------- Testimonials ---------- */
  .tst{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
  .quote{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
  .quote .stars{color:var(--cherry); font-size:15px; letter-spacing:2px}
  .quote p{font-size:14.5px; color:var(--ink); margin:12px 0 16px; font-style:italic}
  .quote .who{display:flex; align-items:center; gap:11px}
  .quote .av{width:40px; height:40px; border-radius:50%; background:var(--pink); border:1px solid var(--cherry-line); display:grid; place-items:center; font-size:11px; font-weight:600; color:#5C1524}
  .quote .who b{font-size:14px; display:block} .quote .who span{font-size:12.5px; color:var(--ink-faint)}

  /* ---------- FAQ ---------- */
  .faq{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:10px}
  .qa{background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden}
  .qa button{width:100%; text-align:left; background:none; border:none; padding:17px 20px; font-size:15.5px; font-weight:700;
    color:var(--ink); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:14px; font-family:inherit}
  .qa .ans{max-height:0; overflow:hidden; transition:max-height .3s ease}
  .qa .ans p{margin:0; padding:0 20px 18px; color:var(--ink-soft); font-size:14.5px}
  .qa .ic{color:var(--cherry); font-size:22px; flex:none; transition:transform .3s ease}
  .qa.open .ic{transform:rotate(45deg)}

  /* ---------- Contact / form ---------- */
  .contact{display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start}
  .contact .info h3{font-size:22px; font-weight:800}
  .contact .info p{color:var(--ink-soft); margin:10px 0 22px}
  .cline{display:flex; align-items:center; gap:13px; margin-bottom:14px}
  .cline .ic{width:42px; height:42px; border-radius:11px; background:var(--cherry-bg); color:var(--cherry); border:1px solid var(--cherry-line); display:grid; place-items:center; font-size:19px; flex:none}
  .cline b{font-size:15px} .cline span{display:block; font-size:13px; color:var(--ink-faint)}
  form.quote-form{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:26px; box-shadow:var(--shadow)}
  form .g2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  .consent{display:flex; gap:10px; align-items:flex-start; margin:6px 0 16px; font-size:12.5px; color:var(--ink-soft)}
  .consent input{margin-top:3px}
  .thanks{display:none; text-align:center; padding:30px 10px}
  .thanks.show{display:block} .thanks .ic{font-size:40px; color:var(--gold)} .thanks h3{margin:12px 0 6px}
  .thanks p{color:var(--ink-soft)}

  /* ---------- Footer ---------- */
  footer{background:var(--hero); color:var(--hero-soft); padding:52px 0 26px; margin-top:10px}
  .fgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px}
  footer .brand{color:var(--hero-ink)} footer .brand small{color:var(--hero-soft)}
  footer h5{color:var(--hero-ink); font-size:13px; letter-spacing:.1em; text-transform:uppercase; margin:0 0 14px}
  footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; font-size:14px}
  footer a{text-decoration:none} footer a:hover{color:#E8B44C}
  .fbot{border-top:1px solid rgba(255,255,255,.12); margin-top:34px; padding-top:18px; font-size:12.5px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px}

  /* ---------- Floating contact ---------- */
  .float{position:fixed; right:18px; bottom:18px; z-index:60; display:flex; flex-direction:column; gap:10px}
  .fbtn{width:54px; height:54px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800; font-size:13px;
    box-shadow:0 6px 18px rgba(0,0,0,.25); text-decoration:none; border:none; cursor:pointer}
  .fbtn.call{background:var(--cherry-solid)} .fbtn.zalo{background:#0068FF; font-size:14px}
  .fbtn:hover{transform:scale(1.06)}

  .banner{background:var(--cherry-bg); border:1px dashed var(--cherry-line); color:var(--cherry);
    font-size:13px; text-align:center; padding:9px 14px; border-radius:10px; margin:0 auto; max-width:1140px}

  @media (max-width:900px){
    .hero-in,.calc,.contact,.about{grid-template-columns:1fr}
    .svc,.gal,.prices,.tst,.commit,.news{grid-template-columns:1fr 1fr}
    .steps{grid-template-columns:1fr 1fr}
    .fgrid{grid-template-columns:1fr 1fr}
    .brands{grid-template-columns:repeat(3,1fr)}
    .spec{grid-template-columns:repeat(2,1fr)}
    .shots{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width:900px){
    .navtel{display:none}
    .menu{display:none} .hamb{display:grid; place-items:center}
    .menu.show{display:flex; position:absolute; top:64px; left:0; right:0; flex-direction:column; gap:0;
      background:var(--paper); border-bottom:1px solid var(--line); padding:8px 0}
    .menu.show li{width:100%} .menu.show a{display:block; padding:12px 24px}
  }
  @media (max-width:620px){
    .navcta{display:none}
    .svc,.gal,.prices,.tst,.commit,.steps,.fgrid,form .g2,.pkg,.news,.spec{grid-template-columns:1fr}
    .brands{grid-template-columns:repeat(2,1fr)}
    .hero .trust{gap:16px}
    .shot.wide{grid-column:span 2; grid-row:auto}
  }
  @media (prefers-reduced-motion:no-preference){
    .reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
    .reveal.in{opacity:1; transform:none}
  }