/* Yallamey UI Kit (Tailwind utilities + custom components) */
:root{
  --brand:#0C4F91;
  --brand2:#17A2D6;
  --ink:#0b1220;
  --muted:#64748b;
  --line:#dbe6f2;
  --bgSoft:#f6fbff;
  --bgSoft2:#eef7ff;
  --shadow: 0 22px 70px rgba(2,6,23,.12);
  --shadow2: 0 18px 50px rgba(2,6,23,.10);
}

*{ box-sizing:border-box; }
html,body{ font-family:"Plus Jakarta Sans", "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial; }
a{ text-decoration:none; }
img{ max-width:100%; display:block; }

.y-container{ width:min(1120px, calc(100% - 40px)); margin-inline:auto; }
@media (min-width:768px){ .y-container{ width:min(1160px, calc(100% - 64px)); } }

.y-nav{
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.78);
  border-bottom: 1px solid rgba(219,230,242,.9);
}

.y-hero-copy{
  color: rgba(255,255,255,.90);
  text-shadow: 0 1px 18px rgba(2,6,23,.62);
}

/* Sections */
.y-pad{ padding-block: 56px; }
@media (min-width:768px){ .y-pad{ padding-block: 72px; } }

.y-section{ background:#fff; }
.y-section-alt{ background: linear-gradient(180deg, #ffffff, var(--bgSoft)); }
.y-section-soft{ background: linear-gradient(180deg, var(--bgSoft), #ffffff); }
.y-section-slab{
  background: linear-gradient(180deg, #ffffff, var(--bgSoft2));
  border-top: 1px solid rgba(219,230,242,.8);
  border-bottom: 1px solid rgba(219,230,242,.8);
}
.y-pattern{
  background-image: radial-gradient(circle at 1px 1px, rgba(12,79,145,.12) 1px, transparent 0);
  background-size: 18px 18px;
}

/* Typography */
.y-eyebrow{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  color: rgba(100,116,139,.95);
}
.y-h1{ font-weight: 900; letter-spacing: -0.03em; color:#fff; }
.y-h2{
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
}
.y-sub{ color: rgba(15,23,42,.78); line-height: 1.7; }

/* Badge */
.y-badge{
  display:inline-flex; align-items:center; gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  font-size: 12px;
}

/* Buttons */
.y-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 900;
  letter-spacing: .01em;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  user-select:none;
}
.y-btn-primary{
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  color: #fff;
  box-shadow: 0 18px 40px rgba(12,79,145,.25);
}
.y-btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 24px 60px rgba(12,79,145,.30); }
.y-btn-outline{
  background: rgba(255,255,255,.88);
  color: var(--ink);
  border: 1px solid rgba(219,230,242,.95);
}
.y-btn-outline:hover{ transform: translateY(-2px); box-shadow: var(--shadow2); border-color: rgba(12,79,145,.18); }
.y-link{ color: var(--brand); font-weight: 900; }
.y-link:hover{ text-decoration: underline; }

/* Cards */
.y-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(219,230,242,.95);
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.y-card:hover{ transform: translateY(-3px); border-color: rgba(12,79,145,.18); box-shadow: var(--shadow2); }

/* Glass inside hero (readable) */
.y-glass{
  background: rgba(15, 23, 42, .44);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
}

/* Avoid global forcing white (caused white-on-white earlier) */
.y-glassCard{ color: rgba(255,255,255,.92); }

.y-glass .y-pill,
.y-glass .y-chip{
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.92) !important;
}

.y-glass .y-miniIcon{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #ffffff !important;
}

/* Hero */
.y-hero-video{
  position: relative;
  min-height: calc(100vh - 72px);
  display: grid;
  align-items: center;
  overflow:hidden;
}
.y-hero-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  transform: scale(1.03);
  filter: saturate(1.05) contrast(1.05);
}
.y-hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(120deg, rgba(2,6,23,.86), rgba(12,79,145,.46));
}
.y-hero-vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 18% 45%, rgba(2,6,23,.55), transparent 58%),
    radial-gradient(circle at 78% 40%, rgba(2,6,23,.40), transparent 60%);
  pointer-events:none;
}
.y-hero-left{
  position: relative;
  padding: 16px;
  border-radius: 22px;
}

/* Float */
.y-float{ filter: blur(0px); animation: yFloat 6.5s ease-in-out infinite; }
@keyframes yFloat{ 0%,100%{ transform: translateY(0px); } 50%{ transform: translateY(-10px); } }

/* Pills */
.y-pillRow{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.y-pill{
  display:inline-flex; align-items:center;
  font-size:12px; font-weight:900;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(255,255,255,.55);
  color: rgba(255,255,255,.92);
}
.y-section .y-pill, .y-section-soft .y-pill, .y-section-alt .y-pill, .y-section-slab .y-pill{
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(219,230,242,.95);
  color: rgba(30,41,59,.92);
}

/* “How can we help” cards */
.y-helpTop{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.y-miniIcon{
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 12px;
  background: rgba(12,79,145,.08);
  border: 1px solid rgba(12,79,145,.14);
  color: var(--brand);
  font-weight: 900;
}
.y-chipRow{ display:flex; flex-wrap:wrap; gap:8px; }
.y-chip{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(219,230,242,.95);
  color: rgba(30,41,59,.9);
  font-weight: 800;
}
.y-helpCard:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }

/* Hero quote chips */
.y-chipLight{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
  font-weight: 900;
}

/* Hero chat bubbles (fix white-on-white visibility) */
.y-chatBubble{
  border-radius: 16px;
  padding: 12px 14px;
  font-size: 13px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
}
.y-chatBubble b{ color: rgba(255,255,255,.95); }
.y-chatBubbleAccent{
  background: rgba(12,79,145,.18);
  border: 1px solid rgba(255,255,255,.16);
}

/* “For” cards with image */
.y-forCard{ overflow:hidden; }
.y-forImg{
  width:100%;
  height: 150px;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.05);
}
@media (min-width:768px){ .y-forImg{ height: 165px; } }

/* Photo frame */
.y-photoFrame{
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(219,230,242,.95);
  box-shadow: var(--shadow2);
}
.y-photo{ width:100%; height: 420px; object-fit: cover; }
@media (min-width:1024px){ .y-photo{ height: 460px; } }
.y-photoOverlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(12,79,145,.14), rgba(2,6,23,.10));
}

/* Mini stats */
.y-miniStat{
  background: #fff;
  border: 1px solid rgba(219,230,242,.95);
  border-radius: 18px;
  padding: 14px 14px;
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
}

/* CTA banner */
.y-ctaBanner{
  border-radius: 28px;
  padding: 28px;
  border: 1px solid rgba(219,230,242,.95);
  background:
    radial-gradient(circle at 18% 15%, rgba(12,79,145,.10), transparent 55%),
    radial-gradient(circle at 92% 18%, rgba(23,162,214,.10), transparent 55%),
    linear-gradient(180deg, #fff, var(--bgSoft));
  box-shadow: var(--shadow2);
  display:grid;
  gap:20px;
}
@media (min-width:1024px){ .y-ctaBanner{ grid-template-columns: 1.25fr .75fr; align-items: center; padding: 34px; } }
.y-sampleMock{
  height: 260px;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(219,230,242,.95);
  box-shadow: 0 12px 30px rgba(2,6,23,.08);
}

/* Logo pills */
.y-logoRow{ display:flex; flex-wrap:wrap; gap:10px; }
.y-logoPill{
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(219,230,242,.95);
  color: rgba(30,41,59,.85);
  font-weight: 900;
  font-size: 12px;
}

/* Inputs (modal) */
.y-input{
  width:100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(219,230,242,.95);
  background: #fff;
  outline: none;
  font-weight: 700;
  color: rgba(15,23,42,.92);
}
.y-input:focus{
  border-color: rgba(12,79,145,.30);
  box-shadow: 0 0 0 4px rgba(12,79,145,.10);
}

/* Modal */
.y-modal{ position: fixed; inset: 0; z-index: 80; }
.y-modal-backdrop{ position:absolute; inset:0; background: rgba(2,6,23,.55); backdrop-filter: blur(8px); }
.y-modal-panel{
  position: relative;
  width: min(720px, calc(100% - 28px));
  margin: 6vh auto;
  background: #fff;
  border-radius: 24px;
  padding: 22px;
  border: 1px solid rgba(219,230,242,.95);
  box-shadow: var(--shadow);
}

/* Dividers */
.y-dividerGlow{ position: relative; }
.y-dividerGlow:after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(12,79,145,.22), transparent);
  pointer-events:none;
}

/* Reveal animation */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in{ opacity:1; transform: translateY(0); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .y-float, .reveal{ animation:none !important; transition:none !important; }
}


/* Force hamburger only on mobile */
.y-hamburger{ display: inline-flex; }
@media (min-width:768px){
  .y-hamburger{ display: none !important; }
}