/* ==========================================================
   VARIN BOARDING PAGE - CREATIVE & COLORFUL
   Scoped to .boarding-creative-page only.
========================================================== */

.boarding-creative-page{
  --b-blue:#0a2f66;
  --b-blue2:#0d4d9c;
  --b-gold:#f59e0b;
  --b-orange:#ffb51c;
  --b-green:#16a36a;
  --b-purple:#7b46dc;
  --b-pink:#d94d8e;
  --b-cyan:#1ca6b7;
  --b-red:#ef5555;
  --b-text:#173251;
  --b-muted:#708097;
  background:#f7f9fd;
  overflow:hidden;
}

/* HERO */
.boarding-hero{
  position:relative;
  color:#fff;
  padding:100px 0 110px;
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 20%,rgba(217,77,142,.30),transparent 23%),
    radial-gradient(circle at 14% 88%,rgba(28,166,183,.20),transparent 24%),
    linear-gradient(125deg,#061f44 0%,#0a2f66 42%,#0d4d9c 100%);
}
.boarding-hero::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.15;
  background-image:radial-gradient(#fff 1px,transparent 1px);
  background-size:30px 30px;
  mask-image:linear-gradient(to right,transparent,#000 55%,#000);
}
.boarding-shape{position:absolute;border-radius:50%;filter:blur(1px)}
.boarding-shape-one{
  width:360px;height:360px;
  right:-160px;bottom:-150px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 145px rgba(255,255,255,.018);
}
.boarding-shape-two{
  width:120px;height:120px;
  left:-45px;top:80px;
  background:rgba(255,181,28,.28);
}
.boarding-hero-row{min-height:480px}
.boarding-kicker{
  display:inline-flex;align-items:center;gap:.7rem;
  color:#ffd875;font-size:.75rem;font-weight:800;letter-spacing:.18em;
  margin-bottom:1.25rem;
}
.boarding-kicker-dot{
  width:10px;height:10px;border-radius:50%;background:#ffcf57;
  box-shadow:0 0 0 7px rgba(255,207,87,.13);
}
.boarding-hero h1{
  max-width:850px;
  font-size:clamp(3.2rem,6vw,6rem);
  line-height:.96;letter-spacing:-.055em;font-weight:800;
  margin-bottom:1.4rem;
}
.boarding-hero h1 span{
  display:block;
  background:linear-gradient(90deg,#ffb51c,#ffe293,#fff,#ffb51c);
  background-size:220% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:boardingTitle 7s linear infinite;
}
@keyframes boardingTitle{to{background-position:220% center}}
.boarding-hero-copy{
  max-width:720px;color:rgba(255,255,255,.82);
  line-height:1.8;font-size:1.03rem;
}
.boarding-hero-actions{display:flex;gap:.85rem;flex-wrap:wrap;margin-top:1.8rem}
.boarding-primary-btn,.boarding-outline-btn{
  border-radius:999px;padding:.9rem 1.4rem;font-weight:800;transition:.3s ease;
}
.boarding-primary-btn{
  border:0;background:#ffb51c;color:#082b5a;
  box-shadow:0 13px 28px rgba(245,158,11,.25);
}
.boarding-primary-btn:hover{background:#fff;color:#082b5a;transform:translateY(-2px)}
.boarding-outline-btn{
  color:#fff;border:1px solid rgba(255,255,255,.30);
  background:rgba(255,255,255,.07);backdrop-filter:blur(8px);
}
.boarding-outline-btn:hover{background:#fff;color:#082b5a}

.boarding-hero-card{
  max-width:460px;margin-left:auto;padding:1.25rem;
  border-radius:30px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 25px 65px rgba(2,15,38,.25);
  backdrop-filter:blur(15px);
}
.hero-card-top{display:flex;align-items:center;gap:1rem;padding:.45rem .35rem 1rem}
.boarding-home-icon{
  flex:0 0 58px;width:58px;height:58px;border-radius:18px;
  display:grid;place-items:center;background:#ffb51c;color:#0a2f66;font-size:1.35rem;
}
.hero-card-top span{font-size:.68rem;color:#ffd875;font-weight:800;letter-spacing:.1em}
.hero-card-top h3{font-size:1.15rem;font-weight:800;margin:.16rem 0 0}
.boarding-mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
.boarding-mini{
  min-height:145px;border-radius:20px;padding:1rem;
  display:flex;flex-direction:column;justify-content:flex-end;
  border:1px solid rgba(255,255,255,.11);
  transition:.3s ease;
}
.boarding-mini:hover{transform:translateY(-5px)}
.boarding-mini i{font-size:1.3rem;margin-bottom:.7rem}
.boarding-mini strong{font-size:1rem}
.boarding-mini span{font-size:.7rem;color:rgba(255,255,255,.72);margin-top:.18rem}
.boarding-mini-blue{background:linear-gradient(145deg,rgba(29,127,226,.78),rgba(13,77,156,.65))}
.boarding-mini-green{background:linear-gradient(145deg,rgba(22,163,106,.80),rgba(8,110,74,.65))}
.boarding-mini-gold{background:linear-gradient(145deg,rgba(245,158,11,.85),rgba(198,105,0,.68))}
.boarding-mini-purple{background:linear-gradient(145deg,rgba(123,70,220,.82),rgba(87,45,173,.68))}

/* RIBBON */
.boarding-ribbon-wrap{
  background:#fff;border-bottom:1px solid #e8edf5;overflow:hidden
}
.boarding-ribbon{
  display:flex;align-items:center;justify-content:center;gap:1.25rem;
  min-width:max-content;padding:1rem 2rem;
  font-size:.76rem;font-weight:800;letter-spacing:.08em;color:#0a2f66;
  animation:boardingRibbon 22s linear infinite;
}
.boarding-ribbon i{color:#f59e0b;margin-right:.3rem}
.boarding-ribbon b{color:#d4deeb}
@keyframes boardingRibbon{
  0%{transform:translateX(7%)}
  50%{transform:translateX(-7%)}
  100%{transform:translateX(7%)}
}

/* HEADINGS */
.boarding-section{padding:90px 0}
.boarding-heading{max-width:780px;margin:0 auto 3rem}
.boarding-heading>span,.boarding-flow-copy>span,.food-card-head span,.boarding-water-card>span,
.boarding-care-card>div>span,.boarding-final-copy>span{
  color:#f39b00;font-size:.72rem;font-weight:800;letter-spacing:.16em;
}
.boarding-heading h2{
  color:#0a2f66;font-size:clamp(2.25rem,4vw,4rem);
  font-weight:800;letter-spacing:-.04em;margin:.45rem 0 .8rem;
}
.boarding-heading p{color:#708097;line-height:1.75;margin:0}

/* SIX FEATURE CARDS */
.boarding-feature{
  --feature:#0d4d9c;
  --feature-soft:#eef5ff;
  position:relative;overflow:hidden;height:100%;min-height:340px;
  padding:1.6rem;border-radius:26px;
  background:#fff;border:1px solid rgba(10,47,102,.08);
  box-shadow:0 15px 40px rgba(10,47,102,.09);
  transition:.35s ease;
}
.boarding-feature::before{
  content:"";position:absolute;left:0;top:0;right:0;height:7px;background:var(--feature);
}
.boarding-feature::after{
  content:"";position:absolute;width:165px;height:165px;border-radius:50%;
  right:-65px;bottom:-70px;background:var(--feature-soft);
}
.boarding-feature:hover{
  transform:translateY(-9px);
  box-shadow:0 26px 55px rgba(10,47,102,.14);
}
.boarding-feature-number{
  position:absolute;right:20px;top:20px;
  font-size:2.6rem;line-height:1;font-weight:800;color:var(--feature-soft);
}
.boarding-feature-icon{
  width:64px;height:64px;border-radius:20px;
  display:grid;place-items:center;background:var(--feature);color:#fff;
  font-size:1.45rem;margin-bottom:1.15rem;position:relative;z-index:1;
  box-shadow:0 12px 24px color-mix(in srgb,var(--feature) 24%,transparent);
}
.boarding-feature h3{
  color:#183250;font-size:1.15rem;font-weight:800;margin-bottom:.8rem;position:relative;z-index:1
}
.boarding-feature p{
  color:#708097;line-height:1.7;font-size:.91rem;margin:0;position:relative;z-index:1
}
.feature-pink{--feature:#d94d8e;--feature-soft:#fff0f7}
.feature-blue{--feature:#1d7fe2;--feature-soft:#edf5ff}
.feature-green{--feature:#16a36a;--feature-soft:#eaf9f2}
.feature-orange{--feature:#f59e0b;--feature-soft:#fff7e7}
.feature-purple{--feature:#7b46dc;--feature-soft:#f3edff}
.feature-cyan{--feature:#1ca6b7;--feature-soft:#eafafd}

/* FLOW */
.boarding-flow-section{
  padding:90px 0;color:#fff;
  background:
    radial-gradient(circle at 8% 22%,rgba(123,70,220,.18),transparent 24%),
    radial-gradient(circle at 90% 78%,rgba(28,166,183,.18),transparent 25%),
    linear-gradient(135deg,#07295b,#0a2f66 52%,#163f86);
}
.boarding-flow-copy h2{
  font-size:clamp(2.15rem,4vw,3.8rem);font-weight:800;line-height:1.04;
  letter-spacing:-.04em;margin:.5rem 0 1.1rem;
}
.boarding-flow-copy p{color:rgba(255,255,255,.74);line-height:1.75}
.boarding-text-link{color:#ffd166;font-weight:800;text-decoration:none}
.boarding-text-link:hover{color:#fff}
.boarding-flow-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.boarding-flow-card{
  --flow:#1d7fe2;
  position:relative;min-height:185px;padding:1.25rem;border-radius:23px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px);transition:.3s ease;
}
.boarding-flow-card:hover{transform:translateY(-5px);background:rgba(255,255,255,.12)}
.boarding-flow-card>span{
  position:absolute;right:15px;top:13px;color:rgba(255,255,255,.38);
  font-size:.72rem;font-weight:800;
}
.boarding-flow-card>i{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  background:var(--flow);color:#fff;font-size:1.2rem;margin-bottom:1rem;
}
.boarding-flow-card h4{font-size:1rem;font-weight:800;margin-bottom:.4rem}
.boarding-flow-card p{font-size:.8rem;color:rgba(255,255,255,.68);margin:0;line-height:1.55}
.flow-study{--flow:#1d7fe2}.flow-food{--flow:#f59e0b}.flow-play{--flow:#16a36a}.flow-relax{--flow:#7b46dc}

/* FOOD */
.boarding-food-section{
  background:
    radial-gradient(circle at 10% 15%,rgba(245,158,11,.07),transparent 23%),
    radial-gradient(circle at 90% 85%,rgba(28,166,183,.07),transparent 23%),
    #fff;
}
.boarding-food-card,.boarding-water-card{
  height:100%;border-radius:30px;box-shadow:0 18px 45px rgba(10,47,102,.10)
}
.boarding-food-card{
  padding:2rem;background:#fff;border:1px solid #e7edf7;
}
.food-card-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.6rem}
.food-main-icon{
  flex:0 0 66px;width:66px;height:66px;border-radius:21px;
  display:grid;place-items:center;background:linear-gradient(145deg,#f59e0b,#ffbf43);
  color:#fff;font-size:1.5rem;box-shadow:0 12px 25px rgba(245,158,11,.23);
}
.food-card-head h3{
  color:#173251;font-size:clamp(1.45rem,2.6vw,2.25rem);font-weight:800;
  letter-spacing:-.03em;margin:.3rem 0 0
}
.boarding-check-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem}
.boarding-check{
  display:flex;gap:.7rem;align-items:flex-start;padding:1rem;
  border-radius:18px;background:#fff9ed;border:1px solid #ffedc6;
  color:#5f6875;font-size:.82rem;line-height:1.55;
}
.boarding-check i{color:#f59e0b;font-size:1rem;margin-top:.05rem}

.boarding-water-card{
  position:relative;overflow:hidden;
  padding:2rem;color:#fff;
  background:
    radial-gradient(circle at 82% 15%,rgba(255,255,255,.14),transparent 25%),
    linear-gradient(145deg,#0b79bd,#1ca6b7 62%,#167e91);
}
.water-glow{
  position:absolute;width:230px;height:230px;border-radius:50%;
  right:-85px;bottom:-105px;background:rgba(255,255,255,.08);
  box-shadow:0 0 0 45px rgba(255,255,255,.04);
}
.water-icon{
  width:70px;height:70px;border-radius:22px;display:grid;place-items:center;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.18);
  font-size:1.65rem;margin-bottom:1.4rem;position:relative;z-index:1;
}
.boarding-water-card>span{color:#d7fbff!important;position:relative;z-index:1}
.boarding-water-card h3{
  font-size:clamp(1.7rem,3vw,2.55rem);font-weight:800;letter-spacing:-.035em;
  margin:.4rem 0 .9rem;position:relative;z-index:1;
}
.boarding-water-card p{color:rgba(255,255,255,.82);line-height:1.75;margin:0;position:relative;z-index:1}

/* DAILY CARE */
.boarding-care-section{
  padding:90px 0;
  background:linear-gradient(180deg,#f7f9fd 0%,#f1f5fb 100%);
}
.boarding-care-card{
  --care:#0d4d9c;
  min-height:260px;height:100%;display:flex;gap:1.25rem;align-items:flex-start;
  padding:2rem;border-radius:28px;background:#fff;
  border:1px solid rgba(10,47,102,.08);box-shadow:0 16px 38px rgba(10,47,102,.08);
  position:relative;overflow:hidden;transition:.35s ease;
}
.boarding-care-card::after{
  content:"";position:absolute;width:190px;height:190px;border-radius:50%;
  right:-85px;bottom:-95px;background:color-mix(in srgb,var(--care) 9%,white);
}
.boarding-care-card:hover{transform:translateY(-7px);box-shadow:0 24px 50px rgba(10,47,102,.13)}
.care-icon{
  flex:0 0 68px;width:68px;height:68px;border-radius:21px;display:grid;place-items:center;
  background:var(--care);color:#fff;font-size:1.4rem;position:relative;z-index:1;
}
.boarding-care-card>div{position:relative;z-index:1}
.boarding-care-card>div>span{color:var(--care)!important}
.boarding-care-card h3{color:#173251;font-size:1.45rem;font-weight:800;margin:.35rem 0 .7rem}
.boarding-care-card p{color:#708097;line-height:1.72;margin:0}
.care-laundry{--care:#7b46dc}.care-security{--care:#16a36a}

.boarding-final-card{
  margin-top:2.2rem;
  position:relative;overflow:hidden;color:#fff;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.4rem;
  padding:2.15rem 2.3rem;border-radius:30px;
  background:
    radial-gradient(circle at 88% 12%,rgba(255,181,28,.22),transparent 24%),
    linear-gradient(120deg,#0a2f66,#0d4d9c 55%,#6b43c6);
  box-shadow:0 24px 55px rgba(10,47,102,.18);
}
.boarding-final-card::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.06),transparent);
  transform:translateX(-100%);animation:boardingShine 6s ease-in-out infinite;
}
@keyframes boardingShine{0%,70%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.boarding-final-icon{
  width:78px;height:78px;border-radius:24px;display:grid;place-items:center;
  background:#ffb51c;color:#0a2f66;font-size:1.7rem;position:relative;z-index:1;
}
.boarding-final-copy{position:relative;z-index:1}
.boarding-final-copy>span{color:#ffdd84!important}
.boarding-final-copy h2{
  font-size:clamp(1.7rem,3vw,2.75rem);font-weight:800;letter-spacing:-.035em;
  margin:.35rem 0 .5rem;
}
.boarding-final-copy p{margin:0;color:rgba(255,255,255,.76);line-height:1.65;max-width:850px}
.boarding-final-btn{
  position:relative;z-index:1;background:#fff;color:#0a2f66;border-radius:999px;
  font-weight:800;padding:.85rem 1.25rem;white-space:nowrap
}
.boarding-final-btn:hover{background:#ffb51c;color:#0a2f66}

/* RESPONSIVE */
@media(max-width:991.98px){
  .boarding-hero{padding:75px 0 95px}
  .boarding-hero-row{min-height:auto}
  .boarding-hero-card{max-width:none;margin-left:0}
  .boarding-final-card{grid-template-columns:auto 1fr}
  .boarding-final-btn{grid-column:1/-1;justify-self:start}
}
@media(max-width:767.98px){
  .boarding-section,.boarding-flow-section,.boarding-care-section{padding:65px 0}
  .boarding-hero h1{font-size:clamp(2.8rem,13vw,4.6rem)}
  .boarding-flow-grid{grid-template-columns:1fr}
  .boarding-check-grid{grid-template-columns:1fr}
  .boarding-feature{min-height:auto}
  .boarding-care-card{flex-direction:column;padding:1.5rem}
  .boarding-final-card{grid-template-columns:1fr;padding:1.6rem}
  .boarding-final-icon{width:62px;height:62px;border-radius:19px}
}
@media(max-width:575.98px){
  .boarding-hero{padding:55px 0 80px}
  .boarding-mini{min-height:128px}
  .boarding-ribbon{justify-content:flex-start}
  .boarding-food-card,.boarding-water-card{padding:1.5rem;border-radius:24px}
  .food-card-head{align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  .boarding-ribbon,.boarding-hero h1 span,.boarding-final-card::before{animation:none}
}