/* Home page sections: subject arches, benefits band and dark section joins. Split out of woo.css. */
/* home: subject cards shaped like an arch (mihrab), with three covers on a shelf that rise on hover */
.subs2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.sub2{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:6px;min-height:300px;padding:34px 24px 22px;color:var(--ink);text-decoration:none;
  border-radius:50% 50% 18px 18px / 120px 120px 18px 18px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 16%,#fff) 0%,#fff 70%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.sub2::before{content:"";position:absolute;inset:10px 10px auto;height:58%;z-index:-1;border-radius:50% 50% 12px 12px / 110px 110px 12px 12px;border:1px dashed color-mix(in srgb,var(--c) 45%,transparent);opacity:.7;transition:opacity .4s}
.sub2 .ic{align-self:center;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--c);box-shadow:0 10px 24px -14px color-mix(in srgb,var(--c) 80%,#000);margin-bottom:10px;transition:transform .5s var(--ease)}
.sub2 .ic svg.i{width:28px;height:28px}
.sub2 .txt{text-align:center;display:flex;flex-direction:column;gap:4px;position:relative;z-index:2}
.sub2 b{font-size:21px;line-height:1.35}
.sub2 small{color:var(--soft);font-size:13px}
.sub2 .cnt{margin-top:auto;position:relative;z-index:2;align-self:center;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;padding:7px 14px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);transition:background .3s,color .3s}
.sub2 .cnt svg.i{width:15px;height:15px;transition:transform .3s var(--ease)}
@media (max-width:1000px){
  .subs2{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .sub2{min-height:250px;padding:26px 14px 16px;border-radius:50% 50% 16px 16px / 90px 90px 16px 16px}
  .sub2::before{border-radius:50% 50% 10px 10px / 80px 80px 10px 10px}
  .sub2 .ic{width:48px;height:48px}.sub2 .ic svg.i{width:24px;height:24px}
  .sub2 b{font-size:17px}
  .sub2 small{display:none}
  .sub2 .shelf{height:72px}.sub2 .shelf img{width:38px}
}
/* three covers stand on a shelf line inside the arch; on hover they rise one after another */
.sub2 .shelf{position:relative;z-index:1;display:flex;justify-content:center;align-items:flex-end;gap:8px;height:96px;margin:14px 6px 12px;overflow:hidden;border-bottom:2px solid color-mix(in srgb,var(--c) 55%,transparent)}
.sub2 .shelf img{width:50px;height:auto;border-radius:2px 3px 3px 2px;box-shadow:0 10px 16px -10px rgba(15,27,45,.6);transform:translateY(62%);transition:transform .6s var(--ease)}
.sub2 .shelf img:nth-child(2){width:56px;transition-delay:.07s}
.sub2 .shelf img:nth-child(3){transition-delay:.14s}
.sub2:hover .shelf img,.sub2:focus-visible .shelf img{transform:translateY(4%)}
.sub2:hover .shelf img:nth-child(2),.sub2:focus-visible .shelf img:nth-child(2){transform:translateY(0)}
@media (hover:none){.sub2 .shelf img{transform:translateY(18%)}}
@media (prefers-reduced-motion:reduce){.sub2,.sub2 .shelf img,.sub2 .ic{transition:none}}

/* home: benefits band. Dark strip, cards with a gold border that sweeps around on hover,
   icons inside the logo's eight-point star, a spotlight that follows the pointer, and one small motion per icon */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.whyband{background:var(--night);margin-top:96px;padding:88px 0;position:relative;overflow:hidden}
.whyband::before{content:"";position:absolute;inset:0;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.2'%3E%3Crect x='14' y='14' width='36' height='36'/%3E%3Crect x='14' y='14' width='36' height='36' transform='rotate(45 32 32)'/%3E%3C/g%3E%3C/svg%3E")}
.whyband .why{position:relative;gap:18px}
.whyband .w{--mx:50%;--my:0%;position:relative;isolation:isolate;padding:30px 24px 26px;border:0;border-radius:20px;color:#fff;text-align:center;
  background:radial-gradient(260px circle at var(--mx) var(--my),rgba(212,167,74,.16),transparent 60%),rgba(255,255,255,.04);
  transition:transform .5s var(--ease),background .3s}
.whyband .w::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:-1;
  background:conic-gradient(from var(--ang),rgba(255,255,255,.12) 0deg,rgba(255,255,255,.12) 250deg,var(--gold) 300deg,var(--gold-2) 330deg,rgba(255,255,255,.12) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.whyband .w:hover{transform:translateY(-6px);box-shadow:none}
.whyband .w:hover::before{animation:sweep 2.4s linear infinite}
@keyframes sweep{to{--ang:360deg}}
.whyband .w b{color:#fff;font-size:17px;margin:18px 0 6px}
.whyband .w p{color:#AAB6CC}
/* icon inside an eight-point star, like the logo */
.whyband .w .ic{position:relative;width:76px;height:76px;margin:0 auto;background:none;display:grid;place-items:center;color:var(--night)}
.whyband .w .ic .star,.whyband .w .ic .star::after{position:absolute;inset:12px;border-radius:6px;background:linear-gradient(135deg,var(--gold-2),var(--gold));content:""}
.whyband .w .ic .star{transition:transform .8s var(--ease)}
.whyband .w .ic .star::after{inset:0;transform:rotate(45deg)}
.whyband .w .ic svg.i{position:relative;width:26px;height:26px;stroke-width:2}
.whyband .w:hover .ic .star{transform:rotate(45deg) scale(1.08)}
.whyband .w:hover .ic svg.i{animation:var(--icon-anim) .9s var(--ease)}
.w-truck{--icon-anim:drive}.w-gift{--icon-anim:pop}.w-lang{--icon-anim:flipy}.w-bank{--icon-anim:pulse}
@keyframes drive{30%{transform:translateX(8px)}60%{transform:translateX(-4px)}}
[dir=rtl] .w-truck{--icon-anim:driver}
@keyframes driver{30%{transform:scaleX(-1) translateX(8px)}60%{transform:scaleX(-1) translateX(-4px)}to{transform:scaleX(-1)}}
[dir=rtl] .w-truck .ic svg.i{transform:scaleX(-1)}
@keyframes pop{30%{transform:translateY(-8px) rotate(-10deg)}60%{transform:translateY(0) rotate(6deg)}}
@keyframes flipy{50%{transform:rotateY(180deg)}}
@keyframes pulse{40%{transform:scale(1.25)}}
@media (hover:none){.whyband .w::before{animation:sweep 6s linear infinite}}
@media (max-width:1000px){.whyband{padding:56px 0;margin-top:64px}.whyband .w{padding:22px 14px}.whyband .w .ic{width:64px;height:64px}}
@media (prefers-reduced-motion:reduce){.whyband .w::before{animation:none!important}.whyband .w .ic svg.i{animation:none!important}}

/* the coverflow and the benefits band are both dark: join them into one block instead of leaving a white gap */
.flowsec + .whyband{margin-top:0;padding-top:8px}
.flowsec:has(+ .whyband){padding-bottom:40px}
.flowsec + .whyband::before{-webkit-mask:linear-gradient(transparent,#000 120px);mask:linear-gradient(transparent,#000 120px)}
@media (max-width:1000px){
  .flow{height:350px}
  .flowsec:has(+ .whyband){padding-bottom:24px}
}
.w-book{--icon-anim:pop}.w-user{--icon-anim:pulse}
/* product reviews (WooCommerce template inside the Reviews tab) */
#reviews .commentlist{list-style:none;margin:0 0 24px;padding:0}
#reviews .comment-form label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
#reviews .comment-form input[type=text],#reviews .comment-form input[type=email],#reviews .comment-form textarea,#reviews select{width:100%;box-sizing:border-box;font:inherit;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:#fff}
#reviews .comment-form .submit{min-height:48px;padding:0 26px;border:0;border-radius:26px;background:var(--night);color:#fff;font:inherit;font-weight:700;cursor:pointer}
#reviews .stars a{color:var(--gold);margin-inline-end:6px}
/* the benefits band is the last home section: let it meet the dark footer without a white strip */
main:has(> .whyband:last-child) + footer{margin-top:0}
main:has(> .whyband:last-child) .whyband{padding-bottom:96px}