@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800;900&display=swap");

:root {
  --navy: #071728;
  --navy2: #0b2238;
  --navy3: #102f4c;

  --gold: #c9a34a;
  --gold2: #e3c56e;
  --goldDark: #9f7d2c;

  --text: #0f1d2f;
  --muted: #667386;

  --bg: #f4f1eb;
  --card: #ffffff;

  --line: #e7e2d8;

  --shadow:
    0 14px 35px rgba(7, 23, 40, 0.12);

  --shadowSoft:
    0 8px 22px rgba(7, 23, 40, 0.08);
}


* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {

  margin: 0;

  background:
    radial-gradient(
      circle at top right,
      rgba(227, 197, 110, .12),
      transparent 400px
    ),
    var(--bg);

  color: var(--text);

  font-family:
    Heebo,
    Arial,
    sans-serif;
}


a {
  color: inherit;
  text-decoration: none;
}


button {
  font-family: inherit;
}



/* HEADER */

.cardHeader {

  position: relative;

  min-height: 230px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      var(--navy),
      var(--navy2)
    );

  border-bottom:
    1px solid rgba(227, 197, 110, .55);

  box-shadow:
    0 6px 22px rgba(0,0,0,.12);
}


.cardHeader::before {

  content: "";

  position: absolute;

  width: 420px;
  height: 420px;

  top: -310px;
  left: -100px;

  border-radius: 50%;

  border:
    1px solid rgba(227,197,110,.13);

  box-shadow:
    0 0 0 50px rgba(227,197,110,.025),
    0 0 0 100px rgba(227,197,110,.018);
}


.headerGlow {

  position: absolute;

  width: 320px;
  height: 320px;

  right: -120px;
  bottom: -230px;

  background:
    rgba(201, 163, 74, .2);

  border-radius: 50%;

  filter: blur(80px);

  animation:
    headerGlow 6s ease-in-out infinite alternate;
}


@keyframes headerGlow {

  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-45px);
  }

}


.brand {

  position: relative;

  z-index: 2;

  display: flex;
  align-items: center;

  gap: 18px;

  animation:
    brandEntrance .8s ease both;
}


@keyframes brandEntrance {

  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}


.brand img {

  width: 90px;
  height: 90px;

  object-fit: contain;
}


.brand h1 {

  margin: 0;

  color: var(--gold2);

  font-size: 38px;
  font-weight: 900;

  line-height: 1;
}


.brand p {

  margin: 8px 0 0;

  color: #fff;

  font-size: 15px;

  opacity: .88;
}



/* PAGE */

.businessPage {

  width:
    min(1100px, calc(100% - 32px));

  margin:
    0 auto;

  padding:
    55px 0 80px;
}



/* INTRO */

.intro {

  text-align: center;

  margin-bottom: 35px;

  animation:
    fadeUp .8s .15s both;
}


@keyframes fadeUp {

  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}


.introBadge {

  width: max-content;

  display: flex;
  align-items: center;

  gap: 7px;

  margin:
    0 auto 14px;

  padding:
    7px 13px;

  border:
    1px solid rgba(201,163,74,.3);

  background:
    rgba(201,163,74,.09);

  color:
    var(--goldDark);

  border-radius:
    100px;

  font-size:
    12px;

  font-weight:
    700;
}


.intro h2 {

  max-width:
    650px;

  margin:
    0 auto;

  color:
    var(--navy);

  font-size:
    clamp(35px, 6vw, 55px);

  font-weight:
    900;

  line-height:
    1.1;
}


.intro h2 span {

  display: block;

  color:
    var(--goldDark);
}


.intro p {

  margin:
    14px auto 0;

  color:
    var(--muted);

  font-size:
    17px;

  line-height:
    1.7;
}



/* MAIN BUSINESS CARD */

.businessCard {

  position: relative;

  width:
    min(600px, 100%);

  margin:
    0 auto;

  padding:
    36px;

  overflow:
    hidden;

  background:
    var(--card);

  border:
    1px solid var(--line);

  border-radius:
    8px;

  box-shadow:
    var(--shadow);

  text-align:
    center;

  animation:
    cardEntrance .85s .25s both;

  transition:
    transform .25s,
    box-shadow .25s;
}


.businessCard:hover {

  transform:
    translateY(-4px);

  box-shadow:
    0 22px 50px rgba(7,23,40,.15);
}


@keyframes cardEntrance {

  from {
    opacity: 0;
    transform: translateY(25px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}


.cardTopLine {

  position: absolute;

  top: 0;
  right: 0;
  left: 0;

  height: 4px;

  background:
    linear-gradient(
      90deg,
      var(--goldDark),
      var(--gold2),
      var(--gold)
    );
}


.businessLogo {

  width:
    115px;

  height:
    115px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin:
    5px auto 16px;

  border-radius:
    50%;

  background:
    #fff;

  border:
    1px solid var(--line);

  box-shadow:
    var(--shadowSoft);

  transition:
    transform .3s;
}


.businessLogo:hover {

  transform:
    rotate(3deg) scale(1.04);
}


.businessLogo img {

  width:
    85px;

  height:
    85px;

  object-fit:
    contain;
}


.businessCard > h3 {

  margin:
    0;

  color:
    var(--navy);

  font-size:
    32px;

  font-weight:
    900;
}


.cardSubtitle {

  margin:
    3px 0 20px;

  color:
    var(--goldDark);

  font-weight:
    700;
}



/* SERVICES */

.services {

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    8px;

  margin:
    0 0 26px;
}


.services div {

  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;

  padding:
    14px 5px;

  background:
    var(--bg);

  border:
    1px solid var(--line);

  border-radius:
    6px;

  color:
    var(--navy);

  font-size:
    12px;

  font-weight:
    700;

  transition:
    .2s;
}


.services div:hover {

  border-color:
    rgba(201,163,74,.5);

  transform:
    translateY(-2px);
}


.services i {

  color:
    var(--gold);

  font-size:
    18px;
}



/* CONTACT ITEMS */

.contactList {

  display:
    flex;

  flex-direction:
    column;

  gap:
    9px;
}


.contactItem {

  display:
    flex;

  align-items:
    center;

  min-height:
    69px;

  padding:
    10px 13px;

  border:
    1px solid var(--line);

  border-radius:
    6px;

  background:
    #fff;

  text-align:
    right;

  transition:
    .22s;
}


.contactItem:hover {

  border-color:
    rgba(201,163,74,.5);

  background:
    #fffdf8;

  transform:
    translateX(-3px);

  box-shadow:
    var(--shadowSoft);
}


.contactIcon {

  width:
    45px;

  height:
    45px;

  flex:
    0 0 45px;

  display:
    grid;

  place-items:
    center;

  margin-left:
    13px;

  background:
    var(--navy);

  color:
    var(--gold2);

  border-radius:
    5px;

  font-size:
    18px;

  transition:
    .2s;
}


.contactItem:hover .contactIcon {

  transform:
    scale(1.06);
}


.whatsapp .contactIcon {

  background:
    #157347;

  color:
    white;
}


.contactText {

  flex:
    1;

  display:
    flex;

  flex-direction:
    column;
}


.contactText small {

  color:
    var(--muted);

  font-size:
    11px;
}


.contactText strong {

  color:
    var(--navy);

  font-size:
    16px;
}


.arrow {

  color:
    var(--gold);

  margin-right:
    10px;

  font-size:
    12px;

  transition:
    .2s;
}


.contactItem:hover .arrow {

  transform:
    translateX(-4px);
}



/* GOLD BUTTON */

.goldBtn {

  border:
    1px solid #b58d2f;

  background:
    linear-gradient(
      180deg,
      var(--gold2),
      var(--gold)
    );

  color:
    var(--navy);

  font-weight:
    900;

  font-size:
    16px;

  padding:
    14px 25px;

  box-shadow:
    0 8px 20px rgba(201,163,74,.22);

  border-radius:
    5px;

  transition:
    .22s;

  cursor:
    pointer;
}


.goldBtn:hover {

  transform:
    translateY(-2px);

  box-shadow:
    0 12px 28px rgba(201,163,74,.32);
}


.goldBtn:active {

  transform:
    scale(.98);
}


.businessCard > .goldBtn {

  width:
    100%;

  margin-top:
    19px;
}



/* ABOUT */

.aboutSection {

  margin-top:
    75px;

  text-align:
    center;
}


.smallGoldTitle {

  color:
    var(--goldDark);

  font-size:
    12px;

  font-weight:
    900;

  letter-spacing:
    2px;
}


.aboutSection > h2 {

  margin:
    5px 0 28px;

  color:
    var(--navy);

  font-size:
    35px;

  font-weight:
    900;
}


.aboutGrid {

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    16px;
}


.aboutGrid article {

  padding:
    30px 24px;

  background:
    #fff;

  border:
    1px solid var(--line);

  border-radius:
    8px;

  box-shadow:
    var(--shadowSoft);

  transition:
    .25s;
}


.aboutGrid article:hover {

  transform:
    translateY(-5px);

  border-color:
    rgba(201,163,74,.45);

  box-shadow:
    var(--shadow);
}


.aboutGrid i {

  width:
    58px;

  height:
    58px;

  display:
    grid;

  place-items:
    center;

  margin:
    0 auto 17px;

  color:
    var(--gold2);

  background:
    var(--navy);

  border-radius:
    50%;

  font-size:
    21px;
}


.aboutGrid h3 {

  color:
    var(--navy);

  margin:
    0 0 7px;

  font-size:
    18px;
}


.aboutGrid p {

  margin:
    0;

  color:
    var(--muted);

  line-height:
    1.7;

  font-size:
    14px;
}



/* WEBSITE CTA */

.visitWebsite {

  margin-top:
    70px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    34px 38px;

  background:
    var(--navy);

  border-radius:
    8px;

  border:
    1px solid rgba(227,197,110,.25);

  box-shadow:
    var(--shadow);
}


.visitWebsite span {

  color:
    var(--gold2);

  font-size:
    13px;

  font-weight:
    700;
}


.visitWebsite h2 {

  margin:
    4px 0 0;

  color:
    white;

  font-size:
    28px;
}



/* FOOTER */

footer {

  padding:
    38px 20px;

  background:
    var(--navy);

  color:
    rgba(255,255,255,.65);

  text-align:
    center;

  border-top:
    1px solid rgba(227,197,110,.25);
}


footer img {

  width:
    60px;

  margin-bottom:
    10px;
}


footer p {

  margin:
    3px 0;

  font-size:
    12px;
}


footer span {

  font-size:
    11px;
}


footer a {

  color:
    var(--gold2);

  font-weight:
    700;
}



/* MOBILE */

@media (max-width: 700px) {

  .cardHeader {

    min-height:
      175px;
  }


  .brand img {

    width:
      66px;

    height:
      66px;
  }


  .brand h1 {

    font-size:
      27px;
  }


  .brand p {

    font-size:
      12px;
  }


  .businessPage {

    padding:
      38px 0 55px;
  }


  .intro h2 {

    font-size:
      37px;
  }


  .intro p {

    font-size:
      15px;
  }


  .businessCard {

    padding:
      29px 18px;
  }


  .businessLogo {

    width:
      95px;

    height:
      95px;
  }


  .businessLogo img {

    width:
      70px;

    height:
      70px;
  }


  .services {

    gap:
      6px;
  }


  .aboutGrid {

    grid-template-columns:
      1fr;
  }


  .aboutSection {

    margin-top:
      55px;
  }


  .visitWebsite {

    flex-direction:
      column;

    text-align:
      center;

    padding:
      30px 20px;
  }


  .visitWebsite .goldBtn {

    width:
      100%;
  }

}


@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {

    animation:
      none !important;

    transition:
      none !important;
  }

}

/* ===== EXTRA EFFECTS ===== */

/* כניסה מדורגת */
.intro,
.businessCard,
.aboutSection,
.visitWebsite {
  opacity: 0;
  transform: translateY(28px);
}

.reveal {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition:
    opacity .8s cubic-bezier(.16,1,.3,1),
    transform .8s cubic-bezier(.16,1,.3,1);
}


/* Shine זהוב שעובר על הכרטיס */
.businessCard::after {
  content: "";
  position: absolute;

  top: -120%;
  left: -40%;

  width: 45%;
  height: 300%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(227,197,110,.17),
      transparent
    );

  transform: rotate(18deg);

  pointer-events: none;

  animation: cardShine 7s ease-in-out infinite;
}

@keyframes cardShine {
  0% {
    left: -60%;
  }

  20% {
    left: 130%;
  }

  100% {
    left: 130%;
  }
}


/* הבהוב עדין לפס הזהב */
.cardTopLine {
  background-size: 200% 100%;

  animation: goldLineMove 3s linear infinite;
}

@keyframes goldLineMove {
  from {
    background-position: 0% 50%;
  }

  to {
    background-position: 200% 50%;
  }
}


/* Pulse ללוגו */
.businessLogo {
  animation: logoFloat 4s ease-in-out infinite;
}

@keyframes logoFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}


/* הילה עדינה סביב הלוגו */
.businessLogo::before {
  content: "";

  position: absolute;

  width: 135px;
  height: 135px;

  border-radius: 50%;

  border:
    1px solid rgba(201,163,74,.2);

  animation:
    logoRing 2.8s ease-out infinite;

  pointer-events: none;
}

@keyframes logoRing {
  0% {
    transform: scale(.8);
    opacity: .7;
  }

  100% {
    transform: scale(1.25);
    opacity: 0;
  }
}


/* אייקונים זזים קלות ב-hover */
.contactItem:hover .contactIcon i {
  animation: iconBounce .45s ease;
}

@keyframes iconBounce {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.23) rotate(-5deg);
  }

  100% {
    transform: scale(1);
  }
}


/* וואטסאפ Pulse */
.whatsapp .contactIcon {
  position: relative;
}

.whatsapp .contactIcon::after {
  content: "";

  position: absolute;
  inset: -5px;

  border:
    1px solid rgba(37,211,102,.55);

  border-radius: 8px;

  animation:
    whatsappPulse 2s ease-out infinite;
}

@keyframes whatsappPulse {
  0% {
    transform: scale(.8);
    opacity: .8;
  }

  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}


/* הברקה בכפתורי הזהב */
.goldBtn {
  position: relative;
  overflow: hidden;
}

.goldBtn::after {
  content: "";

  position: absolute;

  top: -50%;
  left: -80%;

  width: 40%;
  height: 200%;

  transform: rotate(20deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.48),
      transparent
    );

  transition: left .6s ease;
}

.goldBtn:hover::after {
  left: 140%;
}


/* 3D עדין לכרטיסים */
.aboutGrid article {
  transform-style: preserve-3d;
  perspective: 800px;
}

.aboutGrid article i,
.aboutGrid article h3,
.aboutGrid article p {
  transition: transform .25s ease;
}

.aboutGrid article:hover i {
  transform: translateZ(20px) scale(1.05);
}

.aboutGrid article:hover h3 {
  transform: translateZ(12px);
}

.aboutGrid article:hover p {
  transform: translateZ(6px);
}


/* רקע דינמי קל */
body::before,
body::after {
  content: "";

  position: fixed;

  z-index: -1;

  width: 420px;
  height: 420px;

  border-radius: 50%;

  filter: blur(90px);

  pointer-events: none;
}

body::before {
  top: 30%;
  right: -250px;

  background:
    rgba(201,163,74,.08);

  animation:
    bgFloat1 12s ease-in-out infinite alternate;
}

body::after {
  bottom: 5%;
  left: -280px;

  background:
    rgba(16,47,76,.08);

  animation:
    bgFloat2 14s ease-in-out infinite alternate;
}

@keyframes bgFloat1 {
  to {
    transform: translate(-100px, 100px);
  }
}

@keyframes bgFloat2 {
  to {
    transform: translate(120px, -80px);
  }
}


/* פס זהב קטן מעל CTA */
.visitWebsite {
  position: relative;
  overflow: hidden;
}

.visitWebsite::before {
  content: "";

  position: absolute;

  top: 0;
  right: 0;

  width: 100%;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--gold2),
      transparent
    );

  animation:
    ctaLine 3s linear infinite;
}

@keyframes ctaLine {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(-100%);
  }
}


/* מסגרת זוהרת לכרטיס הראשי ב-hover */
.businessCard:hover {
  border-color:
    rgba(201,163,74,.55);

  box-shadow:
    0 24px 55px rgba(7,23,40,.16),
    0 0 0 1px rgba(201,163,74,.08),
    0 0 35px rgba(201,163,74,.08);
}


/* אנימציה ל-header */
.brand img {
  animation:
    headerLogoFloat 5s ease-in-out infinite;
}

@keyframes headerLogoFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}


/* underline לכותרת */
.aboutSection > h2 {
  position: relative;
  display: inline-block;
}

.aboutSection > h2::after {
  content: "";

  position: absolute;

  right: 50%;
  bottom: -10px;

  width: 55px;
  height: 3px;

  transform: translateX(50%);

  background:
    linear-gradient(
      90deg,
      var(--goldDark),
      var(--gold2)
    );

  border-radius: 10px;
}


/* Click feedback */
.contactItem.clicked {
  transform: scale(.98);
}


/* Mobile */
@media (max-width: 700px) {

  .businessCard::after {
    animation-duration: 9s;
  }

  .businessLogo {
    animation-duration: 5s;
  }

}


/* נגישות */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

}