@font-face { font-family: "Rubik Local"; src: url("assets/fonts/rubik-400.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Rubik Local"; src: url("assets/fonts/rubik-500.ttf") format("truetype"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "Rubik Local"; src: url("assets/fonts/rubik-600.ttf") format("truetype"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "Rubik Local"; src: url("assets/fonts/rubik-700.ttf") format("truetype"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "Rubik Local"; src: url("assets/fonts/rubik-800.ttf") format("truetype"); font-style: normal; font-weight: 800; font-display: swap; }
@font-face { font-family: "Varela Round Local"; src: url("assets/fonts/varela-round-400.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }

:root {
  --font-rubik: "Rubik Local";
  --font-varela: "Varela Round Local";
  --navy: #071f4a;
  --blue: #0758d8;
  --blue-2: #0a70f5;
  --sky: #67dff5;
  --ice: #eafaff;
  --muted: #59708f;
  --white: #ffffff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  color: var(--navy);
  background: #eef9fd;
  font-family: var(--font-rubik), Arial, sans-serif;
  width: 100%;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

.site-header {
  position: absolute;
  z-index: 30;
  top: 0;
  left: 50%;
  width: min(1180px, calc(100% - 40px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  top: 18px;
  padding: 12px 14px 12px 18px;
  border: 1px solid #ffffff;
  border-radius: 999px;
  background: #ffffffc7;
  box-shadow: 0 14px 40px #154f7817;
  backdrop-filter: blur(18px);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; letter-spacing: -.7px; }
.brand-mark {
  width: 35px; height: 35px; display: grid; place-items: center;
  border-radius: 12px; color: white; background: linear-gradient(145deg, var(--blue-2), #33c9ec);
  box-shadow: inset 2px 2px 5px #ffffff70, 0 10px 25px #0b75e63d;
  font-family: var(--font-rubik), sans-serif; font-size: 12px; letter-spacing: -.5px;
}
nav { display: flex; gap: 38px; color: #27456b; font-size: 15px; font-weight: 600; }
nav a { transition: color .2s, transform .2s; }
nav a:hover { color: var(--blue); transform: translateY(-2px); }
.header-cta { padding: 12px 21px; border: 1px solid #b8dff2; border-radius: 999px; font-weight: 700; background: #edfaff; }

.hero {
  position: relative; min-height: 790px; padding: 158px max(6vw, calc((100vw - 1180px)/2)) 100px;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; isolation: isolate;
  background: radial-gradient(circle at 85% 18%, #d8f8ff 0, transparent 32%), linear-gradient(145deg, #fff 5%, #f4fcff 54%, #dff8ff 100%);
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 0; height: 135px; z-index: -1;
  background: linear-gradient(to top, #f8fdff, transparent);
}
.hero-copy {
  position: relative; z-index: 7; width: min(100%, 560px); padding: 46px;
  direction: rtl; text-align: right;
  border: 2px solid #cceaf5;
  border-radius: 48px;
  background: #ffffff;
  box-shadow: 0 28px 70px #17649414;
}
.eyebrow, .kicker { display: inline-flex; align-items: center; gap: 9px; color: var(--blue); font-weight: 800; font-size: 14px; letter-spacing: .2px; }
.eyebrow { padding: 8px 14px; background: #e4f7ff; border-radius: 100px; }
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: #21c9e7; box-shadow: 0 0 0 5px #21c9e72b; }
h1, h2, h3, .brand { font-family: var(--font-varela), var(--font-rubik), sans-serif; }
h1 { font-size: clamp(48px, 5.7vw, 74px); line-height: 1.05; letter-spacing: -2.8px; font-weight: 400; margin: 24px 0 25px; max-width: 670px; }
h1 span { display: block; color: var(--blue-2); }
.hero-copy > p { max-width: 435px; font-size: 19px; line-height: 1.75; color: var(--muted); margin: 0; text-wrap: balance; }
.hero-line { display: block; width: 100%; text-align: right; }
.hero-emphasis {
  display: inline-block; white-space: nowrap; margin: 0 0 0 4px; padding: 3px 8px;
  border-radius: 999px; color: #075bcf;
  background: linear-gradient(100deg, #dff9ff, #dbeeff);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.hero-actions { display: flex; align-items: center; justify-content: flex-start; gap: 27px; margin-top: 34px; }
.primary-button, .contact button {
  display: inline-flex; align-items: center; justify-content: center; gap: 17px; border: 0; cursor: pointer;
  padding: 17px 25px; border-radius: 999px; color: white; background: linear-gradient(135deg, var(--blue-2), #0b5bdb);
  box-shadow: 0 16px 32px #0866d53a; font-weight: 800; transition: transform .2s, box-shadow .2s;
}
.primary-button:hover, .contact button:hover { transform: translateY(-3px); box-shadow: 0 20px 38px #0866d54d; }
.primary-button span, .contact button span { font-size: 22px; }
.text-button { font-weight: 800; color: #24466d; border-bottom: 1px solid #b9d4e5; padding-bottom: 3px; }
.trust-row { display: flex; justify-content: flex-start; gap: 22px; margin-top: 35px; color: #637a96; font-size: 13px; font-weight: 700; }
.trust-row b { color: #12b8d7; margin-left: 5px; }

.hero-visual {
  position: relative; height: 540px; z-index: 5; margin-inline-start: 20px;
}
.hero-visual::before {
  content: ""; position: absolute; z-index: -1; width: 420px; height: 420px;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(circle, #b8f3ff63, #dff9ff28 58%, transparent 72%);
  filter: blur(4px);
}
.battle-stage { position: absolute; inset: -25px -55px -20px -85px; pointer-events: none; }
.battle-guardian {
  position: absolute; z-index: 4; width: 72%; height: 90%; right: 5%; bottom: 0;
  object-fit: contain; filter: saturate(1.04) drop-shadow(0 30px 25px #075ca33d);
  animation: guardian-float 4.6s ease-in-out infinite;
}
.battle-virus { z-index: 7; animation: battle-drift 4s ease-in-out infinite; transition: opacity .25s, filter .25s, scale .25s; }
.battle-virus.is-targeted { animation-play-state: paused; filter: drop-shadow(0 0 12px #ffde55); }
.battle-virus.is-hit { opacity: 0; scale: .05; filter: brightness(2.8) blur(2px); }
.battle-one { left: 2%; top: 12%; }
.battle-two { left: 15%; bottom: 12%; animation-delay: -1.4s; }
.battle-three { right: 4%; top: 3%; animation-delay: -2.8s; }
.energy-orb {
  position: absolute; z-index: 12; width: 25px; height: 25px; border: 3px solid #eaffff;
  border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 35% 30%, #fff, #82f5ff 35%, #0a8fff 72%);
  box-shadow: 0 0 12px #35eaff, 0 0 28px #0ba9ff, 0 0 45px #ffffff;
}
.energy-orb.is-firing { opacity: 1; }
.target-impact {
  position: absolute; z-index: 15; width: 110px; height: 110px;
  transform: translate(-50%, -50%) scale(.1); opacity: 0;
  display: grid; place-items: center;
}
.target-impact.is-active { animation: target-burst 1.25s cubic-bezier(.2,.8,.2,1) forwards; }
.target-impact strong {
  position: relative; z-index: 3; width: 46px; height: 46px; display: grid; place-items: center;
  border: 4px solid white; border-radius: 50%; color: white; background: #20c56b;
  box-shadow: inset 3px 3px 7px #ffffff70, 0 0 22px #19da71; font-size: 23px;
}
.impact-ring { position: absolute; inset: 7px; border: 5px solid #6fffa4; border-radius: 50%; box-shadow: 0 0 25px #37ed86; }
.impact-spark { position: absolute; width: 7px; height: 100%; border-radius: 50%; background: linear-gradient(transparent 12%, #b9ffd0 12% 22%, transparent 22% 78%, #6fffaa 78% 88%, transparent 88%); }
.spark-b { transform: rotate(60deg); }.spark-c { transform: rotate(120deg); }
.guardian-wrap { position: relative; z-index: 6; width: 230px; height: 285px; display: grid; place-items: center; animation: guardian-float 4s ease-in-out infinite; }
.guardian {
  position: relative; width: 185px; height: 215px; border-radius: 46% 46% 50% 50% / 36% 36% 62% 62%;
  background: linear-gradient(145deg, #a9f6ff 5%, #40d6f0 48%, #0a8ee8);
  border: 7px solid white; box-shadow: inset 14px 10px 30px #fff7, inset -18px -18px 32px #076bc554, 0 35px 65px #077cd94b;
}
.guardian::after {
  content: ""; position: absolute; inset: 31px -17px auto auto; width: 30px; height: 105px;
  border-radius: 20px; background: linear-gradient(#79eafb, #168fe6); border: 5px solid white; z-index: -1;
}
.guardian-shine { position: absolute; width: 42px; height: 18px; top: 30px; right: 34px; border-radius: 50%; background: #fff8; transform: rotate(-28deg); }
.guardian-eyes { position: absolute; top: 78px; left: 50%; transform: translateX(-50%); display: flex; gap: 35px; }
.guardian-eyes span { width: 13px; height: 19px; border-radius: 50%; background: #073f80; box-shadow: inset 3px 2px #fff; }
.guardian-smile { position: absolute; top: 112px; left: 50%; width: 31px; height: 16px; transform: translateX(-50%); border-bottom: 4px solid #07528f; border-radius: 50%; }
.guardian-badge { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); width: 51px; height: 51px; display: grid; place-items: center; border-radius: 18px; background: #fff; color: #0b8ee6; font-size: 25px; font-weight: 900; box-shadow: 0 9px 20px #0672ad4a; }
.crown { position: absolute; z-index: 3; top: 1px; color: #ffc633; font-size: 65px; filter: drop-shadow(0 8px 8px #c48c2459); transform: rotate(-4deg); }
.blaster { position: absolute; top: 99px; left: -36px; width: 65px; height: 34px; border: 5px solid white; border-radius: 14px 4px 4px 14px; background: #15b9e8; box-shadow: 0 9px 18px #087bb54d; }
.laser { position: absolute; top: 8px; left: -12px; height: 5px; width: 18px; border-radius: 9px; background: #5df8ff; box-shadow: 0 0 10px #46e9ff, 0 0 20px #fff; opacity: 0; }
.laser-one { animation: shoot 5.5s 1s infinite; }
.laser-two { animation: shoot 5.5s 1.13s infinite; }
.laser-three { animation: shoot 5.5s 1.26s infinite; }
.guardian-shadow { position: absolute; bottom: 17px; width: 150px; height: 25px; border-radius: 50%; background: #0765ad24; filter: blur(7px); }
.status-card {
  position: absolute; z-index: 8; bottom: 45px; right: 10px; display: flex; gap: 12px; align-items: center;
  padding: 13px 17px; border-radius: 999px; background: #fffffff0; box-shadow: inset 2px 2px 4px #fff, 0 18px 40px #005d9b2e; border: 2px solid #fff;
}
.status-card strong, .status-card small { display: block; }
.status-card strong { font-size: 14px; }.status-card small { color: #7890a9; margin-top: 3px; }
.pulse-dot { width: 12px; height: 12px; background: #20c989; border-radius: 50%; box-shadow: 0 0 0 6px #20c98924; animation: pulse 1.5s infinite; }
.orbit { position: absolute; border: 1px solid #75d9f25c; border-radius: 50%; transform: rotate(-13deg); }
.orbit-one { width: 435px; height: 290px; }
.orbit-two { width: 335px; height: 435px; }

.virus { --virus: #ff6c77; position: absolute; z-index: 3; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff8, transparent 17%), var(--virus); box-shadow: inset -11px -12px 20px #67205733, 0 16px 25px #00396d20; animation: roam 10s ease-in-out infinite; }
.virus-spike { position: absolute; top: 50%; left: 50%; width: 9px; height: 18px; margin: -9px -4px; border-radius: 6px; background: var(--virus); transform: rotate(calc(var(--i) * 30deg)) translateY(-43px); }
.virus-spike::after { content: ""; position: absolute; top: -4px; left: -2px; width: 13px; height: 8px; border-radius: 50%; background: var(--virus); }
.virus-face { position: absolute; inset: 0; }
.virus-eye { position: absolute; top: 25px; width: 11px; height: 8px; border-top: 3px solid #4b1746; }
.virus-eye.left { left: 16px; transform: rotate(18deg); }.virus-eye.right { right: 16px; transform: rotate(-18deg); }
.virus-mouth { position: absolute; top: 36px; left: 50%; transform: translateX(-50%); font-weight: 900; color: #4b1746; font-size: 20px; }
.virus-coral { --virus: #ff6c77; }.virus-violet { --virus: #916cfa; }.virus-lime { --virus: #7bd65e; }.virus-gold { --virus: #ffbd44; }
.virus-lg { transform: scale(1.05); }.virus-sm { transform: scale(.74); }.virus-md { transform: scale(.88); }.virus-xs { transform: scale(.52); }
.virus-one { top: 16%; right: 4%; animation-delay: -1s; }.virus-two { top: 26%; left: 2%; animation-delay: -5s; }.virus-three { bottom: 20%; right: 1%; animation-delay: -3s; }.virus-four { bottom: 32%; left: 5%; animation-delay: -7s; }
.impact { position: absolute; z-index: 4; color: #fff; text-shadow: 0 0 15px #27dffa; opacity: 0; animation: impact 5.5s infinite; }
.impact-one { top: 24%; left: 7%; animation-delay: 1.7s; }.impact-two { bottom: 28%; right: 7%; animation-delay: 4.45s; }
.motion-stage { position: absolute; inset: 90px 2vw 45px; pointer-events: none; z-index: 2; }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(2px); z-index: -1; }
.glow-one { width: 430px; height: 430px; top: 100px; left: -160px; background: #8eeeff20; }
.glow-two { width: 330px; height: 330px; right: 20%; bottom: -150px; background: #42d8ff1f; }
.scroll-cue { position: absolute; bottom: 31px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; color: #6c85a0; font-size: 11px; font-weight: 700; }
.scroll-cue i { font-style: normal; font-size: 18px; animation: bob 1.6s infinite; }

.explainer {
  position: relative; z-index: 4; margin-top: -35px;
  padding: 120px max(6vw, calc((100vw - 1120px)/2)) 115px;
  border-radius: 64px 64px 0 0; background: #f9fdff;
}
.section-heading { text-align: center; max-width: 680px; margin: 0 auto 50px; }
.section-heading h2, .protection-copy h2, .offer h2, .contact h2 { font-size: clamp(36px, 4vw, 53px); line-height: 1.12; letter-spacing: -1.2px; font-weight: 400; margin: 13px 0 18px; }
.section-heading p, .protection-copy > p, .offer p, .contact p { color: var(--muted); font-size: 17px; line-height: 1.7; }
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.info-grid article { position: relative; padding: 36px; border-radius: 36px; background: #fff; box-shadow: 0 20px 50px #164d7e0c; border: 2px solid #dff2f8; transition: transform .25s, box-shadow .25s; }
.info-grid article:hover { transform: translateY(-7px); box-shadow: 0 25px 55px #164d7e17; }
.card-number { position: absolute; top: 25px; left: 26px; color: #c9dce8; font-weight: 800; font-size: 14px; }
.mini-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 21px; }
.coral-icon { color: #f25b67; background: #ffedf0; }.violet-icon { color: #805eef; background: #f1edff; }.blue-icon { color: #0c8edc; background: #e4f7ff; }
.info-grid h3 { margin: 25px 0 12px; font-size: 22px; }.info-grid p { color: var(--muted); line-height: 1.65; margin: 0; }

.protection {
  width: min(1180px, calc(100% - 40px)); min-height: 660px; margin: 35px auto 0;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  padding: 80px max(5vw, 58px); color: white;
  background: linear-gradient(135deg, #06265b, #0753a8 58%, #057cc4);
  border: 1px solid #55d9ff5c; border-radius: 58px; overflow: hidden;
  box-shadow: 0 35px 80px #0437662c;
}
.protection-visual { position: relative; height: 430px; display: grid; place-items: center; }
.guardian-orbit { position: relative; z-index: 2; width: 365px; height: 365px; padding: 10px; overflow: hidden; border: 3px solid #d9fbff; border-radius: 50%; background: linear-gradient(145deg, #77e8ff, #0872bb); box-shadow: 0 28px 65px #001a3f80, 0 0 0 12px #4bdfff1c, inset 0 0 25px #fff; }
.guardian-orbit img { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; object-position: center 46%; }
.ring { position: absolute; border: 1px solid #6de9ff5e; border-radius: 50%; }
.ring-one { width: 420px; height: 420px; animation: spin 14s linear infinite; border-style: dashed; }.ring-two { width: 390px; height: 390px; animation: spin 10s linear infinite reverse; }
.kicker.light { color: #70e8fb; }.protection-copy { max-width: 500px; }
.protection-copy > p { color: #d0e6f5; }
.protection ul { list-style: none; margin: 35px 0 0; padding: 0; display: grid; gap: 22px; }
.protection li { display: flex; align-items: flex-start; gap: 16px; }
.protection li > span { flex: 0 0 31px; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; color: #094a88; background: #75e6f7; font-weight: 900; }
.protection li strong, .protection li small { display: block; }.protection li small { margin-top: 5px; color: #b9d6eb; line-height: 1.5; }

.offer { width: min(1180px, calc(100% - 40px)); margin: 100px auto; padding: 60px 68px; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 70px; border-radius: 52px; background: #fff; border: 2px solid #dbeff8; box-shadow: 0 30px 80px #185c8d14; }
.offer p { max-width: 470px; }.price { display: flex; align-items: baseline; gap: 8px; margin: 24px 0 5px; }.price strong { font-size: 52px; letter-spacing: -2px; }.price span { color: var(--muted); font-weight: 700; }
.offer > div > small { color: #8398ad; display: block; }.offer .primary-button { margin-top: 27px; }
.offer-list { display: grid; gap: 13px; }.offer-list span { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px; border-radius: 999px; background: #f1fbff; border: 1px solid #d8eff7; color: #294e70; font-weight: 700; }.offer-list b { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; color: white; background: #18bbd9; }
.support-addon { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 22px; margin-top: -10px; padding: 22px 26px; border: 1px solid #bfe6f4; border-radius: 30px; background: linear-gradient(135deg, #eefbff, #e2f6ff); box-shadow: inset 0 1px 0 #fff, 0 12px 30px #1768940d; }
.support-addon-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 18px; color: white; background: linear-gradient(145deg, #38d6ec, #168acb); box-shadow: 0 10px 22px #168acb38; font-size: 31px; font-weight: 900; }
.support-addon-copy > span { display: block; margin-bottom: 3px; color: #1684ad; font-size: 13px; font-weight: 850; }
.support-addon-copy strong { display: block; color: #123e68; font-size: 16px; line-height: 1.6; }

.about {
  width: min(1180px, calc(100% - 40px)); margin: 0 auto 100px; padding: 72px;
  display: grid; grid-template-columns: .78fr 1.22fr; gap: 85px; align-items: center;
  border: 2px solid #dceff7; border-radius: 58px;
  background: linear-gradient(145deg, #ffffff, #edfaff);
  box-shadow: inset 0 2px 2px #fff, 0 30px 75px #165d8c16;
}
.about-portrait {
  position: relative; min-height: 350px; display: grid; place-items: center;
  border-radius: 50%; background: radial-gradient(circle at 35% 25%, #d4fbff, #37c8ed 50%, #075dd3);
  box-shadow: inset 16px 16px 32px #ffffff73, inset -18px -22px 38px #0249ac66, 0 30px 60px #075da13d;
  isolation: isolate;
}
.about-person {
  position: absolute; z-index: 3; bottom: -18px; width: 92%; height: 118%;
  object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 24px 20px #033f7b4c);
}
.portrait-initials {
  position: relative; z-index: 2; width: 155px; height: 155px; display: grid; place-items: center;
  border: 8px solid #ffffff; border-radius: 42% 58% 48% 52%;
  color: #0754aa; background: linear-gradient(145deg, #ffffff, #bcefff);
  box-shadow: inset 8px 8px 18px #ffffff, inset -9px -12px 22px #37a7d852, 0 22px 42px #033e7d48;
  font-family: var(--font-varela), sans-serif; font-size: 46px;
}
.portrait-orbit { position: absolute; z-index: 1; border: 2px solid #dcfbff99; border-radius: 50%; }
.orbit-a { width: 82%; height: 48%; transform: rotate(25deg); }
.orbit-b { width: 55%; height: 90%; transform: rotate(-22deg); }
.about-copy h2 { margin: 12px 0 8px; font-size: clamp(38px, 4vw, 55px); font-weight: 400; letter-spacing: -1.2px; }
.about-copy > strong { display: block; color: var(--blue); font-size: 17px; margin-bottom: 25px; }
.about-copy p { margin: 0 0 14px; color: var(--muted); font-size: 16px; line-height: 1.75; }
.about-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.about-tags span { padding: 10px 16px; border: 1px solid #cceaf5; border-radius: 999px; color: #0b609c; background: #e9faff; font-size: 13px; font-weight: 800; }

.contact { width: min(1180px, calc(100% - 40px)); margin: 0 auto 80px; padding: 72px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 90px; align-items: center; border: 2px solid #d7eff7; border-radius: 58px; background: #eaf9fe; }
.contact form { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; padding: 35px; border-radius: 38px; background: #fff; border: 1px solid #dceff6; box-shadow: 0 20px 50px #1b6a9b16; }
.contact label { font-size: 13px; font-weight: 800; color: #34546f; }.contact label:first-child { grid-column: 1 / -1; }
.contact input { width: 100%; margin-top: 8px; padding: 15px 19px; border: 1px solid #d6eaf3; border-radius: 999px; color: var(--navy); outline: none; background: #fbfeff; }
.contact input:focus { border-color: #20bce5; box-shadow: 0 0 0 3px #20bce51d; }.contact button { grid-column: 1 / -1; margin-top: 5px; }
.contact form small { grid-column: 1 / -1; text-align: center; color: #8497a8; font-size: 11px; }
.whatsapp-card {
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center;
  padding: 34px; border: 2px solid #d9f0e4; border-radius: 38px; background: #fff;
  box-shadow: inset 2px 2px 4px #fff, 0 24px 55px #11683d18;
}
.whatsapp-icon {
  width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%;
  color: white; background: linear-gradient(145deg, #43e287, #13a956);
  box-shadow: inset 5px 5px 10px #ffffff5c, inset -7px -8px 13px #08763857, 0 16px 30px #16a95c38;
  font-size: 30px;
}
.whatsapp-card strong { font-size: 20px; }
.whatsapp-card p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; }
.whatsapp-button {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 17px 25px; border-radius: 999px; color: white; background: linear-gradient(135deg, #25d366, #13a855);
  box-shadow: 0 16px 32px #12a84f35; font-weight: 800; transition: transform .2s, box-shadow .2s;
}
.whatsapp-button:hover { transform: translateY(-3px); box-shadow: 0 20px 38px #12a84f4a; }
.whatsapp-card small { grid-column: 1 / -1; text-align: center; color: #779184; }

.bit-payment {
  width: min(1180px, calc(100% - 40px)); margin: 0 auto 90px; padding: 38px 44px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center;
  border: 2px solid #d7e8ff; border-radius: 44px;
  background: linear-gradient(135deg, #ffffff, #eef6ff 60%, #e5efff);
  box-shadow: inset 2px 2px 5px #fff, 0 28px 65px #124c8c14;
}
.bit-mark {
  width: 92px; height: 92px; display: grid; place-items: center; border-radius: 28px;
  color: white; background: linear-gradient(145deg, #2447d8, #142a96);
  box-shadow: inset 5px 5px 12px #ffffff3d, inset -8px -10px 16px #071a775c, 0 18px 35px #1533a43d;
  font-family: Arial, sans-serif; font-size: 31px; font-weight: 900; letter-spacing: -2px;
}
.bit-copy h2 { margin: 7px 0 8px; font-size: 34px; font-weight: 400; }
.bit-copy p { max-width: 570px; margin: 0; color: var(--muted); line-height: 1.65; }
.bit-action { min-width: 210px; text-align: center; }
.bit-action > strong { display: block; font-size: 36px; letter-spacing: -1px; }
.bit-action > span { display: block; margin: 2px 0 12px; color: #748ba4; font-size: 12px; }
.bit-action a {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 18px; border-radius: 999px; color: white; background: #1837b8;
  box-shadow: 0 12px 25px #1735af2d; font-size: 13px; font-weight: 800;
  transition: transform .2s, box-shadow .2s;
}
.bit-action a:hover { transform: translateY(-2px); box-shadow: 0 16px 30px #1735af3d; }

footer { padding: 34px max(6vw, calc((100vw - 1180px)/2)); display: flex; align-items: center; justify-content: space-between; border-radius: 46px 46px 0 0; background: #061b3c; color: #9db4cb; font-size: 13px; }
footer .brand { color: white; } footer p { margin: 0; }
.footer-copy { display: grid; gap: 7px; text-align: right; }
.footer-copy p { color: #d4e5f3; font-weight: 700; }
.footer-copy small { color: #829cb5; }

@keyframes guardian-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-16px) rotate(1deg); } }
@keyframes shoot { 0%, 18% { opacity: 0; transform: translateX(0); } 20% { opacity: 1; } 37% { opacity: 1; transform: translateX(-320px); } 38%, 100% { opacity: 0; transform: translateX(-330px); } }
@keyframes roam { 0%, 100% { translate: 0 0; rotate: 0deg; opacity: 1; } 25% { translate: 22px -25px; rotate: 11deg; } 49% { opacity: 1; scale: 1; filter: none; } 52% { opacity: 0; scale: .1; filter: brightness(2); } 70% { opacity: 0; } 76% { opacity: 1; scale: 1; translate: -28px 17px; } }
@keyframes impact { 0%, 30%, 38%, 100% { opacity: 0; scale: .4; } 33% { opacity: 1; scale: 2.2; rotate: 90deg; } }
@keyframes pulse { 50% { box-shadow: 0 0 0 11px transparent; } }
@keyframes bob { 50% { transform: translateY(5px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes battle-drift { 0%, 100% { translate: 0 0; rotate: -4deg; } 50% { translate: 0 -14px; rotate: 5deg; } }
@keyframes target-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.1) rotate(0); }
  16% { opacity: 1; transform: translate(-50%, -50%) scale(1.25) rotate(22deg); }
  35% { transform: translate(-50%, -50%) scale(.92) rotate(0); }
  72% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.72) rotate(0); }
}
@keyframes energy-wave {
  0% { opacity: 0; transform: translate(0, -50%) scale(.2); }
  12% { opacity: .9; }
  72% { opacity: .15; }
  100% { opacity: 0; transform: translate(-360px, -50%) scale(4.4); }
}

@media (max-width: 900px) {
  .site-header { width: calc(100% - 30px); }.site-header nav { display: none; }.header-cta { padding: 10px 13px; font-size: 13px; }
  .hero { min-height: auto; grid-template-columns: minmax(0, 1fr); padding: 125px 24px 60px; overflow: hidden; }
  .hero-copy { min-width: 0; padding: 38px; border-radius: 38px; margin: auto; text-align: right; }
  .hero-copy > p { margin-left: auto; }.hero-actions, .trust-row { justify-content: flex-start; }
  .hero-visual { width: 100%; max-width: 620px; height: 480px; margin: 0 auto; overflow: hidden; }.battle-stage { inset: -15px 0; }.scroll-cue { display: none; }
  .info-grid { grid-template-columns: 1fr; }.explainer { padding-inline: 24px; }
  .protection { grid-template-columns: 1fr; padding-inline: 34px; border-radius: 42px; }.protection-copy { margin: 0 auto; padding-bottom: 40px; }
  .offer { grid-template-columns: 1fr; gap: 35px; padding: 40px; }
  .support-addon { grid-template-columns: auto 1fr; }
  .about { grid-template-columns: 1fr; gap: 45px; padding: 48px; }
  .about-portrait { min-height: 360px; width: min(360px, 100%); margin: auto; }
  .contact { grid-template-columns: 1fr; gap: 35px; padding: 46px 28px; border-radius: 42px; }
  .bit-payment { grid-template-columns: auto 1fr; }.bit-action { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .brand { font-size: 19px; }.brand-mark { width: 31px; height: 31px; }.header-cta { font-size: 0; }.header-cta::after { content: "הגנה"; font-size: 12px; }
  h1 { font-size: clamp(38px, 12vw, 47px); letter-spacing: -2.4px; }.hero { padding-inline: 15px; }.hero-copy > p { font-size: 16px; }.hero-copy { width: 100%; padding: 30px 22px; }.hero-actions { flex-direction: column; align-items: flex-start; gap: 18px; }.trust-row { flex-wrap: wrap; gap: 12px; }
  .hero-visual { width: 100%; height: 390px; margin: 0 auto; }.battle-stage { inset: 0; }.battle-guardian { width: 76%; height: 88%; right: auto; left: 12%; }
  .battle-three { display: none; }.info-grid article { padding: 28px; }
  .protection { padding-inline: 18px; }.protection-visual { width: 100%; height: 350px; transform: none; overflow: hidden; }.guardian-orbit { width: min(300px, 78vw); height: min(300px, 78vw); }.ring-one { width: min(340px, 88vw); height: min(340px, 88vw); }.ring-two { width: min(315px, 82vw); height: min(315px, 82vw); }.offer { padding: 32px 23px; }.support-addon { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 24px 20px; }.about { padding: 32px 23px; }.about-portrait { min-height: 285px; }.contact form { grid-template-columns: 1fr; padding: 23px; }.contact label, .contact label:first-child { grid-column: 1; }
  .whatsapp-card { grid-template-columns: 1fr; text-align: center; padding: 25px; }.whatsapp-icon { margin: auto; }
  .bit-payment { grid-template-columns: 1fr; padding: 32px 24px; text-align: center; }.bit-mark { margin: auto; }.bit-action { grid-column: 1; }
  footer { flex-direction: column; gap: 16px; text-align: center; }.footer-copy { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}