/* ===== final overrides: bold type, real logos, videos ===== */
:root{--disp:'Thmanyah Serif Display','Cairo',system-ui,'Segoe UI',Tahoma,sans-serif;--sans:'Thmanyah Serif Display','Cairo',system-ui,'Segoe UI',Tahoma,sans-serif}
body{font-weight:600;font-family:var(--sans)}
h1,h2,h3,.pk-n,.s-card h3,.why h3,.why b,.rhead h3,summary,.menu nav a,.tk-track,.stats b{font-family:var(--disp);font-weight:900;letter-spacing:0}
h1{font-size:clamp(44px,8vw,96px);line-height:1.15}
h2{font-size:clamp(34px,5.2vw,58px);line-height:1.3}
h2.big{font-size:clamp(30px,5.4vw,62px)}
.lead,.mut,.subbig,.rail p,.s-card p,.why p,details p,.info li{font-weight:600}
.kick,.btn,cite,.more,.stats span,.ph figcaption,.ba figcaption{font-weight:800}
.btn{font-weight:800}
.tk-track{font-size:24px}
.skip{position:absolute;inset-inline-start:-9999px;top:0;background:#fff;color:#000;padding:10px 16px;z-index:100;border-radius:0 0 10px 10px}
.skip:focus{inset-inline-start:12px}

/* real logo */
.logo{gap:8px}
.logo-img{height:46px;width:auto;aspect-ratio:2/1.1;object-fit:cover;object-position:center 50%;mix-blend-mode:screen;display:block}
.logo-t{display:flex;font-weight:900;font-size:17px;letter-spacing:.08em}
.foot-logo{width:150px;height:auto;margin:0 auto 6px;mix-blend-mode:screen;aspect-ratio:2/1.15;object-fit:cover}
.by{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;color:#8b94a1;font-size:13px}
.by img{height:30px;width:auto;opacity:.95}

/* videos */
.vrail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 12px;scrollbar-width:thin}
.vt{all:unset;flex:none;scroll-snap-align:start;width:210px;aspect-ratio:9/16;position:relative;cursor:pointer;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#0b0b0c;box-sizing:border-box}
.vt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.vt:hover img{transform:scale(1.06)}
.vt::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.15) 30%,rgba(5,5,5,.9) 100%)}
.vt .pl{position:absolute;z-index:2;top:40%;inset-inline:0;margin-inline:auto;width:60px;height:60px;border-radius:50%;background:var(--red);display:grid;place-items:center;box-shadow:0 0 0 8px rgba(228,20,60,.25);transition:transform .25s}
.vt:hover .pl{transform:scale(1.1)}
.vt .pl svg{width:26px;height:26px;fill:#fff;margin-inline-start:-3px}
.vt .du{position:absolute;z-index:2;top:12px;inset-inline-start:12px;background:rgba(0,0,0,.7);border:1px solid var(--line);border-radius:999px;padding:0 10px;font-size:12px;font-weight:800}
.vt p{position:absolute;z-index:2;inset-inline:12px;bottom:12px;font-size:13.5px;font-weight:800;line-height:1.55;color:#fff;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vt:focus-visible{outline:2px solid var(--red2);outline-offset:3px}
.vmore{text-align:center;margin-top:16px}
dialog[open]:has(.vbox){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.vbox{width:min(94vw,420px);height:min(80vh,740px);border-radius:16px;overflow:hidden;background:#000}
.vbox video{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.vcap{max-width:min(94vw,420px);text-align:center;font-weight:800;font-size:14px;color:#e6e4df}

/* photo strip as buttons */
.cars{padding:26px 0 0}
.mi{all:unset;flex:none;cursor:zoom-in;display:block}
.mi img{width:176px;height:196px;object-fit:cover;border-radius:16px;border:1px solid var(--line);transition:transform .4s}
.mi:hover img,.mi:focus-visible img{transform:scale(1.04)}
.mi:focus-visible{outline:2px solid var(--red2);outline-offset:3px}
.mq img{width:176px;height:196px}

@media (max-width:1024px){
  h1{font-size:clamp(36px,10vw,54px)}
  h2{font-size:28px}
  h2.big{font-size:26px}
  .vt{width:150px;border-radius:18px}
  .vt .pl{width:48px;height:48px}
  .vt p{font-size:12px}
  .mi img,.mq img{width:120px;height:136px;border-radius:12px}
  .logo-img{height:38px}
  .logo-t{font-size:14px}
  .hphone{background:var(--red);color:#fff}
  .foot-logo{width:120px}
  .cars{padding-top:16px}
}

/* ambient scroll-linked background + progress bar */
.amb{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.amb i{position:absolute;display:block}
.amb .grid{inset:-20% 0;opacity:.07;background-image:linear-gradient(60deg,transparent 48%,#fff 49%,#fff 51%,transparent 52%),linear-gradient(-60deg,transparent 48%,#fff 49%,#fff 51%,transparent 52%);background-size:90px 156px;-webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent);mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent)}
.amb .g1{width:60vmax;height:60vmax;top:-20vmax;inset-inline-end:-15vmax;border-radius:50%;background:radial-gradient(circle,rgba(228,20,60,.22),transparent 62%);filter:blur(10px)}
.amb .g2{width:55vmax;height:55vmax;bottom:-25vmax;inset-inline-start:-15vmax;border-radius:50%;background:radial-gradient(circle,rgba(120,150,190,.16),transparent 62%);filter:blur(10px)}
.prog{position:fixed;top:0;inset-inline:0;height:3px;z-index:90;background:linear-gradient(90deg,var(--red),var(--red2));transform:scaleX(0);transform-origin:100% 50%;pointer-events:none}
body{background:transparent}
html{background:#050505}
.sec,.cars{background:transparent}
.value{background:rgba(8,8,8,.55)}
.gsap-on .hero-img{animation:none}
.gsap-on .s-card img,.gsap-on .ba img{transition:none}
.gsap-on .s-card:hover img,.gsap-on .ba figure:hover img{transform:none}

/* moving strips: videos + before/after */
.vrail.mq{overflow:hidden;direction:ltr;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);padding:4px 0}
.vrail .mq-track{gap:12px;animation-duration:70s}
.vrail:hover .mq-track,.vrail:focus-within .mq-track{animation-play-state:paused}
.ba-mq{margin-bottom:12px}
.ba-mq .mq-track{animation-duration:48s}
.ba-mq figure{flex:none;width:250px;position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#0c0c0c;margin:0}
.ba-mq figure img{width:100%;height:auto;aspect-ratio:4/4.5;object-fit:cover;display:block}
.ba-mq figcaption{position:absolute;inset-inline:10px;bottom:10px;background:rgba(5,5,5,.8);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:10px;padding:3px 12px;font-size:13px;font-weight:800}
.ba-mq figure{direction:rtl}
.vt{direction:rtl}

/* two packages centered */
#packages .sh{text-align:center;margin-inline:auto}
#packages .mut{margin-inline:auto}
.pk{max-width:860px;margin-inline:auto;justify-items:stretch}
@media (min-width:760px){.pk{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pack{width:100%}
@media (max-width:1024px){
  .ba-mq figure{width:170px;border-radius:16px}
  .ba-mq figcaption{font-size:11.5px;padding:2px 8px;inset-inline:6px;bottom:6px}
  .pk{max-width:520px}
}

.vrail .vt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vrail .vt{width:210px;height:auto;aspect-ratio:9/16}
@media (max-width:1024px){.vrail .vt{width:150px}}
.ba-mq figure img{width:100%;height:auto;aspect-ratio:4/4.5}

/* ===== reference layout parity: desktop header, hero mouse, branch, why x6, cta band, footer ===== */
.hnav,.hcta,.mouse{display:none}
@media (min-width:1025px){
  .hdr{gap:22px;padding-inline:max(28px,calc((100vw - 1240px)/2))}
  .burger{display:none}
  .hnav{display:flex;gap:24px;margin-inline:auto;font-weight:800;font-size:15px}
  .hnav a{color:#e9e7e2;position:relative;padding:4px 0;transition:color .2s}
  .hnav a::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;background:var(--red2);transform:scaleX(0);transition:transform .25s}
  .hnav a:hover{color:#fff}
  .hnav a:hover::after{transform:scaleX(1)}
  .hcta{display:inline-flex;align-items:center;background:var(--red);color:#fff;font-weight:800;font-size:14.5px;padding:9px 20px;border-radius:12px;transition:background .2s}
  .hcta:hover{background:var(--red2)}
  .mouse{display:block;position:absolute;bottom:18px;inset-inline:0;margin-inline:auto;width:26px;height:42px;border:2px solid rgba(255,255,255,.5);border-radius:14px;z-index:3}
  .mouse i{position:absolute;top:8px;inset-inline:0;margin-inline:auto;width:4px;height:8px;border-radius:2px;background:#fff;animation:wheel 1.8s infinite}
}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
.bcard{max-width:760px;margin-inline:auto;border:1px solid var(--line);border-radius:26px;padding:28px;background:var(--s1)}
.bcard h3{font-size:26px;margin-bottom:10px}
.bcard ul{margin-bottom:18px}
.bcard li{display:grid;grid-template-columns:84px 1fr;gap:10px;padding:11px 0;border-top:1px solid var(--line)}
.bcard li:first-child{border-top:0}
.bcard li span{color:var(--mut);font-weight:700}
.bcard a:not(.btn){color:var(--silver);font-weight:800}
.brow{display:flex;flex-wrap:wrap;gap:10px}
.brow .btn{flex:1;min-width:160px}
.why{grid-template-columns:1fr}
@media (min-width:760px){.why{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.why{grid-template-columns:repeat(3,1fr)}}
.ctaband{text-align:center;padding:64px 0;border-block:1px solid var(--line);background:radial-gradient(60% 140% at 50% 0%,#2a0f17 0%,transparent 70%)}
.ctaband h2{font-size:clamp(30px,5vw,52px);margin-bottom:6px}
.ctaband p{color:var(--mut);margin-bottom:20px}
.foot{padding:56px 0 110px;text-align:start;background:#050505;border-top:0}
.fgrid{display:grid;gap:28px;grid-template-columns:1fr}
@media (min-width:760px){.fgrid{grid-template-columns:1.3fr 1fr 1fr 1.4fr}}
.fcol h3{font-size:20px;margin-bottom:10px}
.fcol li{margin:6px 0;color:var(--mut);font-size:14.5px;font-weight:700}
.fcol a:hover{color:#fff}
.fbrand .foot-logo{margin:0 0 8px;width:130px}
.soc{display:flex;gap:14px;margin-top:10px;font-weight:800;color:var(--silver)}
.fbottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line);margin-top:32px;padding-top:18px}
.fbottom .by{margin:0}
@media (max-width:1024px){.foot{padding:30px 0 24px}.ctaband{padding:36px 0}.bcard{padding:18px;border-radius:18px}.bcard h3{font-size:21px}.why{grid-template-columns:1fr 1fr}}

.about{max-width:760px;margin:0 auto 18px;text-align:center;color:var(--mut);font-weight:700;line-height:1.9}

/* ===== reference glow: gradient accent words, pulsing red buttons, hero overlay ===== */
em{background:linear-gradient(90deg,#ff5a78,#e4143c 55%,#ff2a52);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 14px rgba(228,20,60,.45))}
@keyframes redpulse{0%,100%{box-shadow:0 0 20px rgba(228,20,60,.30)}50%{box-shadow:0 0 42px rgba(228,20,60,.62)}}
.btn-red{box-shadow:0 0 22px rgba(228,20,60,.35);animation:redpulse 3s ease-in-out infinite}
.hcta{box-shadow:0 0 20px rgba(228,20,60,.38);animation:redpulse 3s ease-in-out infinite}
.hero-sh{background:linear-gradient(to right,rgba(10,10,10,.22),rgba(10,10,10,.55) 45%,rgba(10,10,10,.93)),linear-gradient(180deg,rgba(5,5,5,.5),transparent 28%,transparent 62%,rgba(5,5,5,.9))}
.hnav a.on{color:var(--red2)}
.hero h1{text-shadow:0 2px 24px rgba(0,0,0,.45)}
@media (prefers-reduced-motion:reduce){.btn-red,.hcta{animation:none}}

/* hero with the generated Go Protection image */
.hero-img{object-position:50% 50%}
.hero h1{font-size:clamp(42px,6.2vw,84px)}
.hero-in .lead{max-width:560px}
@media (max-width:760px){.hero-img{object-position:50% 50%}}

/* Google-style review cards in a moving strip */
.rhead{align-items:baseline}
.rnote{color:var(--mut);font-weight:700;font-size:14px}
.gr-mq{margin-top:6px}
.gr-mq .mq-track{gap:14px;animation-duration:75s;align-items:stretch}
.gr{flex:none;width:310px;background:#fff;color:#202124;border-radius:18px;padding:16px;direction:rtl;text-align:start;display:flex;flex-direction:column;gap:8px;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.gr header{display:flex;align-items:center;gap:10px}
.gr .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:18px;flex:none}
.gr header b{display:block;font-size:15px;line-height:1.3}
.gr header small{color:#5f6368;font-size:12px;font-weight:600}
.gr .gg{margin-inline-start:auto;font-style:normal;font-weight:900;font-size:20px;background:conic-gradient(#ea4335 0 25%,#fbbc05 0 50%,#34a853 0 75%,#4285f4 0);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.gr .st{display:flex;align-items:center;gap:8px;color:#fbbc04;font-size:18px;letter-spacing:1px;line-height:1}
.gr .st small{color:#5f6368;font-size:12px;letter-spacing:0;font-weight:700}
.gr .tx{font-size:14px;line-height:1.75;font-weight:600;color:#202124;flex:1}
.gr .gm{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.gr .gm img{width:100%;height:110px;object-fit:cover;border-radius:10px}
.gr .cap{color:#80868b;font-size:11px;font-weight:700}
.gr.gsum{align-items:center;justify-content:center;text-align:center;background:#101012;color:#fff;border:1px solid var(--line)}
.gr.gsum .big5{font-family:var(--disp);font-weight:900;font-size:64px;line-height:1;color:#fff}
.gr.gsum .tx{color:#cfd3d8;flex:none}
@media (max-width:1024px){.gr{width:250px;padding:12px;border-radius:14px}.gr .gm img{height:84px}.gr .tx{font-size:13px}}
@media (min-width:761px){.hero-img{object-position:72% 50%}}
@font-face{font-family:'Thmanyah Serif Display';src:url(fonts/thmanyah-serif-display-black.otf) format('opentype');font-weight:900;font-display:swap}
@font-face{font-family:'Thmanyah Serif Display';src:url(fonts/thmanyah-serif-display-regular.otf) format('opentype');font-weight:400;font-display:swap}
/* one font everywhere */
html,body,*,*::before,*::after,button,input,textarea,select{font-family:var(--disp)!important}