@font-face{
font-family:"Hacen Maghreb";
src:url("../fonts/HacenMaghrebLt.woff2") format("woff2");
font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
font-family:"Hacen Maghreb";
src:url("../fonts/HacenMaghreb.woff2") format("woff2");
font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
font-family:"Hacen Maghreb";
src:url("../fonts/HacenMaghrebBd.woff2") format("woff2");
font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
font-family:"Hacen Maghreb";
src:url("../fonts/HacenMaghrebBd.woff2") format("woff2");
font-weight:800;font-style:normal;font-display:swap;
}
@font-face{
font-family:"Cairo";
src:url("../fonts/Cairo-latin-var.woff2") format("woff2");
font-weight:200 1000;font-style:normal;font-display:swap;
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,
U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{
--crimson:oklch(0.44 0.19 25);
--crimson-deep:oklch(0.33 0.15 25);
--navy:oklch(0.34 0.16 268);
--navy-deep:oklch(0.24 0.12 268);
--pepsi-1:oklch(0.44 0.16 256);
--pepsi-2:oklch(0.34 0.14 260);
--pepsi-3:oklch(0.27 0.12 264);
--pepsi-field:linear-gradient(165deg,var(--pepsi-1) 0%,var(--pepsi-2) 48%,var(--pepsi-3) 100%);
--pepsi-pill:linear-gradient(148deg,var(--pepsi-1) 0%,var(--pepsi-2) 55%,var(--pepsi-3) 100%);
--pepsi-veil:linear-gradient(165deg,
color-mix(in oklab,var(--pepsi-1) 60%,transparent) 0%,
color-mix(in oklab,var(--pepsi-2) 68%,transparent) 48%,
color-mix(in oklab,var(--pepsi-3) 78%,transparent) 100%);
--wa-1:oklch(0.46 0.112 153);
--wa-2:oklch(0.39 0.098 155);
--wa-3:oklch(0.33 0.084 157);
--navy-darkest:oklch(0.18 0.09 268);
--gold:oklch(0.82 0.14 88);
--gold-deep:oklch(0.72 0.13 80);
--primary:oklch(0.50 0.12 196);
--primary-hover:oklch(0.43 0.12 196);
--primary-tint:oklch(0.50 0.12 196 / 0.10);
--success:oklch(0.52 0.13 150);
--gold-text:oklch(0.55 0.11 80);
--ink:oklch(0.28 0.03 268);
--ink-soft:oklch(0.46 0.02 268);
--paper:oklch(0.99 0.004 250);
--paper-2:oklch(0.965 0.008 250);
--line:oklch(0.90 0.01 258);
--white:oklch(0.995 0.002 250);
--crimson-08:oklch(0.44 0.19 25 / 0.08);
--crimson-12:oklch(0.44 0.19 25 / 0.12);
--navy-06:oklch(0.34 0.16 268 / 0.06);
--radius:18px;
--radius-lg:28px;
--shadow-sm:0 2px 10px oklch(0.34 0.16 268 / 0.08);
--shadow-md:0 18px 40px -18px oklch(0.34 0.16 268 / 0.28);
--shadow-lg:0 40px 80px -30px oklch(0.30 0.14 268 / 0.40);
--header-h:92px;
--header-h-scrolled:72px;
--wrap:1400px;
--ease-out:cubic-bezier(0.16,1,0.3,1);
--ease-out-quart:cubic-bezier(0.25,1,0.5,1);
--dept-dentistry:#007c7d;
--dept-implant:#007d75;
--dept-endo:#007e69;
--dept-ortho:#007b88;
--dept-dental-lab:#00798d;
--dept-prostho:#007892;
--dept-ophthalmology:#00739f;
--dept-x-ray:#166fa5;
--dept-internal-medicine:#2d6ca8;
--dept-general-medicine:#3c69aa;
--dept-iqama-check:#675ca7;
--dept-obgyn:#825396;
--dept-dermatology:#9f495a;
--dept-pediatrics:#9a541b;
--dept-physiotherapy:#327a41;
--dept-laboratory:#007d58;
--dept-pharmacy:#4a772e;
--hero-accent:#2a47a0;
--font-ar:"Hacen Maghreb","Segoe UI",Tahoma,sans-serif;
--font-en:"Cairo","Segoe UI",system-ui,sans-serif;
--font:var(--font-ar);
}
.lang-en{--font:var(--font-en)}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h-scrolled)}
body{
font-family:var(--font);
color:var(--ink);
background:var(--paper);
line-height:1.7;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
}
body.modal-open{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
h1,h2,h3{line-height:1.15;font-weight:700;letter-spacing:-0.01em}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.skip-link{
position:fixed;inset-block-start:8px;inset-inline-start:8px;
background:var(--navy);color:#fff;padding:10px 16px;border-radius:10px;
transform:translateY(-160%);transition:transform .25s var(--ease-out);z-index:200;
}
.skip-link:focus{transform:translateY(0)}
.wrap{width:min(var(--wrap),100% - 48px);margin-inline:auto}
.site-header{
position:fixed;inset-block-start:0;inset-inline:0;z-index:100;
height:var(--header-h);
display:flex;align-items:center;
transition:height .5s var(--ease-out),background .5s var(--ease-out),
box-shadow .5s var(--ease-out),backdrop-filter .5s var(--ease-out);
background:transparent;
}
.header-inner{
width:min(1400px,100% - 48px);
margin-inline:auto;
display:flex;align-items:center;gap:16px;
justify-content:space-between;
}
.header-sheen{
position:absolute;inset-block-end:0;inset-inline:0;height:1px;
background:oklch(0.9 0.01 258 / 0.8);
opacity:0;transition:opacity .5s var(--ease-out);
}
.site-header[data-state="scrolled"]{
height:var(--header-h-scrolled);
background:oklch(1 0 0 / 0.88);
-webkit-backdrop-filter:saturate(1.6) blur(18px);
backdrop-filter:saturate(1.6) blur(18px);
box-shadow:
0 1px 0 oklch(1 0 0 / 0.9) inset,
0 10px 40px -14px oklch(0.34 0.16 268 / 0.30);
border-block-end:1px solid oklch(0.9 0.01 258 / 0.7);
}
.site-header[data-state="scrolled"] .header-sheen{opacity:1}
.brand{position:relative;display:block;flex-shrink:0}
.brand-logo{
height:62px;width:auto;
transition:height .5s var(--ease-out),opacity .45s var(--ease-out),transform .45s var(--ease-out);
}
.brand-logo--dark{
position:absolute;inset-block-start:50%;inset-inline-start:0;
transform:translateY(-50%) scale(0.98);
opacity:0;
}
.site-header[data-state="scrolled"] .brand-logo{height:48px}
.site-header[data-state="scrolled"] .brand-logo--light{opacity:0;transform:scale(1.02)}
.site-header[data-state="scrolled"] .brand-logo--dark{opacity:1;transform:translateY(-50%) scale(1)}
.brand-group{display:flex;align-items:center;gap:14px;flex-shrink:0}
.brand-cbahi{
display:inline-flex;align-items:center;gap:8px;
padding:6px 14px 6px 8px;border-radius:999px;
background:oklch(1 0 0 / 0.94);
border:1px solid oklch(1 0 0 / 0.7);
-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);
box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.9),0 8px 22px -12px oklch(0 0 0 / 0.45);
transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),
background .4s var(--ease-out),border-color .4s var(--ease-out);
}
[dir="rtl"] .brand-cbahi{padding:6px 8px 6px 14px}
.brand-cbahi img{height:30px;width:auto;display:block;flex-shrink:0}
.brand-cbahi__txt{
font-size:0.86rem;font-weight:800;line-height:1;white-space:nowrap;
color:var(--navy);letter-spacing:0.01em;
}
.brand-cbahi:hover{transform:translateY(-2px);background:#fff;
box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.9),0 12px 28px -12px oklch(0 0 0 / 0.55)}
.brand-cbahi.is-active{border-color:oklch(0.82 0.14 88 / 0.75)}
.site-header[data-state="scrolled"] .brand-cbahi{
background:#fff;
border-color:oklch(0.34 0.16 268 / 0.22);
box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.9),0 6px 18px -12px oklch(0.34 0.16 268 / 0.45);
}
.site-header[data-state="scrolled"] .brand-cbahi:hover{border-color:oklch(0.34 0.16 268 / 0.4)}
.main-nav{margin-inline:auto}
.nav-list{display:flex;align-items:center;gap:clamp(4px,0.9vw,16px)}
.nav-link{
position:relative;display:inline-block;padding:10px 3px;
font-weight:700;font-size:0.95rem;
color:oklch(1 0 0 / 0.92);
white-space:nowrap;
transition:color .4s var(--ease-out);
}
.nav-link span{position:relative;z-index:1}
.nav-link::after{
content:"";position:absolute;inset-block-end:2px;inset-inline-start:6px;
width:calc(100% - 12px);height:2.5px;border-radius:3px;
background:var(--gold);
transform:scaleX(0);transform-origin:var(--u-origin,left);
transition:transform .45s var(--ease-out);
}
.nav-link:hover::after,
.nav-link.is-active::after{transform:scaleX(1)}
.nav-link:hover{color:#fff}
.site-header[data-state="scrolled"] .nav-link{color:var(--ink-soft)}
.site-header[data-state="scrolled"] .nav-link:hover,
.site-header[data-state="scrolled"] .nav-link.is-active{color:var(--navy)}
.header-actions{display:flex;align-items:center;gap:14px;flex-shrink:0}
.lang-toggle__text{display:none}
.brand-cbahi__txt{display:none}
.brand-cbahi{padding:4px}
[dir="rtl"] .brand-cbahi{padding:4px}
.lang-toggle{
display:inline-flex;align-items:center;gap:8px;
padding:9px 13px;border-radius:999px;
font-weight:700;font-size:0.95rem;color:#fff;
border:1.5px solid oklch(1 0 0 / 0.35);
background:oklch(1 0 0 / 0.08);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
transition:color .4s var(--ease-out),background-color .4s var(--ease-out),border-color .4s var(--ease-out),transform .4s var(--ease-out),box-shadow .4s var(--ease-out);
}
.lang-toggle__globe{display:inline-flex;width:18px;height:18px}
.lang-toggle__globe svg{width:100%;height:100%}
.lang-toggle:hover{background:oklch(1 0 0 / 0.2);transform:translateY(-1px)}
.site-header[data-state="scrolled"] .lang-toggle{
color:var(--navy);border-color:oklch(0.34 0.16 268 / 0.25);
background:oklch(0.34 0.16 268 / 0.05);
}
.site-header[data-state="scrolled"] .lang-toggle:hover{background:oklch(0.34 0.16 268 / 0.1)}
.btn{
position:relative;display:inline-flex;align-items:center;justify-content:center;
gap:8px;padding:13px 26px;border-radius:999px;
font-weight:700;font-size:1rem;color:#fff;
background:var(--crimson);
box-shadow:0 10px 26px -10px oklch(0.44 0.19 25 / 0.6);
overflow:hidden;isolation:isolate;
transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out);
}
.btn::before{
content:"";position:absolute;inset:0;z-index:-1;
background:var(--navy);
opacity:0;transition:opacity .45s var(--ease-out);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px -10px oklch(0.44 0.19 25 / 0.7)}
.btn:hover::before{opacity:1}
.btn--book .btn__pulse{
position:absolute;inset:0;border-radius:inherit;
background:oklch(1 0 0 / 0.14);
opacity:0;transition:opacity .4s var(--ease-out);
}
.btn--book:hover .btn__pulse{opacity:1}
.btn--book{
color:var(--navy-deep);
background:
linear-gradient(148deg,oklch(1 0 0 / 0.30) 0%,oklch(1 0 0 / 0.10) 44%,transparent 68%),
oklch(1 0 0 / 0.82);
border:0;
-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);
box-shadow:
inset  1px  1px 1px -0.5px oklch(1 0 0 / 0.9),
inset -1px -1px 1px -0.5px oklch(0.30 0.06 262 / 0.22),
0 0 0 1px oklch(1 0 0 / 0.42),
0 12px 28px -14px oklch(0.14 0.06 262 / 0.55);
}
.btn--book::before{background:var(--pepsi-pill)}
.btn--book:hover{
color:#fff;
box-shadow:
inset  1px  1px 1px -0.5px oklch(1 0 0 / 0.5),
0 0 0 1px oklch(1 0 0 / 0.34),
0 20px 38px -14px oklch(0.14 0.06 262 / 0.7);
}
.btn--book .btn__pulse{display:none}
.site-header[data-state="scrolled"] .header-actions .btn--book{
color:#fff;
background:
linear-gradient(148deg,oklch(1 0 0 / 0.20) 0%,oklch(1 0 0 / 0.04) 44%,transparent 68%),
color-mix(in oklab,var(--pepsi-2) 82%,transparent);
box-shadow:
inset  1px  1px 1px -0.5px oklch(1 0 0 / 0.55),
inset -1px -1px 1px -0.5px oklch(0 0 0 / 0.28),
0 0 0 1px oklch(1 0 0 / 0.22),
0 12px 28px -14px color-mix(in oklab,var(--pepsi-3) 65%,transparent);
}
.site-header[data-state="scrolled"] .header-actions .btn--book::before{background:oklch(1 0 0 / 0.92)}
.site-header[data-state="scrolled"] .header-actions .btn--book:hover{
color:var(--navy-deep);
box-shadow:
inset 1px 1px 1px -0.5px oklch(1 0 0 / 0.9),
0 0 0 1px oklch(1 0 0 / 0.5),
0 20px 38px -14px oklch(0.14 0.06 262 / 0.5);
}
.nav-burger{display:none;width:46px;height:46px;border-radius:14px;position:relative;
border:1.5px solid oklch(1 0 0 / 0.3);background:oklch(1 0 0 / 0.08)}
.nav-burger span{
position:absolute;inset-inline:11px;height:2.5px;border-radius:3px;background:#fff;
transition:transform .4s var(--ease-out),opacity .3s var(--ease-out),background .4s var(--ease-out);
}
.nav-burger span:nth-child(1){inset-block-start:15px}
.nav-burger span:nth-child(2){inset-block-start:22px}
.nav-burger span:nth-child(3){inset-block-start:29px}
.site-header[data-state="scrolled"] .nav-burger{border-color:var(--line);background:var(--paper-2)}
.site-header[data-state="scrolled"] .nav-burger span{background:var(--navy)}
body.menu-open .nav-burger span{background:#fff}
body.menu-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .nav-burger span:nth-child(2){opacity:0}
body.menu-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{
position:fixed;inset:0;z-index:99;
display:flex;flex-direction:column;
opacity:0;visibility:hidden;
transition:opacity .4s var(--ease-out),visibility .4s;
}
body.menu-open .mobile-menu{opacity:1;visibility:visible}
body.menu-open{overflow:hidden}
.mobile-menu__bg{
position:absolute;inset:0;overflow:hidden;
background:var(--pepsi-field);
clip-path:circle(0% at var(--burger-x,90%) 6%);
transition:clip-path .65s var(--ease-out);
}
body.menu-open .mobile-menu__bg{clip-path:circle(150% at var(--burger-x,90%) 6%)}
.mm-glow{position:absolute;border-radius:50%;filter:blur(80px);mix-blend-mode:screen;pointer-events:none}
.mm-glow--acc{width:90%;aspect-ratio:1.1;inset-block-start:-18%;inset-inline-end:-25%;
background:color-mix(in oklab,var(--hero-accent) 72%,transparent)}
.mm-glow--gold{width:70%;aspect-ratio:1.2;inset-block-end:-14%;inset-inline-start:-22%;
background:color-mix(in oklab,var(--gold) 22%,transparent)}
.mobile-menu__scroll{
position:relative;z-index:1;flex:1;min-height:0;
overflow-y:auto;overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
padding-block-start:calc(var(--header-h) + 6px);
padding-block-end:18px;
padding-inline:max(20px,env(safe-area-inset-left)) max(20px,env(safe-area-inset-right));
scrollbar-width:none;
}
.mobile-menu__scroll::-webkit-scrollbar{width:0;height:0}
.mm-list{display:flex;flex-direction:column}
.mm-item{
opacity:0;transform:translate3d(var(--mm-x,-20px),0,0);
transition:opacity .45s var(--ease-out),transform .45s var(--ease-out);
transition-delay:calc(var(--i) * 40ms + 120ms);
}
[dir="rtl"] .mm-item{--mm-x:20px}
body.menu-open .mm-item{opacity:1;transform:none}
.mm-link{
position:relative;
display:grid;grid-template-columns:auto minmax(0,1fr) auto;
align-items:center;gap:14px;
padding-block:12px;padding-inline:12px;
margin-inline:-12px;
border-radius:14px;
color:#fff;
border-block-end:1px solid oklch(1 0 0 / 0.07);
transition:background .3s var(--ease-out),color .3s var(--ease-out);
}
.mm-link__n{
font-size:0.74rem;font-weight:800;letter-spacing:0.04em;
color:var(--gold);opacity:0.9;
font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
min-width:2.2ch;
transition:opacity .3s var(--ease-out);
}
.mm-link__t{font-size:1.2rem;font-weight:700;line-height:1.25}
.lang-en .mm-link__t{font-family:var(--font-en)}
.mm-link__go{width:17px;height:17px;opacity:0.28;transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
[dir="rtl"] .mm-link__go{transform:scaleX(-1)}
.mm-link:hover,.mm-link:focus-visible{background:oklch(1 0 0 / 0.06)}
.mm-link:hover .mm-link__go,.mm-link:focus-visible .mm-link__go{opacity:0.7}
.mm-link.is-current{background:oklch(1 0 0 / 0.07);border-block-end-color:transparent}
.mm-link.is-current .mm-link__t{color:var(--gold)}
.mm-link.is-current .mm-link__n{opacity:1}
.mm-link.is-current .mm-link__go{opacity:0.55}
.mm-foot{
margin-block-start:22px;
display:flex;flex-direction:column;gap:10px;
opacity:0;transform:translateY(16px);
transition:opacity .45s var(--ease-out),transform .45s var(--ease-out);
transition-delay:calc(var(--i) * 40ms + 120ms);
}
body.menu-open .mm-foot{opacity:1;transform:none}
.mm-cbahi{
display:flex;align-items:center;gap:12px;
padding:12px 14px;border-radius:16px;
background:oklch(1 0 0 / 0.05);border:1px solid oklch(1 0 0 / 0.12);
color:#fff;
}
.mm-cbahi img{width:44px;height:44px;object-fit:contain;border-radius:50%;background:#fff;padding:5px;flex:none}
.mm-cbahi span{display:flex;flex-direction:column;gap:2px;min-width:0}
.mm-cbahi b{font-size:0.92rem;font-weight:800}
.mm-cbahi i{font-style:normal;font-size:0.78rem;color:oklch(1 0 0 / 0.66)}
.mm-tel{
display:flex;align-items:baseline;justify-content:space-between;gap:12px;
padding:12px 14px;border-radius:16px;
background:oklch(1 0 0 / 0.05);border:1px solid oklch(1 0 0 / 0.12);
color:#fff;
}
.mm-tel__k{font-size:0.78rem;color:oklch(1 0 0 / 0.66)}
.mm-tel__v{font-size:1rem;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}
.mm-lang{
align-self:flex-start;
display:inline-flex;align-items:center;gap:8px;
padding:9px 16px;border-radius:999px;
border:1px solid oklch(1 0 0 / 0.28);color:#fff;
font-size:0.86rem;font-weight:700;
transition:background .3s var(--ease-out);
}
.mm-lang:hover{background:oklch(1 0 0 / 0.12)}
.mm-lang svg{width:16px;height:16px}
.mm-dock{
position:relative;z-index:1;flex:none;
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
padding-block:12px max(12px,env(safe-area-inset-bottom));
padding-inline:max(20px,env(safe-area-inset-left)) max(20px,env(safe-area-inset-right));
background:var(--pepsi-3);
border-block-start:1px solid oklch(1 0 0 / 0.1);
opacity:0;transform:translateY(14px);
transition:opacity .45s var(--ease-out) .2s,transform .45s var(--ease-out) .2s;
}
body.menu-open .mm-dock{opacity:1;transform:none}
.mm-dock .btn{width:100%;padding-inline:10px;font-size:0.9rem;white-space:nowrap}
body.menu-open .site-header,
body.menu-open .site-header[data-state="scrolled"]{
background:transparent;box-shadow:none;border-block-end-color:transparent;
-webkit-backdrop-filter:none;backdrop-filter:none;
}
body.menu-open .site-header .header-sheen{opacity:0}
body.menu-open .site-header[data-state="scrolled"] .brand-logo--light,
body.menu-open .site-header .brand-logo--light{opacity:1;transform:scale(1)}
body.menu-open .site-header[data-state="scrolled"] .brand-logo--dark,
body.menu-open .site-header .brand-logo--dark{opacity:0}
@media (prefers-reduced-motion:reduce){
.mobile-menu__bg{transition:none;clip-path:none}
.mm-item,.mm-foot,.mm-dock{transition:opacity .2s linear;transform:none}
}
.hero-slider{
position:relative;
height:100svh;min-height:620px;
background:var(--navy-deep);
overflow:hidden;
}
.slides{position:absolute;inset:0}
.slide{
position:absolute;inset:0;
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .9s var(--ease-out),visibility .9s;
}
.slide.is-active{opacity:1;visibility:visible;pointer-events:auto}
.slide__media{position:absolute;inset:0;overflow:hidden}
.slide__media img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.12)}
.slide.is-active .slide__media img{animation:kenburns 8s var(--ease-out-quart) forwards}
@keyframes kenburns{to{transform:scale(1)}}
.slide__tint{
position:absolute;inset:0;
--tint-floor-a:55%;
--tint-floor-h:62%;
background:
linear-gradient(to bottom,color-mix(in oklab,var(--pepsi-3) 58%,transparent) 0%,transparent 24%),
linear-gradient(to top,color-mix(in oklab,var(--pepsi-3) var(--tint-floor-a),transparent) 0%,transparent var(--tint-floor-h)),
var(--pepsi-veil);
}
.slide--navy{background:var(--navy-deep)}
.slide--crimson{background:var(--crimson-deep)}
.slide__inner{
position:relative;z-index:3;height:100%;
display:flex;align-items:flex-end;
padding-block:calc(var(--header-h) + 20px) 96px;
}
.slide__content{max-width:640px;color:#fff}
.slide__content .eyebrow,
.slide__content h1,.slide__content h2,
.slide__content .slide__role,
.slide__content .slide__lead,
.slide__content .slide__cta{
opacity:0;transform:translateY(30px);
}
.slide.is-active .slide__content .eyebrow{animation:rise .8s var(--ease-out) .15s forwards}
.slide.is-active .slide__content h1,
.slide.is-active .slide__content h2{animation:rise .8s var(--ease-out) .28s forwards}
.slide.is-active .slide__content .slide__role{animation:rise .8s var(--ease-out) .40s forwards}
.slide.is-active .slide__content .slide__lead{animation:rise .8s var(--ease-out) .52s forwards}
.slide.is-active .slide__content .slide__cta{animation:rise .8s var(--ease-out) .64s forwards}
@keyframes rise{to{opacity:1;transform:none}}
.eyebrow{
display:inline-flex;align-items:center;gap:10px;
padding:8px 16px;border-radius:999px;margin-block-end:22px;
font-weight:700;font-size:0.92rem;
background:oklch(1 0 0 / 0.1);border:1px solid oklch(1 0 0 / 0.22);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px oklch(0.82 0.14 88 / 0.3)}
.slide__content h1,.slide__content h2{
font-family:var(--font);font-weight:800;line-height:1.08;
font-size:clamp(2.4rem,5.4vw,4.4rem);margin-block-end:16px;
text-shadow:0 6px 40px oklch(0.20 0.10 268 / 0.55);
}
.lang-en .slide__content h1,.lang-en .slide__content h2{font-family:var(--font-en)}
.slide__role{
font-size:clamp(1.05rem,1.9vw,1.45rem);font-weight:700;color:var(--gold);
margin-block-end:18px;
}
.slide__lead{font-size:clamp(1.02rem,1.5vw,1.22rem);max-width:54ch;color:oklch(1 0 0 / 0.9);margin-block-end:32px}
.slide__cta{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.btn--ghost{
background:linear-gradient(148deg,oklch(1 0 0 / 0.20) 0%,oklch(1 0 0 / 0.10) 100%);
border:0;
-webkit-backdrop-filter:blur(14px) saturate(1.5);
backdrop-filter:blur(14px) saturate(1.5);
box-shadow:
inset 0 0 0 1px oklch(1 0 0 / 0.34),
inset 0 1px 0 0 oklch(1 0 0 / 0.45),
0 10px 26px -16px oklch(0 0 0 / 0.5);
}
.btn--ghost::before{background:oklch(1 0 0 / 0.20)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1px oklch(1 0 0 / 0.5),inset 0 1px 0 0 oklch(1 0 0 / 0.55),0 14px 30px -16px oklch(0 0 0 / 0.55)}
.btn--lg{padding:16px 34px;font-size:1.08rem}
.slider-ui{
position:absolute;inset-block-end:30px;inset-inline:0;z-index:6;
display:flex;align-items:center;justify-content:center;gap:20px;
}
.slider-arrow{
width:52px;height:52px;border-radius:50%;
display:grid;place-items:center;color:#fff;
border:1.5px solid oklch(1 0 0 / 0.35);background:oklch(1 0 0 / 0.08);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
transition:background .4s var(--ease-out),transform .4s var(--ease-out),border-color .4s var(--ease-out);
}
.slider-arrow:hover{background:var(--gold);border-color:var(--gold);color:var(--navy-deep);transform:scale(1.06)}
.slider-arrow svg{width:22px;height:22px}
[dir="rtl"] .slider-arrow svg{transform:scaleX(-1)}
.slider-dots{display:flex;align-items:center;gap:12px}
.slider-dot{
width:12px;height:12px;border-radius:50%;padding:0;
background:oklch(1 0 0 / 0.3);position:relative;
transition:background .4s var(--ease-out),transform .4s var(--ease-out);
}
.slider-dot::after{
content:"";position:absolute;inset:-6px;border-radius:50%;
border:1.5px solid transparent;transition:border-color .4s var(--ease-out);
}
.slider-dot[aria-current="true"]{background:var(--gold);transform:scale(1.05)}
.slider-dot[aria-current="true"]::after{border-color:oklch(0.82 0.14 88 / 0.6)}
.stat{text-align:center}
.stat__num{font-size:clamp(1.8rem,3.6vw,2.8rem);font-weight:800;color:var(--gold-text);font-family:var(--font)}
.lang-en .stat__num{font-family:var(--font-en)}
.stat__label{font-size:0.95rem;color:oklch(1 0 0 / 0.82)}
.section{padding-block:clamp(46px,5.4vw,82px);position:relative}
.section--tint{background:var(--paper-2)}
.section-head{max-width:none;margin-inline:auto;margin-block-end:clamp(28px,2.9vw,40px);text-align:center}
.section--center .section-head{margin-inline:auto;text-align:center}
.tag{
display:inline-flex;align-items:center;gap:8px;
font-weight:700;font-size:0.9rem;color:var(--crimson);
text-transform:uppercase;letter-spacing:0.08em;margin-block-end:14px;
}
.tag::before{content:"";width:26px;height:2px;background:var(--crimson);border-radius:2px}
.section-head h2{font-size:clamp(1.9rem,4vw,3rem);color:var(--navy);font-weight:800;font-family:var(--font)}
.lang-en .section-head h2{font-family:var(--font-en)}
.section-head p{margin-block-start:14px;color:var(--ink-soft);font-size:1.1rem;max-width:640px;margin-inline:auto}
.dep{
position:relative;padding:26px;border-radius:var(--radius);overflow:hidden;
background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm);
transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .5s var(--ease-out);
min-height:180px;display:flex;flex-direction:column;justify-content:space-between;
}
.dep:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent}
.dep h3{font-size:1.25rem;color:var(--navy);margin-block:16px 6px;position:relative}
.dep p{color:var(--ink-soft);font-size:0.98rem;position:relative}
.why-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.why{padding:30px 26px;border-radius:var(--radius);background:var(--white);border:1px solid var(--line);
position:relative;transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.why:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.why__n{font-family:var(--font-en);font-weight:800;font-size:2.4rem;color:var(--navy)}
.why h3{font-size:1.2rem;color:var(--navy);margin-block:8px 8px}
.why p{color:var(--ink-soft);font-size:0.98rem}
.why__bar{height:3px;width:42px;border-radius:3px;margin-block-start:16px;background:var(--gold);transition:width .5s var(--ease-out)}
.why:hover .why__bar{width:100%}
.doc{border-radius:var(--radius-lg);overflow:hidden;background:var(--white);border:1px solid var(--line);
box-shadow:var(--shadow-sm);transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.doc:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.cta{
position:relative;overflow:hidden;color:#fff;text-align:center;
border-radius:var(--radius-lg);padding:clamp(44px,7vw,84px);
background:var(--crimson-deep);box-shadow:var(--shadow-lg);
}
.cta h2{font-size:clamp(1.8rem,4vw,3rem);font-weight:800;font-family:var(--font)}
.lang-en .cta h2{font-family:var(--font-en)}
.cta p{max-width:52ch;margin:16px auto 30px;color:oklch(1 0 0 / 0.9);font-size:1.12rem}
.btn--gold{background:var(--gold);color:var(--navy-deep);box-shadow:0 14px 34px -10px oklch(0.72 0.13 80 / 0.7)}
.btn--gold::before{background:var(--gold-deep)}
.glass-footer{
--gf-accent:#3D6EF5;
--gf-accent-lit:#9dc0ff;
--gf-field:var(--pepsi-2);
--gf-ink:#ffffff;
--gf-body:oklch(1 0 0 / 0.94);
position:relative;overflow:hidden;isolation:isolate;
margin-block-start:clamp(44px,5.2vw,76px);
padding-block:clamp(34px,4.2vw,58px) 26px;
color:var(--gf-body);
background:var(--pepsi-field);
}
.glass-footer::before{
content:"";position:absolute;inset-block-start:0;inset-inline:0;height:1px;z-index:2;
background:linear-gradient(90deg,transparent,
color-mix(in oklab,var(--gf-accent-lit) 70%,transparent),transparent);
}
.gf-atmosphere{position:absolute;inset:0;z-index:0;pointer-events:none}
.gf-glow{position:absolute;border-radius:50%;filter:blur(90px)}
.gf-glow--navy{width:58%;aspect-ratio:1.4;inset-block-start:-24%;inset-inline-start:-12%;
background:color-mix(in oklab,var(--gf-accent) 58%,transparent);animation:gf-breathe 12s ease-in-out infinite}
.gf-glow--gold{width:44%;aspect-ratio:1.2;inset-block-end:-24%;inset-inline-end:-8%;
background:color-mix(in oklab,#5f8dff 46%,transparent);animation:gf-breathe 10s ease-in-out infinite reverse}
.gf-glow--red{width:36%;aspect-ratio:1;inset-block-end:16%;inset-inline-start:38%;
background:color-mix(in oklab,#7aa5ff 34%,transparent);animation:gf-breathe 14s ease-in-out infinite}
@keyframes gf-breathe{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.16);opacity:.95}}
.gf-particles{position:absolute;inset:0;display:block}
.gf-particles i{
position:absolute;inset-block-end:-3%;border-radius:50%;
width:5px;aspect-ratio:1;background:oklch(1 0 0 / 0.5);
animation:gf-rise linear infinite;
}
.gf-particles i:nth-child(3n){background:var(--gf-accent-lit);
box-shadow:0 0 9px 1px color-mix(in oklab,var(--gf-accent-lit) 60%,transparent)}
.gf-particles i:nth-child(1){inset-inline-start:5%;animation-duration:13s;animation-delay:0s;scale:.6}
.gf-particles i:nth-child(2){inset-inline-start:12%;animation-duration:17s;animation-delay:3s}
.gf-particles i:nth-child(3){inset-inline-start:20%;animation-duration:11s;animation-delay:6s;scale:.5}
.gf-particles i:nth-child(4){inset-inline-start:28%;animation-duration:19s;animation-delay:1.5s;scale:.8}
.gf-particles i:nth-child(5){inset-inline-start:35%;animation-duration:14s;animation-delay:8s}
.gf-particles i:nth-child(6){inset-inline-start:43%;animation-duration:16s;animation-delay:4s;scale:.55}
.gf-particles i:nth-child(7){inset-inline-start:51%;animation-duration:12s;animation-delay:9s;scale:.7}
.gf-particles i:nth-child(8){inset-inline-start:59%;animation-duration:18s;animation-delay:2s}
.gf-particles i:nth-child(9){inset-inline-start:67%;animation-duration:13s;animation-delay:7s;scale:.6}
.gf-particles i:nth-child(10){inset-inline-start:74%;animation-duration:15s;animation-delay:5s;scale:.85}
.gf-particles i:nth-child(11){inset-inline-start:81%;animation-duration:11s;animation-delay:10s;scale:.5}
.gf-particles i:nth-child(12){inset-inline-start:88%;animation-duration:17s;animation-delay:0.5s}
.gf-particles i:nth-child(13){inset-inline-start:93%;animation-duration:14s;animation-delay:6.5s;scale:.65}
.gf-particles i:nth-child(14){inset-inline-start:97%;animation-duration:20s;animation-delay:3.5s;scale:.75}
@keyframes gf-rise{
0%{transform:translateY(0);opacity:0}
8%{opacity:.85}
85%{opacity:.3}
100%{transform:translateY(-105vh) translateX(14px);opacity:0}
}
.gf-chip{
position:absolute;border-radius:22px;
background:oklch(1 0 0 / 0.07);
border:1px solid oklch(1 0 0 / 0.20);
box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.32),0 12px 30px -18px oklch(0 0 0 / 0.55);
-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
animation:gf-shimmer 10s ease-in-out infinite;
}
@keyframes gf-shimmer{0%,100%{opacity:.5}50%{opacity:.9}}
.gf-chip--1{width:130px;height:86px;inset-block-start:12%;inset-inline-start:5%;rotate:-8deg}
.gf-chip--2{width:92px;height:92px;inset-block-start:10%;inset-inline-end:8%;rotate:12deg;border-radius:50%}
.gf-inner{position:relative;z-index:1}
.glass-footer [data-depth]{will-change:transform}
.gf-crest,.gf-panel{
position:relative;isolation:isolate;
--gf-panel-fill:0.07;
background:
linear-gradient(148deg,
oklch(1 0 0 / calc(var(--gf-panel-fill) + 0.02)) 0%,
oklch(1 0 0 / var(--gf-panel-fill))              46%,
oklch(1 0 0 / calc(var(--gf-panel-fill) - 0.02)) 100%);
-webkit-backdrop-filter:blur(22px) saturate(1.6);
backdrop-filter:blur(22px) saturate(1.6);
box-shadow:
inset  1.5px  1.5px 1px -1px oklch(1 0 0 / 0.95),
inset -1.5px -1.5px 1px -1px oklch(0 0 0 / 0.38),
inset  0  14px 26px -18px oklch(1 0 0 / 0.8),
inset  0 -14px 28px -20px oklch(0 0 0 / 0.5),
0 0 0 1px oklch(1 0 0 / 0.38),
0 26px 54px -30px oklch(0 0 0 / 0.62),
0 0 60px -14px color-mix(in oklab,var(--gf-accent) 48%,transparent);
transition:background .5s var(--ease-out),box-shadow .5s var(--ease-out),
transform .5s var(--ease-out-quart);
}
.gf-crest::before,.gf-panel::before{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
border-radius:inherit;padding:5px;
background:
linear-gradient(176deg,transparent calc(var(--gf-sweep,40%) - 18%),
oklch(1 0 0 / 0.75) var(--gf-sweep,40%),
transparent calc(var(--gf-sweep,40%) + 18%)),
linear-gradient(128deg,
oklch(0.86 0.15 208 / 0.55) 0%,transparent 28%,
transparent 72%,oklch(0.82 0.15 348 / 0.42) 100%),
oklch(1 0 0 / 0.24);
-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,linear-gradient(#000 0 0);
mask-composite:exclude;
mix-blend-mode:screen;
}
@property --gf-sweep{syntax:'<percentage>';initial-value:40%;inherits:false}
@supports (animation-timeline:view()){
@media (prefers-reduced-motion:no-preference){
.gf-crest,.gf-panel{
animation:gf-rim-sweep linear both;
animation-timeline:view();
animation-range:entry 0% cover 60%;
}
@keyframes gf-rim-sweep{from{--gf-sweep:-20%}to{--gf-sweep:120%}}
}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.gf-crest,.gf-panel{background:color-mix(in oklab,var(--pepsi-3) 86%,white 14%)}
.gf-crest::before,.gf-panel::before{display:none}
}
.gf-crest{
overflow:hidden;
border-radius:30px;
padding:clamp(24px,2.6vw,34px) clamp(20px,3vw,38px);
text-align:center;
display:grid;
grid-template-columns:auto minmax(0,auto);
justify-content:center;align-items:center;
column-gap:clamp(20px,3vw,38px);row-gap:12px;
animation:gf-float 9s ease-in-out infinite;
}
.gf-crest > .gf-seal{grid-column:1;grid-row:1 / span 2;align-self:center}
.gf-crest > .gf-tagline{grid-column:2;grid-row:1}
.gf-crest > .gf-social{grid-column:2;grid-row:2;justify-content:center}
.gf-crest > .gf-tagline{
max-width:56ch;
font-size:clamp(1.04rem,1.55vw,1.24rem);
line-height:1.62;
}
@keyframes gf-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.gf-crest::after{
content:"";position:absolute;inset-block-start:0;inset-inline:0;height:2px;
background:linear-gradient(90deg,transparent,
var(--gf-accent-lit) 45%,oklch(1 0 0 / 0.9) 62%,transparent);
opacity:0.85;pointer-events:none;
}
.gf-seal{
position:relative;isolation:isolate;
display:block;
inline-size:clamp(96px,11vw,128px);
aspect-ratio:1;border-radius:50%;
}
.gf-seal__ring,.gf-seal__spark{
position:absolute;inset:-9px;border-radius:50%;
padding:3px;pointer-events:none;
-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,linear-gradient(#000 0 0);mask-composite:exclude;
}
.gf-seal__ring{
z-index:1;opacity:0.62;
background:conic-gradient(from 215deg,
#01647a,#00a39e,#66c6e6,#1ab6c3,#5fc0c4,#f28b4a,#ec6642,#e84333,#c82f23,#04715c,#008f7b,#01647a);
filter:saturate(1.15);
}
.gf-seal__spark{
z-index:2;
background:conic-gradient(from var(--ah-frame-a),
transparent 0deg,transparent 285deg,
oklch(0.85 0.12 200 / 0.85) 315deg,#ffffff 338deg,oklch(0.88 0.14 78 / 0.9) 352deg,transparent 360deg);
filter:drop-shadow(0 0 6px oklch(0.9 0.12 200 / 0.75));
animation:ah-frame-flow 4.6s linear infinite;
}
.gf-seal::after{
content:"";position:absolute;inset:-14%;z-index:-1;border-radius:50%;
background:conic-gradient(from 215deg,#01647a,#66c6e6,#f28b4a,#e84333,#04715c,#01647a);
filter:blur(26px);opacity:0.42;
}
.gf-logo{
inline-size:100%;block-size:100%;
object-fit:contain;border-radius:50%;
}
@media (prefers-reduced-motion:reduce){.gf-seal__spark{animation:none}}
.gf-tagline{max-width:60ch;color:var(--gf-body);font-size:1rem;line-height:1.7}
.gf-social{display:flex;gap:11px}
.gf-social a{
width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
color:#fff;
background:oklch(1 0 0 / 0.14);border:1px solid oklch(1 0 0 / 0.30);
box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.38);
-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
transition:background .35s var(--ease-out),color .35s var(--ease-out),
transform .35s var(--ease-out),box-shadow .35s var(--ease-out);
}
.gf-social a:hover{
background:var(--gf-accent);color:#fff;transform:translateY(-4px);
box-shadow:0 14px 28px -12px color-mix(in oklab,var(--gf-accent) 85%,transparent),
inset 0 1px 0 oklch(1 0 0 / 0.45);
}
.gf-social svg{width:18px;height:18px}
@media (max-width:620px){
.gf-crest{
grid-template-columns:minmax(0,1fr);
justify-items:center;text-align:center;
}
.gf-crest > .gf-seal{grid-column:1;grid-row:1}
.gf-crest > .gf-tagline{grid-column:1;grid-row:2}
.gf-crest > .gf-social{grid-column:1;grid-row:3}
}
.gf-sweep{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.gf-sweep::before{
content:"";position:absolute;inset-block:-40%;width:34%;inset-inline-start:-60%;
background:linear-gradient(100deg,transparent 20%,oklch(1 0 0 / 0.34) 50%,transparent 80%);
transform:skewX(-14deg);
animation:gf-sweep 8.5s var(--ease-out-quart) infinite;
}
@keyframes gf-sweep{0%,55%{inset-inline-start:-60%}85%,100%{inset-inline-start:160%}}
.gf-grid{
display:grid;gap:18px;margin-block-start:20px;
grid-template-columns:repeat(3,minmax(0,1fr));
grid-template-areas:"links contact map";
align-items:stretch;
}
.gf-panel--links{grid-area:links}
.gf-panel--contact{grid-area:contact;display:flex;flex-direction:column}
.gf-panel{border-radius:24px;padding:24px 26px 26px}
.gf-panel:hover{
transform:translateY(-4px);
background:
linear-gradient(148deg,
oklch(1 0 0 / calc(var(--gf-panel-fill) + 0.15)) 0%,
oklch(1 0 0 / calc(var(--gf-panel-fill) + 0.10)) 46%,
oklch(1 0 0 / calc(var(--gf-panel-fill) + 0.06)) 100%);
box-shadow:
inset  1.5px  1.5px 1px -1px oklch(1 0 0 / 1),
inset -1.5px -1.5px 1px -1px oklch(0 0 0 / 0.34),
inset  0  14px 26px -18px oklch(1 0 0 / 0.95),
inset  0 -14px 28px -20px oklch(0 0 0 / 0.45),
0 0 0 1px oklch(1 0 0 / 0.38),
0 34px 62px -30px oklch(0 0 0 / 0.65),
0 0 76px -12px color-mix(in oklab,var(--gf-accent) 60%,transparent);
}
.gf-panel h4{
color:var(--gf-ink);font-size:1.02rem;margin-block-end:15px;
display:flex;align-items:center;gap:9px;
}
.gf-panel h4::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--gf-accent-lit)}
.gf-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 18px}
.gf-links a{color:var(--gf-body);transition:color .3s var(--ease-out),padding .3s var(--ease-out)}
.gf-links a:hover{color:var(--gf-accent-lit);padding-inline-start:7px}
.gf-contact li{display:flex;gap:11px;margin-block-end:12px;align-items:flex-start;color:var(--gf-body)}
.gf-contact a{color:var(--gf-body);transition:color .3s var(--ease-out)}
.gf-contact a:hover{color:var(--gf-accent-lit)}
.gf-contact svg{width:18px;height:18px;color:var(--gf-accent-lit);flex-shrink:0;margin-block-start:3px}
.gf-hours__k{display:block;font-weight:800;color:#fff;font-size:0.82rem}
.gf-book{
margin-block-start:auto;align-self:stretch;
display:inline-flex;align-items:center;justify-content:center;gap:9px;
padding:11px 22px;border-radius:999px;font-weight:800;font-size:0.92rem;
color:var(--navy-deep);background:var(--gf-accent-lit);
box-shadow:0 14px 30px -12px color-mix(in oklab,var(--gf-accent-lit) 55%,transparent),
inset 0 1px 0 oklch(1 0 0 / 0.6);
transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background .35s var(--ease-out);
}
.gf-book:hover{
transform:translateY(-3px);background:#fff;
box-shadow:0 22px 42px -12px color-mix(in oklab,var(--gf-accent-lit) 80%,transparent),
inset 0 1px 0 #fff;
}
.gf-book svg{width:16px;height:16px}
[dir="rtl"] .gf-book svg{transform:scaleX(-1)}
.gf-panel--map{grid-area:map;padding:20px;display:flex;flex-direction:column}
.gf-map__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-block-end:14px}
.gf-map__head h4{margin-block-end:0}
.gf-map__dir{
display:inline-flex;align-items:center;gap:7px;
font-weight:800;font-size:0.85rem;color:#fff;
padding:7px 14px;border-radius:999px;
background:oklch(1 0 0 / 0.14);border:1px solid oklch(1 0 0 / 0.30);
box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.38);
-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
transition:color .3s var(--ease-out),background .3s var(--ease-out),transform .3s var(--ease-out);
}
.gf-map__dir svg{width:15px;height:15px;color:var(--gf-accent-lit)}
.gf-map__dir:hover{color:var(--navy-deep);background:var(--gf-accent-lit);transform:translateY(-2px)}
.gf-map__dir:hover svg{color:var(--navy-deep)}
.gf-map__frame{
position:relative;border-radius:18px;overflow:hidden;
flex:1;min-block-size:210px;
border:1px solid oklch(1 0 0 / 0.22);
box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.3),0 16px 34px -22px oklch(0 0 0 / 0.55);
}
.gf-map__frame > .chmap{block-size:100%}
.gf-map__frame::after{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gf-accent-lit) 18%,transparent);
z-index:2;
}
.gf-map__frame .chmap__card{max-inline-size:none;inset-inline:10px;padding:9px 12px}
.gf-map__frame .chmap__card-v{font-size:0.84rem}
.gf-bottom{
margin-block-start:26px;padding:4px 24px 0;
display:flex;justify-content:center;align-items:center;
gap:clamp(14px,3vw,34px);flex-wrap:wrap;text-align:center;
font-size:0.82rem;color:oklch(1 0 0 / 0.62);
}
.gf-by{
display:inline-flex;align-items:center;gap:9px;
color:oklch(1 0 0 / 0.5);font-size:0.76rem;font-weight:600;
transition:color .35s var(--ease-out);
}
.gf-by img{
height:17px;width:auto;display:block;
opacity:0.55;transition:opacity .35s var(--ease-out),filter .35s var(--ease-out);
}
.gf-by:hover{color:oklch(1 0 0 / 0.9)}
.gf-by:hover img{
opacity:1;
filter:drop-shadow(0 0 10px color-mix(in oklab,var(--gf-accent-lit) 55%,transparent));
}
.gf-by:focus-visible{outline:2px solid var(--gf-accent-lit);outline-offset:4px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
.gf-crest,.gf-glow,.gf-particles i,.gf-chip,.gf-logo,.gf-sweep::before{
animation:none !important;
}
.gf-crest,.gf-panel{transition:none !important;animation:none !important}
.gf-panel:hover{transform:none}
}
.about-hero{
--ah-gold:oklch(0.44 0.13 78);
position:relative;overflow:hidden;isolation:isolate;
display:block;
padding-block:clamp(36px,5vh,66px);
margin-block-start:clamp(28px,3.6vw,56px);
color:#fff;
background:var(--navy-darkest);
perspective:1500px;
}
.ah-env{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ah-env > *{position:absolute}
.ah-sky{
inset:0;
background:
radial-gradient(130% 78% at 50% 118%,oklch(0.74 0.11 196 / 0.62),oklch(0.54 0.10 205 / 0.34) 34%,transparent 62%),
radial-gradient(100% 65% at 78% 8%,oklch(0.46 0.10 242 / 0.55),transparent 60%),
linear-gradient(178deg,
oklch(0.15 0.06 266) 0%,
oklch(0.19 0.08 258) 34%,
oklch(0.26 0.09 236) 64%,
oklch(0.38 0.09 206) 100%);
}
.ah-sky::after{
content:"";position:absolute;inset:0;
background:
linear-gradient(oklch(0.92 0.05 200 / 0.05) 1px,transparent 1px) 0 0 / 100% 64px,
linear-gradient(90deg,oklch(0.92 0.05 200 / 0.05) 1px,transparent 1px) 0 0 / 64px 100%;
mask-image:radial-gradient(78% 68% at 50% 26%,#000 0%,transparent 80%);
-webkit-mask-image:radial-gradient(78% 68% at 50% 26%,#000 0%,transparent 80%);
}
.ah-aurora{
inset:-20% -10%;
background:
radial-gradient(38% 30% at 24% 32%,oklch(0.58 0.11 216 / 0.44),transparent 70%),
radial-gradient(32% 26% at 74% 26%,oklch(0.74 0.10 190 / 0.30),transparent 72%);
filter:blur(24px);
animation:ah-aurora 22s ease-in-out infinite alternate;
mix-blend-mode:screen;
}
@keyframes ah-aurora{
0%{transform:translate3d(-3%,-1%,0) scale(1.02);opacity:.8}
100%{transform:translate3d(4%,2%,0) scale(1.08);opacity:1}
}
.ah-clouds{inset:-8% -30%;will-change:transform}
.ah-clouds::before{
content:"";position:absolute;inset:0;
background:
radial-gradient(28% 44% at 12% 30%,oklch(0.74 0.04 232 / 0.18),transparent 60%),
radial-gradient(34% 52% at 44% 22%,oklch(0.80 0.03 220 / 0.15),transparent 62%),
radial-gradient(26% 42% at 74% 34%,oklch(0.76 0.05 198 / 0.17),transparent 60%),
radial-gradient(30% 46% at 92% 24%,oklch(0.74 0.04 232 / 0.13),transparent 62%);
filter:blur(14px);
animation:ah-drift 60s linear infinite;
}
.ah-clouds--near::before{
filter:blur(9px);
background:
radial-gradient(30% 40% at 20% 60%,oklch(0.82 0.04 222 / 0.13),transparent 60%),
radial-gradient(24% 36% at 60% 52%,oklch(0.80 0.05 196 / 0.15),transparent 62%),
radial-gradient(28% 40% at 88% 62%,oklch(0.82 0.04 222 / 0.11),transparent 60%);
animation-duration:42s;animation-direction:reverse;
}
@keyframes ah-drift{
0%{transform:translateX(-8%)}
100%{transform:translateX(8%)}
}
.ah-rays{
inset:-40% -10% auto -10%;height:150%;
background:repeating-linear-gradient(102deg,
transparent 0 42px,
oklch(0.95 0.05 205 / 0.055) 42px 46px,
transparent 46px 96px);
mask-image:radial-gradient(60% 70% at 62% 20%,#000 0%,transparent 72%);
-webkit-mask-image:radial-gradient(60% 70% at 62% 20%,#000 0%,transparent 72%);
animation:ah-rays 14s ease-in-out infinite alternate;
mix-blend-mode:screen;opacity:.8;
}
@keyframes ah-rays{
0%{transform:translateX(-4%) skewX(-2deg);opacity:.5}
100%{transform:translateX(3%)  skewX(-4deg);opacity:.9}
}
.ah-fog{
inset-inline:-10%;inset-block-end:-6%;height:46%;
background:
radial-gradient(60% 100% at 50% 100%,oklch(0.80 0.07 196 / 0.30),transparent 72%),
linear-gradient(0deg,oklch(0.90 0.02 220 / 0.26),transparent 88%);
filter:blur(10px);
animation:ah-fog 16s ease-in-out infinite alternate;
}
@keyframes ah-fog{
0%{transform:translateX(-2%) scaleY(0.96);opacity:.85}
100%{transform:translateX(2%)  scaleY(1.05);opacity:1}
}
.ah-floor{
inset-inline:0;inset-block-end:0;height:34%;
background:
radial-gradient(50% 120% at 50% 108%,oklch(0.56 0.10 202 / 0.50),transparent 70%);
mix-blend-mode:screen;
}
.ah-canvas{inset:0;width:100%;height:100%}
.ah-inner{
position:relative;z-index:2;
min-height:clamp(440px,58vh,640px);
display:grid;align-items:center;
transform-style:preserve-3d;
}
.ah-stage{
position:absolute;inset:0;
display:grid;place-items:center right;
z-index:1;
transform-style:preserve-3d;
}
.ah-building-wrap{
position:relative;
width:min(1000px,74%);
filter:drop-shadow(0 40px 60px oklch(0.1 0.05 268 / 0.6));
animation:ah-float 9s ease-in-out infinite;
}
.ah-building{
position:relative;z-index:2;width:100%;height:auto;
filter:brightness(1.02) saturate(1.05);
animation:ah-building-glow 6s ease-in-out infinite;
-webkit-box-reflect:below 4px linear-gradient(to bottom,oklch(1 0 0 / 0.22),transparent 46%);
transform:scale(1.04);transition:transform 2.6s var(--ease-out);
}
.about-hero.is-in .ah-building{transform:scale(1)}
.about-hero--zoom .ah-building{transition:none;transform:scale(1.4)}
@media (max-width:900px){.about-hero--zoom .ah-building{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.about-hero--zoom .ah-building{transform:none}}
.ah-stage--3d{perspective:1300px;perspective-origin:50% 42%}
.ah-3d{
position:relative;width:min(1000px,74%);
transform-style:preserve-3d;will-change:transform;
}
.ah-stage--3d .ah-building-wrap{width:100%;transform-style:preserve-3d}
.ah-frame{
position:relative;width:100%;border-radius:30px;
padding:clamp(18px,2.8%,30px);overflow:hidden;
background:oklch(0.15 0.06 268 / 0.55);
-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
box-shadow:0 50px 92px -34px oklch(0.04 0.03 268 / 0.9),inset 0 1px 0 oklch(1 0 0 / 0.14);
transform-style:preserve-3d;
}
.ah-frame__ring{
position:absolute;inset:0;border-radius:inherit;padding:5px;z-index:4;pointer-events:none;
background:conic-gradient(from 215deg,
#01647a,#00a39e,#66c6e6,#1ab6c3,#5fc0c4,#f28b4a,#ec6642,#e84333,#c82f23,#04715c,#008f7b,#01647a);
-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,linear-gradient(#000 0 0);mask-composite:exclude;
filter:saturate(1.15);
}
@property --ah-frame-a{syntax:"<angle>";initial-value:0deg;inherits:false}
.ah-frame__spark{
position:absolute;inset:0;border-radius:inherit;padding:5px;z-index:5;pointer-events:none;
background:conic-gradient(from var(--ah-frame-a),
transparent 0deg,transparent 285deg,
oklch(0.85 0.12 200 / 0.85) 315deg,#ffffff 338deg,oklch(0.88 0.14 78 / 0.9) 352deg,transparent 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,linear-gradient(#000 0 0);mask-composite:exclude;
filter:drop-shadow(0 0 6px oklch(0.9 0.12 200 / 0.75));
animation:ah-frame-flow 4.6s linear infinite;
}
@keyframes ah-frame-flow{to{--ah-frame-a:360deg}}
@media (prefers-reduced-motion:reduce){.ah-frame__spark{animation:none}}
.ah-frame::after{
content:"";position:absolute;inset:-6%;z-index:-1;border-radius:40px;
background:conic-gradient(from 215deg,#01647a,#66c6e6,#f28b4a,#e84333,#04715c,#01647a);
filter:blur(36px);opacity:0.32;
}
.ah-frame .ah-building-wrap{animation:none;filter:none;border-radius:20px;overflow:hidden}
.ah-frame .ah-building{transform:none !important;-webkit-box-reflect:none;border-radius:18px}
.ah-3d .ah-cbahi--framed{
position:absolute;z-index:9;inset-block-start:14%;right:8px;left:auto;
inline-size:clamp(126px,12vw,168px);
animation:none;transform:translateZ(48px);
}
.ah-3d .ah-cbahi--framed .ah-cbahi__inner{position:relative;padding:12px 13px 10px;border-radius:16px}
.ah-3d .ah-cbahi--framed .ah-cbahi__tag{font-size:0.6rem}
.ah-3d .ah-cbahi--framed .ah-cbahi__ring{display:none}
.ah-3d .ah-cbahi--framed .ah-cbahi__inner::after{
content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;z-index:3;
background:conic-gradient(from var(--ah-frame-a),
transparent 0deg,transparent 285deg,
oklch(0.85 0.12 200 / 0.9) 315deg,#ffffff 338deg,oklch(0.88 0.14 78 / 0.95) 352deg,transparent 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,linear-gradient(#000 0 0);mask-composite:exclude;
filter:drop-shadow(0 0 5px oklch(0.9 0.12 200 / 0.7));
animation:ah-frame-flow 4.6s linear infinite;
}
@media (prefers-reduced-motion:reduce){.ah-3d .ah-cbahi--framed .ah-cbahi__inner::after{animation:none}}
.ah-stat3d{
position:absolute;z-index:6;display:flex;flex-direction:column;align-items:center;gap:3px;
padding:11px 18px;border-radius:18px;white-space:nowrap;text-align:center;color:#fff;
background:oklch(0.20 0.06 268 / 0.5);
border:1px solid oklch(1 0 0 / 0.24);
-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
box-shadow:0 26px 50px -20px oklch(0.04 0.03 268 / 0.85),inset 0 1px 0 oklch(1 0 0 / 0.34);
transform:translateZ(var(--tz,70px));
opacity:0;visibility:hidden;
transition:opacity .7s var(--ease-out),visibility .7s,translate .8s var(--ease-out),rotate .8s var(--ease-out);
translate:0 20px;rotate:x -22deg;
transition-delay:calc(0.45s + var(--k) * 0.13s);
}
.about-hero--3d.is-in .ah-stat3d{opacity:1;visibility:visible;translate:0 0;rotate:x 0deg}
.ah-stat3d__num{font-size:clamp(1.15rem,1.7vw,1.55rem);font-weight:800;color:#fff;line-height:1;letter-spacing:-0.01em;
text-shadow:0 2px 12px oklch(0.05 0.03 268 / 0.6)}
.ah-stat3d__label{font-size:0.64rem;font-weight:600;color:oklch(1 0 0 / 0.72)}
.ah-stat3d__pin{position:absolute;inset-block-end:-28px;left:50%;width:2px;height:28px;
background:linear-gradient(oklch(0.82 0.14 88 / 0.9),transparent);transform:translateX(-50%) translateZ(-24px)}
.ah-stat3d__pin::after{content:"";position:absolute;inset-block-end:-3px;left:50%;width:8px;height:8px;
border-radius:50%;background:var(--gold);transform:translateX(-50%);
box-shadow:0 0 12px oklch(0.82 0.14 88 / 0.9)}
.ah-stat3d--1{inset-block-start:11%;left:4%;--tz:110px}
.ah-stat3d--2{inset-block-start:5%;left:37%;--tz:78px}
.ah-stat3d--3{inset-block-start:63%;left:5%;--tz:150px}
.ah-stat3d--4{inset-block-start:66%;right:6%;--tz:96px}
@media (max-width:900px){
.ah-stage--3d{perspective:none}
.ah-3d{transform:none !important;width:min(560px,94%)}
.ah-stat3d{transform:none;--tz:0}
.ah-stat3d__pin{display:none}
.ah-stat3d--1{inset-block-start:6%;left:0;right:auto}
.ah-stat3d--2{inset-block-start:6%;right:0;left:auto}
.ah-stat3d--3{inset-block-start:auto;inset-block-end:20%;left:0;right:auto}
.ah-stat3d--4{inset-block-start:auto;inset-block-end:20%;right:0;left:auto}
}
@media (prefers-reduced-motion:reduce){
.ah-3d{transition:none}
.ah-stat3d{transition:none}
}
@keyframes ah-float{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-12px)}
}
@keyframes ah-building-glow{
0%,100%{filter:brightness(1.0)  saturate(1.03)}
50%{filter:brightness(1.07) saturate(1.12)}
}
.ah-shadow{
position:absolute;z-index:1;
inset-inline:6%;inset-block-end:-4%;height:12%;
background:radial-gradient(50% 100% at 50% 50%,oklch(0.08 0.04 268 / 0.7),transparent 72%);
filter:blur(14px);
}
.ah-sign-glow{
position:absolute;z-index:3;
inset-inline:24% 8%;inset-block-start:56%;height:15%;
background:radial-gradient(60% 100% at 50% 50%,oklch(0.82 0.12 78 / 0.75),transparent 74%);
filter:blur(12px);mix-blend-mode:screen;
animation:ah-pulse-warm 4.5s ease-in-out infinite;
}
.ah-logo-glow{
position:absolute;z-index:3;
width:12%;aspect-ratio:1;inset-inline-end:12%;inset-block-start:52%;
border-radius:50%;
background:radial-gradient(circle,oklch(0.7 0.18 25 / 0.6),oklch(0.6 0.16 268 / 0.4) 55%,transparent 72%);
filter:blur(10px);mix-blend-mode:screen;
animation:ah-pulse-neon 3.2s ease-in-out infinite;
}
@keyframes ah-pulse-warm{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes ah-pulse-neon{0%,100%{opacity:.4;transform:scale(0.94)}50%{opacity:.9;transform:scale(1.06)}}
.ah-card{
position:relative;z-index:3;
justify-self:left;
inline-size:min(360px,100%);
padding:clamp(20px,2.1vw,28px);
border-radius:22px;
background:
linear-gradient(148deg,
oklch(1 0 0 / 0.86) 0%,
oklch(1 0 0 / 0.82) 46%,
oklch(0.98 0.006 250 / 0.78) 100%);
border:1px solid oklch(0.50 0.03 258 / 0.16);
-webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);
box-shadow:
inset  1.5px  1.5px 1px -1px oklch(1 0 0 / 0.95),
inset -1.5px -1.5px 1px -1px oklch(0.55 0.03 258 / 0.18),
0 40px 80px -34px oklch(0.10 0.05 268 / 0.5);
overflow:hidden;
opacity:0;transform:translateY(28px);
transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);
}
.about-hero.is-in .ah-card{opacity:1;transform:none}
.ah-card__sheen{
position:absolute;inset:0;pointer-events:none;border-radius:inherit;
background:linear-gradient(135deg,oklch(1 0 0 / 0.5),transparent 42%);
}
.ah-eyebrow{color:var(--ah-gold);margin-block-end:10px}
.ah-eyebrow::before{background:var(--ah-gold);box-shadow:0 0 0 4px oklch(0.60 0.13 80 / 0.18)}
.ah-title{
font-size:clamp(1.5rem,2.5vw,2.05rem);line-height:1.12;margin-block-end:14px;
color:var(--navy-deep);
text-shadow:none;
}
.lang-en .ah-title{font-family:var(--font-en)}
.ah-lines{display:grid;gap:8px;margin-block-end:18px}
.ah-line{
color:oklch(0.30 0.03 262);font-size:0.86rem;line-height:1.62;
opacity:0;transform:translateY(14px);
transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
transition-delay:calc(0.25s + var(--l) * 0.16s);
}
.about-hero.is-in .ah-line{opacity:1;transform:none}
.ah-stats{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;
padding-block:14px;margin-block-end:16px;
border-block:1px solid oklch(1 0 0 / 0.12);
}
.ah-stat{
text-align:center;
opacity:0;transform:translateY(12px);
transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
transition-delay:calc(0.55s + var(--l) * 0.1s);
}
.about-hero.is-in .ah-stat{opacity:1;transform:none}
.ah-stat__num{
display:block;font-size:clamp(1.1rem,1.9vw,1.45rem);font-weight:800;
color:var(--navy-deep);letter-spacing:-0.01em;line-height:1;
}
.ah-stat__label{display:block;margin-block-start:5px;font-size:0.64rem;color:oklch(0.42 0.02 262)}
.ah-badge{
display:inline-flex;align-items:center;gap:8px;
padding:7px 13px;border-radius:999px;margin-block-end:18px;
font-size:0.75rem;font-weight:700;color:oklch(0.42 0.12 78);
background:oklch(0.82 0.14 88 / 0.20);
border:1px solid oklch(0.62 0.13 82 / 0.45);
}
.ah-badge svg{width:15px;height:15px;color:var(--ah-gold)}
.ah-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ah-cta__primary{box-shadow:0 16px 40px -14px oklch(0.44 0.19 25 / 0.7)}
.ah-card .ah-cta__primary{padding-block:12px;font-size:0.92rem}
.ah-cta__ghost{
display:inline-flex;align-items:center;gap:8px;
font-weight:700;font-size:0.95rem;color:var(--navy-deep);
transition:gap .3s var(--ease-out),color .3s var(--ease-out);
}
.ah-cta__ghost svg{width:18px;height:18px;color:var(--ah-gold);transition:transform .3s var(--ease-out)}
[dir="rtl"] .ah-cta__ghost svg{transform:scaleX(-1)}
.ah-cta__ghost:hover{gap:12px;color:var(--ah-gold)}
.ah-cbahi{
position:absolute;z-index:4;
inset-block-start:2%;left:40%;right:auto;
inline-size:clamp(150px,15vw,208px);
display:grid;place-items:center;
will-change:transform;animation:ah-float 8s ease-in-out infinite .6s;
}
.ah-cbahi__halo{
position:absolute;inset:-34%;border-radius:50%;
background:radial-gradient(circle,oklch(0.68 0.13 205 / 0.55),oklch(0.68 0.16 42 / 0.28) 46%,transparent 72%);
filter:blur(22px);animation:ah-pulse-warm 4.4s ease-in-out infinite;
}
.ah-cbahi__ring{
position:absolute;inset:-12%;border-radius:50%;
background:conic-gradient(from 0deg,transparent 0 8%,oklch(0.82 0.14 88 / 0.85) 22%,transparent 42%,transparent 58%,oklch(0.62 0.14 205 / 0.7) 72%,transparent 92%);
-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));
mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));
animation:ah-spin 11s linear infinite;
}
@keyframes ah-spin{to{rotate:360deg}}
.ah-cbahi__inner{
position:relative;z-index:2;
display:grid;gap:9px;place-items:center;text-align:center;
padding:15px 17px 13px;border-radius:20px;
background:oklch(1 0 0 / 0.94);
border:1px solid oklch(1 0 0 / 0.8);
box-shadow:0 26px 52px -20px oklch(0.08 0.05 268 / 0.7),inset 0 1px 0 #fff;
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out);
}
.ah-cbahi__logo{inline-size:100%;height:auto;display:block}
.ah-cbahi__tag{
display:inline-flex;align-items:center;gap:6px;
font-size:0.68rem;font-weight:800;letter-spacing:0.01em;
color:#01647a;
padding-block-start:8px;border-block-start:1px solid oklch(0.85 0.02 220 / 0.7);
inline-size:100%;justify-content:center;
}
.ah-cbahi__tag svg{width:14px;height:14px;color:#04715c}
.ah-cbahi:hover .ah-cbahi__inner{transform:translateY(-4px) scale(1.03);box-shadow:0 34px 60px -20px oklch(0.08 0.05 268 / 0.8),inset 0 1px 0 #fff}
@media (prefers-reduced-motion:reduce){
.ah-aurora,.ah-clouds::before,.ah-rays,.ah-fog,
.ah-building-wrap,.ah-building,.ah-sign-glow,.ah-logo-glow,
.ah-cbahi,.ah-cbahi__halo,.ah-cbahi__ring,
.ah-ecg__pulse,.ah-card__sheen{animation:none !important}
.ah-card,.ah-line,.ah-stat{transition:none;opacity:1;transform:none}
.ah-ecg__pulse{stroke-dasharray:none;opacity:.5}
}
.about-hero--pepsi{
background:var(--paper);
padding-block-end:clamp(20px,2.4vw,36px);
overflow-x:clip;
overflow-y:visible;
z-index:1;
}
.about-hero--pepsi .ah-env{display:none}
.about-hero--pepsi .ah-sky{
background:
radial-gradient(72% 46% at 50% 108%,oklch(0.64 0.14 250 / 0.5),transparent 70%),
radial-gradient(56% 44% at 84% -10%,oklch(0.60 0.13 248 / 0.5),transparent 68%),
var(--pepsi-field);
}
.about-hero--pepsi .ah-sky::after{
background:
linear-gradient(oklch(1 0 0 / 0.055) 1px,transparent 1px) 0 0 / 100% 64px,
linear-gradient(90deg,oklch(1 0 0 / 0.055) 1px,transparent 1px) 0 0 / 64px 100%;
}
.about-hero--pepsi .ah-aurora{
background:
radial-gradient(36% 30% at 22% 30%,oklch(0.72 0.15 252 / 0.40),transparent 70%),
radial-gradient(30% 26% at 76% 24%,oklch(0.86 0.06 250 / 0.24),transparent 72%);
filter:blur(30px);
}
.about-hero--pepsi .ah-clouds{display:none}
.about-hero--pepsi .ah-rays{
inset:-30% -34% auto -34%;height:168%;
background:linear-gradient(104deg,
transparent 42%,
oklch(1 0 0 / 0.05) 47%,
oklch(1 0 0 / 0.14) 50%,
oklch(1 0 0 / 0.05) 53%,
transparent 58%);
-webkit-mask-image:none;mask-image:none;
mix-blend-mode:screen;opacity:1;
animation:ah-pepsi-sweep 11s cubic-bezier(.42,0,.18,1) infinite;
}
@keyframes ah-pepsi-sweep{
0%{transform:translate3d(-60%,0,0);opacity:0}
6%{opacity:1}
34%{transform:translate3d(60%,0,0);opacity:0}
100%{transform:translate3d(60%,0,0);opacity:0}
}
.about-hero--pepsi .ah-ecg{
left:0;inline-size:100%;block-size:auto;
inset-block-start:50%;
transform:translateY(-50%);
overflow:visible;
}
.ah-ecg__trace{
fill:none;stroke:oklch(1 0 0 / 0.14);stroke-width:2;
stroke-linecap:round;stroke-linejoin:round;
}
.ah-ecg__pulse{
fill:none;stroke:oklch(0.94 0.09 210);stroke-width:3.4;
stroke-linecap:round;stroke-linejoin:round;
filter:drop-shadow(0 0 5px oklch(0.86 0.13 205 / 0.85));
stroke-dasharray:120 1000;
animation:ah-ecg-run 6.4s linear infinite;
}
@keyframes ah-ecg-run{
0%{stroke-dashoffset:120}
72%{stroke-dashoffset:-1000}
100%{stroke-dashoffset:-1000}
}
.about-hero--pepsi .ah-card{
--ah-gold:oklch(0.38 0.15 256);
color:var(--ink);
border:1px solid oklch(1 0 0 / 0.7);
-webkit-backdrop-filter:blur(34px) saturate(2.2) brightness(1.55);
backdrop-filter:blur(34px) saturate(2.2) brightness(1.55);
box-shadow:
inset 0 1.5px 0 oklch(1 0 0 / 0.95),
inset 0 -1px 0 oklch(1 0 0 / 0.45),
inset 0 0 34px -14px oklch(1 0 0 / 0.9),
0 34px 70px -30px oklch(0.16 0.08 264 / 0.62),
0 4px 14px -8px oklch(0.16 0.08 264 / 0.4);
}
.about-hero--pepsi .ah-card__sheen{
z-index:0;
background:linear-gradient(118deg,
transparent 18%,
oklch(1 0 0 / 0.28) 38%,
oklch(1 0 0 / 0.62) 50%,
oklch(1 0 0 / 0.28) 62%,
transparent 82%);
animation:ah-card-sheen 9s cubic-bezier(.4,0,.2,1) infinite;
}
.about-hero--pepsi .ah-card >:not(.ah-card__sheen){position:relative;z-index:1}
@keyframes ah-card-sheen{
0%{transform:translate3d(-130%,0,0)}
42%{transform:translate3d(130%,0,0)}
100%{transform:translate3d(130%,0,0)}
}
@media (prefers-reduced-motion:reduce){
.about-hero--pepsi .ah-card__sheen{
background:linear-gradient(150deg,oklch(1 0 0 / 0.45),transparent 46%);
}
}
.about-hero--pepsi .ah-card::after{
content:"";position:absolute;inset:0;z-index:1;
border-radius:inherit;pointer-events:none;
padding:1px;
background:linear-gradient(150deg,
oklch(1 0 0 / 0.95),oklch(1 0 0 / 0.15) 42%,oklch(0.62 0.09 256 / 0.35) 100%);
-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,linear-gradient(#000 0 0);
mask-composite:exclude;
}
.about-hero--pepsi .ah-title{
color:var(--ink);
text-shadow:none;
}
.about-hero--pepsi .ah-line{color:oklch(0.44 0.02 268)}
.about-hero--pepsi .ah-eyebrow::before{box-shadow:0 0 0 4px oklch(0.44 0.16 256 / 0.20)}
.about-hero--pepsi .ah-badge{
color:oklch(0.36 0.14 256);
background:oklch(0.44 0.16 256 / 0.10);
border-color:oklch(0.44 0.16 256 / 0.30);
}
.about-hero--pepsi .ah-cta__ghost{color:var(--ink)}
.about-hero--pepsi .ah-cta__ghost:hover{color:var(--ah-gold)}
.about-hero--pepsi .ah-card .btn--book{
color:#fff;
background:
linear-gradient(148deg,oklch(1 0 0 / 0.20) 0%,oklch(1 0 0 / 0.04) 44%,transparent 68%),
color-mix(in oklab,var(--pepsi-2) 82%,transparent);
box-shadow:
inset  1px  1px 1px -0.5px oklch(1 0 0 / 0.55),
inset -1px -1px 1px -0.5px oklch(0 0 0 / 0.28),
0 0 0 1px oklch(1 0 0 / 0.22),
0 12px 28px -14px color-mix(in oklab,var(--pepsi-3) 65%,transparent);
}
.about-hero--pepsi .ah-card .btn--book::before{background:oklch(1 0 0 / 0.92)}
.about-hero--pepsi .ah-card .btn--book:hover{
color:var(--navy-deep);
box-shadow:
inset 1px 1px 1px -0.5px oklch(1 0 0 / 0.9),
0 0 0 1px oklch(1 0 0 / 0.5),
0 20px 38px -14px oklch(0.14 0.06 262 / 0.5);
}
.about-hero--pepsi .ah-frame{background:oklch(0.15 0.06 266 / 0.66)}
.about-hero--pepsi .ah-stat3d{background:oklch(0.19 0.06 266 / 0.62)}
.about-hero--pepsi .ah-fog{
background:
radial-gradient(62% 100% at 50% 100%,oklch(0.56 0.16 26 / 0.20),transparent 74%),
linear-gradient(0deg,oklch(0.88 0.05 250 / 0.20),transparent 86%);
}
.about-hero--pepsi .ah-floor{
background:radial-gradient(50% 120% at 50% 108%,oklch(0.78 0.10 248 / 0.48),transparent 70%);
}
@media (max-width:700px){
.about-hero--pepsi .ah-rays{animation-duration:14s}
}
#main > .about-hero:first-child{
margin-block-start:0;
padding-block-start:calc(var(--header-h) + clamp(24px,4vh,54px));
}
.abt{
--abt-p:0;
--abt-gut:clamp(0px,4.5vw,74px);
position:relative;
background:
radial-gradient(60vw 60vw at 88% 6%,oklch(0.50 0.12 196 / 0.05),transparent 62%),
radial-gradient(52vw 52vw at 4% 52%,oklch(0.44 0.19 25 / 0.04),transparent 60%),
var(--paper);
}
.abt-spine{
position:absolute;inset-block:0;
inset-inline-start:calc((100% - min(var(--wrap),100% - 48px)) / 2);
width:2px;pointer-events:none;z-index:0;
}
.abt-spine__track,.abt-spine__fill{
position:absolute;inset-inline:0;inset-block-start:0;border-radius:2px;
}
.abt-spine__track{block-size:100%;background:var(--line)}
.abt-spine__fill{
block-size:100%;background:var(--crimson);
transform:scaleY(var(--abt-p));transform-origin:top;
box-shadow:0 0 14px oklch(0.44 0.19 25 / 0.45);
}
@media (max-width:900px){.abt-spine{display:none}}
.abt-sec{position:relative;z-index:1;padding-block:clamp(42px,4.9vw,74px)}
.abt-sec .wrap{padding-inline-start:var(--abt-gut)}
.abt-head{
display:flex;align-items:center;gap:16px;
margin-block-end:clamp(22px,3vw,38px);
margin-inline-start:calc(var(--abt-gut) * -1);
}
.abt-head__n{
flex:none;inline-size:44px;text-align:center;
font-family:var(--font-en);font-weight:800;font-size:0.92rem;
letter-spacing:0.04em;color:var(--crimson);
}
.abt-head__n::before{
content:"";position:absolute;inset-inline-start:21px;
inline-size:11px;block-size:11px;margin-block-start:26px;border-radius:50%;
background:var(--crimson);box-shadow:0 0 0 5px var(--paper),0 0 0 6px oklch(0.44 0.19 25 / 0.25);
transform:scale(0);transition:transform .7s var(--ease-out) .1s;
}
.abt-head{position:relative}
.abt-head.in .abt-head__n::before{transform:scale(1)}
.abt-head__rule{
inline-size:0;block-size:1px;background:var(--line);
transition:inline-size 1.1s var(--ease-out) .15s;
}
.abt-head.in .abt-head__rule{inline-size:clamp(40px,8vw,110px)}
.abt-head__label{
font-size:0.82rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
color:var(--ink-soft);
}
.lang-ar .abt-head__label{letter-spacing:0;text-transform:none;font-size:0.95rem}
@media (max-width:900px){
.abt-sec .wrap{padding-inline-start:0}
.abt-head{margin-inline-start:0}
.abt-head__n{inline-size:auto}
.abt-head__n::before{display:none}
}
.abt-claim{
font-size:clamp(2rem,4.6vw,3.6rem);font-weight:800;line-height:1.14;
color:var(--navy);letter-spacing:-0.015em;max-inline-size:20ch;
}
.abt-claim--sm{font-size:clamp(1.6rem,3vw,2.5rem);max-inline-size:24ch}
.abt-lead{
margin-block-start:18px;color:var(--ink-soft);
font-size:clamp(1.02rem,1.4vw,1.16rem);max-inline-size:62ch;
}
.abt-textlink{
display:inline-flex;align-items:center;gap:9px;margin-block-start:26px;
font-weight:700;color:var(--primary);
border-block-end:2px solid transparent;padding-block-end:3px;
transition:color .3s var(--ease-out),border-color .3s var(--ease-out);
}
.abt-textlink svg{inline-size:18px;block-size:18px;transition:transform .35s var(--ease-out)}
[dir="rtl"] .abt-textlink svg{transform:scaleX(-1)}
.abt-textlink:hover{color:var(--primary-hover);border-block-end-color:currentColor}
.abt-textlink:hover svg{transform:translateX(4px)}
[dir="rtl"] .abt-textlink:hover svg{transform:scaleX(-1) translateX(4px)}
.abt-figs{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
margin-block-start:clamp(36px,5vw,60px);
border-block-start:1px solid var(--line);
}
.abt-fig{
padding:clamp(22px,2.6vw,34px) 18px;
border-inline-end:1px solid var(--line);
border-block-end:1px solid var(--line);
}
.abt-fig:last-child{border-inline-end:0}
.abt-fig__n{
display:flex;align-items:baseline;gap:2px;
font-family:var(--font-en);font-weight:800;line-height:0.9;
font-size:clamp(2.6rem,5.4vw,4.4rem);color:var(--navy);
letter-spacing:-0.03em;font-variant-numeric:tabular-nums;
}
.lang-ar .abt-fig__n{font-family:var(--font-ar);letter-spacing:0}
.abt-fig__n i{font-style:normal;font-size:0.45em;color:var(--crimson)}
.abt-fig__k{
margin-block-start:12px;font-size:0.9rem;color:var(--ink-soft);line-height:1.5;
}
.abt-seal{
display:flex;align-items:center;gap:clamp(16px,2.4vw,28px);
margin-block-start:clamp(28px,3.4vw,44px);
padding:clamp(20px,2.6vw,30px) clamp(20px,3vw,34px);
border-radius:var(--radius);background:var(--navy);color:#fff;
box-shadow:var(--shadow-md);
transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out);
}
.abt-seal:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.abt-seal__medal{position:relative;flex:none;display:grid;place-items:center}
.abt-seal__medal img{inline-size:clamp(52px,6vw,72px)}
.abt-seal__pulse{
position:absolute;inset:-12%;border-radius:50%;
border:1.5px solid oklch(0.82 0.14 88 / 0.5);
animation:abt-pulse 3.4s var(--ease-out) infinite;
}
@keyframes abt-pulse{
0%{transform:scale(0.9);opacity:0}
35%{opacity:1}
100%{transform:scale(1.35);opacity:0}
}
.abt-seal__txt{display:grid;gap:4px}
.abt-seal__txt b{
font-size:0.8rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
color:var(--gold);
}
.lang-ar .abt-seal__txt b{letter-spacing:0;text-transform:none;font-size:0.92rem}
.abt-seal__txt strong{font-size:clamp(1.1rem,2vw,1.5rem);font-weight:800;line-height:1.25}
.abt-seal__txt span{font-size:0.94rem;color:oklch(1 0 0 / 0.75)}
.abt-seal__go{inline-size:22px;block-size:22px;flex:none;margin-inline-start:auto;opacity:0.6;transition:transform .35s var(--ease-out),opacity .35s var(--ease-out)}
[dir="rtl"] .abt-seal__go{transform:scaleX(-1)}
.abt-seal:hover .abt-seal__go{opacity:1;transform:translateX(4px)}
[dir="rtl"] .abt-seal:hover .abt-seal__go{transform:scaleX(-1) translateX(4px)}
.abt-path{
margin-block-start:clamp(34px,4vw,54px);
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
gap:clamp(26px,3vw,40px) clamp(32px,4vw,64px);
}
.abt-step{position:relative;padding-inline-start:34px}
.abt-step__dot{
position:absolute;inset-inline-start:0;inset-block-start:9px;
inline-size:10px;block-size:10px;border-radius:50%;
background:var(--paper);border:2px solid var(--line);
transition:background .5s var(--ease-out),border-color .5s var(--ease-out),transform .5s var(--ease-out);
}
.abt-step:not(:last-child)::before{
content:"";position:absolute;inset-inline-start:4.5px;inset-block:22px calc(clamp(26px,3vw,40px) * -1);
inline-size:1px;background:var(--line);
}
.abt-step.in .abt-step__dot{background:var(--crimson);border-color:var(--crimson);transform:scale(1.15)}
.abt-step__when{
display:inline-block;margin-block-end:6px;
font-family:var(--font-en);font-weight:800;font-size:0.86rem;
letter-spacing:0.1em;color:var(--gold-text);
}
.lang-ar .abt-step__when{font-family:var(--font-ar);letter-spacing:0}
.abt-step__t{font-size:clamp(1.15rem,1.9vw,1.42rem);color:var(--navy)}
.abt-step__p{margin-block-start:8px;color:var(--ink-soft);font-size:1.02rem}
.abt-dental{
display:grid;grid-template-columns:1.15fr 0.85fr;
gap:clamp(30px,4.5vw,68px);align-items:start;
}
.abt-flow{margin-block-start:clamp(30px,3.5vw,44px)}
.abt-flow__k{
display:block;font-size:0.8rem;font-weight:700;letter-spacing:0.14em;
text-transform:uppercase;color:var(--ink-soft);margin-block-end:18px;
}
.lang-ar .abt-flow__k{letter-spacing:0;text-transform:none;font-size:0.94rem}
.abt-flow__list{display:grid;gap:0}
.abt-flow__i{
position:relative;display:grid;
grid-template-columns:40px 1fr;align-items:baseline;column-gap:16px;
padding-block:16px;border-block-end:1px solid var(--line);
opacity:0.45;transition:opacity .6s var(--ease-out);
transition-delay:calc(var(--i) * 0.16s);
}
.abt-flow.in .abt-flow__i{opacity:1}
.abt-flow__no{
grid-row:span 2;align-self:start;
display:grid;place-items:center;inline-size:34px;block-size:34px;border-radius:50%;
font-family:var(--font-en);font-weight:800;font-size:0.9rem;
color:var(--primary);background:var(--primary-tint);
transition:background .6s var(--ease-out),color .6s var(--ease-out),transform .6s var(--ease-out);
transition-delay:calc(var(--i) * 0.16s);
}
.lang-ar .abt-flow__no{font-family:var(--font-ar)}
.abt-flow.in .abt-flow__i .abt-flow__no{background:var(--primary);color:#fff;transform:scale(1.06)}
.abt-flow__i b{font-size:1.05rem;color:var(--navy)}
.abt-flow__d{grid-column:2;color:var(--ink-soft);font-size:0.95rem;margin-block-start:3px}
.abt-notes{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:clamp(14px,1.8vw,22px);margin-block-start:clamp(38px,5vw,64px);
}
.abt-note{
padding-block-start:18px;border-block-start:2px solid var(--navy);
transition:border-color .4s var(--ease-out);
}
.abt-note:hover{border-block-start-color:var(--crimson)}
.abt-note b{display:block;color:var(--navy);font-size:1.02rem;margin-block-end:7px}
.abt-note span{color:var(--ink-soft);font-size:0.93rem}
.abt-slot{
position:relative;aspect-ratio:var(--ratio,4 / 5);overflow:hidden;
border-radius:var(--radius-lg);background:var(--paper-2);
box-shadow:var(--shadow-md);
}
.abt-slot img{inline-size:100%;block-size:100%;object-fit:cover}
.abt-slot.is-empty{
background:var(--paper-2);
border:1px dashed color-mix(in oklab,var(--navy) 22%,transparent);
box-shadow:none;
}
.abt-slot__ph{
position:absolute;inset:0;display:grid;place-content:center;justify-items:center;
gap:12px;padding:20px;text-align:center;
color:var(--ink-soft);
font-size:0.9rem;
}
.abt-slot__ph svg{inline-size:42px;block-size:42px;opacity:0.8}
.abt-slot__corner{
position:absolute;inline-size:22px;block-size:22px;pointer-events:none;
border:2px solid var(--gold);opacity:0.75;
}
.abt-slot__corner--a{inset-block-start:14px;inset-inline-start:14px;border-inline-end:0;border-block-end:0;border-start-start-radius:6px}
.abt-slot__corner--b{inset-block-end:14px;inset-inline-end:14px;border-inline-start:0;border-block-start:0;border-end-end-radius:6px}
.abt-index{
margin-block-start:clamp(34px,4vw,52px);
border-block-start:1px solid var(--line);
}
.abt-row{
position:relative;isolation:isolate;
display:grid;grid-template-columns:62px minmax(0,1fr) minmax(0,1.15fr);
align-items:center;gap:18px;
padding:clamp(18px,2.2vw,26px) clamp(12px,1.6vw,20px);
border-block-end:1px solid var(--line);
transition:padding-inline-start .45s var(--ease-out);
}
.abt-row__wipe{
position:absolute;inset:0;z-index:-1;
background:color-mix(in oklab,var(--acc) 8%,transparent);
transform:scaleX(0);transform-origin:inline-start;
transition:transform .55s var(--ease-out);
}
.abt-row:hover .abt-row__wipe{transform:scaleX(1)}
.abt-row:hover{padding-inline-start:clamp(20px,2.4vw,32px)}
.abt-row__n{
font-family:var(--font-en);font-weight:800;font-size:0.95rem;
color:var(--ink-soft);transition:color .4s var(--ease-out);
}
.lang-ar .abt-row__n{font-family:var(--font-ar)}
.abt-row:hover .abt-row__n{color:var(--acc)}
.abt-row__t{
font-size:clamp(1.08rem,1.9vw,1.4rem);color:var(--navy);font-weight:700;
transition:color .4s var(--ease-out);
}
.abt-row:hover .abt-row__t{color:var(--acc)}
.abt-row__d{color:var(--ink-soft);font-size:0.97rem}
.abt-under{
display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 20px;
margin-block-start:clamp(30px,3.6vw,46px);
}
.abt-under__k{
font-size:0.82rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
color:var(--ink-soft);
}
.lang-ar .abt-under__k{letter-spacing:0;text-transform:none;font-size:0.95rem}
.abt-under__list{display:flex;flex-wrap:wrap;gap:10px}
.abt-under__list li{
padding:9px 17px;border-radius:999px;font-size:0.93rem;color:var(--ink);
background:var(--paper-2);border:1px solid var(--line);
transition:transform .4s var(--ease-out),border-color .4s var(--ease-out),color .4s var(--ease-out);
}
.abt-under__list li:hover{
transform:translateY(-3px);color:var(--primary);
border-color:color-mix(in oklab,var(--primary) 45%,transparent);
}
.abt-team{
display:grid;grid-template-columns:0.8fr 1.2fr;
gap:clamp(30px,4.5vw,68px);align-items:center;
}
.abt-team .abt-lead + .abt-lead{margin-block-start:14px}
@media (max-width:1080px){
.abt-dental,.abt-team{grid-template-columns:minmax(0,1fr)}
.abt-team .abt-team__img{max-inline-size:420px}
.abt-notes{grid-template-columns:repeat(2,minmax(0,1fr))}
.abt-row{grid-template-columns:48px minmax(0,1fr)}
.abt-row__d{grid-column:2}
}
@media (max-width:640px){
.abt-figs{grid-template-columns:repeat(2,minmax(0,1fr))}
.abt-fig:nth-child(2n){border-inline-end:0}
.abt-notes{grid-template-columns:minmax(0,1fr)}
.abt-seal{flex-wrap:wrap}
.abt-seal__go{display:none}
}
@media (prefers-reduced-motion:reduce){
.abt-spine__fill{transform:none}
.abt-head__rule{inline-size:clamp(40px,8vw,110px);transition:none}
.abt-head__n::before{transform:scale(1);transition:none}
.abt-step__dot,.abt-flow__i,.abt-flow__no,.abt-row,.abt-row__wipe,
.abt-under__list li,.abt-seal,.abt-note{transition:none}
.abt-flow__i{opacity:1}
.abt-seal__pulse{animation:none;opacity:0}
.abt-seal:hover,.abt-under__list li:hover{transform:none}
}
.cbahi-main{
--cb-teal:#01647a;--cb-green:#04715c;--cb-emerald:#00a39e;
--cb-cyan:#66c6e6;--cb-orange:#ec6642;--cb-red:#e84333;
}
@keyframes cb-breathe{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.14);opacity:1}}
.cb-seal{position:relative;inline-size:clamp(240px,30vw,350px);aspect-ratio:1;justify-self:center;display:grid;place-items:center}
.cb-seal__halo{position:absolute;inset:-8%;border-radius:50%;
background:radial-gradient(circle,color-mix(in oklab,var(--cb-emerald) 55%,transparent),color-mix(in oklab,var(--cb-orange) 30%,transparent) 48%,transparent 72%);
filter:blur(34px);animation:cb-pulse 5s ease-in-out infinite}
@keyframes cb-pulse{0%,100%{opacity:.6;transform:scale(0.96)}50%{opacity:1;transform:scale(1.06)}}
.cb-seal__orbit{position:absolute;border-radius:50%}
.cb-seal__orbit--1{inset:3%;border:1px solid oklch(1 0 0 / 0.14)}
.cb-seal__orbit--2{inset:-9%;border:1px dashed oklch(0.82 0.14 88 / 0.4);animation:cb-spin 30s linear infinite}
.cb-seal__spin{position:absolute;inset:-9%;border-radius:50%}
.cb-seal__spin::before{content:"";position:absolute;inset-block-start:-5px;inset-inline-start:50%;margin-inline-start:-5px;width:10px;height:10px;border-radius:50%}
.cb-seal__spin--a{animation:cb-spin 16s linear infinite}
.cb-seal__spin--a::before{background:var(--cb-emerald);box-shadow:0 0 14px var(--cb-emerald)}
.cb-seal__spin--b{animation:cb-spin 22s linear infinite reverse}
.cb-seal__spin--b::before{background:var(--cb-orange);box-shadow:0 0 14px var(--cb-orange);width:8px;height:8px}
.cb-seal__spin--c{animation:cb-spin 11s linear infinite}
.cb-seal__spin--c::before{background:var(--cb-cyan);box-shadow:0 0 12px var(--cb-cyan);width:7px;height:7px}
@keyframes cb-spin{to{rotate:360deg}}
.cb-seal__disc{
position:relative;z-index:2;inline-size:76%;aspect-ratio:1;border-radius:50%;
background:radial-gradient(circle at 50% 34%,#fff,#eef2f6);
display:grid;place-items:center;padding:11%;
box-shadow:0 30px 60px -22px oklch(0.05 0.04 268 / 0.85),inset 0 2px 0 #fff,inset 0 -18px 30px -22px oklch(0.5 0.05 220 / 0.4);
animation:cb-float 7s ease-in-out infinite;
}
.cb-seal__disc img{inline-size:100%;height:auto;display:block}
@keyframes cb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.cb-seal__ribbon{
position:absolute;z-index:3;inset-block-end:4%;
inset-inline:0;margin-inline:auto;inline-size:fit-content;
padding:7px 18px;border-radius:999px;font-size:0.78rem;font-weight:800;white-space:nowrap;
color:var(--navy-deep);background:var(--gold);
box-shadow:0 14px 30px -12px oklch(0.72 0.13 80 / 0.9),inset 0 1px 0 oklch(1 0 0 / 0.6);
}
.cb-what{display:grid;grid-template-columns:1.15fr 0.85fr;gap:clamp(30px,5vw,64px);align-items:center}
.cb-what__text .tag{margin-block-end:14px}
.cb-what__text h2{margin-block-end:16px}
.cb-what__text p{margin-block-end:15px;color:var(--ink-soft);font-size:1.04rem}
.cb-what__text p:last-child{margin-block-end:0}
.cb-what__visual{position:relative;aspect-ratio:1;display:grid;place-items:center}
.cb-conic{
position:absolute;inset:8%;border-radius:50%;
background:conic-gradient(from 0deg,var(--cb-teal),var(--cb-emerald),var(--cb-cyan),var(--cb-orange),var(--cb-red),var(--cb-teal));
-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 14px),#000 calc(100% - 13px));
mask:radial-gradient(farthest-side,transparent calc(100% - 14px),#000 calc(100% - 13px));
opacity:0.9;animation:cb-spin 24s linear infinite;filter:saturate(1.1);
}
.cb-what__disc{
position:relative;z-index:1;inline-size:64%;aspect-ratio:1;border-radius:50%;
background:var(--white);display:grid;place-items:center;padding:12%;
box-shadow:var(--shadow-md),inset 0 2px 0 #fff;animation:cb-float 8s ease-in-out infinite;
}
.cb-what__disc img{inline-size:100%}
.cb-why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.cb-why{
position:relative;overflow:hidden;padding:28px 26px;border-radius:var(--radius);
background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm);
transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .4s var(--ease-out);
}
.cb-why::after{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;
background:linear-gradient(90deg,var(--cb-teal),var(--cb-emerald),var(--cb-cyan));transform:scaleX(0);transform-origin:inline-start;transition:transform .5s var(--ease-out)}
.cb-why:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:color-mix(in oklab,var(--cb-cyan) 55%,transparent)}
.cb-why:hover::after{transform:scaleX(1)}
.cb-why__dot{display:block;width:12px;height:12px;border-radius:50%;
background:var(--cb-emerald);box-shadow:0 0 0 5px color-mix(in oklab,var(--cb-emerald) 22%,transparent)}
.cb-why h3{margin-block:16px 8px;font-size:1.14rem;color:var(--navy)}
.cb-why p{color:var(--ink-soft);font-size:0.95rem}
.cb-dom-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.cb-dom{
padding:30px 26px;border-radius:var(--radius);
background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm);
transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out);
}
.cb-dom:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.cb-dom__icon{
display:grid;place-items:center;width:54px;height:54px;border-radius:16px;margin-block-end:16px;
color:var(--cb-teal);background:color-mix(in oklab,var(--cb-cyan) 20%,transparent);
transition:transform .4s var(--ease-out);
}
.cb-dom:hover .cb-dom__icon{transform:translateY(-3px) rotate(-4deg)}
.cb-dom__icon svg{width:27px;height:27px}
.cb-dom h3{margin-block-end:8px;font-size:1.14rem;color:var(--navy)}
.cb-dom p{color:var(--ink-soft);font-size:0.95rem}
.cb-story{max-width:760px;margin-inline:auto}
.cb-story__badge{
display:grid;place-items:center;width:110px;height:110px;margin:0 auto 22px;
border-radius:50%;padding:20px;background:var(--white);
box-shadow:var(--shadow-md),inset 0 2px 0 #fff;animation:cb-float 7s ease-in-out infinite;
}
.cb-story__badge img{width:100%}
.cb-story__text{margin-block-start:16px;color:var(--ink-soft);font-size:1.1rem}
@media (prefers-reduced-motion:reduce){
.cb-seal__orbit--2,
.cb-seal__spin,
.cb-seal__disc,
.cb-conic,
.cb-what__disc,
.cb-story__badge,
.cb-seal__halo{animation:none !important}
}
@media (max-width:900px){
.cb-seal{order:-1;inline-size:clamp(220px,60vw,300px)}
.cb-what{grid-template-columns:minmax(0,1fr)}
.cb-what__visual{max-width:340px;margin-inline:auto;order:-1}
.cb-why-grid,.cb-dom-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
.cb-why-grid,.cb-dom-grid{grid-template-columns:minmax(0,1fr)}
}
.doc-profile{--acc:var(--accent,var(--hero-accent))}
.dp-hero{
position:relative;overflow:hidden;isolation:isolate;color:#fff;
background:var(--navy-darkest);
padding-block:calc(var(--header-h) + clamp(28px,5vh,56px)) clamp(60px,9vh,112px);
}
.dp-hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.dp-glow{position:absolute;border-radius:50%;filter:blur(90px);mix-blend-mode:screen}
.dp-glow--1{width:52%;aspect-ratio:1.2;inset-block-start:-16%;inset-inline-end:-8%;
background:color-mix(in oklab,var(--acc) 72%,transparent);animation:cb-breathe 12s ease-in-out infinite}
.dp-glow--2{width:40%;aspect-ratio:1.2;inset-block-end:-18%;inset-inline-start:-6%;
background:color-mix(in oklab,var(--gold) 26%,transparent);animation:cb-breathe 15s ease-in-out infinite reverse}
.dp-hero__word{
position:absolute;inset-inline:0;inset-block-start:34%;text-align:center;
font-size:clamp(3.5rem,15vw,13rem);font-weight:800;letter-spacing:-0.03em;
color:oklch(1 0 0 / 0.045);white-space:nowrap;overflow:hidden;
pointer-events:none;user-select:none;
}
.dp-motes{position:absolute;inset:0}
.dp-motes i{position:absolute;inset-block-end:-3%;width:5px;aspect-ratio:1;border-radius:50%;
background:color-mix(in oklab,var(--acc) 65%,white);opacity:0;animation:gf-rise linear infinite}
.dp-motes i:nth-child(1){inset-inline-start:9%;animation-duration:16s;animation-delay:0s;scale:.7}
.dp-motes i:nth-child(2){inset-inline-start:22%;animation-duration:20s;animation-delay:4s}
.dp-motes i:nth-child(3){inset-inline-start:34%;animation-duration:13s;animation-delay:7s;scale:.6}
.dp-motes i:nth-child(4){inset-inline-start:47%;animation-duration:18s;animation-delay:2s}
.dp-motes i:nth-child(5){inset-inline-start:60%;animation-duration:15s;animation-delay:9s;scale:.8}
.dp-motes i:nth-child(6){inset-inline-start:72%;animation-duration:19s;animation-delay:5s}
.dp-motes i:nth-child(7){inset-inline-start:84%;animation-duration:12s;animation-delay:1s;scale:.6}
.dp-motes i:nth-child(8){inset-inline-start:93%;animation-duration:17s;animation-delay:8s}
.dp-hero__fade{position:absolute;inset-inline:0;inset-block-end:0;height:100px;z-index:1;
background:linear-gradient(transparent,var(--paper))}
.dp-hero__inner{
position:relative;z-index:2;
display:grid;grid-template-columns:minmax(230px,330px) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center;
}
.dp-portrait{position:relative;inline-size:min(330px,100%);aspect-ratio:3/4;justify-self:center;display:grid;place-items:center}
.dp-portrait__glow{position:absolute;inset:-10%;border-radius:40px;
background:radial-gradient(circle,color-mix(in oklab,var(--acc) 60%,transparent),transparent 70%);
filter:blur(30px);animation:cb-pulse 5s ease-in-out infinite}
.dp-portrait__ring{position:absolute;border-radius:34px}
.dp-portrait__ring--1{inset:-4%;border:1px solid oklch(1 0 0 / 0.14)}
.dp-portrait__ring--2{inset:-9%;border:1px dashed color-mix(in oklab,var(--acc) 55%,white);border-radius:40px;opacity:.6}
.dp-portrait__frame,.dp-portrait__mono{
position:relative;z-index:2;inline-size:100%;block-size:100%;border-radius:28px;overflow:hidden;
border:1px solid oklch(1 0 0 / 0.18);
box-shadow:0 42px 82px -30px oklch(0.05 0.04 268 / 0.85),inset 0 1px 0 oklch(1 0 0 / 0.22);
animation:cb-float 7s ease-in-out infinite;
}
.dp-portrait__frame img{inline-size:100%;block-size:100%;object-fit:cover;object-position:top center}
.dp-portrait__mono{
display:grid;place-items:center;
background:linear-gradient(150deg,color-mix(in oklab,var(--acc) 92%,black 6%),color-mix(in oklab,var(--acc) 52%,var(--navy-darkest)));
}
.dp-portrait__mono b{position:relative;z-index:2;font-size:clamp(3.2rem,7vw,4.8rem);font-weight:800;color:#fff;
font-family:var(--font-en);line-height:1;letter-spacing:0.02em;text-shadow:0 4px 22px rgba(0,0,0,0.35)}
.dp-portrait__watermark{position:absolute;inset-block-start:-4%;inset-inline-end:-6%;font-size:clamp(2.6rem,7vw,5rem);
font-weight:800;color:oklch(1 0 0 / 0.08);white-space:nowrap;pointer-events:none}
.dp-portrait__spec{position:absolute;z-index:2;inset-block-end:16px;inset-inline:14px;text-align:center;
font-size:0.8rem;font-weight:700;color:oklch(1 0 0 / 0.82)}
.dp-portrait__badge{position:absolute;z-index:3;inset-block-end:-14px;inset-inline-start:-14px;
width:56px;height:56px;border-radius:18px;display:grid;place-items:center;color:var(--acc);background:#fff;
box-shadow:0 16px 34px -12px oklch(0.1 0.05 268 / 0.6),inset 0 1px 0 #fff;animation:cb-float 6s ease-in-out infinite .3s}
.dp-portrait__badge svg{width:28px;height:28px}
.dp-portrait__tag{position:absolute;z-index:3;inset-block-start:12px;inset-inline-end:-8px;
padding:6px 14px;border-radius:999px;font-size:0.72rem;font-weight:800;color:var(--navy-deep);background:var(--gold);
box-shadow:0 12px 24px -10px oklch(0.72 0.13 80 / 0.85)}
.dp-crumbs{display:flex;gap:8px;align-items:center;font-size:0.82rem;color:oklch(1 0 0 / 0.55);margin-block-end:16px}
.dp-crumbs a{transition:color .3s var(--ease-out)}
.dp-crumbs a:hover{color:var(--gold)}
.dp-eyebrow{display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:0.8rem;font-weight:700;
padding:7px 15px;border-radius:999px;background:color-mix(in oklab,var(--acc) 40%,transparent);border:1px solid oklch(1 0 0 / 0.2)}
.dp-eyebrow::before{content:none}
.dp-eyebrow svg{width:16px;height:16px}
.dp-name{font-size:clamp(2rem,4vw,3.1rem);line-height:1.08;margin-block:16px 8px}
.lang-en .dp-name{font-family:var(--font-en)}
.dp-title{font-size:clamp(1.05rem,1.8vw,1.28rem);font-weight:700;color:color-mix(in oklab,var(--acc) 45%,white)}
.dp-tagline{margin-block-start:12px;color:oklch(1 0 0 / 0.78);font-size:1.05rem;max-width:52ch}
.dp-facts{display:flex;flex-wrap:wrap;gap:12px;margin-block:26px}
.dp-fact{padding:12px 18px;border-radius:14px;background:oklch(1 0 0 / 0.06);border:1px solid oklch(1 0 0 / 0.14);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.dp-fact__k{display:block;font-size:0.68rem;color:oklch(1 0 0 / 0.55)}
.dp-fact__v{display:block;font-size:0.95rem;font-weight:700;color:#fff;margin-block-start:3px}
.dp-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.dp-back{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:700;font-size:0.95rem;transition:color .3s var(--ease-out)}
.dp-back svg{width:18px;height:18px}
[dir="rtl"] .dp-back svg{transform:scaleX(-1)}
.dp-back:hover{color:var(--gold)}
.dp-body{display:grid;grid-template-columns:1.5fr 0.9fr;gap:clamp(28px,4vw,56px);align-items:start}
.dp-body__main .tag{margin-block-end:16px}
.dp-bio{font-size:1.1rem;line-height:1.9;color:var(--ink-soft)}
.dp-approach{display:flex;gap:16px;margin-block-start:26px;padding:22px 24px;border-radius:18px;
background:color-mix(in oklab,var(--acc) 7%,var(--paper-2));border:1px solid color-mix(in oklab,var(--acc) 22%,var(--line));
border-inline-start:4px solid var(--acc)}
.dp-approach__mark{width:34px;height:34px;color:var(--acc);flex-shrink:0;opacity:0.45}
.dp-approach__k{display:block;font-size:0.74rem;font-weight:800;letter-spacing:0.04em;color:var(--acc);margin-block-end:6px}
.dp-approach p{color:var(--ink);font-size:1.02rem}
.dp-focus{padding:26px;border-radius:20px;background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm);
position:sticky;inset-block-start:calc(var(--header-h-scrolled) + 20px)}
.dp-focus h3{font-size:1.1rem;color:var(--navy);margin-block-end:16px;display:flex;align-items:center;gap:10px}
.dp-focus h3::before{content:"";width:20px;height:2px;border-radius:2px;background:var(--acc)}
.dp-focus ul{display:grid;gap:12px}
.dp-focus li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-soft);font-size:0.98rem}
.dp-focus li svg{width:18px;height:18px;color:var(--acc);flex-shrink:0;margin-block-start:2px}
.dp-exp{
position:relative;isolation:isolate;overflow:hidden;
background:var(--navy-darkest);color:#fff;
}
.dp-exp__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.dp-exp > .wrap{position:relative;z-index:1}
.dp-exp .tag{color:color-mix(in oklab,var(--accent) 45%,white)}
.dp-exp .tag::before{background:var(--accent)}
.dp-exp .section-head h2{color:#fff}
.dp-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.dp-chip{
position:relative;
--lg-tint:var(--accent);
display:flex;flex-direction:column;align-items:flex-start;gap:10px;
padding:22px 20px;border-radius:var(--radius);
text-align:start;
}
.dp-chip__n{
font-family:var(--font-en);font-size:0.74rem;font-weight:800;letter-spacing:0.09em;
color:oklch(1 0 0 / 0.62);
}
.dp-chip__t{font-size:1.02rem;font-weight:700;color:#fff;line-height:1.45;
text-shadow:0 1px 3px oklch(0 0 0 / 0.35)}
.dp-rel-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.dp-rel{
position:relative;display:block;overflow:hidden;isolation:isolate;
aspect-ratio:3 / 4;border-radius:clamp(16px,1.5vw,22px);
background:
radial-gradient(120% 80% at 50% 0%,color-mix(in oklab,var(--accent) 34%,transparent),transparent 62%),
linear-gradient(170deg,color-mix(in oklab,var(--accent) 20%,var(--navy-deep)),var(--navy-darkest));
box-shadow:0 20px 44px -30px oklch(0.30 0.10 268 / 0.55);
transition:transform .5s var(--ease-out-quart),box-shadow .5s var(--ease-out);
}
.dp-rel:hover{transform:translateY(-6px);box-shadow:0 34px 60px -32px oklch(0.30 0.10 268 / 0.6)}
.dp-rel:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.dp-rel__media{position:absolute;inset:0;z-index:0;display:block}
.dp-rel__img{
width:100%;height:100%;object-fit:cover;object-position:top center;
transform:scale(1.03);filter:saturate(1.06) contrast(1.03);
transition:transform 1.1s var(--ease-out-quart),filter .6s var(--ease-out);
}
.dp-rel:hover .dp-rel__img{transform:scale(1.09);filter:saturate(1.14) contrast(1.05)}
.dp-rel__mono{
position:absolute;inset:0;display:grid;place-items:center;
background:linear-gradient(155deg,
color-mix(in oklab,var(--accent) 80%,black 8%),
color-mix(in oklab,var(--accent) 38%,var(--navy-deep)));
}
.dp-rel__mono b{
font-family:var(--font-en);font-size:clamp(2.4rem,4vw,3.4rem);font-weight:800;
color:oklch(1 0 0 / 0.9);letter-spacing:0.02em;
}
.dp-rel__scrim{
position:absolute;inset:0;z-index:1;pointer-events:none;
background:
linear-gradient(to top,
color-mix(in oklab,var(--accent) 22%,transparent) 0%,
color-mix(in oklab,var(--accent) 7%,transparent) 30%,
transparent 58%),
linear-gradient(to top,
oklch(0.15 0.018 262 / 0.92) 0%,
oklch(0.15 0.018 262 / 0.62) 32%,
oklch(0.15 0.018 262 / 0.18) 62%,
transparent 100%);
}
.dp-rel__ic{
position:absolute;z-index:3;inset-block-start:12px;inset-inline-start:12px;
width:38px;height:38px;border-radius:13px;display:grid;place-items:center;
color:#fff;
background:oklch(1 0 0 / 0.15);border:1px solid oklch(1 0 0 / 0.30);
box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.42),0 8px 20px -12px oklch(0 0 0 / 0.7);
-webkit-backdrop-filter:blur(16px) saturate(1.7);backdrop-filter:blur(16px) saturate(1.7);
transition:background .45s var(--ease-out),transform .45s var(--ease-out-quart);
}
.dp-rel__ic svg{width:19px;height:19px}
.dp-rel:hover .dp-rel__ic{
background:var(--accent);border-color:oklch(1 0 0 / 0.5);
transform:translateY(-3px) rotate(-4deg);
}
.dp-rel__body{
position:absolute;z-index:4;
inset-inline:9px;inset-block-end:9px;
display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
gap:2px;padding:9px 12px;border-radius:13px;
--lg-tint:var(--accent);
min-block-size:calc(0.98rem * 1.24 * 2 + 0.76rem * 1.4 + 2px + 9px * 2);
}
.dp-rel__name{
font-size:0.98rem;font-weight:800;line-height:1.24;color:#fff;
letter-spacing:-0.01em;text-shadow:0 1px 3px oklch(0 0 0 / 0.45);
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.dp-rel__spec{
font-size:0.76rem;line-height:1.4;color:oklch(1 0 0 / 0.78);
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;
}
@media (prefers-reduced-motion:reduce){
.dp-glow,.dp-motes i,.dp-portrait__glow,.dp-portrait__frame,.dp-portrait__mono,.dp-portrait__badge{animation:none !important}
}
@media (max-width:900px){
.dp-hero__inner{grid-template-columns:minmax(0,1fr);gap:30px;text-align:center}
.dp-portrait{order:-1}
.dp-eyebrow,.dp-facts,.dp-cta,.dp-crumbs{justify-content:center}
.dp-tagline{margin-inline:auto}
.dp-body{grid-template-columns:minmax(0,1fr)}
.dp-focus{position:static}
.dp-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
.dp-rel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.ct-hero{
position:relative;overflow:hidden;isolation:isolate;color:#fff;text-align:center;
background:var(--navy-darkest);
padding-block:calc(var(--header-h) + clamp(40px,7vh,78px)) clamp(66px,10vh,124px);
}
.ct-orbs{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(14px,3vw,34px);margin-block-start:40px}
.ct-orb{display:grid;place-items:center;gap:10px}
.ct-orb__ic{position:relative;width:66px;height:66px;border-radius:20px;display:grid;place-items:center;color:#fff;
background:color-mix(in oklab,var(--o) 24%,transparent);border:1px solid color-mix(in oklab,var(--o) 46%,transparent);
box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.2);transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.ct-orb__ic svg{width:28px;height:28px}
.ct-orb__ic::before{content:"";position:absolute;inset:-6px;border-radius:24px;
border:1px solid color-mix(in oklab,var(--o) 45%,transparent);opacity:0;animation:ct-ring 3s ease-out infinite}
@keyframes ct-ring{0%{transform:scale(0.9);opacity:.6}100%{transform:scale(1.28);opacity:0}}
.ct-orb:hover .ct-orb__ic{transform:translateY(-6px) scale(1.05);box-shadow:0 20px 36px -14px var(--o),inset 0 1px 0 oklch(1 0 0 / 0.3)}
.ct-orb__t{font-size:0.85rem;font-weight:700;color:oklch(1 0 0 / 0.85)}
.ct-layout{display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(26px,4vw,54px);align-items:start}
.ct-info .tag{margin-block-end:20px}
.ct-line{display:flex;align-items:center;gap:14px;padding:15px 18px;border-radius:16px;margin-block-end:12px;
background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm);
transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .35s var(--ease-out)}
.ct-line:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:oklch(0.78 0.13 85 / 0.5)}
.ct-line__ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:var(--navy);
background:var(--navy-06);flex-shrink:0}
.ct-line__ic svg{width:22px;height:22px}
.ct-line__b{display:flex;flex-direction:column;min-width:0}
.ct-line__k{font-size:0.74rem;color:var(--ink-soft)}
.ct-line__v{font-size:1rem;font-weight:700;color:var(--navy);word-break:break-word}
.ct-social{margin-block-start:24px}
.ct-social__t{display:block;font-size:0.8rem;color:var(--ink-soft);margin-block-end:12px}
.ct-social__row{display:flex;gap:12px}
.ct-social__row a{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:var(--navy);
background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm);
transition:background .35s var(--ease-out),color .35s var(--ease-out),transform .35s var(--ease-out)}
.ct-social__row a:hover{background:var(--navy);color:#fff;transform:translateY(-4px)}
.ct-social__row svg{width:20px;height:20px}
.ct-form-wrap{position:relative;overflow:hidden;padding:clamp(24px,3.4vw,42px);border-radius:26px;
background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.ct-form-wrap::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:4px;
background:linear-gradient(90deg,var(--navy),var(--gold),var(--crimson))}
.ct-form__title{font-size:clamp(1.4rem,2.4vw,1.85rem);color:var(--navy)}
.ct-form__lead{color:var(--ink-soft);margin-block:8px 24px}
.ct-form{display:grid;gap:16px}
.ct-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.ct-field{position:relative}
.ct-field input,.ct-field textarea{
width:100%;padding:21px 16px 8px;border-radius:14px;font:inherit;color:var(--ink);
border:1px solid var(--line);background:var(--paper-2);
transition:border-color .3s var(--ease-out),box-shadow .3s var(--ease-out),background .3s var(--ease-out)}
.ct-field textarea{resize:vertical;min-height:120px}
.ct-field label{position:absolute;inset-inline-start:16px;inset-block-start:15px;color:var(--ink-soft);
pointer-events:none;transition:inset-block-start .22s var(--ease-out),font-size .22s var(--ease-out),color .22s var(--ease-out);font-size:1rem}
.ct-field input:focus,.ct-field textarea:focus{border-color:var(--navy);background:#fff;
box-shadow:0 0 0 4px oklch(0.34 0.16 268 / 0.1)}
.ct-field input:focus:not(:focus-visible),.ct-field textarea:focus:not(:focus-visible){outline:none}
.ct-field input:focus-visible,.ct-field textarea:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.ct-field input:focus + label,.ct-field input:not(:placeholder-shown) + label,
.ct-field textarea:focus + label,.ct-field textarea:not(:placeholder-shown) + label{
inset-block-start:7px;font-size:0.7rem;color:var(--navy);font-weight:700}
.ct-type{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ct-type__k{font-size:0.9rem;color:var(--ink-soft);font-weight:700}
.ct-seg{position:relative;display:inline-flex;padding:4px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line)}
.ct-seg__b{position:relative;z-index:1;padding:8px 22px;border-radius:999px;font-weight:700;color:var(--ink-soft);font-size:0.9rem;transition:color .3s var(--ease-out)}
.ct-seg__b.is-active{color:#fff}
.ct-seg__pill{position:absolute;z-index:0;inset-block:4px;border-radius:999px;background:var(--navy);
box-shadow:0 6px 16px -6px oklch(0.34 0.16 268 / 0.6);transition:transform .35s var(--ease-out),width .35s var(--ease-out)}
.ct-submit{margin-block-start:6px;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.ct-submit svg{width:20px;height:20px}
.ct-form__note{font-size:0.8rem;color:var(--ink-soft);text-align:center}
.ct-form__msg{text-align:center;font-weight:700;color:#087f5b;min-height:1.2em;opacity:0;transform:translateY(6px);
transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
.ct-form__msg.show{opacity:1;transform:none}
.ct-form__wa{display:inline-flex;align-items:center;justify-content:center;gap:8px;
align-self:center;margin-block-start:4px;padding:10px 18px;border-radius:999px;
font-weight:700;font-size:0.9rem;text-decoration:none;
color:#075e54;background:#d8f3e4;border:1px solid #9fdcbf}
.ct-form__wa:hover{background:#c4ecd6}
.ct-form__wa[hidden]{display:none}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;
overflow:hidden;opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){
.ct-orb__ic::before{animation:none !important}
}
@media (max-width:900px){
.ct-layout{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
.ct-row{grid-template-columns:minmax(0,1fr)}
.ct-orb__ic{width:58px;height:58px}
.ct-orb__ic svg{width:24px;height:24px}
}
.ez{position:relative;overflow:hidden;isolation:isolate;background:var(--paper-2)}
.ez__wash{
position:absolute;inset:0;z-index:0;pointer-events:none;
background:
radial-gradient(90% 60% at 50% 0%,var(--white) 0%,transparent 62%),
radial-gradient(52% 40% at 50% 76%,color-mix(in oklab,var(--hero-accent) 14%,transparent),transparent 72%);
}
.ez__wash::after{
content:"";position:absolute;inset:0;
background:radial-gradient(105% 72% at 50% 46%,transparent 42%,oklch(0.60 0.02 258 / 0.18) 100%);
}
.ez__grid{
position:relative;z-index:1;
display:grid;grid-template-columns:0.9fr 1.1fr;
gap:clamp(22px,4vw,64px);align-items:center;
}
.ez-stage{perspective:1400px}
.ez-stage__inner{
position:relative;width:min(100%,470px);margin-inline:auto;
aspect-ratio:1621 / 2267;
}
.ez-stage__halo{
position:absolute;inset-block:12% -4%;inset-inline:-6%;z-index:0;
border-radius:50%;
background:radial-gradient(closest-side,color-mix(in oklab,var(--hero-accent) 24%,transparent),transparent 72%);
filter:blur(38px);
}
.ez-stage__model{
position:absolute;inset:0;z-index:1;
width:100%;height:100%;object-fit:contain;object-position:bottom center;
-webkit-mask-image:
linear-gradient(to bottom,#000 86%,transparent 100%),
linear-gradient(to right,transparent 0%,#000 9%,#000 91%,transparent 100%);
mask-image:
linear-gradient(to bottom,#000 86%,transparent 100%),
linear-gradient(to right,transparent 0%,#000 9%,#000 91%,transparent 100%);
-webkit-mask-composite:source-in;
mask-composite:intersect;
transform:translate3d(calc(var(--ez-px,0) * 0.35),calc(var(--ez-py,0) * 0.35),0);
transition:transform .6s var(--ease-out);
}
.ez-phone{
container-type:inline-size;
position:absolute;z-index:2;inset-block-start:0;inset-inline:0;
width:55.34%;margin-inline:auto;aspect-ratio:697 / 1416;
transform:translate3d(var(--ez-px,0),var(--ez-py,0),0);
transition:transform .4s var(--ease-out);
}
.ez-phone__frame{
position:relative;z-index:2;display:block;width:100%;height:100%;
filter:
drop-shadow(0 3cqw 4cqw oklch(0.30 0.14 268 / 0.30))
drop-shadow(0 0.5cqw 1cqw oklch(0.30 0.14 268 / 0.16));
pointer-events:none;
}
.ez-screen{
position:absolute;z-index:1;
inset-block:0.71% 0.78%;inset-inline:2.15% 2.30%;
border-radius:10.8% / 5.16%;
overflow:hidden;
box-shadow:inset 0 0 0 0.5cqw #0a0a0e;
}
.ez-siri{
position:absolute;inset:-10%;z-index:2;pointer-events:none;
background:conic-gradient(from var(--ah-frame-a),
#01647a,#00a39e,#66c6e6,#1ab6c3,#5fc0c4,#f28b4a,#ec6642,#e84333,#c82f23,#04715c,#008f7b,
#01647a,#00a39e,#66c6e6,#1ab6c3,#5fc0c4,#f28b4a,#ec6642,#e84333,#c82f23,#04715c,#008f7b,#01647a);
filter:blur(4.2cqw) saturate(1.12);
-webkit-mask-image:
linear-gradient(to right,#000 0 9%,transparent 20%,transparent 80%,#000 91% 100%),
linear-gradient(to bottom,#000 0 7%,transparent 13%,transparent 87%,#000 93% 100%);
mask-image:
linear-gradient(to right,#000 0 9%,transparent 20%,transparent 80%,#000 91% 100%),
linear-gradient(to bottom,#000 0 7%,transparent 13%,transparent 87%,#000 93% 100%);
-webkit-mask-composite:source-over;
mask-composite:add;
animation:ah-frame-flow 8s linear infinite,ez-siri-breathe 4.6s ease-in-out infinite;
}
.ez-siri-edge{
position:absolute;inset:0;z-index:6;pointer-events:none;
border-radius:inherit;padding:0.7cqw;
background:conic-gradient(from var(--ah-frame-a),
#01647a,#00a39e,#66c6e6,oklch(0.97 0.03 200),#5fc0c4,#f28b4a,#ec6642,#e84333,#c82f23,#04715c,#008f7b,
#01647a,#00a39e,#66c6e6,oklch(0.97 0.03 200),#5fc0c4,#f28b4a,#ec6642,#e84333,#c82f23,#04715c,#008f7b,#01647a);
-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,linear-gradient(#000 0 0);mask-composite:exclude;
opacity:0.85;
animation:ah-frame-flow 8s linear infinite;
}
@keyframes ez-siri-breathe{0%,100%{opacity:0.42}50%{opacity:0.78}}
.ez-screen::after{
content:"";position:absolute;z-index:2;pointer-events:none;
inset-inline:0;inset-block-end:0;height:36%;
background:linear-gradient(to top,
color-mix(in oklab,#4f7ada 52%,transparent) 0%,
color-mix(in oklab,#6f8fdf 26%,transparent) 42%,
transparent 100%);
}
.ez-island{
position:absolute;z-index:4;inset-block-start:6.5cqw;inset-inline:0;
margin-inline:auto;width:28.7cqw;height:7.2cqw;border-radius:999px;
background:#0c0c11;
display:flex;align-items:center;justify-content:space-between;
padding-inline:2.6cqw;
box-shadow:inset 0 0 0 0.25cqw oklch(1 0 0 / 0.07);
}
.ez-island i{
width:3.2cqw;height:3.2cqw;border-radius:50%;
background:radial-gradient(circle at 34% 28%,#40404c 0%,#17171e 46%,#08080c 100%);
box-shadow:inset 0 0 0 0.32cqw oklch(0.52 0.09 62 / 0.5);
}
.ez-hdr{
position:absolute;z-index:3;inset-block-start:0;inset-inline:0;
display:flex;align-items:center;gap:2.8cqw;
padding:18cqw 6.5cqw 9cqw;
color:#fff;
background:linear-gradient(to bottom,
oklch(0.15 0.02 268 / 0.95) 0%,
oklch(0.15 0.02 268 / 0.80) 52%,
oklch(0.17 0.02 268 / 0) 100%);
-webkit-backdrop-filter:blur(26px) saturate(1.35);
backdrop-filter:blur(26px) saturate(1.35);
-webkit-mask-image:linear-gradient(to bottom,#000 58%,transparent 100%);
mask-image:linear-gradient(to bottom,#000 58%,transparent 100%);
}
.ez-hdr::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(148deg,oklch(1 0 0 / 0.20) 0%,oklch(1 0 0 / 0.04) 26%,transparent 52%);
}
.ez-hdr__logo{position:relative;width:19.4cqw;height:auto;flex-shrink:0;
filter:drop-shadow(0 0.4cqw 0.8cqw oklch(0 0 0 / 0.35))}
.ez-hdr__b{position:relative;display:flex;flex-direction:column;min-width:0}
.ez-hdr__k{
font-family:var(--font-en);font-size:8.2cqw;font-weight:600;line-height:1.02;
letter-spacing:0.02em;color:oklch(1 0 0 / 0.97);
text-shadow:0 0 2.4cqw oklch(0.85 0.06 240 / 0.55);
}
.ez-hdr__n{font-size:4.5cqw;font-weight:700;line-height:1.32;color:oklch(1 0 0 / 0.9)}
.ez-hdr__tel{
font-family:var(--font-en);font-size:6.4cqw;font-weight:500;line-height:1.16;
color:#fff;letter-spacing:0.01em;align-self:flex-start;
transition:color .3s var(--ease-out),text-shadow .3s var(--ease-out);
}
.ez-hdr__tel:hover{color:color-mix(in oklab,var(--gold) 70%,white);text-shadow:0 0 2cqw oklch(0.82 0.14 88 / 0.6)}
.ez-ask{
position:absolute;z-index:3;inset-inline:9%;inset-block-end:3.4%;
display:flex;align-items:center;justify-content:space-between;gap:3cqw;
padding:3.2cqw 4.4cqw;border-radius:999px;
background:oklch(1 0 0 / 0.17);
-webkit-backdrop-filter:blur(22px) saturate(1.4);
backdrop-filter:blur(22px) saturate(1.4);
box-shadow:
inset 0 0.22cqw 0 oklch(1 0 0 / 0.55),
inset 0 -0.3cqw 1.4cqw oklch(0.24 0.06 258 / 0.30),
0 0 0 0.16cqw oklch(1 0 0 / 0.34),
0 1.6cqw 3.4cqw oklch(0.24 0.10 258 / 0.28);
transition:transform .45s var(--ease-out),background .45s var(--ease-out),box-shadow .45s var(--ease-out);
}
.ez-ask::before{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:linear-gradient(115deg,oklch(0.80 0.13 210 / 0.16),transparent 26%,transparent 74%,oklch(0.76 0.12 350 / 0.13));
mix-blend-mode:screen;
}
.ez-ask:hover{
transform:translateY(-0.6cqw);
background:oklch(1 0 0 / 0.28);
box-shadow:
inset 0 0.22cqw 0 oklch(1 0 0 / 0.7),
inset 0 -0.3cqw 1.4cqw oklch(0.24 0.06 258 / 0.26),
0 0 0 0.16cqw oklch(1 0 0 / 0.5),
0 2.4cqw 4.6cqw oklch(0.24 0.10 258 / 0.34);
}
.ez-ask__t{
position:relative;font-size:4.6cqw;font-weight:700;color:#fff;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
text-shadow:0 0.2cqw 0.6cqw oklch(0.24 0.06 258 / 0.5);
}
.ez-ask__wave{position:relative;display:flex;align-items:center;gap:0.8cqw;height:5cqw;flex-shrink:0}
.ez-ask__wave i{
width:0.8cqw;height:100%;border-radius:999px;background:oklch(1 0 0 / 0.92);
transform-origin:center;transform:scaleY(0.34);
animation:ez-wave 1.25s ease-in-out infinite;
}
.ez-ask__wave i:nth-child(1){animation-delay:0s}
.ez-ask__wave i:nth-child(2){animation-delay:.16s}
.ez-ask__wave i:nth-child(3){animation-delay:.32s}
.ez-ask__wave i:nth-child(4){animation-delay:.48s}
.ez-ask__wave i:nth-child(5){animation-delay:.64s}
@keyframes ez-wave{
0%,100%{transform:scaleY(0.30)}
50%{transform:scaleY(1)}
}
.ez-copy__h{font-size:clamp(1.8rem,3.4vw,2.75rem);line-height:1.16;color:var(--navy);
font-weight:800;margin-block:16px 14px}
.lang-en .ez-copy__h{font-family:var(--font-en)}
.ez-copy__lead{color:var(--ink-soft);font-size:1.06rem;line-height:1.85;max-width:54ch}
.ez-steps{display:grid;gap:12px;margin-block:28px;counter-reset:ez}
.ez-step{
display:flex;align-items:flex-start;gap:14px;
padding:15px 18px;border-radius:16px;
background:oklch(1 0 0 / 0.72);border:1px solid var(--line);
box-shadow:var(--shadow-sm);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .4s var(--ease-out);
}
.ez-step:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);
border-color:color-mix(in oklab,var(--hero-accent) 40%,transparent)}
.ez-step__ic{
position:relative;width:42px;height:42px;border-radius:13px;flex-shrink:0;
display:grid;place-items:center;color:var(--hero-accent);
background:color-mix(in oklab,var(--hero-accent) 10%,transparent);
border:1px solid color-mix(in oklab,var(--hero-accent) 20%,transparent);
}
.ez-step__ic svg{width:20px;height:20px}
.ez-step__ic::after{
counter-increment:ez;content:counter(ez);
position:absolute;inset-block-start:-7px;inset-inline-start:-7px;
width:20px;height:20px;border-radius:50%;
display:grid;place-items:center;
font-family:var(--font-en);font-size:0.68rem;font-weight:800;color:#fff;
background:var(--navy);box-shadow:0 3px 8px -3px oklch(0.34 0.16 268 / 0.7);
}
.ez-step__b{display:flex;flex-direction:column;gap:3px;min-width:0}
.ez-step__b strong{font-size:1rem;font-weight:800;color:var(--navy)}
.ez-step__b span{font-size:0.9rem;line-height:1.6;color:var(--ink-soft)}
.ez-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.ez-cta .btn svg{width:20px;height:20px;flex-shrink:0}
.ez-cta__num{
font-family:var(--font-en);font-weight:700;font-size:0.94rem;
padding-inline-start:10px;margin-inline-start:2px;
border-inline-start:1px solid oklch(1 0 0 / 0.35);
color:oklch(1 0 0 / 0.88);
}
.ez-cta__wa{}
.ez-foot{
display:flex;align-items:center;flex-wrap:wrap;gap:8px;
margin-block-start:20px;font-size:0.88rem;font-weight:600;color:var(--ink-soft);
}
.ez-foot__dot{
width:9px;height:9px;border-radius:50%;background:var(--success);flex-shrink:0;
box-shadow:0 0 0 0 color-mix(in oklab,var(--success) 60%,transparent);
animation:ez-live 2.4s ease-out infinite;
}
.ez-foot__sep{color:var(--ink-soft);opacity:0.5}
@keyframes ez-live{
0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--success) 55%,transparent)}
70%{box-shadow:0 0 0 8px oklch(0.52 0.13 150 / 0)}
100%{box-shadow:0 0 0 0 oklch(0.52 0.13 150 / 0)}
}
@media (max-width:900px){
.ez__grid{grid-template-columns:minmax(0,1fr);gap:8px}
.ez-stage{order:-1}
.ez-stage__inner{width:min(100%,380px)}
.ez-copy{text-align:center}
.ez-copy__lead{margin-inline:auto}
.ez-step{text-align:start}
.ez-cta,.ez-foot{justify-content:center}
}
@media (max-width:560px){
.ez-stage__inner{width:min(100%,320px)}
.ez-cta .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
.ez-ask__wave i,.ez-foot__dot{animation:none !important}
.ez-ask__wave i{transform:scaleY(0.62)}
.ez-phone,.ez-stage__model{transform:none !important;transition:none !important}
.ez-siri,.ez-siri-edge{animation:none !important}
.ez-siri{opacity:0.65}
}
.sv-more{text-align:center;margin-block-start:clamp(20px,2.4vw,32px)}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
@media (max-width:1240px){
.nav-link{font-size:0.85rem}
.brand-logo{height:46px}
.header-actions .btn--book{padding:10px 15px;font-size:0.85rem}
}
@media (max-width:1150px){
:root{--header-h:74px;--header-h-scrolled:64px}
.main-nav{display:none}
.header-actions .btn--book,.header-actions .lang-toggle{display:none}
.nav-burger{display:block}
.brand-logo{height:46px}
.site-header[data-state="scrolled"] .brand-logo{height:40px}
}
@media (max-width:900px){
:root{--header-h:74px;--header-h-scrolled:64px}
.main-nav{display:none}
.header-actions .btn--book,.header-actions .lang-toggle{display:none}
.nav-burger{display:block}
.brand-group{gap:10px}
.brand-cbahi__txt{display:none}
.brand-cbahi{padding:4px}
[dir="rtl"] .brand-cbahi{padding:4px}
.brand-logo{height:46px}
.site-header[data-state="scrolled"] .brand-logo{height:40px}
.gf-grid{
grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;
grid-template-areas:"links contact" "map map";
}
.gf-panel--map{inline-size:100%}
.gf-chip{display:none}
.gf-crest{border-radius:22px;padding:22px 20px;row-gap:10px}
.gf-panel{padding:16px 16px 18px;border-radius:18px}
.gf-panel h4{font-size:0.92rem;margin-block-end:11px}
.gf-links{gap:7px;font-size:0.9rem}
.gf-contact li{gap:8px;margin-block-end:9px;font-size:0.86rem}
.gf-contact svg{width:16px;height:16px}
.gf-tagline{font-size:0.92rem}
.gf-map__frame{flex:none;aspect-ratio:3 / 2;min-block-size:150px}
.gf-bottom{flex-direction:column;gap:12px}
.slide__tint{--tint-floor-a:72%;--tint-floor-h:80%}
.ah-inner{display:flex;flex-direction:column;gap:6px;min-height:0}
.ah-stage{position:relative;inset:auto;order:-1;justify-items:center;padding-right:0}
.ah-building-wrap{width:min(560px,94%);animation-duration:7s}
.ah-cbahi{position:static;order:-2;inline-size:min(220px,80%);margin-inline:auto;margin-block-end:6px;left:auto}
.ah-card{justify-self:stretch;inline-size:100%}
.ah-3d .ah-cbahi--framed{transform:translateZ(48px) scale(0.5);transform-origin:top right}
}
@media (max-width:620px){
.gf-grid{
grid-template-columns:minmax(0,1fr);
grid-template-areas:"links" "contact" "map";
}
.gf-links{column-gap:16px;row-gap:10px}
.gf-contact{display:grid;row-gap:10px}
.gf-contact li{margin-block-end:0}
.gf-contact span{overflow-wrap:anywhere}
.gf-contact a[href^="mailto"]{white-space:nowrap}
.gf-hours__k{display:inline}
.gf-hours__k::after{content:" · ";font-weight:600;opacity:0.65}
.gf-book{display:none}
}
@media (max-width:560px){
.slider-arrow{display:none}
.ah-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px}
.ah-cta{gap:14px}
.ah-cta__primary{width:100%;justify-content:center}
.brand-cbahi{display:none}
.slide__inner{padding-block-end:84px}
.slide__content{
max-width:100%;margin-inline:auto;
display:flex;flex-direction:column;align-items:center;
text-align:center;
}
.slide__content .eyebrow{margin-inline:auto}
.slide__content h1,.slide__content h2{font-size:clamp(1.7rem,8vw,2.1rem);margin-block-end:12px}
.slide__role{font-size:1rem;margin-block-end:12px}
.slide__lead{font-size:0.94rem;margin-block-end:22px;max-width:42ch}
.slide__cta{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;
width:100%;flex-wrap:nowrap;
}
.slide__cta .btn{
width:100%;padding-inline:10px;
font-size:0.86rem;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis;
}
.btn--lg{padding-block:13px}
}
@keyframes ring-spin{to{transform:rotate(360deg)}}
.docs-filterbar{
position:sticky;inset-block-start:var(--header-h-scrolled);z-index:40;
background:oklch(1 0 0 / 0.9);
-webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);
border-block-end:1px solid var(--line);
box-shadow:0 8px 24px -18px oklch(0.34 0.16 268 / 0.4);
}
.docs-filterbar__inner{display:flex;justify-content:center;padding-block:14px}
.docs-filters{position:relative;display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:var(--paper-2)}
.docs-filter{
position:relative;z-index:2;padding:10px 20px;border-radius:999px;
font-weight:700;font-size:0.94rem;color:var(--ink-soft);
display:inline-flex;align-items:center;gap:8px;
transition:color .4s var(--ease-out);
}
.docs-filter span{font-size:0.78rem;font-weight:800;opacity:0.65}
.docs-filter.is-active{color:#fff}
.docs-filter.is-active span{opacity:0.9}
.docs-filter__pill{
position:absolute;inset-block:5px;left:0;z-index:1;
width:0;border-radius:999px;background:var(--navy);
transition:transform .45s var(--ease-out),width .45s var(--ease-out);
}
.docs-section{position:relative;padding-block-start:60px;overflow:hidden}
.docs-section::before{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:
radial-gradient(42% 36% at 10% 4%,oklch(0.34 0.16 268 / 0.07),transparent 70%),
radial-gradient(38% 34% at 94% 26%,oklch(0.82 0.14 88 / 0.07),transparent 72%),
radial-gradient(46% 40% at 50% 108%,oklch(0.44 0.19 25 / 0.05),transparent 70%);
}
.docs-section > .wrap{position:relative;z-index:1}
.docs-grid{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;
align-items:start;
}
.doc-card{
position:relative;border-radius:var(--radius-lg);overflow:hidden;isolation:isolate;
aspect-ratio:3 / 4.35;
background:
radial-gradient(120% 74% at 50% -4%,oklch(1 0 0) 0%,oklch(1 0 0 / 0) 62%),
linear-gradient(172deg,
oklch(0.985 0.004 250) 0%,
oklch(0.955 0.010 248) 48%,
oklch(0.905 0.018 250) 100%);
box-shadow:
inset 0 1px 0 oklch(1 0 0 / 0.9),
inset 0 0 0 1px oklch(0.55 0.03 258 / 0.10),
inset 0 -40px 60px -44px oklch(0.42 0.05 260 / 0.30),
0 24px 54px -32px oklch(0.35 0.06 262 / 0.30);
opacity:0;transform:translateY(26px) scale(0.98);
animation:card-in .7s var(--ease-out) forwards;
animation-delay:calc(var(--i,0) * 70ms);
transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out),
border-color .55s var(--ease-out),opacity .35s var(--ease-out),visibility .35s;
}
@keyframes card-in{to{opacity:1;transform:none}}
.doc-card:hover{
transform:translateY(-10px);z-index:2;
box-shadow:
inset 0 1px 0 oklch(1 0 0 / 0.95),
inset 0 0 0 1px oklch(0.55 0.03 258 / 0.14),
inset 0 -40px 60px -44px oklch(0.42 0.05 260 / 0.26),
0 42px 74px -30px oklch(0.35 0.06 262 / 0.38);
}
.doc-card.is-hidden{opacity:0 !important;transform:scale(0.9) !important;visibility:hidden;pointer-events:none;position:absolute}
.doc-card--featured{box-shadow:0 0 0 3px oklch(0.78 0.13 84 / 0.55),
inset 0 -40px 60px -44px oklch(0.42 0.05 260 / 0.28),
0 24px 54px -32px oklch(0.35 0.06 262 / 0.30)}
.doc-card--featured:hover{box-shadow:0 0 0 3px oklch(0.74 0.13 82 / 0.8),
inset 0 -40px 60px -44px oklch(0.42 0.05 260 / 0.24),
0 42px 74px -30px oklch(0.35 0.06 262 / 0.38)}
.doc-card::before,.doc-card::after{
content:"";position:absolute;inset:0;pointer-events:none;
border-radius:inherit;padding:1.5px;
-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,linear-gradient(#000 0 0);
mask-composite:exclude;
}
.doc-card::before{
z-index:5;
background:conic-gradient(from 215deg,
#01647a,#00a39e,#66c6e6,#1ab6c3,#5fc0c4,#f28b4a,#ec6642,#e84333,#c82f23,#04715c,#008f7b,#01647a);
filter:saturate(1.15);
opacity:0.45;
transition:opacity .5s var(--ease-out);
}
.doc-card::after{
z-index:6;
background:conic-gradient(from var(--ah-frame-a),
transparent 0deg,transparent 285deg,
oklch(0.85 0.12 200 / 0.85) 315deg,#ffffff 338deg,oklch(0.88 0.14 78 / 0.9) 352deg,transparent 360deg);
filter:drop-shadow(0 0 6px oklch(0.9 0.12 200 / 0.7));
animation:ah-frame-flow 5.4s linear infinite;
animation-delay:calc(var(--i,0) * -0.68s);
transition:filter .5s var(--ease-out);
}
.doc-card:hover::before{opacity:0.85}
.doc-card:hover::after{
animation-duration:2.8s;
filter:drop-shadow(0 0 10px oklch(0.9 0.12 200 / 0.9));
}
.doc-card__photo{
position:absolute;inset:0;z-index:1;display:block;overflow:hidden;
border-radius:inherit;
}
.doc-card__media{
position:absolute;z-index:0;display:block;
inset-block:8% 20%;inset-inline:-5%;
}
.doc-card__img{
width:100%;height:100%;object-fit:contain;object-position:center bottom;
filter:drop-shadow(0 18px 24px oklch(0.35 0.06 262 / 0.28));
transform:translateY(0);
transition:transform .6s var(--ease-out);
}
.doc-card:hover .doc-card__img{transform:scale(1.05) translateY(-2%)}
.doc-card__scrim{
position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(to top,
oklch(0.995 0.003 250 / 0.94) 0%,
oklch(0.99 0.004 250 / 0.72) 26%,
oklch(0.98 0.006 250 / 0.28) 52%,
transparent 78%);
}
.doc-card__overlay{
position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
background:oklch(0.99 0.004 250 / 0);transition:background .4s var(--ease-out);
}
.doc-card:hover .doc-card__overlay{background:oklch(0.99 0.004 250 / 0.42)}
.doc-card__view{
display:inline-flex;align-items:center;gap:8px;
padding:10px 20px;border-radius:999px;font-weight:700;font-size:0.86rem;color:var(--navy);
background:oklch(1 0 0 / 0.62);border:1px solid oklch(1 0 0 / 0.85);
box-shadow:inset 0 1px 0 oklch(1 0 0 / 1),0 10px 24px -12px oklch(0.35 0.06 262 / 0.5);
-webkit-backdrop-filter:blur(16px) saturate(1.7);backdrop-filter:blur(16px) saturate(1.7);
opacity:0;transform:translateY(10px);
transition:opacity .4s var(--ease-out),transform .4s var(--ease-out);
}
.doc-card:hover .doc-card__view{opacity:1;transform:none}
.doc-card__view svg{width:16px;height:16px}
.doc-card__dept{
position:absolute;z-index:3;inset-block-start:12px;inset-inline-start:12px;
font-size:0.68rem;font-weight:800;letter-spacing:0.03em;color:var(--navy);
padding:5px 12px;border-radius:999px;
background:oklch(1 0 0 / 0.6);border:1px solid oklch(1 0 0 / 0.9);
box-shadow:inset 0 1px 0 oklch(1 0 0 / 1),0 8px 20px -12px oklch(0.35 0.06 262 / 0.45);
-webkit-backdrop-filter:blur(16px) saturate(1.7);backdrop-filter:blur(16px) saturate(1.7);
}
.doc-card__badge{
position:absolute;z-index:3;inset-block-start:12px;inset-inline-end:12px;
display:inline-flex;align-items:center;gap:5px;
background:var(--gold);color:var(--navy-deep);font-size:0.66rem;font-weight:800;
padding:4px 10px;border-radius:999px;letter-spacing:0.02em;white-space:nowrap;
box-shadow:0 8px 20px -10px oklch(0.72 0.13 80 / 0.8),inset 0 1px 0 oklch(1 0 0 / 0.5);
}
.doc-card__badge svg{flex-shrink:0}
.doc-card__body{
position:absolute;z-index:4;
inset-inline:10px;inset-block-end:10px;
display:flex;flex-direction:column;align-items:stretch;
gap:3px;padding:12px 13px;border-radius:15px;
color:var(--ink);
}
.doc-card__name{
font-size:1rem;font-weight:800;line-height:1.26;
min-block-size:2.52em;
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.doc-card__name a{color:var(--navy);transition:color .3s var(--ease-out)}
.doc-card:hover .doc-card__name a{color:var(--crimson)}
.doc-card__title{
font-size:0.79rem;color:var(--ink-soft);line-height:1.4;
min-block-size:2.8em;
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.doc-card__book{
position:relative;margin-block-start:9px;
display:flex;align-items:center;justify-content:center;gap:7px;
padding:9px 14px;border-radius:999px;white-space:nowrap;
font-weight:700;font-size:0.83rem;color:#fff;
background:
linear-gradient(148deg,oklch(1 0 0 / 0.20) 0%,oklch(1 0 0 / 0.04) 44%,transparent 68%),
var(--pepsi-pill);
-webkit-backdrop-filter:blur(14px) saturate(1.7);backdrop-filter:blur(14px) saturate(1.7);
box-shadow:
inset  1px  1px 1px -0.5px oklch(1 0 0 / 0.6),
inset -1px -1px 1px -0.5px oklch(0 0 0 / 0.3),
inset  0 7px 14px -11px oklch(1 0 0 / 0.75),
0 0 0 1px oklch(1 0 0 / 0.18),
0 10px 24px -12px color-mix(in oklab,var(--pepsi-2) 70%,transparent);
transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background .35s var(--ease-out);
}
.doc-card__book::before{
content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
pointer-events:none;
background:linear-gradient(128deg,
oklch(0.86 0.15 208 / 0.5) 0%,transparent 30%,
transparent 70%,oklch(0.82 0.15 348 / 0.36) 100%);
-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,linear-gradient(#000 0 0);mask-composite:exclude;
mix-blend-mode:screen;
}
.doc-card__book svg{position:relative;width:15px;height:15px;flex-shrink:0}
.doc-card__book span{position:relative;overflow:hidden;text-overflow:ellipsis}
.doc-card__book:hover{
transform:translateY(-2px);
background:
linear-gradient(148deg,oklch(1 0 0 / 0.30) 0%,oklch(1 0 0 / 0.07) 44%,transparent 68%),
var(--pepsi-pill);
box-shadow:
inset  1px  1px 1px -0.5px oklch(1 0 0 / 0.8),
inset -1px -1px 1px -0.5px oklch(0 0 0 / 0.28),
inset  0 7px 14px -11px oklch(1 0 0 / 0.9),
0 0 0 1px oklch(1 0 0 / 0.3),
0 18px 34px -12px color-mix(in oklab,var(--pepsi-2) 85%,transparent);
}
.doc-card__book:active{transform:translateY(-1px) scale(0.985);transition-duration:.12s}
.docs-empty{text-align:center;color:var(--ink-soft);padding-block:60px;font-size:1.05rem}
@media (max-width:1080px){
.docs-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
.docs-filterbar{inset-block-start:var(--header-h-scrolled)}
.docs-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.doc-card{aspect-ratio:3 / 6.2}
.doc-card__dept{display:none}
.doc-card__media{inset-block:11% 30%}
.doc-card:not(:has(.doc-card__badge)) .doc-card__media{inset-block-start:3%}
.doc-card__title{-webkit-line-clamp:2;min-block-size:2.8em}
}
@media (max-width:560px){
.doc-card__body{inset-inline:7px;inset-block-end:7px;padding:10px 11px;border-radius:13px}
.doc-card__book{margin-block-start:9px;padding:9px 8px;font-size:0.72rem;gap:0;letter-spacing:-0.01em}
.doc-card__book svg{display:none}
.doc-card__name{font-size:0.92rem}
.doc-card__title{font-size:0.74rem}
.doc-card__badge{inset-block-start:8px;inset-inline-end:8px;font-size:0.6rem;padding:3px 8px}
.docs-filters{max-width:100%;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
.docs-filters::-webkit-scrollbar{display:none}
.docs-filter{padding:9px 16px;font-size:0.86rem;white-space:nowrap}
}
@media (max-width:620px){
.btn--compact-mobile{
padding:10px 20px !important;
font-size:0.95rem !important;
}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
html{scroll-behavior:auto}
.reveal{opacity:1;transform:none}
.slide__content .eyebrow,.slide__content h1,.slide__content h2,
.slide__content .slide__role,.slide__content .slide__lead,.slide__content .slide__cta{opacity:1;transform:none}
.slide__media img{transform:none}
.doc-card{opacity:1;transform:none;animation:none}
.doc-card::after{animation:none;background:none;filter:none}
.doc-card::before{opacity:0.65}
}
@media (max-width:900px){
.slide--dentistry .slide__media img,
.slide--general .slide__media img{
object-position:50% 20%;
}
}
@media (max-width:560px){
.slide--dentistry .slide__media img,
.slide--general .slide__media img{
object-position:50% 0%;
}
}
.service-page{--acc:var(--navy)}
.svp-hero{
position:relative;overflow:hidden;isolation:isolate;color:#fff;
background:var(--navy-darkest);
padding-block:calc(var(--header-h) + clamp(30px,5vh,56px)) clamp(64px,9vh,116px);
}
.svp-hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.svp-hero__bg-img-wrap{position:absolute;inset:0;opacity:0.6;mix-blend-mode:luminosity}
.svp-hero__bg-img-wrap img{width:100%;height:100%;object-fit:cover;filter:grayscale(30%) contrast(1.1)}
.svp-hero__bg-overlay{position:absolute;inset:0;background:linear-gradient(135deg,var(--navy-darkest) 0%,color-mix(in oklab,var(--navy-darkest) 70%,transparent) 50%,transparent 100%),linear-gradient(to top,var(--navy-darkest) 0%,transparent 60%)}
.svp-orb{position:absolute;border-radius:50%;filter:blur(90px);mix-blend-mode:screen}
.svp-orb--acc{width:52%;aspect-ratio:1.2;inset-block-start:-16%;inset-inline-end:-8%;
background:color-mix(in oklab,var(--acc) 72%,transparent);animation:cb-breathe 12s ease-in-out infinite}
.svp-orb--gold{width:40%;aspect-ratio:1.2;inset-block-end:-18%;inset-inline-start:-6%;
background:color-mix(in oklab,var(--gold) 26%,transparent);animation:cb-breathe 15s ease-in-out infinite reverse}
.svp-hero__mesh{position:absolute;inset:0;opacity:0.45;
background-image:linear-gradient(oklch(1 0 0 / 0.05) 1px,transparent 1px),linear-gradient(90deg,oklch(1 0 0 / 0.05) 1px,transparent 1px);
background-size:54px 54px;
-webkit-mask-image:radial-gradient(80% 70% at 60% 20%,#000,transparent 80%);
mask-image:radial-gradient(80% 70% at 60% 20%,#000,transparent 80%)}
.svp-motes{position:absolute;inset:0}
.svp-motes i{position:absolute;inset-block-end:-3%;width:5px;aspect-ratio:1;border-radius:50%;
background:color-mix(in oklab,var(--acc) 60%,white);opacity:0;animation:gf-rise linear infinite}
.svp-motes i:nth-child(2n){background:color-mix(in oklab,var(--gold) 75%,white)}
.svp-motes i:nth-child(1){inset-inline-start:9%;animation-duration:15s;animation-delay:0s;scale:.7}
.svp-motes i:nth-child(2){inset-inline-start:20%;animation-duration:19s;animation-delay:4s}
.svp-motes i:nth-child(3){inset-inline-start:31%;animation-duration:13s;animation-delay:7s;scale:.6}
.svp-motes i:nth-child(4){inset-inline-start:43%;animation-duration:17s;animation-delay:2s}
.svp-motes i:nth-child(5){inset-inline-start:54%;animation-duration:14s;animation-delay:9s;scale:.8}
.svp-motes i:nth-child(6){inset-inline-start:64%;animation-duration:18s;animation-delay:5s}
.svp-motes i:nth-child(7){inset-inline-start:73%;animation-duration:12s;animation-delay:1s;scale:.6}
.svp-motes i:nth-child(8){inset-inline-start:82%;animation-duration:16s;animation-delay:8s}
.svp-motes i:nth-child(9){inset-inline-start:90%;animation-duration:20s;animation-delay:3s;scale:.7}
.svp-motes i:nth-child(10){inset-inline-start:96%;animation-duration:14s;animation-delay:6s}
.svp-hero__fade{position:absolute;inset-inline:0;inset-block-end:0;height:90px;z-index:1;
background:linear-gradient(transparent,var(--paper))}
.svp-hero__inner{position:relative;z-index:2}
.svp-back{
display:inline-flex;align-items:center;gap:8px;margin-block-end:26px;
padding:8px 16px;border-radius:999px;font-weight:700;font-size:0.92rem;
color:oklch(1 0 0 / 0.85);background:oklch(1 0 0 / 0.08);border:1px solid oklch(1 0 0 / 0.18);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
transition:background .35s var(--ease-out),transform .35s var(--ease-out),color .35s var(--ease-out)}
.svp-back svg{width:17px;height:17px}
[dir="rtl"] .svp-back svg{transform:scaleX(-1)}
.svp-back:hover{background:oklch(1 0 0 / 0.16);color:#fff;transform:translateX(3px)}
[dir="rtl"] .svp-back:hover{transform:translateX(-3px)}
.svp-hero__grid{display:grid;grid-template-columns:1.15fr 0.85fr;align-items:center;gap:clamp(24px,5vw,64px)}
.svp-hero__grid--solo{grid-template-columns:minmax(0,1fr)}
.svp-hero__copy{max-width:640px}
.svp-eyebrow{background:color-mix(in oklab,var(--acc) 24%,transparent);border-color:color-mix(in oklab,var(--acc) 45%,transparent)}
.svp-eyebrow::before{background:var(--acc);box-shadow:0 0 0 4px color-mix(in oklab,var(--acc) 30%,transparent)}
.svp-title{font-size:clamp(2.3rem,5vw,4rem);font-weight:800;line-height:1.08;margin-block:16px 18px;
text-shadow:0 6px 40px oklch(0.20 0.10 268 / 0.55)}
.lang-en .svp-title{font-family:var(--font-en)}
.svp-lead{color:oklch(1 0 0 / 0.86);font-size:clamp(1.02rem,1.6vw,1.2rem);max-width:58ch}
.svp-hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-block-start:32px}
.svp-hero__emblem{position:relative;justify-self:center;width:min(340px,74vw);aspect-ratio:1;display:grid;place-items:center}
.svp-emblem__ring{position:absolute;border-radius:50%;border:1.5px solid oklch(1 0 0 / 0.14)}
.svp-emblem__ring--1{inset:0;border-style:dashed;border-color:color-mix(in oklab,var(--acc) 45%,oklch(1 0 0 / 0.2));animation:svp-spin 26s linear infinite}
.svp-emblem__ring--2{inset:13%;border-color:color-mix(in oklab,var(--gold) 40%,transparent);animation:svp-spin 20s linear infinite reverse}
.svp-emblem__ring--3{inset:26%;border-color:oklch(1 0 0 / 0.16)}
@keyframes svp-spin{to{transform:rotate(360deg)}}
.svp-emblem__core{
position:relative;width:46%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
color:#fff;background:color-mix(in oklab,var(--acc) 60%,var(--navy-deep));
box-shadow:0 24px 60px -18px color-mix(in oklab,var(--acc) 70%,transparent),
inset 0 2px 0 oklch(1 0 0 / 0.25),inset 0 -20px 40px -24px oklch(0 0 0 / 0.5);
animation:svp-pulse 5s ease-in-out infinite}
.svp-emblem__core::after{content:"";position:absolute;inset:-14%;border-radius:50%;
border:1px solid color-mix(in oklab,var(--acc) 40%,transparent);animation:svp-pulse 5s ease-in-out infinite}
.svp-emblem__core svg{width:46%;height:46%}
@keyframes svp-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.svp-stats{display:flex;flex-wrap:wrap;gap:14px;margin-block-start:clamp(34px,5vw,52px)}
.svp-stat{flex:1 1 160px;display:flex;align-items:baseline;gap:10px;padding:16px 24px;border-radius:16px;
background:oklch(1 0 0 / 0.06);border:1px solid oklch(1 0 0 / 0.14);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.svp-stats > .svp-stat:only-child{flex:0 1 auto}
.svp-stat b{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:800;color:var(--gold);line-height:1;white-space:nowrap}
.svp-stat span{font-size:0.9rem;color:oklch(1 0 0 / 0.78)}
.svp-overview__grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:clamp(30px,5vw,66px);align-items:center}
.svp-overview__text h2{font-size:clamp(1.7rem,3.4vw,2.5rem);color:var(--navy);font-weight:800;margin-block-end:16px}
.svp-overview__text p{color:var(--ink-soft);font-size:1.06rem;margin-block-end:16px}
.svp-why{display:grid;gap:14px}
.svp-why__item{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border-radius:var(--radius);
background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm);
transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .5s var(--ease-out)}
.svp-why__item:hover{transform:translateX(6px);box-shadow:var(--shadow-md);border-color:color-mix(in oklab,var(--acc) 40%,transparent)}
[dir="rtl"] .svp-why__item:hover{transform:translateX(-6px)}
.svp-why__ic{flex-shrink:0;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
color:var(--acc);background:color-mix(in oklab,var(--acc) 12%,transparent)}
.svp-why__ic svg{width:21px;height:21px}
.svp-why__item b{display:block;color:var(--navy);font-size:1.06rem;margin-block-end:3px}
.svp-why__item span{color:var(--ink-soft);font-size:0.96rem;line-height:1.6}
.svp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.svp-card{position:relative;overflow:hidden;padding:30px 26px;border-radius:var(--radius);
background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm);
transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .45s var(--ease-out)}
.svp-card::before{content:"";position:absolute;inset-block-start:-40%;inset-inline-end:-30%;width:60%;aspect-ratio:1;border-radius:50%;
background:radial-gradient(circle,color-mix(in oklab,var(--acc) 22%,transparent),transparent 70%);
opacity:0;transition:opacity .5s var(--ease-out);pointer-events:none}
.svp-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:color-mix(in oklab,var(--acc) 42%,transparent)}
.svp-card:hover::before{opacity:1}
.svp-card__no{position:absolute;inset-block-start:24px;inset-inline-end:26px;font-size:0.85rem;font-weight:800;
color:color-mix(in oklab,var(--acc) 50%,var(--line))}
.svp-card__ic{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;margin-block-end:18px;
color:var(--acc);background:color-mix(in oklab,var(--acc) 12%,transparent);
transition:transform .45s var(--ease-out),background .45s var(--ease-out)}
.svp-card:hover .svp-card__ic{transform:translateY(-3px) scale(1.07);background:color-mix(in oklab,var(--acc) 20%,transparent)}
.svp-card__ic svg{width:28px;height:28px}
.svp-card h3{font-size:1.16rem;color:var(--navy);margin-block-end:8px;position:relative}
.svp-card p{color:var(--ink-soft);font-size:0.96rem;line-height:1.62;position:relative}
.svp-card::after{content:"";position:absolute;inset-block-end:0;inset-inline:0;height:3px;background:var(--acc);
transform:scaleX(0);transform-origin:inline-start;transition:transform .5s var(--ease-out)}
.svp-card:hover::after{transform:scaleX(1)}
.svp-chips{display:flex;flex-wrap:wrap;gap:12px}
.svp-chip{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;
font-weight:600;font-size:0.98rem;color:var(--navy);
background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm);
transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .4s var(--ease-out)}
.svp-chip__dot{width:9px;height:9px;border-radius:50%;background:var(--acc);
box-shadow:0 0 0 4px color-mix(in oklab,var(--acc) 22%,transparent)}
.svp-chip:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:color-mix(in oklab,var(--acc) 45%,transparent)}
.svp-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:none}
.svp-step{position:relative;padding:30px 24px;border-radius:var(--radius);
background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm);
transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.svp-step:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.svp-step__n{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;margin-block-end:16px;
font-family:var(--font-en);font-weight:800;font-size:1.3rem;color:#fff;
background:var(--acc);box-shadow:0 10px 24px -10px color-mix(in oklab,var(--acc) 70%,transparent)}
.svp-step h3{font-size:1.12rem;color:var(--navy);margin-block-end:6px}
.svp-step p{color:var(--ink-soft);font-size:0.95rem;line-height:1.6}
.svp-step:not(:last-child)::after{content:"";position:absolute;inset-block-start:52px;inset-inline-end:-12px;
width:24px;height:2px;background:color-mix(in oklab,var(--acc) 45%,var(--line));z-index:1}
[dir="rtl"] .svp-step:not(:last-child)::after{inset-inline-end:auto;inset-inline-start:-12px}
.svp-faq__wrap{max-width:860px}
.svp-faq{display:grid;gap:12px}
.svp-faq__item{border-radius:var(--radius);overflow:hidden;
background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm);
transition:border-color .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.svp-faq__item[open]{border-color:color-mix(in oklab,var(--acc) 40%,transparent);box-shadow:var(--shadow-md)}
.svp-faq__item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:20px 24px;font-weight:700;font-size:1.06rem;color:var(--navy)}
.svp-faq__item summary::-webkit-details-marker{display:none}
.svp-faq__pm{position:relative;flex-shrink:0;width:24px;height:24px;border-radius:50%;
background:color-mix(in oklab,var(--acc) 12%,transparent)}
.svp-faq__pm::before,.svp-faq__pm::after{content:"";position:absolute;inset-block-start:50%;inset-inline-start:50%;
width:11px;height:2.4px;border-radius:2px;background:var(--acc);transform:translate(-50%,-50%);transition:transform .35s var(--ease-out)}
[dir="rtl"] .svp-faq__pm::before,[dir="rtl"] .svp-faq__pm::after{transform:translate(50%,-50%)}
.svp-faq__pm::after{transform:translate(-50%,-50%) rotate(90deg)}
[dir="rtl"] .svp-faq__pm::after{transform:translate(50%,-50%) rotate(90deg)}
.svp-faq__item[open] .svp-faq__pm::after{transform:translate(-50%,-50%) rotate(0deg);opacity:0}
[dir="rtl"] .svp-faq__item[open] .svp-faq__pm::after{transform:translate(50%,-50%) rotate(0deg);opacity:0}
.svp-faq__a{padding:0 24px 22px}
.svp-faq__a p{color:var(--ink-soft);font-size:1rem;line-height:1.7}
.svp-faq__item[open] .svp-faq__a{animation:svp-fade .45s var(--ease-out)}
@keyframes svp-fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.svp-related{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.svp-related__card{position:relative;display:flex;align-items:center;gap:14px;padding:20px 22px;border-radius:var(--radius);
background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm);
transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .45s var(--ease-out)}
.svp-related__card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:color-mix(in oklab,var(--acc) 45%,transparent)}
.svp-related__ic{flex-shrink:0;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
color:var(--acc);background:color-mix(in oklab,var(--acc) 12%,transparent);
transition:transform .45s var(--ease-out)}
.svp-related__card:hover .svp-related__ic{transform:scale(1.08) rotate(-4deg)}
.svp-related__ic svg{width:24px;height:24px}
.svp-related__name{font-weight:700;color:var(--navy);font-size:1.02rem;flex:1}
.svp-related__arrow{flex-shrink:0;color:var(--acc);opacity:0;transform:translateX(-6px);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
[dir="rtl"] .svp-related__arrow svg{transform:scaleX(-1)}
.svp-related__card:hover .svp-related__arrow{opacity:1;transform:none}
@media (max-width:1080px){
.svp-steps,.svp-related{grid-template-columns:repeat(2,minmax(0,1fr))}
.svp-step:nth-child(2)::after{display:none}
.svp-related__card{flex-direction:column;text-align:center;gap:10px}
.svp-related__name{flex:none}
.svp-related__arrow{display:none}
}
@media (max-width:900px){
.svp-hero__grid{grid-template-columns:minmax(0,1fr)}
.svp-hero__emblem{grid-row:1;width:min(240px,60vw);margin-inline:auto}
.svp-overview__grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
.svp-cards,.svp-why,.svp-steps,.svp-related{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.svp-step:nth-child(2)::after{display:none}
.svp-stat{flex-basis:100%}
.svp-hero__cta{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;width:100%;flex-wrap:nowrap;
}
.svp-hero__cta .btn{
width:100%;padding-inline:10px;
font-size:0.86rem;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis;
}
}
@media (prefers-reduced-motion:reduce){
.svp-orb,.svp-motes i,.svp-emblem__ring,.svp-emblem__core,.svp-emblem__core::after{animation:none !important}
}
.blog-feature{
display:grid;grid-template-columns:0.9fr minmax(0,1.1fr);align-items:stretch;gap:0;
border-radius:var(--radius-lg);overflow:hidden;isolation:isolate;
background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm);
transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .5s var(--ease-out);
}
.blog-feature:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:color-mix(in oklab,var(--acc) 40%,transparent)}
.blog-feature__visual{
position:relative;overflow:hidden;min-height:300px;display:grid;place-items:center;
color:#fff;background:color-mix(in oklab,var(--acc) 82%,var(--navy-deep));
}
.blog-feature__visual > svg{width:34%;max-width:130px;position:relative;z-index:1;
filter:drop-shadow(0 14px 30px oklch(0 0 0 / 0.35))}
.blog-feature__glow{position:absolute;inset-block-start:-30%;inset-inline-end:-20%;width:70%;aspect-ratio:1;border-radius:50%;
background:radial-gradient(circle,oklch(1 0 0 / 0.28),transparent 70%);filter:blur(10px)}
.blog-feature__ring{position:absolute;inset:16%;border-radius:50%;border:1.5px solid oklch(1 0 0 / 0.2);
animation:svp-spin 30s linear infinite}
.blog-feature__body{padding:clamp(26px,3.5vw,44px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.blog-feature__tag{
display:inline-flex;align-items:center;font-size:0.72rem;font-weight:800;letter-spacing:0.04em;
color:var(--navy-deep);background:var(--gold);padding:4px 12px;border-radius:999px;margin-block-end:14px;
}
.blog-feature__body h2{font-size:clamp(1.4rem,2.6vw,2rem);color:var(--navy);line-height:1.25;margin-block:6px 12px}
.blog-feature__body p{color:var(--ink-soft);font-size:1.04rem;line-height:1.7;margin-block-end:20px}
.blog-feature__meta{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.blog-grid{display:grid;grid-template-columns:1fr;gap:22px}
@media (min-width:600px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.blog-grid{grid-template-columns:repeat(4,1fr);gap:24px}}
.blog-card{
display:flex;flex-direction:column;border-radius:var(--radius-lg);overflow:hidden;isolation:isolate;
background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-sm);
transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .5s var(--ease-out);
}
.blog-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:color-mix(in oklab,var(--acc) 42%,transparent)}
.blog-card__thumb{
position:relative;overflow:hidden;aspect-ratio:16/9;display:grid;place-items:center;
color:#fff;background:color-mix(in oklab,var(--acc) 80%,var(--navy-deep));
}
.blog-card__thumb > svg{width:64px;height:64px;position:relative;z-index:1;
filter:drop-shadow(0 10px 20px oklch(0 0 0 / 0.32));transition:transform .5s var(--ease-out)}
.blog-card:hover .blog-card__thumb > svg{transform:scale(1.1) rotate(-4deg)}
.blog-card__glow{position:absolute;inset-block-start:-40%;inset-inline-end:-25%;width:65%;aspect-ratio:1;border-radius:50%;
background:radial-gradient(circle,oklch(1 0 0 / 0.3),transparent 70%);filter:blur(8px)}
.blog-card__thumb::after{content:"";position:absolute;inset:0;
background:linear-gradient(120deg,transparent 40%,oklch(1 0 0 / 0.14) 60%,transparent 78%)}
.blog-card__body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.blog-card__cat{font-size:0.72rem;font-weight:800;letter-spacing:0.03em;color:var(--acc);margin-block-end:10px}
.blog-card__title{font-size:1.14rem;font-weight:800;color:var(--navy);line-height:1.4}
.blog-card__excerpt{color:var(--ink-soft);font-size:0.94rem;line-height:1.65;margin-block-start:10px}
.blog-card__more{margin-block-start:auto;padding-block-start:16px;display:inline-flex;align-items:center;gap:7px;
font-weight:700;font-size:0.9rem;color:var(--acc)}
.blog-card__more svg{width:16px;height:16px;transition:transform .4s var(--ease-out)}
[dir="rtl"] .blog-card__more svg{transform:scaleX(-1)}
.blog-card:hover .blog-card__more svg{transform:translateX(4px)}
[dir="rtl"] .blog-card:hover .blog-card__more svg{transform:scaleX(-1) translateX(4px)}
.art-hero{
position:relative;overflow:hidden;isolation:isolate;color:#fff;display:block;
background:var(--navy-darkest);
padding-block:calc(var(--header-h) + clamp(28px,5vh,52px)) clamp(48px,7vh,88px);
}
.art-hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.art-hero__inner{position:relative;z-index:2;max-width:860px}
.art-hero__cat{
display:inline-flex;align-items:center;gap:8px;margin-block-end:18px;
padding:7px 15px;border-radius:999px;font-weight:700;font-size:0.86rem;color:#fff;
background:color-mix(in oklab,var(--acc) 30%,transparent);border:1px solid color-mix(in oklab,var(--acc) 50%,transparent);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.art-hero__cat svg{width:17px;height:17px}
.art-hero__title{font-size:clamp(1.9rem,4vw,3.1rem);font-weight:800;line-height:1.18;
text-shadow:0 6px 40px oklch(0.20 0.10 268 / 0.55)}
.lang-en .art-hero__title{font-family:var(--font-en)}
.art-hero__excerpt{color:oklch(1 0 0 / 0.86);font-size:clamp(1.02rem,1.6vw,1.2rem);max-width:62ch;margin-block-start:16px}
.art-hero__read{display:inline-flex;align-items:center;gap:8px;margin-block-start:20px;
color:var(--gold);font-weight:700;font-size:0.92rem}
.art-hero__read svg{width:17px;height:17px}
.art-body{padding-block:clamp(44px,6vw,78px)}
.art-body__wrap{max-width:780px}
.art-lead{font-size:1.16rem;line-height:1.85;color:var(--ink);margin-block-end:18px}
.lang-en .art-lead:first-of-type::first-letter{
font-family:var(--font-en);font-size:3.4rem;font-weight:800;color:var(--acc);
float:inline-start;line-height:0.9;margin-inline-end:10px;margin-block-start:6px;
}
.art-h2{display:flex;align-items:center;gap:12px;font-size:clamp(1.4rem,2.6vw,1.9rem);color:var(--navy);
font-weight:800;margin-block:clamp(28px,4vw,44px) 16px}
.art-h2 span{flex-shrink:0;width:26px;height:4px;border-radius:3px;background:var(--acc)}
.art-p{font-size:1.08rem;line-height:1.85;color:var(--ink-soft);margin-block-end:16px}
.art-panels{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-block:clamp(30px,4vw,44px)}
.art-panel{border-radius:var(--radius-lg);padding:26px 26px 28px;border:1px solid var(--line)}
.art-panel--benefits{background:color-mix(in oklab,var(--acc) 7%,var(--white));border-color:color-mix(in oklab,var(--acc) 22%,var(--line))}
.art-panel--tips{background:var(--paper-2)}
.art-panel h3{display:flex;align-items:center;gap:10px;font-size:1.14rem;color:var(--navy);margin-block-end:16px}
.art-panel__ic{flex-shrink:0;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
color:var(--acc);background:color-mix(in oklab,var(--acc) 14%,transparent)}
.art-panel__ic svg{width:18px;height:18px}
.art-panel ul{display:grid;gap:11px}
.art-panel li{position:relative;padding-inline-start:26px;color:var(--ink-soft);font-size:0.98rem;line-height:1.6}
.art-panel li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:8px;
width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 4px color-mix(in oklab,var(--acc) 18%,transparent)}
.art-faq{margin-block-start:8px}
.art-cta{
margin-block-start:clamp(34px,5vw,56px);
display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
padding:clamp(26px,3.5vw,40px);border-radius:var(--radius-lg);color:#fff;
background:var(--navy-deep);box-shadow:var(--shadow-md);position:relative;overflow:hidden;
}
.art-cta::before{content:"";position:absolute;inset-block-start:-50%;inset-inline-end:-10%;width:40%;aspect-ratio:1;border-radius:50%;
background:radial-gradient(circle,color-mix(in oklab,var(--acc) 40%,transparent),transparent 70%)}
.art-cta > *{position:relative;z-index:1}
.art-cta h3{font-size:clamp(1.3rem,2.4vw,1.7rem);margin-block-end:8px}
.art-cta p{color:oklch(1 0 0 / 0.8);max-width:46ch;font-size:1.02rem}
.art-cta__btns{display:flex;gap:12px;flex-wrap:wrap}
.art-cta__ghost{background:oklch(1 0 0 / 0.08);border:1.5px solid oklch(1 0 0 / 0.4);box-shadow:none}
.art-cta__ghost::before{background:oklch(1 0 0 / 0.16)}
@media (max-width:860px){
.blog-feature{grid-template-columns:minmax(0,1fr)}
.blog-feature__visual{min-height:200px}
.art-panels{grid-template-columns:minmax(0,1fr)}
.art-cta{flex-direction:column;align-items:flex-start}
}
.partners{
position:relative;overflow:hidden;isolation:isolate;
color:#fff;
background:var(--pepsi-field);
}
.partners__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.partners__pool{position:absolute;border-radius:50%;filter:blur(90px)}
.partners__pool--1{width:52%;aspect-ratio:1.3;inset-block-start:-22%;inset-inline-start:-8%;
background:color-mix(in oklab,#6f9bff 55%,transparent);animation:cb-breathe 16s ease-in-out infinite}
.partners__pool--2{width:46%;aspect-ratio:1.3;inset-block-end:-24%;inset-inline-end:-6%;
background:color-mix(in oklab,#2a47a0 68%,transparent);animation:cb-breathe 20s ease-in-out infinite reverse}
.partners__grid{
position:absolute;inset:0;opacity:0.4;
background-image:
linear-gradient(oklch(1 0 0 / 0.055) 1px,transparent 1px),
linear-gradient(90deg,oklch(1 0 0 / 0.055) 1px,transparent 1px);
background-size:58px 58px;
mask-image:radial-gradient(ellipse at 50% 40%,#000 20%,transparent 78%);
}
.partners__head{position:relative;z-index:1}
.partners .section-head h2{color:#fff}
.partners .section-head p{color:oklch(1 0 0 / 0.78)}
.partners .tag{color:oklch(0.9 0.06 244)}
.partners .tag::before{background:oklch(0.9 0.06 244)}
.partners__count{
display:flex;align-items:baseline;justify-content:center;gap:10px;
width:max-content;margin:6px auto clamp(34px,4vw,50px);
padding:12px 26px;border-radius:999px;
background:linear-gradient(150deg,oklch(1 0 0 / 0.18),oklch(1 0 0 / 0.08));
border:1px solid oklch(1 0 0 / 0.3);
box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.4),0 12px 26px -18px oklch(0.15 0.07 262 / 0.9);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.partners__count b{font-size:1.8rem;font-weight:800;color:#fff;line-height:1;font-family:var(--font-en)}
.partners__count span{font-size:0.92rem;color:oklch(1 0 0 / 0.82);font-weight:600}
.partners__rails{
position:relative;z-index:1;display:grid;gap:20px;direction:ltr;
padding-block:18px;
mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.prail{overflow:hidden;padding-block:4px}
.prail__track{
display:flex;width:max-content;
animation:prail-scroll 60s linear infinite;
}
.prail__track > .plogo{margin-right:20px}
.prail--reverse .prail__track{animation-direction:reverse;animation-duration:72s}
@keyframes prail-scroll{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}}
.partners__rails:hover .prail__track{animation-play-state:paused}
.plogo{
flex:0 0 auto;width:210px;height:118px;
position:relative;isolation:isolate;overflow:hidden;
display:grid;place-items:stretch;
padding:20px 24px;
border-radius:20px;
background:linear-gradient(152deg,
oklch(1 0 0 / 0.94) 0%,
oklch(1 0 0 / 0.87) 50%,
oklch(0.97 0.02 250 / 0.82) 100%);
border:1px solid oklch(1 0 0 / 0.55);
box-shadow:
inset 0 1px 0 oklch(1 0 0 / 0.95),
inset 0 -1px 0 oklch(0.55 0.12 258 / 0.16),
0 18px 34px -20px oklch(0.16 0.08 262 / 0.85);
transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .45s var(--ease-out);
}
.plogo__sheen{
position:absolute;inset:-1px;z-index:2;pointer-events:none;
background:linear-gradient(114deg,
transparent 36%,oklch(1 0 0 / 0.72) 47%,oklch(1 0 0 / 0.72) 50%,transparent 62%);
transform:translateX(-135%);
animation:plogo-sheen 7.5s var(--ease-out) infinite;
animation-delay:calc(var(--i,0) * -1.05s);
}
@keyframes plogo-sheen{
0%,74%{transform:translateX(-135%)}
100%{transform:translateX(135%)}
}
.plogo__img{
display:block;min-height:0;width:100%;height:100%;
background-repeat:no-repeat;background-position:center;background-size:contain;
transition:transform .45s var(--ease-out);
}
.plogo:hover{
transform:translateY(-10px);
border-color:oklch(1 0 0 / 0.85);
box-shadow:
inset 0 1px 0 oklch(1 0 0 / 0.95),
0 0 0 1.5px oklch(0.78 0.13 246 / 0.75),
0 26px 46px -22px oklch(0.14 0.08 262 / 0.9),
0 0 30px -4px oklch(0.72 0.16 248 / 0.45);
}
.plogo:hover .plogo__img{transform:scale(1.07)}
@media (max-width:620px){
.plogo{width:166px;height:98px;padding:15px 17px;border-radius:17px}
.prail__track > .plogo{margin-right:14px}
.partners__rails{gap:14px}
}
@media (prefers-reduced-motion:reduce){
.prail__track{animation:none !important}
.prail{overflow-x:auto}
.partners__pool,.plogo__sheen{animation:none !important}
.plogo__sheen{opacity:0}
}
.home .about-hero{margin-block-start:0}
.dpc{
position:relative;isolation:isolate;overflow:hidden;
color:#fff;
background:linear-gradient(165deg,
oklch(0.44 0.16 256) 0%,oklch(0.36 0.15 259) 46%,oklch(0.29 0.13 263) 100%);
}
.dpc > .wrap{position:relative;z-index:1}
.ctab{
position:relative;color:#fff;
background:none;
padding-block:clamp(24px,2.6vw,38px);
}
.ctab__bg{
position:absolute;inset:0;z-index:0;pointer-events:none;
border-radius:inherit;overflow:hidden;
background:linear-gradient(165deg,
oklch(0.44 0.16 256) 0%,oklch(0.36 0.15 259) 46%,oklch(0.29 0.13 263) 100%);
}
.ctab__pool{position:absolute;border-radius:50%;filter:blur(90px)}
.ctab__pool--1{width:52%;aspect-ratio:1.3;inset-block-start:-24%;inset-inline-start:-6%;
background:color-mix(in oklab,#6f9bff 60%,transparent);animation:ofh-breathe 13s ease-in-out infinite}
.ctab__pool--2{width:44%;aspect-ratio:1.2;inset-block-end:-26%;inset-inline-end:-6%;
background:color-mix(in oklab,#2a47a0 70%,transparent);animation:ofh-breathe 11s ease-in-out infinite reverse}
.ctab__grid{
position:absolute;inset:0;opacity:0.45;
background-image:
linear-gradient(oklch(1 0 0 / 0.06) 1px,transparent 1px),
linear-gradient(90deg,oklch(1 0 0 / 0.06) 1px,transparent 1px);
background-size:56px 56px;
-webkit-mask-image:radial-gradient(70% 68% at 50% 42%,#000,transparent 78%);
mask-image:radial-gradient(70% 68% at 50% 42%,#000,transparent 78%);
}
.ctab__panel{
position:relative;isolation:isolate;
display:grid;grid-template-columns:1.15fr 0.8fr;align-items:center;
gap:clamp(18px,2.6vw,40px);
max-inline-size:1040px;margin-inline:auto;
padding:clamp(18px,1.9vw,26px) clamp(20px,2.6vw,40px);
border-radius:clamp(20px,2vw,28px);
overflow:hidden;
background:
linear-gradient(148deg,oklch(1 0 0 / 0.22) 0%,oklch(1 0 0 / 0.13) 46%,oklch(1 0 0 / 0.10) 100%);
-webkit-backdrop-filter:blur(30px) saturate(1.9);
backdrop-filter:blur(30px) saturate(1.9);
box-shadow:
inset  1.5px  1.5px 1px -1px oklch(0.97 0.006 250 / 0.9),
inset -1.5px -1.5px 1px -1px oklch(0 0 0 / 0.3),
inset  0  12px 24px -18px oklch(0.97 0.006 250 / 0.75),
inset  0 -14px 28px -20px oklch(0 0 0 / 0.42),
0 0 0 1px oklch(0.92 0.008 250 / 0.22),
0 40px 80px -34px oklch(0.10 0.06 262 / 0.6);
}
.ctab--solo .ctab__panel{grid-template-columns:minmax(0,1fr);text-align:center;max-inline-size:680px}
.ctab--solo .ctab__actions,.ctab--solo .ctab__note{justify-content:center}
.ctab__ring,.ctab__spark{
position:absolute;inset:0;pointer-events:none;
border-radius:inherit;padding:1.5px;
-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,linear-gradient(#000 0 0);
mask-composite:exclude;
}
.ctab__ring{
background:conic-gradient(from 215deg,
#01647a,#00a39e,#66c6e6,#1ab6c3,#5fc0c4,#f28b4a,#ec6642,#e84333,#c82f23,#04715c,#008f7b,#01647a);
filter:saturate(1.15);opacity:0.5;
}
.ctab__spark{
background:conic-gradient(from var(--ah-frame-a),
transparent 0deg,transparent 285deg,
oklch(0.85 0.12 200 / 0.85) 315deg,#ffffff 338deg,oklch(0.88 0.14 78 / 0.9) 352deg,transparent 360deg);
filter:drop-shadow(0 0 7px oklch(0.9 0.12 200 / 0.75));
animation:ah-frame-flow 5s linear infinite;
}
.ctab__copy{position:relative;z-index:1}
.ctab .ez-stage{position:relative;z-index:1}
.ctab__eyebrow{
display:inline-block;margin-block-end:13px;
font-size:0.72rem;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;
color:oklch(0.88 0.08 250);
}
.lang-ar .ctab__eyebrow{letter-spacing:0;text-transform:none;font-size:0.86rem}
.ctab__title{
font-size:clamp(1.55rem,2.5vw,2.15rem);font-weight:800;line-height:1.14;
letter-spacing:-0.02em;color:#fff;
}
.lang-en .ctab__title{font-family:var(--font-en)}
.ctab__lead{
margin-block-start:12px;max-inline-size:46ch;
font-size:0.97rem;line-height:1.7;color:oklch(1 0 0 / 0.86);
}
.ctab--solo .ctab__lead{margin-inline:auto}
.ctab__actions{display:flex;flex-wrap:wrap;gap:11px;margin-block-start:clamp(16px,2vw,24px)}
.ctab-btn{
display:inline-flex;align-items:center;gap:11px;
padding:11px 21px;border-radius:999px;font-weight:800;white-space:nowrap;
transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background .35s var(--ease-out);
}
.ctab-btn svg{width:20px;height:20px;flex-shrink:0}
.ctab-btn:active{transform:translateY(-1px) scale(0.985);transition-duration:.12s}
.ctab-btn__b{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.ctab-btn__k{font-size:0.96rem}
.ctab-btn__v{font-family:var(--font-en);font-size:0.79rem;font-weight:700;opacity:0.7}
.ctab-btn--call{
color:var(--navy-deep);background:oklch(0.99 0.004 250);
box-shadow:0 16px 34px -14px oklch(0.10 0.06 262 / 0.7),inset 0 1px 0 #fff;
}
.ctab-btn--call:hover{transform:translateY(-3px);background:#fff;
box-shadow:0 24px 46px -14px oklch(0.10 0.06 262 / 0.8),inset 0 1px 0 #fff}
.wa-glass{
position:relative;isolation:isolate;
color:#fff;
border:0;
background:
linear-gradient(148deg,oklch(1 0 0 / 0.20) 0%,oklch(1 0 0 / 0.04) 44%,transparent 68%),
linear-gradient(148deg,
color-mix(in oklab,var(--wa-1) 82%,transparent) 0%,
color-mix(in oklab,var(--wa-2) 82%,transparent) 55%,
color-mix(in oklab,var(--wa-3) 82%,transparent) 100%);
-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);
box-shadow:
inset  1px  1px 1px -0.5px oklch(1 0 0 / 0.55),
inset -1px -1px 1px -0.5px oklch(0 0 0 / 0.3),
inset  0 7px 14px -11px oklch(1 0 0 / 0.7),
0 0 0 1px oklch(1 0 0 / 0.2),
0 12px 26px -12px color-mix(in oklab,var(--wa-3) 70%,transparent);
transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background .35s var(--ease-out);
}
.wa-glass::before{
content:"";position:absolute;inset:0;z-index:0;
border-radius:inherit;padding:1px;pointer-events:none;
background:linear-gradient(128deg,
oklch(0.88 0.16 168 / 0.5) 0%,transparent 30%,
transparent 70%,oklch(0.86 0.14 128 / 0.34) 100%);
-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,linear-gradient(#000 0 0);mask-composite:exclude;
mix-blend-mode:screen;
opacity:1;
}
.wa-glass > *{position:relative;z-index:1}
.wa-glass:hover{
transform:translateY(-3px);color:#fff;
background:
linear-gradient(148deg,oklch(1 0 0 / 0.28) 0%,oklch(1 0 0 / 0.07) 44%,transparent 68%),
linear-gradient(148deg,
color-mix(in oklab,var(--wa-1) 92%,transparent) 0%,
color-mix(in oklab,var(--wa-2) 92%,transparent) 55%,
color-mix(in oklab,var(--wa-3) 92%,transparent) 100%);
box-shadow:
inset  1px  1px 1px -0.5px oklch(1 0 0 / 0.8),
inset -1px -1px 1px -0.5px oklch(0 0 0 / 0.28),
inset  0 7px 14px -11px oklch(1 0 0 / 0.9),
0 0 0 1px oklch(1 0 0 / 0.32),
0 20px 38px -14px color-mix(in oklab,var(--wa-3) 85%,transparent);
}
.wa-glass:active{transform:translateY(-1px) scale(0.985);transition-duration:.12s}
.btn.wa-glass::before{background:linear-gradient(128deg,
oklch(0.88 0.16 168 / 0.5) 0%,transparent 30%,
transparent 70%,oklch(0.86 0.14 128 / 0.34) 100%);z-index:0;opacity:1}
.btn.wa-glass .btn__pulse{display:none}
.ctab__note{
display:inline-flex;align-items:center;gap:9px;margin-block-start:18px;
font-size:0.85rem;font-weight:600;color:oklch(1 0 0 / 0.7);
}
.ctab__dot{width:9px;height:9px;border-radius:50%;background:var(--success);flex-shrink:0;
animation:ez-live 2.4s ease-out infinite}
.ez-stage--compact .ez-stage__inner{width:min(100%,248px)}
.ez-stage--compact .ez-stage__halo{opacity:0.75}
@media (max-width:900px){
.ctab__panel{grid-template-columns:minmax(0,1fr);text-align:center}
.ctab__lead{margin-inline:auto}
.ctab__actions,.ctab__note{justify-content:center}
.ctab .ez-stage{order:-1}
.ctab__panel{overflow:visible}
.ctab .ez-stage{margin-inline:calc(-1 * clamp(20px,2.6vw,40px))}
.ez-stage--compact .ez-stage__inner{width:min(100%,380px)}
.ctab .ez-stage{
margin-block-start:calc(-1 * min(31.5%,106px) - clamp(18px,1.9vw,26px));
}
.ctab{padding-block-start:clamp(100px,12vw,118px)}
}
@media (min-width:901px){
.ctab__panel{overflow:visible}
.ez-stage--compact .ez-stage__inner{width:min(100%,372px)}
.ctab .ez-stage{
align-self:start;
margin-block-start:calc(-1 * min(39.1%,145px) - clamp(18px,1.9vw,26px));
}
.ctab{padding-block-start:clamp(96px,9vw,120px)}
}
@media (max-width:560px){
.ctab__actions{flex-direction:column;align-items:stretch}
.ctab-btn{justify-content:center}
.ctab-btn__b{align-items:center}
}
@media (prefers-reduced-motion:reduce){
.ctab__pool,.ctab__dot{animation:none !important}
.ctab__spark{animation:none;background:none;filter:none}
.ctab__ring{opacity:0.7}
.ctab-btn{transition:none !important}
.ctab-btn:hover{transform:none}
}
.ofh{
position:relative;isolation:isolate;overflow:hidden;
color:#fff;
background:var(--pepsi-field);
}
.ofh__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.ofh > .wrap{position:relative;z-index:1}
.ofh .section-head h2{color:#fff}
.ofh .section-head p{color:oklch(1 0 0 / 0.72)}
.ofh .tag{color:oklch(0.86 0.08 252)}
.ofh .tag::before{background:oklch(0.86 0.08 252)}
.ofh__pool{position:absolute;border-radius:50%;filter:blur(90px)}
.ofh__pool--1{width:54%;aspect-ratio:1.3;inset-block-start:-20%;inset-inline-start:-8%;
background:color-mix(in oklab,#3D6EF5 60%,transparent);animation:ofh-breathe 13s ease-in-out infinite}
.ofh__pool--2{width:44%;aspect-ratio:1.2;inset-block-end:-22%;inset-inline-end:-6%;
background:color-mix(in oklab,#5f8dff 46%,transparent);animation:ofh-breathe 11s ease-in-out infinite reverse}
@keyframes ofh-breathe{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.14);opacity:.95}}
.ofh__grid{
position:absolute;inset:0;opacity:0.5;
background-image:
linear-gradient(oklch(1 0 0 / 0.05) 1px,transparent 1px),
linear-gradient(90deg,oklch(1 0 0 / 0.05) 1px,transparent 1px);
background-size:58px 58px;
-webkit-mask-image:radial-gradient(76% 70% at 50% 34%,#000,transparent 78%);
mask-image:radial-gradient(76% 70% at 50% 34%,#000,transparent 78%);
}
.ofh__motes{position:absolute;inset:0;display:block}
.ofh__motes i{
position:absolute;inset-block-end:-3%;width:4px;aspect-ratio:1;border-radius:50%;
background:oklch(1 0 0 / 0.5);animation:gf-rise linear infinite;
}
.ofh__motes i:nth-child(3n){background:oklch(0.86 0.08 252)}
.ofh__motes i:nth-child(1){inset-inline-start:8%;animation-duration:15s;animation-delay:0s;scale:.7}
.ofh__motes i:nth-child(2){inset-inline-start:21%;animation-duration:19s;animation-delay:4s}
.ofh__motes i:nth-child(3){inset-inline-start:34%;animation-duration:13s;animation-delay:7s;scale:.6}
.ofh__motes i:nth-child(4){inset-inline-start:47%;animation-duration:17s;animation-delay:2s}
.ofh__motes i:nth-child(5){inset-inline-start:60%;animation-duration:14s;animation-delay:9s;scale:.8}
.ofh__motes i:nth-child(6){inset-inline-start:73%;animation-duration:18s;animation-delay:5s}
.ofh__motes i:nth-child(7){inset-inline-start:86%;animation-duration:12s;animation-delay:1s;scale:.6}
.ofh__motes i:nth-child(8){inset-inline-start:95%;animation-duration:20s;animation-delay:6s;scale:.75}
.ofh-grid{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(16px,2vw,26px);align-items:stretch;
}
.ofh-card{
position:relative;display:flex;flex-direction:column;
border-radius:24px;overflow:hidden;isolation:isolate;
--notch:17px;
-webkit-mask-image:
radial-gradient(var(--notch) at 0 var(--fold,46%),transparent 98%,#000 100%),
radial-gradient(var(--notch) at 100% var(--fold,46%),transparent 98%,#000 100%);
mask-image:
radial-gradient(var(--notch) at 0 var(--fold,46%),transparent 98%,#000 100%),
radial-gradient(var(--notch) at 100% var(--fold,46%),transparent 98%,#000 100%);
-webkit-mask-composite:source-in;
mask-composite:intersect;
transition:transform .55s var(--ease-out-quart),box-shadow .55s var(--ease-out);
transition-delay:calc(var(--i,0) * 60ms);
}
.ofh-card:hover{transform:translateY(-8px)}
.ofh-card:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.ofh-card__notch{
position:absolute;z-index:4;inset-block-start:var(--fold,46%);
width:calc(var(--notch) * 2);aspect-ratio:1;translate:0 -50%;
border-radius:50%;pointer-events:none;
box-shadow:inset 0 0 0 1px oklch(1 0 0 / 0.22);
}
.ofh-card__notch--s{inset-inline-start:calc(var(--notch) * -1)}
.ofh-card__notch--e{inset-inline-end:calc(var(--notch) * -1)}
.ofh-card__ring,.ofh-card__spark{
position:absolute;inset:0;pointer-events:none;
border-radius:inherit;padding:1.5px;
-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,linear-gradient(#000 0 0);
mask-composite:exclude;
}
.ofh-card__ring{
z-index:5;
background:conic-gradient(from 215deg,
#01647a,#00a39e,#66c6e6,#1ab6c3,#5fc0c4,#f28b4a,#ec6642,#e84333,#c82f23,#04715c,#008f7b,#01647a);
filter:saturate(1.15);
opacity:0.5;
transition:opacity .5s var(--ease-out);
}
.ofh-card__spark{
z-index:6;
background:conic-gradient(from var(--ah-frame-a),
transparent 0deg,transparent 285deg,
oklch(0.85 0.12 200 / 0.85) 315deg,#ffffff 338deg,oklch(0.88 0.14 78 / 0.9) 352deg,transparent 360deg);
filter:drop-shadow(0 0 6px oklch(0.9 0.12 200 / 0.75));
animation:ah-frame-flow 4.6s linear infinite;
animation-delay:calc(var(--i,0) * -1.5s);
transition:filter .5s var(--ease-out);
}
.ofh-card:hover .ofh-card__ring{opacity:0.85}
.ofh-card:hover .ofh-card__spark{
animation-duration:2.6s;
filter:drop-shadow(0 0 10px oklch(0.9 0.12 200 / 0.9));
}
.ofh-card__media{
position:relative;display:block;aspect-ratio:var(--media-ratio,16 / 10);overflow:hidden;
background:
radial-gradient(120% 90% at 50% 0%,color-mix(in oklab,var(--acc) 38%,transparent),transparent 68%),
linear-gradient(170deg,oklch(1 0 0 / 0.10),oklch(1 0 0 / 0.03));
border-block-end:1px dashed oklch(1 0 0 / 0.18);
}
.ofh-card__media img{width:100%;height:100%;display:block;
transition:transform .8s var(--ease-out-quart)}
.ofh-card__media--cover  img{object-fit:cover}
.ofh-card__media--contain img{object-fit:contain}
.ofh-card:hover .ofh-card__media img{transform:scale(1.04)}
.ofh-card__media--contain{background:oklch(0.99 0.003 250);border-block-end-color:oklch(0.55 0.05 262 / 0.18)}
.ofh-card__media--contain .ofh-card__shine{mix-blend-mode:multiply;opacity:0.35}
.ofh-card__shine{
position:absolute;inset-block:-40%;inline-size:38%;inset-inline-start:-60%;
background:linear-gradient(100deg,transparent 18%,oklch(1 0 0 / 0.22) 50%,transparent 82%);
transform:skewX(-14deg);pointer-events:none;
animation:ofh-shine 6.5s var(--ease-out-quart) infinite;
animation-delay:calc(var(--i,0) * 1.1s);
}
@keyframes ofh-shine{0%,58%{inset-inline-start:-60%}88%,100%{inset-inline-start:150%}}
.ofh-ph{
position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:9px;
color:oklch(1 0 0 / 0.42);
}
.ofh-ph__ic{
width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
border:1px dashed oklch(1 0 0 / 0.26);background:oklch(1 0 0 / 0.05);
}
.ofh-ph__ic svg{width:22px;height:22px}
.ofh-ph__t{font-size:0.74rem;font-weight:600;letter-spacing:0.02em}
.ofh-card__body{
position:relative;flex:1;
display:flex;flex-direction:column;align-items:flex-start;gap:9px;
padding:clamp(16px,1.6vw,22px);
--lg-tint:var(--acc);
}
.ofh-card__kind{
font-size:0.7rem;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;
color:oklch(0.88 0.07 250);
}
.ofh-card__title{font-size:1.14rem;font-weight:800;line-height:1.3;color:#fff}
.ofh-card__desc{font-size:0.86rem;line-height:1.6;color:oklch(1 0 0 / 0.76)}
.ofh-card__rule{
display:block;inline-size:100%;block-size:1px;margin-block:3px;
background:linear-gradient(90deg,oklch(1 0 0 / 0.22),transparent);
}
.ofh-card__price{display:flex;align-items:baseline;gap:8px;margin-block-start:auto}
.ofh-card__price b{font-family:var(--font-en);font-size:1.5rem;font-weight:800;color:#fff}
.ofh-card__price i{font-style:normal;font-size:0.76rem;color:oklch(1 0 0 / 0.7)}
.ofh-card__price s{font-size:0.82rem;color:oklch(1 0 0 / 0.45)}
.ofh-slot{
display:block;border-radius:6px;
background:linear-gradient(90deg,oklch(1 0 0 / 0.13),oklch(1 0 0 / 0.06));
animation:ofh-slot 4.4s ease-in-out infinite;
animation-delay:calc(var(--i,0) * 0.3s);
}
@keyframes ofh-slot{0%,100%{opacity:.55}50%{opacity:.9}}
.ofh-slot--kind{inline-size:34%;block-size:9px;border-radius:999px}
.ofh-slot--title{inline-size:88%;block-size:15px}
.ofh-slot--short{inline-size:56%}
.ofh-slot--price{inline-size:46%;block-size:26px;margin-block-start:auto;border-radius:8px}
.ofh-more{display:flex;justify-content:center;margin-block-start:clamp(26px,3.4vw,44px)}
@media (max-width:1000px){.ofh-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){
.ofh-grid{grid-template-columns:minmax(0,1fr)}
.ofh-card{--notch:14px}
}
@media (prefers-reduced-motion:reduce){
.ofh__pool,.ofh__motes i,.ofh-card__shine,.ofh-slot{animation:none !important}
.ofh-card{transition:none !important}
.ofh-card:hover{transform:none}
.ofh-card__spark{animation:none;background:none;filter:none}
.ofh-card__ring{opacity:0.7}
}
@property --lg-x{syntax:'<percentage>';initial-value:50%;inherits:true}
@property --lg-y{syntax:'<percentage>';initial-value:50%;inherits:true}
@property --lg-sweep{syntax:'<percentage>';initial-value:-20%;inherits:true}
.lglass{
isolation:isolate;
--lg-tint:oklch(0.30 0.11 258);
background:
linear-gradient(148deg,oklch(1 0 0 / 0.13) 0%,oklch(1 0 0 / 0.02) 38%,transparent 62%),
color-mix(in oklab,var(--lg-tint) 4%,transparent);
-webkit-backdrop-filter:blur(10px) saturate(2.2) brightness(1.06);
backdrop-filter:blur(10px) saturate(2.2) brightness(1.06);
box-shadow:
inset  1.5px  1.5px 1px -1px oklch(1 0 0 / 0.80),
inset -1.5px -1.5px 1px -1px oklch(1 0 0 / 0.30),
inset  0  9px 18px -15px oklch(1 0 0 / 0.60),
inset  0 -11px 22px -16px oklch(0 0 0 / 0.55),
0 0 0 1px oklch(1 0 0 / 0.12),
0 12px 28px -15px oklch(0 0 0 / 0.55);
transition:background .5s var(--ease-out),transform .5s var(--ease-out-quart),
box-shadow .5s var(--ease-out);
}
.lglass::before{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
border-radius:inherit;padding:5px;
background:
linear-gradient(176deg,transparent calc(var(--lg-sweep) - 16%),
oklch(1 0 0 / 0.55) var(--lg-sweep),
transparent calc(var(--lg-sweep) + 16%)),
linear-gradient(128deg,
oklch(0.86 0.15 208 / 0.42) 0%,transparent 24%,
transparent 76%,oklch(0.82 0.15 348 / 0.34) 100%),
oklch(1 0 0 / 0.16);
-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,linear-gradient(#000 0 0);
mask-composite:exclude;
mix-blend-mode:screen;
}
.lglass::after{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
border-radius:inherit;
background:radial-gradient(60% 140% at var(--lg-x) var(--lg-y),
oklch(1 0 0 / 0.34) 0%,oklch(1 0 0 / 0.08) 42%,transparent 74%);
opacity:0;mix-blend-mode:screen;
transition:opacity .45s var(--ease-out);
}
.lglass-host:hover .lglass,.lglass-host:focus-visible .lglass,
.lglass-host.lglass:hover,.lglass-host.lglass:focus-visible{
background:
linear-gradient(148deg,oklch(1 0 0 / 0.18) 0%,oklch(1 0 0 / 0.03) 38%,transparent 62%),
color-mix(in oklab,var(--lg-tint) 6%,transparent);
transform:translateY(-2px);
box-shadow:
inset  1.5px  1.5px 1px -1px oklch(1 0 0 / 0.95),
inset -1.5px -1.5px 1px -1px oklch(1 0 0 / 0.38),
inset  0  9px 18px -15px oklch(1 0 0 / 0.75),
inset  0 -11px 22px -16px oklch(0 0 0 / 0.5),
0 0 0 1px oklch(1 0 0 / 0.20),
0 18px 34px -16px oklch(0 0 0 / 0.6);
}
.lglass-host:hover .lglass::after,.lglass-host:focus-visible .lglass::after,
.lglass-host.lglass:hover::after,.lglass-host.lglass:focus-visible::after{opacity:1}
.lglass-host:active .lglass,
.lglass-host.lglass:active{transform:translateY(-1px) scale(0.985);transition-duration:.12s}
@supports (animation-timeline:view()){
@media (prefers-reduced-motion:no-preference){
.lglass{
animation:lglass-sweep linear both;
animation-timeline:view();
animation-range:entry 0% exit 100%;
}
@keyframes lglass-sweep{
from{--lg-sweep:-20%}
to{--lg-sweep:120%}
}
}
}
.lglass--light{
--lg-tint:oklch(1 0 0);
background:
linear-gradient(148deg,oklch(1 0 0 / 0.48) 0%,oklch(1 0 0 / 0.28) 46%,oklch(1 0 0 / 0.22) 100%);
-webkit-backdrop-filter:blur(16px) saturate(1.9) brightness(1.04);
backdrop-filter:blur(16px) saturate(1.9) brightness(1.04);
box-shadow:
inset  1.5px  1.5px 1px -1px oklch(1 0 0 / 0.95),
inset -1.5px -1.5px 1px -1px oklch(0.55 0.03 258 / 0.22),
inset  0  9px 18px -15px oklch(1 0 0 / 0.95),
inset  0 -11px 22px -16px oklch(0.42 0.04 260 / 0.24),
0 0 0 1px oklch(0.50 0.03 258 / 0.13),
0 12px 28px -15px oklch(0.30 0.06 262 / 0.26);
}
.lglass--light::before{
mix-blend-mode:normal;opacity:0.85;
background:
linear-gradient(176deg,transparent calc(var(--lg-sweep) - 16%),
oklch(1 0 0 / 0.75) var(--lg-sweep),
transparent calc(var(--lg-sweep) + 16%)),
linear-gradient(128deg,
oklch(0.88 0.10 208 / 0.11) 0%,transparent 26%,
transparent 74%,oklch(0.86 0.10 348 / 0.09) 100%),
oklch(1 0 0 / 0.42);
}
.lglass--light::after{
mix-blend-mode:normal;
background:radial-gradient(60% 140% at var(--lg-x) var(--lg-y),
oklch(1 0 0 / 0.85) 0%,oklch(1 0 0 / 0.28) 42%,transparent 74%);
}
.lglass-host:hover .lglass--light,.lglass-host:focus-visible .lglass--light,
.lglass-host.lglass--light:hover,.lglass-host.lglass--light:focus-visible{
background:
linear-gradient(148deg,oklch(1 0 0 / 0.62) 0%,oklch(1 0 0 / 0.40) 46%,oklch(1 0 0 / 0.32) 100%);
box-shadow:
inset  1.5px  1.5px 1px -1px oklch(1 0 0 / 1),
inset -1.5px -1.5px 1px -1px oklch(0.55 0.03 258 / 0.26),
inset  0  9px 18px -15px oklch(1 0 0 / 1),
inset  0 -11px 22px -16px oklch(0.42 0.04 260 / 0.2),
0 0 0 1px oklch(0.50 0.03 258 / 0.2),
0 18px 34px -16px oklch(0.30 0.06 262 / 0.3);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.lglass{background:color-mix(in oklab,var(--lg-tint) 88%,black 30%)}
.lglass--light{background:oklch(0.98 0.004 250)}
.lglass::before,.lglass::after{display:none}
}
@media (prefers-reduced-motion:reduce){
.lglass{transition:none !important;animation:none !important;--lg-sweep:42%}
.lglass::after{display:none}
.lglass-host:hover .lglass,.lglass-host.lglass:hover{transform:none}
}
.svm-section{
position:relative;isolation:isolate;
background:linear-gradient(180deg,
oklch(0.95 0.014 268) 0%,
oklch(0.92 0.022 268) 46%,
var(--paper) 100%);
padding-block:clamp(36px,4.2vw,60px) clamp(46px,5.4vw,78px);
}
.svm-section > .wrap{position:relative;z-index:1}
.svm{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
grid-auto-flow:row dense;
gap:clamp(14px,1.5vw,22px);
}
.svm-tile--hero{grid-column:span 2;grid-row:span 2}
@property --svm-a{
syntax:'<angle>';initial-value:0deg;inherits:false;
}
.svm-tile{
position:relative;overflow:hidden;isolation:isolate;
aspect-ratio:1 / 1;
border-radius:clamp(16px,1.5vw,24px);
color:var(--ink);display:block;
--svm-blue:oklch(0.30 0.11 258);
--svm-deep:oklch(0.15 0.018 262);
--svm-ink:oklch(0.87 0.06 240);
background:transparent;
box-shadow:0 20px 44px -30px oklch(0.30 0.10 268 / 0.55);
transition:transform .6s var(--ease-out-quart),box-shadow .6s var(--ease-out);
transition-delay:calc(var(--d,var(--i,0)) * 55ms);
}
.svm-tile:hover,.svm-tile:focus-visible{
transform:translateY(-6px);
box-shadow:0 34px 60px -32px oklch(0.30 0.10 268 / 0.6);
}
.svm-tile:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.svm-tile__glow{
position:absolute;inset:-30%;z-index:2;pointer-events:none;
mix-blend-mode:soft-light;
background:radial-gradient(circle at 50% 82%,
color-mix(in oklab,var(--svm-blue) 55%,transparent) 0%,transparent 64%);
opacity:0.5;transition:opacity .6s var(--ease-out);
}
.svm-tile:hover .svm-tile__glow,.svm-tile:focus-visible .svm-tile__glow{opacity:0.7}
.svm-tile__media{position:absolute;inset:-3% 0;z-index:1;display:block;will-change:transform}
.svm-tile__img{
width:100%;height:100%;object-fit:cover;object-position:center;
transform:scale(1.04);
filter:saturate(1.08) contrast(1.04);
transition:transform 1.15s var(--ease-out-quart),filter .6s var(--ease-out);
}
.svm-tile:hover .svm-tile__img,
.svm-tile:focus-visible .svm-tile__img{transform:scale(1.11);filter:saturate(1.16) contrast(1.06)}
.svm-tile__pane{
position:absolute;inset:0;z-index:3;pointer-events:none;
background:
linear-gradient(to top,
color-mix(in oklab,var(--svm-blue) 10%,transparent) 0%,
color-mix(in oklab,var(--svm-blue) 3%,transparent) 32%,
transparent 62%),
linear-gradient(to top,
color-mix(in oklab,var(--svm-deep) 90%,transparent) 0%,
color-mix(in oklab,var(--svm-deep) 60%,transparent) 34%,
color-mix(in oklab,var(--svm-deep) 18%,transparent) 66%,
transparent 100%);
transition:opacity .55s var(--ease-out);
}
.svm-tile:hover .svm-tile__pane,.svm-tile:focus-visible .svm-tile__pane{opacity:0.88}
.svm-tile__sheen{
position:absolute;inset:-40% -120%;z-index:4;pointer-events:none;
background:linear-gradient(74deg,transparent 42%,oklch(1 0 0 / 0.5) 50%,transparent 58%);
translate:-46% 0;opacity:0;
transition:translate 1.1s var(--ease-out-quart),opacity .5s var(--ease-out);
}
.svm-tile:hover .svm-tile__sheen,.svm-tile:focus-visible .svm-tile__sheen{
translate:46% 0;opacity:1;
}
.svm-tile__edge{
position:absolute;inset:0;z-index:6;pointer-events:none;
border-radius:inherit;padding:1.5px;
background:
conic-gradient(from var(--svm-a),
transparent 0deg,
color-mix(in oklab,var(--svm-ink) 80%,transparent) 26deg,
oklch(1 0 0 / 0.95) 44deg,
color-mix(in oklab,var(--svm-ink) 80%,transparent) 62deg,
transparent 96deg,
transparent 360deg),
linear-gradient(oklch(1 0 0 / 0.42),oklch(1 0 0 / 0.10));
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
animation:svm-edge 7s linear infinite;
animation-delay:calc(var(--i,0) * -0.62s);
transition:filter .5s var(--ease-out);
}
.svm-tile:hover .svm-tile__edge,.svm-tile:focus-visible .svm-tile__edge{
animation-duration:2.6s;
filter:drop-shadow(0 0 7px color-mix(in oklab,var(--svm-ink) 60%,transparent));
}
@keyframes svm-edge{to{--svm-a:360deg}}
.svm-tile.is-tracking .svm-tile__edge{
animation:none;
filter:drop-shadow(0 0 9px color-mix(in oklab,var(--svm-ink) 70%,transparent));
}
.svm-tile__no{
position:absolute;z-index:5;
inset-block-start:clamp(12px,1.2vw,18px);inset-inline-end:clamp(13px,1.3vw,20px);
font-family:var(--font-en);font-size:0.74rem;font-weight:800;letter-spacing:0.09em;
color:oklch(1 0 0 / 0.72);
text-shadow:0 1px 3px oklch(0 0 0 / 0.5);
}
.svm-tile__ic{
position:absolute;z-index:5;
inset-block-start:clamp(12px,1.2vw,18px);inset-inline-start:clamp(13px,1.3vw,20px);
width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
color:#fff;
background:oklch(1 0 0 / 0.15);border:1px solid oklch(1 0 0 / 0.30);
box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.42),0 8px 20px -12px oklch(0 0 0 / 0.7);
-webkit-backdrop-filter:blur(16px) saturate(1.7);backdrop-filter:blur(16px) saturate(1.7);
transition:background .5s var(--ease-out),color .5s var(--ease-out),
transform .5s var(--ease-out-quart);
}
.svm-tile__ic svg{width:21px;height:21px}
.svm-tile:hover .svm-tile__ic,.svm-tile:focus-visible .svm-tile__ic{
background:var(--svm-blue);border-color:oklch(1 0 0 / 0.5);
color:#fff;transform:translateY(-3px) rotate(-4deg);
}
.svm-tile__body{
position:absolute;z-index:5;
inset-inline:clamp(8px,0.8vw,12px);inset-block-end:clamp(8px,0.8vw,12px);
display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
padding:clamp(6px,0.55vw,9px) clamp(10px,0.9vw,13px);
border-radius:clamp(9px,0.8vw,13px);
--lg-tint:oklch(1 0 0);
background:
linear-gradient(148deg,
oklch(1 0 0 / 0.58) 0%,
oklch(1 0 0 / 0.53) 46%,
oklch(0.98 0.006 250 / 0.49) 100%);
box-shadow:
inset  1.5px  1.5px 1px -1px oklch(1 0 0 / 0.9),
inset -1.5px -1.5px 1px -1px oklch(0.55 0.03 258 / 0.18),
0 0 0 1px oklch(0.50 0.03 258 / 0.12),
0 10px 24px -14px oklch(0.20 0.06 262 / 0.4);
transition:background .45s var(--ease-out),box-shadow .45s var(--ease-out);
min-block-size:calc(clamp(1.12rem,1.45vw,1.44rem) * 2.24
+ clamp(6px,0.55vw,9px) * 2);
}
.svm-tile__title{
font-weight:800;line-height:1.12;color:var(--navy-deep);
font-size:clamp(1.12rem,1.45vw,1.44rem);
letter-spacing:-0.02em;
text-shadow:none;
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
transition:color .45s var(--ease-out);
}
.lang-en .svm-tile__title{font-family:var(--font-en)}
.svm-tile:hover .svm-tile__body,
.svm-tile:focus-visible .svm-tile__body{
background:
linear-gradient(148deg,oklch(1 0 0 / 0.22) 0%,oklch(1 0 0 / 0.08) 44%,transparent 70%),
color-mix(in oklab,var(--svm-blue) 86%,transparent);
box-shadow:
inset  1.5px  1.5px 1px -1px oklch(1 0 0 / 0.55),
inset -1.5px -1.5px 1px -1px oklch(0 0 0 / 0.25),
0 0 0 1px oklch(1 0 0 / 0.22),
0 14px 30px -14px oklch(0.14 0.06 262 / 0.6);
}
.svm-tile:hover .svm-tile__title,
.svm-tile:focus-visible .svm-tile__title{color:#fff}
.svm-tile:hover .svm-tile__blurb > span,
.svm-tile:focus-visible .svm-tile__blurb > span{color:oklch(1 0 0 / 0.88)}
.svm-tile__blurb{
display:grid;grid-template-rows:0fr;
opacity:0;
margin-block-start:0;
transition:grid-template-rows .5s var(--ease-out-quart),opacity .35s var(--ease-out),
margin-block-start .5s var(--ease-out-quart);
}
.svm-tile__blurb > span{
min-height:0;overflow:hidden;
display:block;
font-size:0.83rem;line-height:1.5;font-weight:500;
color:oklch(0.40 0.03 262);
text-shadow:none;
transition:color .45s var(--ease-out);
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.svm-tile:hover .svm-tile__blurb,
.svm-tile:focus-visible .svm-tile__blurb{grid-template-rows:1fr;opacity:1;margin-block-start:6px}
.svm-tile--hero .svm-tile__title{font-size:clamp(1.5rem,2.4vw,2.15rem);-webkit-line-clamp:2}
.svm-tile--hero .svm-tile__blurb > span{font-size:0.95rem;-webkit-line-clamp:3}
.svm-tile--hero .svm-tile__ic{width:54px;height:54px;border-radius:17px}
.svm-tile--hero .svm-tile__ic svg{width:26px;height:26px}
.svm-tile--hero .svm-tile__body{inset-inline:clamp(14px,1.4vw,22px)}
@media (prefers-reduced-motion:reduce){
.svm-tile__blurb{transition:none}
}
@supports (animation-timeline:view()){
@media (prefers-reduced-motion:no-preference){
.svm-tile__media{
animation:svm-drift linear both;
animation-timeline:view();
animation-range:entry 0% exit 100%;
}
@keyframes svm-drift{
from{transform:translateY(-2.2%)}
to{transform:translateY(2.2%)}
}
}
}
@media (max-width:1080px){
.svm{grid-template-columns:repeat(3,minmax(0,1fr))}
.svm-tile--wide{grid-column:span 2;grid-row:span 1;aspect-ratio:auto}
}
@media (max-width:760px){
.svm{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.svm-tile--wide{grid-column:span 1;aspect-ratio:1 / 1}
.svm-tile__ic{width:34px;height:34px;border-radius:11px}
.svm-tile__ic svg{width:17px;height:17px}
.svm-tile__title{font-size:0.98rem;line-height:1.2}
.svm-tile__body{
inset-inline:6px;inset-block-end:6px;padding:7px 10px;border-radius:10px;
min-block-size:calc(0.98rem * 2.4 + 7px * 2);
}
}
@media (prefers-reduced-motion:reduce){
.svm-tile__media{animation:none !important}
.svm-tile,.svm-tile__img,.svm-tile__ic,.svm-tile__pane,
.svm-tile__glow,.svm-tile__title{transition:none !important}
.svm-tile:hover,.svm-tile:focus-visible{transform:none}
.svm-tile__edge{
animation:none;
background:linear-gradient(color-mix(in oklab,var(--svm-ink) 55%,transparent),
oklch(1 0 0 / 0.35));
}
.svm-tile__sheen{display:none}
}
.dcar-section{
position:relative;isolation:isolate;overflow:hidden;
background:
linear-gradient(180deg,var(--paper) 0%,oklch(0.955 0.012 262) 42%,var(--paper) 100%);
}
.dcar-section__glow{
position:absolute;inset:0;z-index:0;pointer-events:none;
background:
radial-gradient(38% 44% at 12% 12%,oklch(0.34 0.16 268 / 0.10),transparent 70%),
radial-gradient(34% 40% at 88% 30%,oklch(0.82 0.14 88 / 0.12),transparent 72%),
radial-gradient(44% 46% at 56% 104%,oklch(0.44 0.19 25 / 0.07),transparent 70%);
}
.dcar-section > .wrap{position:relative;z-index:1}
.dcar{position:relative;z-index:1}
.dcar__viewport{
padding-block:8px 26px;
overflow:hidden;
direction:ltr;
}
.dcar__track{
display:flex;align-items:stretch;width:max-content;
direction:ltr;
animation:dcar-run 64s linear infinite;
}
[dir="rtl"] .dcar__track > .dcar-card{direction:rtl}
@keyframes dcar-run{
from{transform:translate3d(0,0,0)}
to{transform:translate3d(-33.3333%,0,0)}
}
.dcar:hover .dcar__track,
.dcar__track:focus-within{animation-play-state:paused}
.dcar__track:focus-visible{outline:3px solid var(--gold);outline-offset:6px;border-radius:var(--radius-lg)}
.dcar__viewport{
-webkit-mask-image:linear-gradient(to right,transparent 0,#000 clamp(46px,8vw,130px),
#000 calc(100% - clamp(46px,8vw,130px)),transparent 100%);
mask-image:linear-gradient(to right,transparent 0,#000 clamp(46px,8vw,130px),
#000 calc(100% - clamp(46px,8vw,130px)),transparent 100%);
}
.dcar-card{
position:relative;
flex:0 0 clamp(224px,20vw,282px);
margin-right:clamp(14px,1.5vw,22px);
display:flex;flex-direction:column;
border-radius:var(--radius-lg);overflow:hidden;isolation:isolate;
background:oklch(1 0 0 / 0.46);
border:1px solid oklch(1 0 0 / 0.72);
-webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);
box-shadow:inset 0 1.5px 0 oklch(1 0 0 / 0.92),
inset 0 -40px 60px -46px oklch(0.24 0.10 268 / 0.28),
0 26px 56px -34px oklch(0.30 0.12 268 / 0.4);
transition:transform .5s var(--ease-out-quart),box-shadow .5s var(--ease-out),
border-color .5s var(--ease-out);
}
.dcar-card:hover,.dcar-card:focus-within{
transform:translateY(-8px);
border-color:oklch(1 0 0 / 0.95);
box-shadow:inset 0 1.5px 0 #fff,
0 40px 70px -32px oklch(0.30 0.12 268 / 0.5);
}
.dcar-card::before{
content:"";position:absolute;inset:0;z-index:8;border-radius:inherit;
pointer-events:none;padding:1px;
background:linear-gradient(145deg,
oklch(0.82 0.14 88 / 0.95) 0%,
oklch(0.74 0.15 205 / 0.8) 38%,
oklch(0.62 0.19 300 / 0.55) 66%,
oklch(0.82 0.14 88 / 0.9) 100%);
-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,linear-gradient(#000 0 0);
mask-composite:exclude;
opacity:0;transition:opacity .5s var(--ease-out);
}
.dcar-card:hover::before,.dcar-card:focus-within::before{opacity:1}
.dcar-card.is-featured{box-shadow:inset 0 1.5px 0 oklch(1 0 0 / 0.92),
0 0 0 1.5px oklch(0.82 0.14 88 / 0.5),
0 26px 56px -34px oklch(0.30 0.12 268 / 0.4)}
.dcar-card__photo{
position:relative;display:block;aspect-ratio:3/4;overflow:hidden;isolation:isolate;
}
.dcar-card__stage{
position:absolute;inset:0;z-index:0;
background:linear-gradient(168deg,
oklch(0.99 0.004 235) 0%,oklch(0.955 0.012 240) 54%,oklch(0.90 0.024 248) 100%);
box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.8),
inset 0 -46px 60px -42px oklch(0.24 0.10 268 / 0.2);
}
.dcar-card__scan{
position:absolute;inset-inline:-10%;z-index:1;height:55%;
background:linear-gradient(180deg,transparent,oklch(1 0 0 / 0.5) 55%,transparent);
transform:translateY(-120%);opacity:0;
transition:opacity .4s var(--ease-out);
}
.dcar-card:hover .dcar-card__scan{opacity:1;animation:dcar-scan 1.4s var(--ease-out-quart)}
@keyframes dcar-scan{from{transform:translateY(-120%)}to{transform:translateY(220%)}}
.dcar-card__photo img{
position:relative;z-index:2;
width:100%;height:100%;object-fit:contain;object-position:center bottom;
filter:drop-shadow(0 16px 22px oklch(0.24 0.10 268 / 0.26));
transition:transform .65s var(--ease-out-quart);
}
.dcar-card:hover .dcar-card__photo img{transform:scale(1.05) translateY(-2%)}
.dcar-card__body{
position:relative;z-index:3;
display:flex;flex-direction:column;align-items:flex-start;flex:1;
padding:15px 17px 17px;color:#fff;
--lg-tint:var(--pepsi-2);
background:
linear-gradient(148deg,oklch(1 0 0 / 0.15) 0%,oklch(1 0 0 / 0.04) 40%,transparent 64%),
linear-gradient(165deg,
color-mix(in oklab,var(--pepsi-1) 86%,transparent) 0%,
color-mix(in oklab,var(--pepsi-2) 86%,transparent) 48%,
color-mix(in oklab,var(--pepsi-3) 86%,transparent) 100%);
text-align:start;
}
.dcar-card:hover .dcar-card__body,.dcar-card:focus-within .dcar-card__body{
background:
linear-gradient(148deg,oklch(1 0 0 / 0.22) 0%,oklch(1 0 0 / 0.06) 40%,transparent 64%),
linear-gradient(165deg,
color-mix(in oklab,var(--pepsi-1) 90%,transparent) 0%,
color-mix(in oklab,var(--pepsi-2) 90%,transparent) 48%,
color-mix(in oklab,var(--pepsi-3) 90%,transparent) 100%);
}
.dcar-card__dept{
font-size:0.68rem;font-weight:800;letter-spacing:0.03em;color:var(--gold);
background:color-mix(in oklab,var(--pepsi-3) 55%,transparent);
border:1px solid oklch(1 0 0 / 0.16);
padding:3px 10px;border-radius:999px;
}
.dcar-card__name{font-size:1.02rem;font-weight:800;line-height:1.35;margin-block-start:10px}
.dcar-card__name a{color:#fff;transition:color .3s var(--ease-out)}
.dcar-card__name a:hover{color:var(--gold)}
.dcar-card__name a::after{content:"";position:absolute;inset:0;z-index:4}
.dcar-card__title{
font-size:0.8rem;line-height:1.5;color:oklch(1 0 0 / 0.72);
margin-block:4px 13px;
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.dcar-card__book{
position:relative;z-index:5;
display:flex;align-items:center;justify-content:center;gap:7px;
margin-block-start:auto;padding:9px 14px;border-radius:999px;
font-weight:700;font-size:0.82rem;color:var(--navy-deep);white-space:nowrap;
background:
linear-gradient(148deg,oklch(1 0 0 / 0.34) 0%,oklch(1 0 0 / 0.12) 44%,transparent 68%),
oklch(1 0 0 / 0.86);
-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
box-shadow:
inset  1px  1px 1px -0.5px oklch(1 0 0 / 0.95),
inset -1px -1px 1px -0.5px oklch(0.30 0.06 262 / 0.22),
0 0 0 1px oklch(1 0 0 / 0.42),
0 10px 24px -12px oklch(0.16 0.07 264 / 0.55);
transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),
background .35s var(--ease-out),gap .35s var(--ease-out-quart);
}
.dcar-card__book svg{position:relative;width:15px;height:15px;flex-shrink:0}
.dcar-card__book span{position:relative;overflow:hidden;text-overflow:ellipsis}
[dir="rtl"] .dcar-card__book svg{transform:scaleX(-1)}
.dcar-card__book:hover{
transform:translateY(-2px);gap:11px;color:var(--navy-deep);
background:
linear-gradient(148deg,oklch(1 0 0 / 0.42) 0%,oklch(1 0 0 / 0.16) 44%,transparent 68%),
oklch(1 0 0 / 0.96);
box-shadow:
inset  1px  1px 1px -0.5px oklch(1 0 0 / 1),
inset -1px -1px 1px -0.5px oklch(0.30 0.06 262 / 0.2),
0 0 0 1px oklch(1 0 0 / 0.6),
0 18px 34px -12px oklch(0.16 0.07 264 / 0.7);
}
.dcar-card__book:active{transform:translateY(-1px) scale(0.985);transition-duration:.12s}
@media (max-width:900px){
.dcar-card{flex-basis:clamp(196px,30vw,252px)}
.dcar__track{animation-duration:52s}
}
@media (max-width:560px){
.dcar-card{flex-basis:66vw}
.dcar__track{animation-duration:44s}
}
@media (prefers-reduced-motion:reduce){
.dcar__track{
animation:none;width:auto;
overflow-x:auto;scrollbar-width:none;
scroll-snap-type:x mandatory;
}
.dcar__track::-webkit-scrollbar{display:none}
.dcar-card{scroll-snap-align:start}
.dcar-card,.dcar-card__photo img{transition:none}
.dcar-card:hover{transform:none}
.dcar-card:hover .dcar-card__scan{animation:none;opacity:0}
}
.grev{
position:relative;isolation:isolate;overflow:hidden;
background:linear-gradient(180deg,var(--paper) 0%,oklch(0.965 0.010 262) 40%,var(--paper) 100%);
}
.grev__aura{
position:absolute;inset:0;z-index:0;pointer-events:none;
background:
radial-gradient(36% 42% at 84% 6%,oklch(0.82 0.14 88 / 0.14),transparent 70%),
radial-gradient(40% 46% at 8% 66%,oklch(0.34 0.16 268 / 0.09),transparent 72%);
}
.grev > .wrap{position:relative;z-index:1}
.grev__head{
display:flex;flex-direction:column;align-items:center;text-align:center;
gap:22px;margin-block-end:clamp(24px,3vw,38px);
}
.grev__intro h2{
margin-block-start:12px;max-width:none;
font-size:clamp(1.9rem,4vw,3rem);font-weight:800;color:var(--navy);
}
.grev__score{
display:flex;align-items:center;gap:14px;
padding:13px 20px;border-radius:18px;
background:oklch(1 0 0 / 0.62);border:1px solid oklch(1 0 0 / 0.8);
-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
box-shadow:inset 0 1.5px 0 oklch(1 0 0 / 0.9),0 20px 44px -28px oklch(0.30 0.12 268 / 0.4);
}
.grev__num{
font-family:var(--font-en);font-size:clamp(2.2rem,4vw,3rem);font-weight:800;
line-height:1;color:var(--navy-deep);letter-spacing:-0.02em;
}
.grev__scorebody{display:flex;flex-direction:column;gap:5px}
.grev__count{font-size:0.84rem;color:var(--ink-soft,oklch(0.45 0.03 262))}
.grev__count b{font-family:var(--font-en);color:var(--navy-deep);font-weight:800}
.grev__stars{display:inline-flex;gap:2px;color:var(--gold-text)}
.grev__stars svg{width:15px;height:15px}
.grev__stars--lg svg{width:19px;height:19px}
.grev__stars svg.is-off{color:oklch(0.34 0.16 268 / 0.18)}
.grev-lead .grev__stars svg.is-off,
.grev-card .grev__stars svg.is-off{color:oklch(1 0 0 / 0.26)}
.grev-lead{
position:relative;margin:0;
padding:clamp(26px,3.4vw,46px) clamp(24px,3.4vw,52px);
border-radius:var(--radius-lg);
color:#fff;
background:var(--pepsi-field);
box-shadow:0 34px 70px -38px oklch(0.24 0.12 268 / 0.7);
overflow:hidden;
}
.grev-lead::before{
content:"";position:absolute;inset-block-start:0;inset-inline:0;height:2px;
background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.grev-lead__mark{
position:absolute;inset-block-start:-8px;inset-inline-end:clamp(14px,3vw,42px);
color:oklch(1 0 0 / 0.07);pointer-events:none;
}
.grev-lead__mark svg{width:clamp(96px,13vw,168px);height:auto}
.grev-lead__q{
position:relative;margin:0;max-width:46ch;
font-size:clamp(1.15rem,2vw,1.7rem);font-weight:700;line-height:1.62;
letter-spacing:-0.005em;
}
.lang-en .grev-lead__q{font-family:var(--font-en)}
.grev-lead__by{
position:relative;display:flex;align-items:center;gap:13px;flex-wrap:wrap;
margin-block-start:clamp(20px,2.4vw,30px);
padding-block-start:clamp(16px,2vw,24px);
border-block-start:1px solid oklch(1 0 0 / 0.14);
}
.grev-lead__ava{
width:46px;height:46px;border-radius:50%;overflow:hidden;flex-shrink:0;
display:grid;place-items:center;
background:oklch(1 0 0 / 0.12);border:1px solid oklch(1 0 0 / 0.22);
font-weight:800;color:var(--gold);
}
.grev-lead__ava img{width:100%;height:100%;object-fit:cover}
.grev-lead__ava--sm{width:34px;height:34px;font-size:0.85rem}
.grev-lead__who{display:flex;flex-direction:column;gap:2px;margin-inline-end:auto}
.grev-lead__who b{font-size:0.98rem;font-weight:800}
.grev-lead__who span{font-size:0.78rem;color:oklch(1 0 0 / 0.62)}
.grev-rail{
display:flex;gap:16px;align-items:stretch;
margin-block-start:16px;
margin-inline:calc(-1 * clamp(14px,4vw,40px));
padding-inline:clamp(14px,4vw,40px);padding-block:6px 4px;
overflow-x:auto;scroll-snap-type:x mandatory;
scrollbar-width:none;overscroll-behavior-x:contain;
}
.grev-rail::-webkit-scrollbar{display:none}
.grev-rail:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:var(--radius-lg)}
.grev-card{
flex:0 0 clamp(258px,30%,372px);scroll-snap-align:start;
display:flex;flex-direction:column;
padding:20px 22px;border-radius:20px;
color:#fff;
background:linear-gradient(165deg,
color-mix(in oklab,var(--pepsi-1) 88%,transparent) 0%,
color-mix(in oklab,var(--pepsi-2) 88%,transparent) 48%,
color-mix(in oklab,var(--pepsi-3) 88%,transparent) 100%);
border:1px solid oklch(1 0 0 / 0.22);
-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);
box-shadow:inset 0 1.5px 0 oklch(1 0 0 / 0.35),0 22px 48px -32px oklch(0.24 0.12 264 / 0.55);
transition:transform .45s var(--ease-out-quart),box-shadow .45s var(--ease-out);
}
.grev-card:hover{
transform:translateY(-5px);
box-shadow:inset 0 1.5px 0 oklch(1 0 0 / 0.5),0 32px 60px -30px oklch(0.24 0.12 264 / 0.62);
}
.grev-card__t{
margin-block:12px 18px;font-size:0.92rem;line-height:1.72;
color:oklch(1 0 0 / 0.88);
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden;
}
.grev-card__by{
display:flex;align-items:center;gap:10px;margin-block-start:auto;
padding-block-start:14px;border-block-start:1px solid oklch(1 0 0 / 0.16);
}
.grev-card__by .grev-lead__ava{background:oklch(1 0 0 / 0.14);border-color:oklch(1 0 0 / 0.24);color:var(--gold)}
.grev-card__by b{display:block;font-size:0.88rem;font-weight:800;color:#fff}
.grev-card__by i{font-style:normal;font-size:0.76rem;color:oklch(1 0 0 / 0.74)}
.grev__more{margin-block-start:clamp(22px,3vw,34px);text-align:center}
.grev__link{
display:inline-flex;align-items:center;gap:9px;
font-weight:800;font-size:0.94rem;color:var(--navy);
padding-block-end:3px;border-block-end:2px solid oklch(0.82 0.14 88 / 0.55);
transition:gap .35s var(--ease-out-quart),color .3s var(--ease-out),border-color .3s var(--ease-out);
}
.grev__link svg{width:16px;height:16px}
[dir="rtl"] .grev__link svg{transform:scaleX(-1)}
.grev__link:hover{gap:15px;color:var(--crimson);border-color:var(--crimson)}
@media (max-width:760px){
.grev__score{padding:11px 16px;gap:11px}
.grev-card{flex-basis:80%}
}
@media (prefers-reduced-motion:reduce){
.grev-card,.grev__link{transition:none}
.grev-card:hover{transform:none}
}
.grev-guide{
display:inline-block;font-style:normal;vertical-align:1px;
margin-inline-start:7px;padding:2px 8px;border-radius:999px;
font-size:0.64rem;font-weight:800;letter-spacing:0.02em;
color:var(--gold);
background:color-mix(in oklab,var(--pepsi-3) 50%,transparent);
border:1px solid oklch(1 0 0 / 0.18);
}
.grev-rail{justify-content:flex-start}
@media (min-width:1100px){
.grev-card{flex:1 1 0;min-width:0}
}
.ba-page,.eq-page,.bk-page,.of-page{
--canvas:var(--paper);
--canvas-2:var(--paper-2);
--glass:oklch(1 0 0 / 0.72);
--glass-2:oklch(1 0 0 / 0.88);
--glass-3:oklch(1 0 0 / 0.96);
--glass-line:oklch(0.90 0.012 258);
--glass-line-2:oklch(0.76 0.03 258);
--g-blue:color-mix(in oklab,var(--pepsi-1) 82%,transparent);
--g-blue-2:color-mix(in oklab,var(--pepsi-1) 94%,transparent);
--g-blue-line:color-mix(in oklab,var(--pepsi-2) 95%,transparent);
--g-blue-line-2:color-mix(in oklab,var(--pepsi-3) 95%,transparent);
--inset:oklch(0.965 0.008 250);
--inset-2:oklch(0.955 0.010 250);
--inset-line:oklch(0.90 0.012 258);
--g-txt:var(--ink);
--g-txt-soft:oklch(0.38 0.025 268);
--g-txt-mute:var(--ink-soft);
--g-gold:var(--gold-text);
--g-gold-tint:oklch(0.50 0.11 80);
--blur:saturate(1.15) blur(20px);
position:relative;isolation:isolate;
background:var(--canvas);
color:var(--g-txt);
}
@keyframes g-float{
0%{transform:translateY(0) scale(1);opacity:0}
14%{opacity:0.6}
86%{opacity:0.4}
100%{transform:translateY(-64vh) scale(0.4);opacity:0}
}
.glass-card{
position:relative;isolation:isolate;overflow:hidden;
border-radius:var(--radius-lg);
background:var(--glass);
border:1px solid var(--glass-line);
-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
box-shadow:
inset 0 1px 0 oklch(1 0 0 / 0.9),
0 20px 44px -28px oklch(0.34 0.16 268 / 0.30);
transition:transform .55s var(--ease-out),border-color .45s var(--ease-out),
background .45s var(--ease-out),box-shadow .55s var(--ease-out);
}
.glass-card__bloom{display:none}
.glass-card__sheen{position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:inherit;overflow:hidden}
.glass-card__sheen::before{
content:"";position:absolute;inset-block:-60%;width:16%;inset-inline-start:-40%;
background:oklch(1 0 0 / 0.55);filter:blur(16px);transform:rotate(16deg);
transition:inset-inline-start .9s var(--ease-out);
}
.glass-card:hover{
background:var(--glass-2);border-color:var(--glass-line-2);transform:translateY(-4px);
box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.9),0 28px 56px -28px oklch(0.34 0.16 268 / 0.38);
}
.glass-card:hover .glass-card__sheen::before{inset-inline-start:120%}
.g-chips{position:relative;display:flex;flex-wrap:wrap;gap:10px;margin-block-start:34px}
.g-chips--center{justify-content:center;margin-block-end:50px}
.g-chips__glow{display:none}
.g-chip{
display:inline-flex;align-items:center;gap:9px;
padding:11px 20px;border-radius:999px;
font-size:0.96rem;font-weight:600;color:var(--g-txt-soft);
background:var(--glass);border:1px solid var(--glass-line);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
transition:color .3s var(--ease-out),background .3s var(--ease-out),
border-color .3s var(--ease-out),transform .3s var(--ease-out);
}
.g-chip:hover{color:var(--navy);background:var(--glass-3);border-color:var(--glass-line-2);transform:translateY(-2px)}
.g-chip__n{font-size:0.76rem;font-weight:700;line-height:1;padding:4px 8px;border-radius:999px;background:oklch(0.34 0.16 268 / 0.09)}
.g-chip.is-active{color:#fff;background:var(--navy);border-color:var(--navy)}
.g-chip.is-active .g-chip__n{background:oklch(1 0 0 / 0.22)}
.g-empty{text-align:center;color:var(--g-txt-mute);padding-block:60px;font-size:1.05rem}
.g-note{
display:flex;gap:18px;align-items:flex-start;
margin-block-start:56px;padding:26px 28px;border-radius:var(--radius);
background:var(--glass);border:1px solid var(--glass-line);
-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
}
.g-note__ic{
flex-shrink:0;width:44px;height:44px;border-radius:14px;
display:grid;place-items:center;color:var(--g-gold);
background:oklch(0.82 0.14 88 / 0.16);border:1px solid oklch(0.72 0.13 80 / 0.35);
}
.g-note__ic svg{width:22px;height:22px}
.g-note b{display:block;color:var(--navy);margin-block-end:6px;font-size:1.02rem}
.g-note p{color:var(--g-txt-mute);font-size:0.95rem;line-height:1.75}
.g-cta{position:relative;padding-block:clamp(46px,5.4vw,78px);overflow:hidden}
.g-cta .btn--book,
.bk-done__acts .btn--book,
.of-cta,
.g-cta .btn--book:hover,
.bk-done__acts .btn--book:hover,
.of-cta:hover{
color:#fff;
}
.g-cta .btn--book,
.bk-done__acts .btn--book,
.of-cta{
background:var(--g-blue);
border:1.75px solid var(--g-blue-line);
-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
box-shadow:
inset 0 1.5px 0 oklch(1 0 0 / 0.32),
inset 0 -14px 22px -18px oklch(0 0 0 / 0.5),
0 14px 30px -16px oklch(0.34 0.16 268 / 0.55);
transition:transform .35s var(--ease-out),background .35s var(--ease-out),
border-color .35s var(--ease-out),box-shadow .35s var(--ease-out);
}
.g-cta .btn--book:hover,
.bk-done__acts .btn--book:hover,
.of-cta:hover{
background:var(--g-blue-2);
border-color:var(--g-blue-line-2);
transform:translateY(-2px);
box-shadow:
inset 0 1.5px 0 oklch(1 0 0 / 0.4),
inset 0 -14px 22px -18px oklch(0 0 0 / 0.5),
0 18px 36px -16px oklch(0.34 0.16 268 / 0.6);
}
.g-cta .btn--book::before,
.bk-done__acts .btn--book::before{background:oklch(0.34 0.16 268 / 0.35)}
.g-cta .btn--book .btn__pulse,
.bk-done__acts .btn--book .btn__pulse{background:oklch(1 0 0 / 0.14)}
.ba-hero{
position:relative;overflow:hidden;text-align:center;
padding-block:calc(var(--header-h) + clamp(60px,9vw,110px)) clamp(40px,6vw,70px);
}
.ba-hero .g-chips{justify-content:center}
@keyframes ba-wash{
from{transform:translate3d(-2%,-1%,0) scale(1.02)}
to{transform:translate3d(2%,1%,0)  scale(1.07)}
}
@keyframes ba-lattice{to{transform:translateY(46px)}}
@keyframes ba-aurora{
from{transform:translate3d(0,0,0) scale(1);opacity:0.42}
to{transform:translate3d(3%,-2%,0) scale(1.14);opacity:0.62}
}
@keyframes ba-reveal{
0%{transform:translateX(0);opacity:0}
14%{opacity:1}
86%{opacity:1}
100%{transform:translateX(330%);opacity:0}
}
.svp-hero.is-paused .svp-orb,
.svp-hero.is-paused .svp-motes i,
.svp-hero.is-paused .svp-emblem__ring,
.svp-hero.is-paused .svp-emblem__core,
.svp-hero.is-paused .svp-emblem__core::after,
.svp-hero.is-paused .svp-hero__bg-img-wrap img{animation-play-state:paused}
.ba-cases{padding-block-start:clamp(30px,4vw,50px)}
.ba-grid{display:grid;gap:30px;grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}
.ba-card{display:flex;flex-direction:column}
.ba-card.is-hidden{display:none}
.ba-stage{
position:relative;aspect-ratio:4 / 3;overflow:hidden;
border-radius:var(--radius-lg) var(--radius-lg) 0 0;
background:oklch(0.93 0.012 258);
cursor:ew-resize;touch-action:pan-y;
user-select:none;-webkit-user-select:none;
}
.ba-pane{position:absolute;inset:0}
.ba-pane img{width:100%;height:100%;object-fit:cover;display:block}
.ba-pane--before{clip-path:inset(0 calc(100% - var(--p) * 1%) 0 0);will-change:clip-path}
.ba-pane--before img{filter:saturate(0.88) brightness(0.97)}
.ba-ph{
position:absolute;inset:0;display:none;
flex-direction:column;align-items:center;justify-content:center;gap:12px;
color:var(--ink-soft);text-align:center;padding:20px;
background:oklch(0.93 0.012 258);
}
.ba-pane--before .ba-ph{background:oklch(0.89 0.014 258)}
.ba-pane.is-missing .ba-ph{display:flex}
.ba-pane.is-missing img{display:none}
.ba-ph__ic{width:42px;height:42px;opacity:0.75}
.ba-ph__ic svg{width:100%;height:100%}
.ba-ph__t{font-size:0.85rem}
.ba-tag{
position:absolute;inset-block-start:14px;z-index:4;
padding:7px 16px;border-radius:999px;
font-size:0.82rem;font-weight:700;color:var(--navy);
background:oklch(1 0 0 / 0.88);border:1px solid oklch(1 0 0 / 0.9);
-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);
box-shadow:0 6px 18px -8px oklch(0.2 0.04 258 / 0.4);
pointer-events:none;
}
.ba-tag--before{left:14px}
.ba-tag--after{right:14px}
.ba-divider{
position:absolute;inset-block:0;left:calc(var(--p) * 1%);
width:2px;margin-inline-start:-1px;z-index:5;pointer-events:none;will-change:left;
}
.ba-divider__line{
position:absolute;inset:0;background:#fff;
box-shadow:0 0 0 1px oklch(0.30 0.05 258 / 0.18);
}
.ba-handle{
position:absolute;inset-block-start:50%;left:calc(var(--p) * 1%);
width:54px;height:54px;border-radius:50%;
transform:translate(-50%,-50%);z-index:6;
display:grid;place-items:center;color:var(--navy);cursor:ew-resize;
background:oklch(1 0 0 / 0.92);
border:1.5px solid oklch(1 0 0 / 0.95);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
box-shadow:0 10px 26px -8px oklch(0.2 0.04 258 / 0.5);
transition:transform .3s var(--ease-out),background .3s var(--ease-out);
will-change:left,transform;
}
.ba-handle__ic{width:24px;height:24px;display:block}
.ba-handle__ic svg{width:100%;height:100%}
.ba-handle__ring{
position:absolute;inset:-8px;border-radius:50%;
border:1.5px solid oklch(1 0 0 / 0.75);
animation:ba-pulse 3s var(--ease-out) infinite;
}
@keyframes ba-pulse{
0%{transform:scale(0.9);opacity:0.9}
70%,100%{transform:scale(1.3);opacity:0}
}
.ba-stage:hover .ba-handle{transform:translate(-50%,-50%) scale(1.08);background:#fff}
.ba-stage.is-dragging{cursor:grabbing}
.ba-stage.is-dragging .ba-handle{transform:translate(-50%,-50%) scale(1.16)}
.ba-stage.is-dragging .ba-handle__ring{animation:none;opacity:0}
.ba-stage.is-dragging .ba-divider,.ba-stage.is-dragging .ba-handle,
.ba-stage.is-dragging .ba-pane--before{transition:none}
.ba-handle:focus-visible{outline:3px solid var(--primary);outline-offset:4px}
.ba-hint{
position:absolute;inset-block-end:14px;
inset-inline:0;margin-inline:auto;inline-size:fit-content;z-index:4;
padding:7px 16px;border-radius:999px;white-space:nowrap;
font-size:0.78rem;color:var(--navy);
background:oklch(1 0 0 / 0.88);border:1px solid oklch(1 0 0 / 0.9);
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
box-shadow:0 6px 18px -8px oklch(0.2 0.04 258 / 0.4);
transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
pointer-events:none;
}
.ba-stage.is-touched .ba-hint{opacity:0;transform:translateY(8px)}
.ba-body{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1}
.ba-kind{
align-self:flex-start;font-size:0.78rem;font-weight:700;
padding:5px 13px;border-radius:999px;color:#fff;
background:var(--accent,var(--navy));
}
.ba-title{margin-block-start:14px;font-size:1.32rem;font-weight:800;color:var(--navy)}
.ba-desc{margin-block-start:10px;color:var(--g-txt-mute);font-size:0.95rem;line-height:1.8;flex:1}
.ba-meta{
display:grid;grid-template-columns:repeat(3,1fr);gap:4px;
margin-block-start:22px;padding-block-start:20px;border-block-start:1px solid var(--glass-line);
}
.ba-meta__i{text-align:center;padding-inline:6px}
.ba-meta__i + .ba-meta__i{border-inline-start:1px solid var(--glass-line)}
.ba-meta dt{font-size:0.72rem;color:var(--g-txt-mute)}
.ba-meta dd{margin-block-start:5px;font-size:0.88rem;font-weight:700;color:var(--g-txt);line-height:1.4}
.eq-page .section--tint{background:var(--paper-2)}
.eq-spot-sec{padding-block:clamp(30px,5vw,60px)}
.eq-spot{
display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,3vw,46px);
align-items:center;padding:clamp(22px,2.6vw,34px);
}
.eq-spot + .eq-spot{margin-block-start:30px}
.eq-spot--flip .eq-spot__media{order:2}
.eq-frame{
position:relative;overflow:hidden;border-radius:var(--radius);
aspect-ratio:4 / 3;background:oklch(0.93 0.012 258);
border:1px solid var(--glass-line);
}
.eq-frame img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.eq-spot:hover .eq-frame img,.eq-card:hover .eq-frame img{transform:scale(1.04)}
.eq-frame__glare{display:none}
.eq-frame--card{aspect-ratio:16 / 10;border-radius:var(--radius-lg) var(--radius-lg) 0 0;border:0}
.eq-ph{
position:absolute;inset:0;display:none;overflow:hidden;
flex-direction:column;align-items:center;justify-content:center;gap:12px;
color:var(--ink-soft);text-align:center;padding:20px;
background:oklch(0.93 0.012 258);
}
.eq-frame.is-missing .eq-ph{display:flex}
.eq-frame.is-missing img{display:none}
.eq-ph__scan{
position:absolute;inset-inline:-10%;height:22%;inset-block-start:-25%;
background:oklch(1 0 0 / 0.75);filter:blur(14px);
animation:eq-ph-scan 5s ease-in-out infinite;
}
@keyframes eq-ph-scan{0%{inset-block-start:-25%}100%{inset-block-start:105%}}
.eq-ph__ic{width:46px;height:46px;opacity:0.7}
.eq-ph__ic svg{width:100%;height:100%}
.eq-ph__t{font-size:0.85rem}
.eq-badge{
display:inline-flex;align-items:center;gap:9px;
padding:8px 16px 8px 8px;border-radius:999px;
font-size:0.82rem;font-weight:700;color:var(--g-txt);
background:var(--inset);border:1px solid var(--glass-line);
}
.eq-badge__ic{
width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
color:#fff;background:var(--accent,var(--navy));
}
.eq-badge__ic svg{width:15px;height:15px}
.eq-spot__name{margin-block-start:16px;font-size:clamp(1.4rem,2.4vw,2rem);font-weight:800;color:var(--navy)}
.eq-maker{display:block;margin-block-start:6px;font-size:0.86rem;color:var(--g-gold);font-weight:600}
.eq-spot__desc{margin-block-start:16px;color:var(--g-txt-mute);line-height:1.85;font-size:1rem}
.eq-high{margin-block-start:20px;display:flex;flex-wrap:wrap;gap:9px}
.eq-high li{
display:inline-flex;align-items:center;gap:8px;
padding:8px 15px;border-radius:999px;font-size:0.85rem;color:var(--g-txt-soft);
background:var(--inset);border:1px solid var(--glass-line);
}
.eq-high svg{width:14px;height:14px;color:var(--primary);flex-shrink:0}
.eq-high--compact li{font-size:0.8rem;padding:6px 12px}
.eq-specs{margin-block-start:22px;display:grid;gap:1px;background:var(--inset-line);border-radius:14px;overflow:hidden}
.eq-spec{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 18px;background:var(--inset-2)}
.eq-spec dt{font-size:0.85rem;color:var(--g-txt-mute)}
.eq-spec dd{font-size:0.88rem;font-weight:700;color:var(--g-txt);text-align:end}
.eq-dept{display:block;margin-block-start:18px;font-size:0.86rem;color:var(--g-txt-mute)}
.eq-dept b{color:var(--g-txt)}
.eq-grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.eq-card{display:flex;flex-direction:column}
.eq-card.is-hidden{display:none}
.eq-card__ic{
position:absolute;inset-block-end:14px;inset-inline-end:14px;
width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
color:#fff;background:var(--accent,var(--navy));
box-shadow:0 10px 24px -10px oklch(0.2 0.04 258 / 0.55);
}
.eq-card__ic svg{width:22px;height:22px}
.eq-card__body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.eq-kind{
align-self:flex-start;font-size:0.74rem;font-weight:700;
padding:5px 12px;border-radius:999px;color:#fff;
background:var(--accent,var(--navy));
}
.eq-card__name{margin-block-start:13px;font-size:1.2rem;font-weight:800;color:var(--navy);line-height:1.35}
.eq-card__desc{margin-block-start:12px;color:var(--g-txt-mute);font-size:0.93rem;line-height:1.8;flex:1}
.eq-toggle{
align-self:flex-start;margin-block-start:18px;
display:inline-flex;align-items:center;gap:8px;
padding:9px 18px;border-radius:999px;
font-size:0.86rem;font-weight:600;color:var(--g-txt);
background:var(--inset);border:1px solid var(--glass-line);
transition:background .3s var(--ease-out),border-color .3s var(--ease-out);
}
.eq-toggle:hover{background:var(--glass-3);border-color:var(--glass-line-2)}
.eq-toggle svg{width:16px;height:16px;transition:transform .4s var(--ease-out)}
.eq-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.eq-more{overflow:hidden}
.eq-more[hidden]{display:none}
.eq-more .eq-specs{margin-block-start:18px}
.of-sec{padding-block-start:clamp(30px,4vw,50px)}
.of-grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.of-card{display:flex;flex-direction:column;position:relative}
.of-card.is-hidden{display:none}
.of-card__notch{
position:absolute;inset-block-start:var(--notch-y,232px);
width:26px;height:26px;border-radius:50%;
background:var(--canvas);z-index:4;border:1px solid var(--glass-line);
}
.of-card__notch--s{inset-inline-start:-14px}
.of-card__notch--e{inset-inline-end:-14px}
.of-media{position:relative}
.of-frame{
position:relative;overflow:hidden;aspect-ratio:16 / 10;
border-radius:var(--radius-lg) var(--radius-lg) 0 0;
background:oklch(0.93 0.012 258);
}
.of-frame img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.of-card:hover .of-frame img{transform:scale(1.04)}
.of-ph{
position:absolute;inset:0;display:none;overflow:hidden;
flex-direction:column;align-items:center;justify-content:center;gap:12px;
color:var(--ink-soft);text-align:center;padding:20px;
background:oklch(0.93 0.012 258);
}
.of-frame.is-missing .of-ph{display:flex}
.of-frame.is-missing img{display:none}
.of-ph__shine{
position:absolute;inset-block:-40%;width:18%;inset-inline-start:-40%;
background:oklch(1 0 0 / 0.75);filter:blur(16px);transform:rotate(16deg);
animation:of-shine 6s ease-in-out infinite;
}
@keyframes of-shine{0%,65%{inset-inline-start:-40%}100%{inset-inline-start:130%}}
.of-ph__ic{width:46px;height:46px;opacity:0.72}
.of-ph__ic svg{width:100%;height:100%}
.of-ph__t{font-size:0.85rem}
.of-ribbon{
position:absolute;inset-block-start:16px;inset-inline-start:16px;z-index:3;
padding:8px 18px;border-radius:999px;
font-size:0.78rem;font-weight:800;
color:var(--navy-deep);background:var(--gold);
box-shadow:0 10px 24px -10px oklch(0.72 0.13 80 / 0.8);
}
.of-body{padding:26px 28px 28px;display:flex;flex-direction:column;flex:1}
.of-kind{
align-self:flex-start;font-size:0.74rem;font-weight:700;
padding:5px 13px;border-radius:999px;color:#fff;
background:var(--accent,var(--navy));
}
.of-title{margin-block-start:14px;font-size:1.3rem;font-weight:800;color:var(--navy);line-height:1.3}
.of-title--hero{font-size:clamp(1.5rem,2.6vw,2.05rem)}
.of-desc{margin-block-start:11px;color:var(--g-txt-mute);font-size:0.95rem;line-height:1.8}
.of-inc{margin-block-start:18px;display:grid;gap:9px;flex:1}
.of-inc li{display:flex;align-items:flex-start;gap:10px;font-size:0.9rem;color:var(--g-txt-soft)}
.of-inc svg{width:15px;height:15px;margin-block-start:4px;color:var(--primary);flex-shrink:0}
.of-foot{
margin-block-start:24px;padding-block-start:22px;
border-block-start:1px dashed var(--glass-line);
display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.of-price{display:flex;flex-direction:column;gap:4px}
.of-price__now{display:flex;align-items:baseline;gap:8px}
.of-price__now b{font-size:2rem;font-weight:800;color:var(--navy);line-height:1}
.of-price__now i{font-style:normal;font-size:0.78rem;color:var(--g-txt-mute)}
.of-price__old{font-size:0.82rem;color:var(--g-txt-mute)}
.of-price__old s{color:var(--g-txt-mute)}
.of-price__ask{font-size:1.05rem;font-weight:700;color:var(--g-gold)}
.of-save{
align-self:flex-start;margin-block-start:4px;
padding:4px 12px;border-radius:999px;font-size:0.76rem;font-weight:700;
color:var(--g-gold-tint);background:oklch(0.82 0.14 88 / 0.18);
border:1px solid oklch(0.72 0.13 80 / 0.4);
}
.of-cta{
display:inline-flex;align-items:center;gap:9px;
padding:13px 24px;border-radius:999px;
font-size:0.92rem;font-weight:700;
}
.of-cta svg{width:17px;height:17px;transition:transform .35s var(--ease-out)}
[dir="rtl"] .of-cta svg{transform:scaleX(-1)}
.of-cta:hover svg{transform:translateX(3px)}
[dir="rtl"] .of-cta:hover svg{transform:scaleX(-1) translateX(3px)}
.of-until{
display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
margin-block-start:16px;padding:7px 15px;border-radius:999px;
font-size:0.79rem;color:var(--g-gold-tint);
background:oklch(0.82 0.14 88 / 0.16);border:1px solid oklch(0.72 0.13 80 / 0.38);
}
.of-until svg{width:15px;height:15px}
.of-terms{margin-block-start:14px;font-size:0.78rem;color:var(--g-txt-mute);line-height:1.65}
@media (min-width:900px){
.of-card--hero{grid-column:1 / -1;display:grid;grid-template-columns:1.02fr 1fr;align-items:stretch}
.of-card--hero .of-frame{
height:100%;aspect-ratio:auto;min-height:380px;
border-radius:var(--radius-lg) 0 0 var(--radius-lg);
}
[dir="rtl"] .of-card--hero .of-frame{border-radius:0 var(--radius-lg) var(--radius-lg) 0}
.of-card--hero .of-media{height:100%}
.of-card--hero .of-body{padding:clamp(28px,3vw,40px)}
.of-card--hero .of-card__notch{display:none}
}
@media (max-width:899px){.of-card__notch{inset-block-start:calc(56.25% - 13px)}}
.bk-main{padding-block:clamp(20px,3vw,40px) clamp(46px,5.4vw,78px);position:relative}
.bk-layout{display:grid;grid-template-columns:1fr 330px;gap:30px;align-items:start}
.bk-shell{padding:clamp(24px,3vw,40px)}
.bk-rail{position:relative;display:flex;justify-content:space-between;gap:8px;margin-block-end:38px}
.bk-rail__track{
position:absolute;inset-block-start:21px;inset-inline:8%;
height:2px;background:var(--glass-line);border-radius:2px;overflow:hidden;
}
.bk-rail__fill{position:absolute;inset-block:0;inset-inline-start:0;width:0%;background:var(--navy);transition:width .7s var(--ease-out)}
.bk-rail__i{
position:relative;z-index:2;flex:1;min-width:0;
display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;
}
.bk-rail__dot{
position:relative;width:42px;height:42px;border-radius:50%;
display:grid;place-items:center;font-size:0.95rem;font-weight:700;
color:var(--g-txt-mute);background:#fff;border:1.5px solid var(--glass-line);
transition:all .45s var(--ease-out);
}
.bk-rail__ok{width:18px;height:18px;position:absolute;opacity:0;transform:scale(0.5);transition:all .35s var(--ease-out)}
.bk-rail__t{font-size:0.76rem;color:var(--g-txt-mute);transition:color .35s var(--ease-out);line-height:1.3}
.bk-rail__i.is-active .bk-rail__dot{
color:#fff;background:var(--navy);border-color:var(--navy);
box-shadow:0 0 0 6px oklch(0.34 0.16 268 / 0.12);
}
.bk-rail__i.is-active .bk-rail__t{color:var(--navy);font-weight:700}
.bk-rail__i.is-done .bk-rail__dot{color:var(--navy-deep);background:var(--gold);border-color:var(--gold)}
.bk-rail__i.is-done .bk-rail__n{opacity:0}
.bk-rail__i.is-done .bk-rail__ok{opacity:1;transform:scale(1)}
.bk-steps{position:relative;min-height:340px}
.bk-step{display:none}
.bk-step.is-active{display:block;animation:bk-in .5s var(--ease-out) both}
.bk-step.is-back{animation-name:bk-in-back}
@keyframes bk-in{from{opacity:0;transform:translateY(16px)}}
@keyframes bk-in-back{from{opacity:0;transform:translateY(-12px)}}
.bk-h{font-size:clamp(1.3rem,2.4vw,1.75rem);font-weight:800;color:var(--navy)}
.bk-l{margin-block-start:9px;color:var(--g-txt-mute);font-size:0.98rem;line-height:1.75}
.bk-modes{margin-block-start:30px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.bk-mode{
position:relative;overflow:hidden;text-align:start;
padding:28px 26px;border-radius:var(--radius);
background:var(--glass);border:1px solid var(--glass-line);
-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
transition:transform .45s var(--ease-out),border-color .35s var(--ease-out),background .35s var(--ease-out);
}
.bk-mode:hover{transform:translateY(-4px);border-color:var(--glass-line-2);background:var(--glass-3)}
.bk-mode.is-active{border-color:var(--navy);background:var(--glass-3);box-shadow:0 0 0 1px var(--navy)}
.bk-mode__ic{
position:relative;width:52px;height:52px;border-radius:16px;
display:grid;place-items:center;color:#fff;
background:var(--accent,var(--navy));
}
.bk-mode__ic svg{width:25px;height:25px}
.bk-mode b{position:relative;display:block;margin-block-start:18px;font-size:1.12rem;color:var(--navy)}
.bk-mode > span:not(.bk-mode__ic):not(.bk-mode__go){
position:relative;display:block;margin-block-start:7px;
color:var(--g-txt-mute);font-size:0.92rem;line-height:1.7;
}
.bk-mode__go{
position:absolute;inset-block-start:26px;inset-inline-end:24px;
width:20px;height:20px;color:var(--g-txt-mute);
transition:transform .4s var(--ease-out),color .35s var(--ease-out);
}
.bk-mode__go svg{width:100%;height:100%}
[dir="rtl"] .bk-mode__go svg{transform:scaleX(-1)}
.bk-mode:hover .bk-mode__go{color:var(--navy);transform:translateX(4px)}
[dir="rtl"] .bk-mode:hover .bk-mode__go{transform:translateX(-4px)}
.bk-search{
display:flex;align-items:center;gap:12px;margin-block-start:26px;
padding:14px 20px;border-radius:999px;
background:var(--glass);border:1px solid var(--glass-line);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
transition:border-color .35s var(--ease-out),background .35s var(--ease-out);
}
.bk-search:focus-within{border-color:var(--glass-line-2);background:#fff}
.bk-search svg{width:19px;height:19px;color:var(--g-txt-mute);flex-shrink:0}
.bk-search input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--g-txt);font:inherit;font-size:0.98rem}
.bk-search input::placeholder{color:var(--g-txt-mute)}
.bk-docs{
margin-block-start:18px;max-height:420px;overflow-y:auto;
display:grid;gap:10px;padding-inline-end:6px;
scrollbar-width:thin;scrollbar-color:oklch(0.78 0.02 258) transparent;
}
.bk-docs::-webkit-scrollbar{width:6px}
.bk-docs::-webkit-scrollbar-thumb{background:oklch(0.78 0.02 258);border-radius:99px}
.bk-doc{
display:flex;align-items:center;gap:15px;text-align:start;
padding:12px 16px;border-radius:16px;
background:var(--glass);border:1px solid var(--glass-line);
transition:background .25s var(--ease-out),border-color .25s var(--ease-out),transform .25s var(--ease-out);
}
.bk-doc.is-hidden{display:none}
.bk-doc:hover{background:var(--glass-3);border-color:var(--glass-line-2);transform:translateX(2px)}
[dir="rtl"] .bk-doc:hover{transform:translateX(-2px)}
.bk-doc.is-active{border-color:var(--navy);background:#fff;box-shadow:0 0 0 1px var(--navy)}
.bk-doc__ph{
flex-shrink:0;width:52px;height:52px;border-radius:50%;overflow:hidden;
background:var(--inset);border:1px solid var(--glass-line);display:grid;place-items:center;
}
.bk-doc__ph img{width:100%;height:100%;object-fit:cover;object-position:top center}
.bk-doc__b{flex:1;min-width:0;display:block}
.bk-doc__b b{display:block;font-size:0.98rem;color:var(--navy)}
.bk-doc__b > span{display:block;font-size:0.83rem;color:var(--g-txt-mute);line-height:1.5}
.bk-doc__b em{
display:inline-block;margin-block-start:5px;font-style:normal;
font-size:0.7rem;padding:3px 10px;border-radius:999px;
color:var(--g-txt-soft);background:var(--inset);
}
.bk-doc__ok,.bk-spec__ok{
flex-shrink:0;width:26px;height:26px;border-radius:50%;
display:grid;place-items:center;color:#fff;
background:var(--navy);opacity:0;transform:scale(0.4);
transition:all .35s var(--ease-out);
}
.bk-doc__ok svg,.bk-spec__ok svg{width:15px;height:15px}
.bk-doc.is-active .bk-doc__ok,.bk-spec.is-active .bk-spec__ok{opacity:1;transform:scale(1)}
.bk-specs{margin-block-start:26px;display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.bk-spec{
position:relative;overflow:hidden;text-align:start;
display:flex;align-items:center;gap:14px;
padding:18px;border-radius:18px;
background:var(--glass);border:1px solid var(--glass-line);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
transition:transform .4s var(--ease-out),border-color .35s var(--ease-out),background .35s var(--ease-out);
}
.bk-spec:hover{transform:translateY(-3px);border-color:var(--glass-line-2);background:var(--glass-3)}
.bk-spec.is-active{border-color:var(--navy);background:#fff;box-shadow:0 0 0 1px var(--navy)}
.bk-spec__ic{
position:relative;flex-shrink:0;width:42px;height:42px;border-radius:13px;
display:grid;place-items:center;color:#fff;background:var(--accent,var(--navy));
}
.bk-spec__ic svg{width:21px;height:21px}
.bk-spec b{position:relative;flex:1;font-size:0.95rem;color:var(--navy);line-height:1.4}
.bk-days{
margin-block-start:26px;display:flex;gap:10px;overflow-x:auto;
padding-block:4px 10px;scroll-snap-type:x mandatory;
scrollbar-width:thin;scrollbar-color:oklch(0.78 0.02 258) transparent;
}
.bk-days::-webkit-scrollbar{height:6px}
.bk-days::-webkit-scrollbar-thumb{background:oklch(0.78 0.02 258);border-radius:99px}
.bk-day{
position:relative;flex:0 0 auto;scroll-snap-align:start;
width:84px;padding:14px 8px 12px;border-radius:18px;text-align:center;
background:var(--glass);border:1px solid var(--glass-line);
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
transition:transform .35s var(--ease-out),background .3s var(--ease-out),border-color .3s var(--ease-out);
}
.bk-day:not(:disabled):hover{transform:translateY(-4px);background:var(--glass-3);border-color:var(--glass-line-2)}
.bk-day.is-active{background:var(--navy);border-color:var(--navy);transform:translateY(-4px)}
.bk-day.is-active .bk-day__dow,.bk-day.is-active .bk-day__m{color:oklch(1 0 0 / 0.78)}
.bk-day.is-active .bk-day__n{color:#fff}
.bk-day.is-closed{opacity:0.45;cursor:not-allowed}
.bk-day__dow{display:block;font-size:0.74rem;color:var(--g-txt-mute)}
.bk-day__n{display:block;margin-block:4px;font-size:1.45rem;font-weight:800;color:var(--navy);line-height:1}
.bk-day__m{display:block;font-size:0.72rem;color:var(--g-txt-mute)}
.bk-day__tag{
position:absolute;inset-block-start:-8px;
inset-inline:0;margin-inline:auto;inline-size:fit-content;
font-size:0.62rem;font-weight:700;padding:2px 9px;border-radius:999px;white-space:nowrap;
color:var(--navy-deep);background:var(--gold);
}
.bk-slots{margin-block-start:30px;display:grid;gap:24px}
.bk-slots[hidden]{display:none}
.bk-period__t{display:inline-flex;align-items:center;gap:9px;font-size:0.86rem;font-weight:700;color:var(--g-txt-soft)}
.bk-period__t svg{width:17px;height:17px;color:var(--g-gold)}
.bk-slot-row{margin-block-start:12px;display:flex;flex-wrap:wrap;gap:9px}
.bk-slot{
padding:11px 18px;border-radius:13px;
font-size:0.88rem;font-weight:600;color:var(--g-txt-soft);
background:var(--glass);border:1px solid var(--glass-line);
transition:all .25s var(--ease-out);
}
.bk-slot:not(:disabled):hover{color:var(--navy);background:var(--glass-3);border-color:var(--glass-line-2);transform:translateY(-2px)}
.bk-slot.is-active{color:#fff;background:var(--navy);border-color:var(--navy)}
.bk-slot.is-past{opacity:.38;text-decoration:line-through;cursor:not-allowed;transform:none}
.bk-slot em{display:none}
.bk-hintline{margin-block-start:24px;color:var(--g-txt-mute);font-size:0.92rem}
.bk-hintline[hidden]{display:none}
.bk-form{margin-block-start:26px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bk-field{position:relative}
.bk-field--wide{grid-column:1 / -1}
.bk-field input,.bk-field textarea{
width:100%;padding:22px 18px 10px;border-radius:14px;
font:inherit;font-size:0.97rem;color:var(--g-txt);
background:#fff;border:1px solid var(--line);
outline:none;resize:vertical;
transition:border-color .3s var(--ease-out),box-shadow .3s var(--ease-out);
}
.bk-field textarea{padding-block-start:26px;line-height:1.7}
.bk-field input:focus,.bk-field textarea:focus{
border-color:var(--navy);
box-shadow:0 0 0 3px color-mix(in oklab,var(--navy) 16%,transparent);
}
.bk-field label{
position:absolute;inset-block-start:16px;inset-inline-start:19px;
color:var(--g-txt-mute);font-size:0.95rem;pointer-events:none;
transition:font-size .25s var(--ease-out),color .25s var(--ease-out),inset-block-start .25s var(--ease-out);
}
.bk-field input:focus + label,.bk-field input:not(:placeholder-shown) + label,
.bk-field textarea:focus + label,.bk-field textarea:not(:placeholder-shown) + label{
inset-block-start:7px;font-size:0.72rem;color:var(--g-gold);
}
.bk-field input.is-bad,.bk-field input.is-bad:focus{border-color:oklch(0.55 0.16 40)}
.bk-seg-wrap{display:flex;flex-direction:column;gap:9px}
.bk-seg__k{font-size:0.82rem;color:var(--g-txt-mute)}
.bk-seg{position:relative;display:flex;padding:5px;border-radius:999px;background:var(--inset);border:1px solid var(--glass-line)}
.bk-seg__b{
position:relative;z-index:2;flex:1;padding:10px 14px;border-radius:999px;
font-size:0.88rem;font-weight:600;color:var(--g-txt-mute);transition:color .3s var(--ease-out);
}
.bk-seg__b.is-active{color:#fff}
.bk-seg__pill{
position:absolute;inset-block:5px;inset-inline-start:5px;
width:calc(50% - 5px);border-radius:999px;background:var(--navy);
transition:transform .4s var(--ease-out);
}
.bk-seg[data-i="1"] .bk-seg__pill{transform:translateX(100%)}
[dir="rtl"] .bk-seg[data-i="1"] .bk-seg__pill{transform:translateX(-100%)}
.bk-err{
margin-block-start:16px;padding:12px 18px;border-radius:12px;
font-size:0.9rem;color:oklch(0.44 0.13 45);
background:oklch(0.95 0.045 70);border:1px solid oklch(0.82 0.10 60);
}
.bk-err[hidden]{display:none}
.bk-sum{margin-block-start:26px;display:grid;gap:1px;background:var(--inset-line);border-radius:18px;overflow:hidden}
.bk-sum__i{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:17px 22px;background:var(--inset-2)}
.bk-sum dt{font-size:0.86rem;color:var(--g-txt-mute);flex-shrink:0}
.bk-sum dd{font-size:0.95rem;font-weight:700;color:var(--navy);text-align:end}
.bk-done{text-align:center;padding-block:10px}
.bk-done[hidden],.bk-review[hidden]{display:none}
.bk-done__seal{display:inline-block;width:84px;height:84px;margin-block-end:22px}
.bk-done__seal svg{width:100%;height:100%}
.bk-done__c{
fill:none;stroke:var(--primary);stroke-width:2.5;
stroke-dasharray:152;stroke-dashoffset:152;animation:bk-draw .9s var(--ease-out) forwards;
}
.bk-done__k{
fill:none;stroke:var(--primary);stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:40;stroke-dashoffset:40;animation:bk-draw .5s var(--ease-out) .55s forwards;
}
@keyframes bk-draw{to{stroke-dashoffset:0}}
.bk-done .bk-l{max-width:480px;margin-inline:auto}
.bk-ref{
display:inline-block;margin-block-start:20px;padding:9px 20px;border-radius:999px;
font-size:0.88rem;color:var(--g-txt-soft);
background:var(--inset);border:1px solid var(--glass-line);
}
.bk-ref b{color:var(--g-gold-tint);letter-spacing:0.06em}
.bk-done__acts{margin-block-start:28px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center}
.bk-done__acts .btn--book svg{width:20px;height:20px}
.bk-restart{
padding:14px 24px;border-radius:999px;font-size:0.92rem;color:var(--g-txt-soft);
background:var(--glass);border:1px solid var(--glass-line);transition:all .3s var(--ease-out);
}
.bk-restart:hover{color:var(--navy);background:var(--glass-3);border-color:var(--glass-line-2)}
.bk-nav{
margin-block-start:32px;padding-block-start:24px;border-block-start:1px solid var(--glass-line);
display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.bk-nav[hidden]{display:none}
.bk-btn{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border-radius:999px;font-size:0.95rem;font-weight:700;transition:all .3s var(--ease-out)}
.bk-btn svg{width:18px;height:18px}
[dir="rtl"] .bk-btn svg{transform:scaleX(-1)}
.bk-btn--back{color:var(--g-txt-soft);background:var(--glass);border:1px solid var(--glass-line)}
.bk-btn--back:hover{color:var(--navy);background:var(--glass-3)}
.bk-btn--back[hidden]{visibility:hidden;display:inline-flex}
.bk-btn--next{color:#fff;background:var(--navy);box-shadow:0 14px 30px -14px oklch(0.34 0.16 268 / 0.7)}
.bk-btn--next:not(:disabled):hover{transform:translateY(-2px);background:var(--navy-deep)}
.bk-btn--next:disabled{opacity:0.42;cursor:not-allowed}
.bk-count{font-size:0.84rem;color:var(--g-txt-mute)}
.bk-count b{color:var(--navy)}
.bk-aside{display:grid;gap:20px;position:sticky;inset-block-start:calc(var(--header-h-scrolled) + 20px)}
.bk-live,.bk-steps-note{padding:26px 24px}
.bk-live__t{font-size:0.78rem;letter-spacing:0.06em;color:var(--g-gold);font-weight:700}
.bk-live__rows{margin-block-start:16px;display:grid;gap:12px}
.bk-live__r{
display:flex;justify-content:space-between;align-items:baseline;gap:14px;
padding-block-end:12px;border-block-end:1px solid var(--glass-line);
}
.bk-live__r:last-child{border-block-end:0;padding-block-end:0}
.bk-live__r span{font-size:0.82rem;color:var(--g-txt-mute);flex-shrink:0}
.bk-live__r b{font-size:0.9rem;color:var(--navy);text-align:end}
.bk-live__r.is-set b{color:var(--g-gold)}
.bk-steps-note h3{font-size:1.02rem;color:var(--navy);font-weight:700}
.bk-flow{margin-block-start:18px;display:grid;gap:16px}
.bk-flow li{display:flex;gap:13px;align-items:flex-start}
.bk-flow__n{
flex-shrink:0;width:27px;height:27px;border-radius:50%;
display:grid;place-items:center;font-size:0.78rem;font-weight:700;
color:var(--g-gold-tint);background:oklch(0.82 0.14 88 / 0.18);border:1px solid oklch(0.72 0.13 80 / 0.4);
}
.bk-flow__b b{display:block;font-size:0.88rem;color:var(--g-txt)}
.bk-flow__b > span{display:block;margin-block-start:3px;font-size:0.8rem;color:var(--g-txt-mute);line-height:1.6}
.bk-call{
margin-block-start:22px;padding-block-start:20px;border-block-start:1px solid var(--glass-line);
display:flex;align-items:center;gap:12px;color:var(--g-txt-soft);transition:color .3s var(--ease-out);
}
.bk-call:hover{color:var(--navy)}
.bk-call svg{width:19px;height:19px;flex-shrink:0;color:var(--g-gold)}
.bk-call span{font-size:0.82rem}
.bk-call b{display:block;font-size:0.95rem;color:var(--navy);margin-block-start:2px}
@media (max-width:1060px){
.bk-layout{grid-template-columns:1fr}
.bk-aside{position:static;grid-template-columns:1fr 1fr}
.eq-spot{grid-template-columns:1fr}
.eq-spot--flip .eq-spot__media{order:0}
}
@media (max-width:780px){
.ba-grid,.eq-grid,.of-grid{grid-template-columns:1fr}
.bk-modes,.bk-form{grid-template-columns:1fr}
.bk-aside{grid-template-columns:1fr}
.bk-rail__t{display:none}
.bk-rail__track{inset-inline:20px}
.bk-rail__dot{width:36px;height:36px;font-size:0.85rem}
.g-note{flex-direction:column;gap:14px}
.bk-nav{flex-wrap:wrap}
.bk-count{order:3;width:100%;text-align:center}
.ba-meta{grid-template-columns:1fr;gap:12px}
.ba-meta__i{display:flex;justify-content:space-between;text-align:start}
.ba-meta__i + .ba-meta__i{border-inline-start:0;border-block-start:1px solid var(--glass-line);padding-block-start:12px}
}
@media (max-width:520px){
.bk-shell{padding:22px 18px}
.ba-body,.eq-card__body,.of-body{padding-inline:20px}
.ba-handle{width:46px;height:46px}
.of-foot{flex-direction:column;align-items:stretch}
.of-cta{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
.eq-ph__scan,
.of-ph__shine,
.ba-handle__ring{animation:none}
.glass-card__sheen::before{display:none}
.bk-step.is-active{animation:none}
.bk-done__c,.bk-done__k{animation:none;stroke-dashoffset:0}
.ba-pane--before,.ba-divider,.ba-handle{transition:none}
}
.slider-play{
width:44px;height:44px;border-radius:50%;
display:grid;place-items:center;color:#fff;
border:1.5px solid oklch(1 0 0 / 0.35);background:oklch(1 0 0 / 0.08);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
transition:background-color .4s var(--ease-out),border-color .4s var(--ease-out),
transform .4s var(--ease-out);
}
.slider-play:hover{background:var(--gold);border-color:var(--gold);color:var(--navy-deep);transform:scale(1.06)}
.slider-play svg{width:17px;height:17px}
.slider-play__play{display:none}
.slider-play[aria-pressed="true"] .slider-play__pause{display:none}
.slider-play[aria-pressed="true"] .slider-play__play{display:block}
.stat__num,
.ah-stat__num,
.ah-stat3d__num,
.abt-fig__n,
.bk-count,
.bk-ref{
font-variant-numeric:tabular-nums;
font-feature-settings:"tnum" 1;
}
h1,
h2,
h3,
.ah-title,
.svp-title,
.dp-name{
text-wrap:balance;
}
p,.slide__lead,.ah-line,.svp-lead,.bk-l{text-wrap:pretty}
.ah-line,.bk-l,.ct-line__v,.gf-tagline,.doc-card p,.bk-doc__b span{
overflow-wrap:break-word;
}
.bk-doc__b,.ct-line__b,.bk-live__r{min-width:0}
a,button,.bk-slot,.bk-day,.bk-mode,.bk-doc,.bk-spec,.slider-dot{
touch-action:manipulation;
-webkit-tap-highlight-color:oklch(0.82 0.14 88 / 0.18);
}
.site-header > .header-inner{
padding-inline-start:max(var(--pad,20px),env(safe-area-inset-left));
padding-inline-end:max(var(--pad,20px),env(safe-area-inset-right));
}
.mobile-menu{overscroll-behavior:contain}
.glass-footer{padding-block-end:max(0px,env(safe-area-inset-bottom))}
.slider-ui{inset-block-end:max(30px,env(safe-area-inset-bottom))}
.ct-submit.is-busy,.bk-btn--next.is-busy{opacity:0.65;cursor:progress}
.bk-done:focus{outline:none}
.bk-done:focus-visible{outline:3px solid var(--gold);outline-offset:6px;border-radius:12px}
@media (prefers-reduced-motion:reduce){
.slider-play{transition:none}
}
.grev-lead .grev__stars,
.grev-card .grev__stars{color:var(--gold)}
.art-body a:not([class]),
.abt-lead a:not([class]){
color:var(--primary);text-underline-offset:3px;
}
.art-body a:not([class]):hover,
.abt-lead a:not([class]):hover{color:var(--primary-hover);text-decoration:underline}
:focus-visible{outline-color:var(--primary)}
.svm-tile,.dep,.of-card,.eq-card,.blog-card,.dp-rel{
--accent-tint:color-mix(in oklab,var(--accent,var(--primary)) 12%,transparent);
}
.ah-stats{margin:0}
.ah-stat3d-list{margin:0}
.ah-stat dt,.ah-stat dd,
.ah-stat3d dt,.ah-stat3d dd{margin-inline-start:0}
.ah-building__mirror{display:none}
@supports not (-webkit-box-reflect:below 4px linear-gradient(to bottom,#000,transparent)){
.ah-building__mirror{
display:block;width:100%;height:auto;
margin-block-start:4px;
transform:scaleY(-1);
opacity:0.22;
-webkit-mask-image:linear-gradient(to bottom,transparent 54%,#000 100%);
mask-image:linear-gradient(to bottom,transparent 54%,#000 100%);
pointer-events:none;
}
.ah-frame .ah-building__mirror{display:none}
}
@media (hover:hover) and (pointer:fine){
.ah-stage,.ah-card,.ah-3d{will-change:transform}
}
@media (hover:none),(pointer:coarse){
.ah-3d{will-change:auto}
}
.reveal{transition-delay:calc(min(var(--d,0),6) * 0.06s)}
.abt-slot__corner{border-color:color-mix(in oklab,var(--gold) 85%,transparent)}
.pcover{
position:absolute;inset:0;z-index:0;overflow:hidden;
pointer-events:none;
--dim:0.63;--veil:0.40;
}
.pcover[data-tone="bright"],[data-tone="bright"]{--dim:0.53;--veil:0.44}
.pcover[data-tone="mid"],[data-tone="mid"]{--dim:0.63;--veil:0.40}
.pcover[data-tone="dark"],[data-tone="dark"]{--dim:1.19;--veil:0.32}
.pcover[data-tone="deep"],[data-tone="deep"]{--dim:1.38;--veil:0.24}
.pcover__media{
position:absolute;inset:0;overflow:hidden;
transform:translate3d(0,var(--pc-shift,0%),0);
}
.pcover__img{
width:100%;height:100%;object-fit:cover;object-position:center;
filter:brightness(var(--dim)) saturate(1.06) contrast(1.04);
transform:scale(1.06);
will-change:transform;
animation:pc-drift 30s ease-in-out infinite alternate;
}
.pcover__veil{
position:absolute;inset:0;
background:var(--navy-darkest);
opacity:var(--veil);
}
.pcover__scan{
position:absolute;inset-inline:-12%;height:26%;inset-block-start:-30%;
background:oklch(0.85 0.06 200 / 0.16);
filter:blur(28px);
animation:pc-scan 11s ease-in-out infinite;
}
@keyframes pc-scan{
0%,62%{inset-block-start:-30%;opacity:0}
68%{opacity:1}
100%{inset-block-start:104%;opacity:0}
}
@keyframes pc-drift{
from{transform:scale(1.06) translate3d(0,0,0)}
to{transform:scale(1.12) translate3d(-1.2%,-1.6%,0)}
}
.pcover__motes{position:absolute;inset:0}
.pcover__motes i{
position:absolute;width:3px;height:3px;border-radius:50%;
background:oklch(0.9 0.05 90 / 0.55);
animation:pc-float linear infinite;
}
.pcover__motes i:nth-child(1){inset-inline-start:12%;inset-block-start:74%;animation-duration:21s;animation-delay:-3s}
.pcover__motes i:nth-child(2){inset-inline-start:27%;inset-block-start:86%;animation-duration:26s;animation-delay:-9s}
.pcover__motes i:nth-child(3){inset-inline-start:41%;inset-block-start:78%;animation-duration:23s;animation-delay:-14s}
.pcover__motes i:nth-child(4){inset-inline-start:56%;inset-block-start:90%;animation-duration:28s;animation-delay:-6s}
.pcover__motes i:nth-child(5){inset-inline-start:68%;inset-block-start:76%;animation-duration:24s;animation-delay:-18s}
.pcover__motes i:nth-child(6){inset-inline-start:81%;inset-block-start:88%;animation-duration:20s;animation-delay:-11s}
.pcover__motes i:nth-child(7){inset-inline-start:90%;inset-block-start:70%;animation-duration:30s;animation-delay:-2s}
.pcover__motes i:nth-child(8){inset-inline-start:19%;inset-block-start:94%;animation-duration:25s;animation-delay:-21s}
@keyframes pc-float{
0%{transform:translateY(0) scale(1);opacity:0}
16%{opacity:0.8}
84%{opacity:0.5}
100%{transform:translateY(-58vh) scale(0.4);opacity:0}
}
.pcover__frame{position:absolute;inset:clamp(14px,2.2vw,30px)}
.pcover__cnr{
position:absolute;width:26px;height:26px;
border:2px solid oklch(0.82 0.14 88 / 0.55);
opacity:0;animation:pc-cnr .7s var(--ease-out) forwards;
}
.pcover__cnr--tl{inset-block-start:0;inset-inline-start:0;border-inline-end:0;border-block-end:0;animation-delay:.45s}
.pcover__cnr--tr{inset-block-start:0;inset-inline-end:0;border-inline-start:0;border-block-end:0;animation-delay:.55s}
.pcover__cnr--bl{inset-block-end:0;inset-inline-start:0;border-inline-end:0;border-block-start:0;animation-delay:.65s}
.pcover__cnr--br{inset-block-end:0;inset-inline-end:0;border-inline-start:0;border-block-start:0;animation-delay:.75s}
@keyframes pc-cnr{from{opacity:0;transform:scale(0.6)}to{opacity:1;transform:scale(1)}}
.pcover__rule{
position:absolute;inset-block-end:0;inset-inline:0;height:2px;
background:var(--gold);
transform:scaleX(0);transform-origin:50% 50%;
animation:pc-rule 1.1s var(--ease-out) .35s forwards;
}
@keyframes pc-rule{to{transform:scaleX(1)}}
.pcover__media{animation:pc-in 1.2s var(--ease-out) both}
@keyframes pc-in{from{opacity:0;scale:1.04}to{opacity:1;scale:1}}
.has-cover{position:relative;isolation:isolate;color:#fff;background:var(--navy-darkest)}
.has-cover > *:not(.pcover){position:relative;z-index:1}
.has-cover h1{color:#fff}
.has-cover .eyebrow{color:#fff}
.has-cover .g-chip,.svp-hero .g-chip{
color:oklch(0.95 0.01 262);background:oklch(1 0 0 / 0.12);
border-color:oklch(1 0 0 / 0.28);
}
.has-cover .g-chip:hover,.svp-hero .g-chip:hover{color:#fff;background:oklch(1 0 0 / 0.2)}
.has-cover .g-chip__n,.svp-hero .g-chip__n{background:oklch(1 0 0 / 0.2)}
.has-cover .g-chip.is-active,.svp-hero .g-chip.is-active{color:var(--navy);background:#fff;border-color:#fff}
.has-cover .g-chip.is-active .g-chip__n,
.svp-hero .g-chip.is-active .g-chip__n{background:oklch(0.34 0.16 268 / 0.14)}
:where(.svp-hero){--dim:0.63;--veil:0.40}
.svp-hero__bg-img-wrap{
opacity:1;mix-blend-mode:normal;
transform:translate3d(0,var(--pc-shift,0%),0);
}
.svp-hero__bg-img-wrap img{
filter:brightness(var(--dim)) saturate(1.06) contrast(1.04);
transform:scale(1.06);
animation:pc-drift 30s ease-in-out infinite alternate;
}
.svp-hero__bg-overlay{background:var(--navy-darkest);opacity:var(--veil)}
@media (max-width:760px){
.pcover__frame{inset:10px}
.pcover__cnr{width:18px;height:18px}
}
@media (prefers-reduced-motion:reduce){
.pcover__img,.svp-hero__bg-img-wrap img{animation:none;transform:scale(1.02)}
.pcover__scan,.pcover__motes i{animation:none;opacity:0}
.pcover__media{animation:none}
.pcover__cnr{animation:none;opacity:1}
.pcover__rule{animation:none;transform:none}
}
.chmap{
--map-x:50%;
--map-y:50%;
position:relative;
}
.chmap--light{
--map-ink:oklch(0.34 0.16 268);
--map-acc:oklch(0.50 0.12 196);
--map-mark:oklch(0.44 0.19 25);
--map-card:oklch(1 0 0 / 0.86);
--map-card-l:oklch(0.34 0.16 268 / 0.14);
--map-tile-filter:saturate(0.62) contrast(1.02) brightness(1.02);
--map-tone:oklch(0.34 0.16 268 / 0.10);
}
.chmap--dark{
--map-ink:oklch(1 0 0 / 0.9);
--map-acc:oklch(0.82 0.14 88);
--map-mark:oklch(0.82 0.14 88);
--map-card:oklch(0.24 0.12 268 / 0.72);
--map-card-l:oklch(1 0 0 / 0.22);
--map-tile-filter:invert(0.94) grayscale(0.94) contrast(0.86) brightness(1.06);
--map-tone:oklch(0.24 0.12 268 / 0.55);
}
.chmap__stage{
position:relative;display:block;overflow:hidden;
aspect-ratio:16 / 6;min-block-size:190px;
border-radius:16px;
isolation:isolate;
}
.chmap--tall .chmap__stage{
aspect-ratio:16 / 8;min-block-size:340px;
border-radius:var(--radius-lg);
border:1px solid var(--map-card-l);
}
.chmap--inset .chmap__stage{border-radius:inherit;min-block-size:0;block-size:100%;aspect-ratio:auto}
.chmap__tile{
position:absolute;inset:0;z-index:0;
inline-size:100%;block-size:100%;
border:0;pointer-events:none;
filter:var(--map-tile-filter);
opacity:0;transition:opacity 1.1s var(--ease-out);
}
.chmap.in .chmap__tile{opacity:1}
.chmap__tone{
position:absolute;inset:0;z-index:1;pointer-events:none;
background:
radial-gradient(120% 100% at var(--map-x) var(--map-y),
transparent 34%,color-mix(in oklab,var(--map-tone) 85%,transparent) 100%),
var(--map-tone);
}
.chmap__sweep{
position:absolute;z-index:2;left:var(--map-x);top:var(--map-y);
inline-size:150%;aspect-ratio:1;translate:-50% -50%;
border-radius:50%;pointer-events:none;
background:conic-gradient(from 0deg,
color-mix(in oklab,var(--map-acc) 26%,transparent) 0deg,
transparent 44deg,transparent 360deg);
-webkit-mask-image:radial-gradient(circle,#000 4%,transparent 46%);
mask-image:radial-gradient(circle,#000 4%,transparent 46%);
opacity:0;animation:chmap-spin 6.5s linear infinite;
}
.chmap.in .chmap__sweep{opacity:1;transition:opacity 1s var(--ease-out) .6s}
@keyframes chmap-spin{to{rotate:360deg}}
.chmap__rings{
position:absolute;z-index:3;left:var(--map-x);top:var(--map-y);
inline-size:0;block-size:0;pointer-events:none;
}
.chmap__rings i{
position:absolute;top:0;left:0;
inline-size:320px;aspect-ratio:1;translate:-50% -50%;
border-radius:50%;border:1px solid color-mix(in oklab,var(--map-acc) 55%,transparent);
opacity:0;animation:chmap-ring 4.2s var(--ease-out) infinite;
}
.chmap__rings i:nth-child(2){animation-delay:1.4s}
.chmap__rings i:nth-child(3){animation-delay:2.8s}
@keyframes chmap-ring{
0%{scale:0.12;opacity:0}
12%{opacity:0.75}
100%{scale:1;opacity:0}
}
.chmap__pin{
position:absolute;z-index:4;left:var(--map-x);top:var(--map-y);
translate:-50% -84%;pointer-events:none;
color:var(--map-mark);display:grid;place-items:center;
}
.chmap__pin svg{
inline-size:42px;block-size:42px;
filter:drop-shadow(0 6px 12px oklch(0 0 0 / 0.35));
transform-origin:50% 100%;
animation:chmap-bob 3.2s ease-in-out infinite;
}
.chmap--tall .chmap__pin svg{inline-size:56px;block-size:56px}
.chmap__pin-shadow{
position:absolute;bottom:-5px;left:50%;translate:-50% 0;
inline-size:9px;block-size:9px;border-radius:50%;
background:var(--map-mark);
box-shadow:0 0 0 4px color-mix(in oklab,var(--map-mark) 22%,transparent);
}
@keyframes chmap-bob{
0%,100%{translate:0 0}
50%{translate:0 -7px}
}
.chmap__go:hover ~ .chmap__pin svg,
.chmap__stage:hover .chmap__pin svg{animation-duration:1.6s}
.chmap__go{position:absolute;z-index:5;inset:0;display:block;border-radius:inherit}
.chmap__go:focus-visible{outline:3px solid var(--map-acc);outline-offset:-3px}
.chmap__card{
position:absolute;inset-block-start:14px;inset-inline-start:14px;
display:grid;gap:3px;max-inline-size:min(64%,340px);
padding:12px 16px;border-radius:14px;
background:var(--map-card);border:1px solid var(--map-card-l);
-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
color:var(--map-ink);
transition:transform .45s var(--ease-out);
}
.chmap--tall .chmap__card{inset-block-start:22px;inset-inline-start:22px;padding:16px 20px}
.chmap__go:hover .chmap__card{transform:translateY(-3px)}
.chmap__card-k{
font-size:0.72rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
color:var(--map-acc);
}
.lang-ar .chmap__card-k{letter-spacing:0;text-transform:none;font-size:0.85rem}
.chmap__card-v{font-size:0.98rem;font-weight:700;line-height:1.4}
.chmap__card-go{
display:inline-flex;align-items:center;gap:7px;margin-block-start:5px;
font-size:0.86rem;font-weight:700;color:var(--map-acc);
}
.chmap__card-go svg{inline-size:14px;block-size:14px;transition:transform .35s var(--ease-out)}
[dir="rtl"] .chmap__card-go svg{transform:scaleX(-1)}
.chmap__go:hover .chmap__card-go svg{transform:translate(2px,-2px)}
[dir="rtl"] .chmap__go:hover .chmap__card-go svg{transform:scaleX(-1) translate(2px,-2px)}
@media (max-width:560px){
.chmap__card{inset-inline:12px;max-inline-size:none}
.chmap--tall .chmap__stage{min-block-size:280px}
}
@media (prefers-reduced-motion:reduce){
.chmap__tile{opacity:1;transition:none}
.chmap__sweep,.chmap__rings{display:none}
.chmap__pin svg{animation:none}
.chmap__card,.chmap__card-go svg{transition:none}
}
.why,
.svp-card,
.ah-card,
.grev-card,
.blog-card__body,
.doc-card__body,
.dcar-card__body,
.ofh-card__body,
.eq-card__body,
.svm-tile__body,
.svp-related__name,
.of-body,
.ba-body{text-align:center}
.grev-card,
.blog-card__body,
.dcar-card__body,
.ofh-card__body,
.eq-card__body,
.svm-tile__body,
.of-body,
.ba-body{align-items:center}
.dcar-card__body{text-align:center}
.eq-kind,
.of-kind,
.ba-kind,
.of-until{align-self:center}
.of-foot,
.of-price__now,
.of-inc li,
.ofh-card__price,
.grev-card__by,
.ah-cta,
.blog-card__more{justify-content:center}
.svp-card__ic,
.why__bar{margin-inline:auto}
.ba-meta,
.grev-card__by,
.of-foot,
.of-inc,
.eq-specs,
.ofh-card__rule{align-self:stretch}
.ofh-card__rule{
background:linear-gradient(90deg,transparent,oklch(1 0 0 / 0.22),transparent);
}
.sr-only{
position:absolute;inline-size:1px;block-size:1px;
padding:0;margin:-1px;overflow:hidden;
clip-path:inset(50%);white-space:nowrap;border:0;
}
.fdr-section{
position:relative;
z-index:5;
block-size:0;
margin:0;padding:0;
pointer-events:none;
}
.fdr-section > .wrap{
position:absolute;
inset-block-start:0;inset-inline:0;
translate:0 -50%;
pointer-events:auto;
}
.fdr{
position:relative;
border-radius:20px;
padding:clamp(7px,0.78vw,10px);
display:grid;
gap:clamp(5px,0.5vw,6px);
color:var(--ink);
}
.fdr__slab{position:absolute;inset:0;border-radius:inherit}
.fdr__slab.lglass--light{
background:linear-gradient(148deg,
oklch(1 0 0 / 0.90) 0%,
oklch(1 0 0 / 0.84) 52%,
oklch(0.98 0.006 250 / 0.82) 100%);
-webkit-backdrop-filter:blur(30px) saturate(1.9);
backdrop-filter:blur(30px) saturate(1.9);
box-shadow:
inset  1.5px  1.5px 1px -1px oklch(1 0 0 / 0.95),
inset -1.5px -1.5px 1px -1px oklch(0.55 0.03 258 / 0.16),
0 0 0 1px oklch(1 0 0 / 0.55),
0 1px 0 0 oklch(1 0 0 / 0.7) inset,
0 18px 44px -20px oklch(0.28 0.06 262 / 0.42),
0 40px 90px -50px oklch(0.20 0.06 262 / 0.55);
}
.fdr > *:not(.fdr__slab){position:relative;z-index:1}
.fdr__tabs{
display:flex;gap:4px;
overflow-x:auto;scrollbar-width:none;
padding:2px;
border-radius:12px;
background:oklch(0.55 0.03 258 / 0.07);
box-shadow:inset 0 0 0 1px oklch(0.55 0.03 258 / 0.09);
}
.fdr__tabs::-webkit-scrollbar{display:none}
.fdr-tab{
flex:1 1 auto;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:6px 16px;border:0;border-radius:10px;
font:inherit;font-size:0.86rem;font-weight:700;line-height:1;
white-space:nowrap;cursor:pointer;
color:var(--ink-soft);
background:transparent;
transition:color .3s var(--ease-out),background .3s var(--ease-out),
box-shadow .3s var(--ease-out);
}
.fdr-tab svg{inline-size:16px;block-size:16px}
.fdr-tab:hover{color:var(--ink);background:oklch(1 0 0 / 0.7)}
.fdr-tab[aria-selected="true"]{
color:var(--navy-deep);
background:linear-gradient(148deg,
oklch(0.72 0.11 245 / 0.42) 0%,
oklch(0.66 0.12 250 / 0.30) 100%);
-webkit-backdrop-filter:blur(8px) saturate(1.4);
backdrop-filter:blur(8px) saturate(1.4);
box-shadow:inset 0 0 0 1px oklch(0.55 0.13 252 / 0.30),
inset 0 1px 0 0 oklch(1 0 0 / 0.6),
0 6px 16px -10px oklch(0.45 0.13 252 / 0.6);
}
.fdr-tab:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.fdr__panel{position:relative}
.fdr__bar{
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
align-items:center;gap:10px;
padding-inline:14px 5px;
padding-block:4px;
border-radius:13px;
background:oklch(1 0 0 / 0.66);
box-shadow:inset 0 0 0 1px oklch(0.55 0.03 258 / 0.14),
inset 0 1px 2px 0 oklch(0.45 0.04 260 / 0.06);
transition:box-shadow .3s var(--ease-out),background .3s var(--ease-out);
}
.fdr__bar:focus-within{
background:oklch(1 0 0 / 0.9);
box-shadow:inset 0 0 0 1px oklch(0.55 0.13 252 / 0.45),
0 0 0 4px oklch(0.55 0.13 252 / 0.12);
}
.fdr__icon{inline-size:19px;block-size:19px;color:var(--ink-soft)}
.fdr__icon svg{inline-size:100%;block-size:100%}
.fdr__q{
inline-size:100%;
background:transparent;border:0;
font:inherit;font-size:16px;font-weight:600;
color:var(--ink);
line-height:1.3;
padding-block:9px;
}
.fdr__q::placeholder{color:var(--ink-soft);font-weight:500}
.fdr__q:focus{outline:none}
.fdr__go{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:9px clamp(16px,1.8vw,24px);
border:0;border-radius:11px;
font:inherit;font-size:0.9rem;font-weight:700;line-height:1;
color:oklch(0.99 0.004 250);
background:linear-gradient(148deg,
oklch(0.46 0.15 254 / 0.94) 0%,
oklch(0.38 0.15 258 / 0.92) 100%);
-webkit-backdrop-filter:blur(12px) saturate(1.5);
backdrop-filter:blur(12px) saturate(1.5);
cursor:pointer;
box-shadow:inset 0 1px 0 0 oklch(1 0 0 / 0.34),
inset 0 0 0 1px oklch(1 0 0 / 0.18),
0 10px 24px -12px oklch(0.40 0.15 258 / 0.65);
transition:background .3s var(--ease-out),transform .3s var(--ease-out-quart),
box-shadow .3s var(--ease-out);
}
.fdr__go:hover{
background:linear-gradient(148deg,
oklch(0.41 0.16 254 / 0.97) 0%,
oklch(0.33 0.15 258 / 0.95) 100%);
transform:translateY(-1px);
}
.fdr__go:focus-visible{outline:2px solid var(--navy-deep);outline-offset:3px}
.fdr__go svg{inline-size:15px;block-size:15px}
[dir="rtl"] .fdr__go svg{transform:scaleX(-1)}
.fdr__results{
position:absolute;inset-inline:0;inset-block-start:calc(100% + 8px);
z-index:20;
border-radius:18px;
background:linear-gradient(180deg,
oklch(1 0 0 / 0.58) 0%,
oklch(1 0 0 / 0.55) 45%,
oklch(0.98 0.006 250 / 0.53) 100%);
-webkit-backdrop-filter:blur(44px) saturate(2.1);
backdrop-filter:blur(44px) saturate(2.1);
box-shadow:
inset 0 1px 0 0 oklch(1 0 0 / 0.85),
inset 0 0 0 1px oklch(1 0 0 / 0.45),
0 0 0 1px oklch(0.40 0.05 260 / 0.10),
0 24px 56px -24px oklch(0.20 0.06 262 / 0.45);
overflow:hidden;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.fdr__results{background:oklch(0.99 0.004 250)}
}
.fdr__results[hidden]{display:none}
.fdr__list{
list-style:none;margin:0;padding:6px;
max-block-size:min(46vh,380px);
overflow-y:auto;overscroll-behavior:contain;
scrollbar-width:thin;
scrollbar-color:oklch(0.55 0.03 258 / 0.30) transparent;
}
.fdr__list::-webkit-scrollbar{inline-size:6px}
.fdr__list::-webkit-scrollbar-thumb{background:oklch(0.55 0.03 258 / 0.30);border-radius:3px}
.fdr-r{
display:grid;grid-template-columns:auto minmax(0,1fr) auto;
align-items:center;gap:12px;
padding:9px 11px;
border-radius:13px;
cursor:pointer;
transition:background .2s var(--ease-out),box-shadow .2s var(--ease-out);
}
.fdr-r[hidden]{display:none}
.fdr-r:hover,.fdr-r.is-cur{background:oklch(1 0 0 / 0.55)}
.fdr-r.is-cur{box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--acc) 40%,transparent)}
.fdr-r__ph{
inline-size:44px;block-size:44px;
border-radius:13px;overflow:hidden;
display:grid;place-items:center;
background:color-mix(in oklab,var(--acc) 12%,oklch(1 0 0 / 0.72));
box-shadow:inset 0 0 0 1px oklch(1 0 0 / 0.45);
}
.fdr-r__ph img{inline-size:100%;block-size:100%;object-fit:cover;object-position:center top}
.fdr-r__mono{font-size:0.85rem;font-weight:800;color:var(--acc)}
.fdr-r__ic{
inline-size:44px;block-size:44px;border-radius:13px;
display:grid;place-items:center;
color:var(--acc);
background:color-mix(in oklab,var(--acc) 12%,oklch(1 0 0 / 0.72));
box-shadow:inset 0 0 0 1px oklch(1 0 0 / 0.45);
}
.fdr-r__ic svg{inline-size:21px;block-size:21px}
.fdr-r__b{min-inline-size:0;display:flex;flex-direction:column;gap:2px}
.fdr-r__name{
font-size:0.94rem;font-weight:700;line-height:1.25;
color:var(--ink);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fdr-r__sub{
font-size:0.78rem;line-height:1.35;
color:oklch(0.32 0.03 268);
display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.fdr-r__go{
inline-size:17px;block-size:17px;
color:oklch(0.32 0.03 268);
opacity:0;transition:opacity .2s var(--ease-out);
}
[dir="rtl"] .fdr-r__go svg{transform:scaleX(-1)}
.fdr-r:hover .fdr-r__go,.fdr-r.is-cur .fdr-r__go{opacity:1}
.fdr__none{margin:0;padding:18px 14px;font-size:0.88rem;color:oklch(0.32 0.03 268)}
.fdr__none[hidden]{display:none}
.fdr-section + .about-hero{padding-block-start:clamp(81px,6.7vw,101px)}
.hero-slider--finder{
--hero-foot:clamp(85px,7.2vw,105px);
--hero-copy-gap:120px;
}
.hero-slider--finder .slider-ui{
inset-block-end:calc(var(--hero-foot) + max(0px,env(safe-area-inset-bottom)));
}
.hero-slider--finder .slide__inner{
padding-block-end:calc(var(--hero-foot) + var(--hero-copy-gap) + max(0px,env(safe-area-inset-bottom)));
}
@media (max-width:760px){
.hero-slider--finder{--hero-foot:87px;--hero-copy-gap:106px}
.hero-slider--finder .slider-arrow{display:none}
.hero-slider--finder .slider-ui{gap:16px}
.hero-slider--finder .slide__cta{gap:10px}
.fdr{border-radius:17px}
.fdr-tab{padding:7px 12px;font-size:0.82rem}
.fdr-tab svg{display:none}
.fdr__bar{
grid-template-columns:auto minmax(0,1fr);
row-gap:5px;
padding-inline:12px;padding-block:4px 5px;
}
.fdr__go{grid-column:1 / -1;inline-size:100%;padding-block:9px}
.fdr__q{padding-block:7px}
.fdr__list{max-block-size:min(52vh,340px)}
.fdr-r__ph,.fdr-r__ic{inline-size:40px;block-size:40px}
.fdr-section + .about-hero{padding-block-start:107px}
}
@media (prefers-reduced-motion:reduce){
.fdr-tab,.fdr__bar,.fdr__go,.fdr-r,.fdr-r__go{transition-duration:0.01ms !important}
.fdr__go:hover{transform:none}
}
@supports not (background:color-mix(in oklab,red 50%,transparent)){
.fdr-r__ph,.fdr-r__ic{background:var(--paper-2)}
.fdr-r.is-cur{box-shadow:inset 0 0 0 1px oklch(0.55 0.03 258 / 0.35)}
}
.qv{
position:fixed;inset:0;z-index:300;
display:grid;place-items:center;
padding:clamp(12px,3vw,32px);
opacity:0;visibility:hidden;
transition:opacity .3s var(--ease-out),visibility 0s linear .3s;
}
.qv[hidden]{display:none}
.qv.is-open{opacity:1;visibility:visible;transition-delay:0s,0s}
.qv__scrim{
position:absolute;inset:0;
background:radial-gradient(120% 90% at 50% 0%,
oklch(0.24 0.12 268 / 0.44) 0%,oklch(0.16 0.08 268 / 0.62) 100%);
-webkit-backdrop-filter:blur(3px) saturate(1.1);
backdrop-filter:blur(3px) saturate(1.1);
cursor:pointer;
}
.qv__panel{
position:relative;
inline-size:min(760px,100%);
max-block-size:min(88svh,900px);
display:flex;flex-direction:column;
border-radius:26px;
color:var(--ink);
transform:translateY(16px) scale(0.972);
opacity:0;
transition:transform .5s var(--ease-out-quart),opacity .32s var(--ease-out);
}
.qv.is-open .qv__panel{transform:none;opacity:1}
.qv__slab{
position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:linear-gradient(152deg,
oklch(1 0 0 / 0.72) 0%,
oklch(0.995 0.003 250 / 0.66) 46%,
oklch(0.98 0.006 250 / 0.62) 100%);
-webkit-backdrop-filter:blur(20px) saturate(1.85) brightness(1.04);
backdrop-filter:blur(20px) saturate(1.85) brightness(1.04);
box-shadow:
inset  1.5px  1.5px 1px -1px oklch(1 0 0 / 0.98),
inset -1.5px -1.5px 1px -1px oklch(0.55 0.03 258 / 0.18),
inset 0  22px 40px -34px oklch(1 0 0 / 0.95),
inset 0 -26px 48px -40px oklch(0.45 0.05 262 / 0.28),
0 0 0 1px oklch(1 0 0 / 0.40),
0 30px 60px -30px oklch(0.16 0.07 264 / 0.55),
0 70px 140px -70px oklch(0.12 0.06 264 / 0.70);
}
.qv__sheen{
position:absolute;inset:0;border-radius:inherit;pointer-events:none;
overflow:hidden;
}
.qv__sheen::before{
content:"";position:absolute;
inset-block-start:-60%;inset-inline-start:-20%;
inline-size:70%;block-size:220%;
transform:rotate(18deg);
background:linear-gradient(90deg,
transparent 0%,oklch(1 0 0 / 0.30) 45%,oklch(1 0 0 / 0.44) 55%,transparent 100%);
filter:blur(22px);
opacity:0.75;
}
[dir="rtl"] .qv__sheen::before{transform:rotate(-18deg)}
.qv__x{
position:absolute;z-index:3;
inset-block-start:14px;inset-inline-end:14px;
inline-size:38px;block-size:38px;
display:grid;place-items:center;
border:0;border-radius:50%;
color:var(--ink);
background:oklch(1 0 0 / 0.62);
-webkit-backdrop-filter:blur(12px) saturate(1.6);
backdrop-filter:blur(12px) saturate(1.6);
box-shadow:inset 0 0 0 1px oklch(1 0 0 / 0.55),
inset 0 1px 0 0 oklch(1 0 0 / 0.9),
0 6px 16px -8px oklch(0.20 0.06 264 / 0.5);
cursor:pointer;
transition:background .25s var(--ease-out),transform .25s var(--ease-out-quart);
}
.qv__x svg{inline-size:16px;block-size:16px}
.qv__x:hover{background:oklch(1 0 0 / 0.9);transform:rotate(90deg)}
.qv__x:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.qv__scroll{
position:relative;z-index:2;
flex:1 1 auto;min-block-size:0;
overflow-y:auto;overscroll-behavior:contain;
border-start-start-radius:inherit;border-start-end-radius:inherit;
scrollbar-width:thin;
scrollbar-color:oklch(0.55 0.03 258 / 0.28) transparent;
}
.qv__scroll::-webkit-scrollbar{inline-size:7px}
.qv__scroll::-webkit-scrollbar-thumb{background:oklch(0.55 0.03 258 / 0.28);border-radius:4px}
.qv-doc{
display:grid;
grid-template-columns:clamp(200px,30%,244px) minmax(0,1fr);
gap:clamp(18px,2.4vw,26px);
padding:clamp(20px,2.6vw,28px);
}
.qv-doc__photo{
position:relative;
align-self:stretch;
min-block-size:300px;
border-radius:20px;overflow:hidden;
background:linear-gradient(168deg,
oklch(0.99 0.004 235) 0%,
color-mix(in oklab,var(--acc) 10%,oklch(0.96 0.01 240)) 58%,
color-mix(in oklab,var(--acc) 24%,oklch(0.90 0.02 248)) 100%);
box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.85),
inset 0 0 0 1px oklch(0.55 0.03 258 / 0.12),
inset 0 -46px 60px -42px oklch(0.24 0.10 268 / 0.22),
0 16px 34px -24px oklch(0.20 0.06 264 / 0.5);
}
.qv-doc__photo img{
position:absolute;inset:0;
inline-size:100%;block-size:100%;
object-fit:contain;object-position:center bottom;
}
.qv-doc__head{min-inline-size:0}
.qv-chip{
display:inline-flex;align-items:center;gap:7px;
padding:5px 11px;border-radius:999px;
font-size:0.74rem;font-weight:700;line-height:1;
color:color-mix(in oklab,var(--acc) 72%,var(--navy-deep));
background:color-mix(in oklab,var(--acc) 13%,white);
box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--acc) 26%,transparent);
}
.qv-chip svg{inline-size:13px;block-size:13px}
.qv__name{
margin:12px 0 4px;
font-size:clamp(1.35rem,2.4vw,1.72rem);
font-weight:800;line-height:1.25;
color:var(--ink);
}
.qv__role{
margin:0;
font-size:0.92rem;font-weight:600;line-height:1.45;
color:var(--ink-soft);
}
.qv__tagline{
margin:10px 0 0;
font-size:0.95rem;font-weight:700;line-height:1.5;
color:color-mix(in oklab,var(--acc) 78%,var(--navy-deep));
}
.qv__rule{
block-size:1px;margin:18px 0;
background:linear-gradient(90deg,
color-mix(in oklab,var(--acc) 34%,transparent),oklch(0.55 0.03 258 / 0.06));
}
[dir="rtl"] .qv__rule{
background:linear-gradient(270deg,
color-mix(in oklab,var(--acc) 34%,transparent),oklch(0.55 0.03 258 / 0.06));
}
.qv__bio{
margin:0;
font-size:0.93rem;line-height:1.75;
color:var(--ink-soft);
max-inline-size:68ch;
}
.qv__group{margin-block-start:20px}
.qv__label{
display:block;margin-block-end:9px;
font-size:0.7rem;font-weight:800;letter-spacing:0.06em;
text-transform:uppercase;
color:var(--ink-soft);
}
html[lang="ar"] .qv__label{text-transform:none;letter-spacing:0;font-size:0.78rem}
.qv__tags{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
.qv__tags li{
padding:7px 12px;border-radius:10px;
font-size:0.81rem;font-weight:600;line-height:1.3;
color:var(--ink);
background:oklch(0.55 0.03 258 / 0.07);
box-shadow:inset 0 0 0 1px oklch(0.55 0.03 258 / 0.09);
}
.qv__tags--acc li{
color:color-mix(in oklab,var(--acc) 70%,var(--navy-deep));
background:color-mix(in oklab,var(--acc) 9%,white);
box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--acc) 22%,transparent);
}
.qv__approach{
display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;
align-items:start;
margin-block-start:20px;padding:14px 16px;
border-radius:15px;
background:color-mix(in oklab,var(--acc) 8%,white);
box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--acc) 18%,transparent);
}
.qv__approach svg{inline-size:20px;block-size:20px;color:var(--acc);margin-block-start:2px}
.qv__approach p{margin:0;font-size:0.89rem;line-height:1.65;color:var(--ink)}
.qv__approach b{
display:block;margin-block-end:3px;
font-size:0.72rem;font-weight:800;letter-spacing:0.05em;text-transform:uppercase;
color:color-mix(in oklab,var(--acc) 74%,var(--navy-deep));
}
html[lang="ar"] .qv__approach b{text-transform:none;letter-spacing:0;font-size:0.79rem}
.qv-spec__cover{
position:relative;
block-size:clamp(150px,22vw,208px);
overflow:hidden;
border-start-start-radius:26px;border-start-end-radius:26px;
background:color-mix(in oklab,var(--acc) 26%,var(--navy-deep));
}
.qv-spec__cover img{
position:absolute;inset:0;
inline-size:100%;block-size:100%;object-fit:cover;
}
.qv-spec__veil{
position:absolute;inset:0;
background:linear-gradient(180deg,
color-mix(in oklab,var(--acc) 22%,transparent) 0%,
color-mix(in oklab,var(--acc) 30%,transparent) 46%,
color-mix(in oklab,var(--navy-deep) 62%,transparent) 78%,
color-mix(in oklab,var(--navy-deep) 90%,transparent) 100%);
}
.qv-spec__mark{
position:absolute;inset-block-end:16px;inset-inline-start:clamp(20px,2.6vw,28px);
display:flex;align-items:center;gap:11px;
color:oklch(0.99 0.003 250);
}
.qv-spec__ic{
inline-size:42px;block-size:42px;border-radius:13px;
display:grid;place-items:center;
background:oklch(1 0 0 / 0.16);
-webkit-backdrop-filter:blur(10px) saturate(1.5);
backdrop-filter:blur(10px) saturate(1.5);
box-shadow:inset 0 0 0 1px oklch(1 0 0 / 0.34);
}
.qv-spec__ic svg{inline-size:22px;block-size:22px}
.qv-spec__eyebrow{
font-size:0.8rem;font-weight:700;line-height:1.3;
text-shadow:0 1px 6px oklch(0.16 0.06 264 / 0.6);
}
.qv-spec__body{padding:clamp(20px,2.6vw,28px)}
.qv-spec__lead{
margin:10px 0 0;
font-size:0.93rem;line-height:1.75;color:var(--ink-soft);
max-inline-size:68ch;
}
.qv-spec__stats{
display:flex;flex-wrap:wrap;gap:8px;
margin:18px 0 0;padding:0;list-style:none;
}
.qv-spec__stats li{
display:flex;align-items:baseline;gap:7px;
padding:9px 14px;border-radius:12px;
background:color-mix(in oklab,var(--acc) 8%,white);
box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--acc) 18%,transparent);
}
.qv-spec__stats b{
font-size:1.06rem;font-weight:800;line-height:1;
color:color-mix(in oklab,var(--acc) 76%,var(--navy-deep));
}
.qv-spec__stats span{font-size:0.79rem;font-weight:600;color:var(--ink-soft)}
.qv-spec__list{margin:10px 0 0;padding:0;list-style:none}
.qv-spec__list li{
display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;
padding:11px 0;
box-shadow:inset 0 -1px 0 0 oklch(0.55 0.03 258 / 0.09);
}
.qv-spec__list li:last-child{box-shadow:none}
.qv-spec__dot{
inline-size:7px;block-size:7px;border-radius:50%;
margin-block-start:7px;
background:var(--acc);
box-shadow:0 0 0 4px color-mix(in oklab,var(--acc) 14%,transparent);
}
.qv-spec__list b{display:block;font-size:0.89rem;font-weight:700;color:var(--ink)}
.qv-spec__list span{display:block;margin-block-start:2px;font-size:0.83rem;line-height:1.6;color:var(--ink-soft)}
.qv-spec__more{margin:12px 0 0;font-size:0.81rem;color:var(--ink-soft)}
.qv__act{
position:relative;z-index:4;
flex:0 0 auto;
display:flex;flex-wrap:wrap;gap:10px;
padding:14px clamp(20px,2.6vw,28px) clamp(16px,2vw,20px);
border-end-start-radius:inherit;border-end-end-radius:inherit;
background:linear-gradient(to bottom,oklch(1 0 0 / 0.42),oklch(1 0 0 / 0.72));
-webkit-backdrop-filter:blur(16px) saturate(1.4);
backdrop-filter:blur(16px) saturate(1.4);
box-shadow:inset 0 1px 0 0 oklch(0.55 0.03 258 / 0.12);
}
.qv__act:empty{display:none}
.qv-btn{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
flex:1 1 190px;
padding:13px 20px;border:0;border-radius:14px;
font:inherit;font-size:0.9rem;font-weight:700;line-height:1;
cursor:pointer;text-decoration:none;
transition:background .3s var(--ease-out),transform .3s var(--ease-out-quart),
box-shadow .3s var(--ease-out);
}
.qv-btn svg{inline-size:16px;block-size:16px}
[dir="rtl"] .qv-btn svg.qv-arrow{transform:scaleX(-1)}
.qv-btn--go{
color:oklch(0.99 0.004 250);
background:linear-gradient(148deg,oklch(0.46 0.15 254 / 0.95) 0%,oklch(0.38 0.15 258 / 0.93) 100%);
-webkit-backdrop-filter:blur(12px) saturate(1.5);
backdrop-filter:blur(12px) saturate(1.5);
box-shadow:inset 0 1px 0 0 oklch(1 0 0 / 0.34),
inset 0 0 0 1px oklch(1 0 0 / 0.18),
0 12px 26px -14px oklch(0.40 0.15 258 / 0.7);
}
.qv-btn--go:hover{
background:linear-gradient(148deg,oklch(0.41 0.16 254 / 0.98) 0%,oklch(0.33 0.15 258 / 0.96) 100%);
transform:translateY(-1px);
}
.qv-btn--alt{
color:var(--navy-deep);
background:oklch(1 0 0 / 0.6);
box-shadow:inset 0 0 0 1px oklch(0.55 0.03 258 / 0.20);
}
.qv-btn--alt:hover{background:oklch(1 0 0 / 0.92);transform:translateY(-1px)}
.qv-btn:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
@media (max-width:720px){
.qv{padding:0;place-items:end center}
.qv__panel{
inline-size:100%;
max-block-size:92svh;
border-radius:24px 24px 0 0;
transform:translateY(28px);
}
.qv__slab{border-radius:inherit}
.qv-spec__cover{border-start-start-radius:24px;border-start-end-radius:24px;block-size:156px}
.qv-doc{grid-template-columns:1fr;gap:16px}
.qv-doc__photo{
align-self:start;
min-block-size:0;
aspect-ratio:16 / 9;
}
.qv-doc__photo img{object-fit:cover;object-position:center 10%}
.qv-btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
.qv__panel{transform:none !important;transition:opacity .2s linear}
.qv__x:hover{transform:none}
.qv-btn:hover{transform:none}
.qv__sheen{display:none}
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
.qv__scrim{background:oklch(0.18 0.08 268 / 0.86)}
.qv__slab{background:var(--paper)}
.qv__act{background:var(--paper)}
.qv__x{background:var(--paper-2)}
}
@supports not (background:color-mix(in oklab,red 50%,transparent)){
.qv-chip,.qv__tags--acc li,.qv__approach,.qv-spec__stats li{background:var(--paper-2);color:var(--ink)}
.qv__tagline,.qv-spec__stats b,.qv__approach b{color:var(--primary)}
.qv-doc__photo{background:var(--paper-2)}
}
.bkm{
position:fixed;inset:0;z-index:200;
display:grid;place-items:center;
padding:clamp(12px,3vw,40px);
--bkm-in:0;
}
.bkm[hidden]{display:none}
.bkm__veil{
position:absolute;inset:0;
background:oklch(0.18 0.06 262 / 0.55);
-webkit-backdrop-filter:blur(14px) saturate(1.3);
backdrop-filter:blur(14px) saturate(1.3);
opacity:var(--bkm-in);
transition:opacity .38s var(--ease-out);
}
.bkm__panel{
position:relative;
inline-size:min(1040px,100%);
max-block-size:min(92dvh,940px);
display:flex;flex-direction:column;
border-radius:26px;
overflow:hidden;
background:linear-gradient(180deg,
oklch(1 0 0 / 0.88) 0%,oklch(0.985 0.005 250 / 0.84) 100%);
-webkit-backdrop-filter:blur(40px) saturate(1.9);
backdrop-filter:blur(40px) saturate(1.9);
box-shadow:
inset 0 1px 0 0 oklch(1 0 0 / 0.9),
inset 0 0 0 1px oklch(1 0 0 / 0.5),
0 40px 90px -40px oklch(0.16 0.06 262 / 0.7);
opacity:var(--bkm-in);
translate:0 calc((1 - var(--bkm-in)) * 18px);
scale:calc(0.985 + var(--bkm-in) * 0.015);
transition:opacity .38s var(--ease-out),translate .44s var(--ease-out-quart),
scale .44s var(--ease-out-quart);
}
.bkm.is-open{--bkm-in:1}
.bkm__panel:focus{outline:none}
.bkm__panel:focus-visible{outline:2px solid var(--primary);outline-offset:-4px}
.bkm__head{
flex:0 0 auto;
display:grid;
grid-template-columns:minmax(0,1fr) auto auto;
align-items:start;
gap:clamp(10px,1.6vw,18px);
padding:clamp(16px,2.2vw,26px) clamp(16px,2.4vw,30px) clamp(12px,1.6vw,18px);
border-block-end:1px solid oklch(0.55 0.03 258 / 0.13);
}
.bkm__intro{min-inline-size:0}
.bkm__eyebrow{
display:inline-block;
font-size:0.72rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
color:oklch(0.46 0.11 80);
}
.lang-ar .bkm__eyebrow{letter-spacing:normal;text-transform:none;font-size:0.86rem}
.bkm__title{
margin-block:6px 4px;
font-size:clamp(1.2rem,2.2vw,1.7rem);font-weight:800;line-height:1.2;
letter-spacing:-0.015em;color:var(--ink);text-wrap:balance;
}
.lang-ar .bkm__title{letter-spacing:normal;line-height:1.4}
.bkm__lead{
font-size:0.88rem;line-height:1.55;color:var(--ink-soft);
max-inline-size:62ch;
}
.bkm__tel{
display:inline-flex;align-items:center;gap:8px;
padding:10px 15px;border-radius:12px;
font-size:0.85rem;font-weight:700;text-decoration:none;
color:var(--navy-deep);
background:oklch(1 0 0 / 0.72);
box-shadow:inset 0 0 0 1px oklch(0.55 0.03 258 / 0.16);
white-space:nowrap;
transition:background .3s var(--ease-out),box-shadow .3s var(--ease-out);
}
.bkm__tel:hover{background:oklch(1 0 0 / 0.95);box-shadow:inset 0 0 0 1px oklch(0.55 0.13 252 / 0.4)}
.bkm__tel svg{inline-size:15px;block-size:15px}
.bkm__tel:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.bkm__x{
inline-size:40px;block-size:40px;flex:0 0 auto;
display:grid;place-items:center;
border:0;border-radius:12px;cursor:pointer;
color:var(--ink);
background:oklch(0.55 0.03 258 / 0.09);
transition:background .25s var(--ease-out),color .25s var(--ease-out);
}
.bkm__x:hover{background:oklch(0.50 0.16 25 / 0.14);color:var(--crimson)}
.bkm__x svg{inline-size:18px;block-size:18px}
.bkm__x:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.bkm__body{
flex:1 1 auto;
overflow-y:auto;overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
padding:clamp(14px,2vw,22px) clamp(12px,2.4vw,30px) clamp(18px,2.4vw,30px);
scrollbar-width:thin;
scrollbar-color:oklch(0.55 0.03 258 / 0.3) transparent;
}
.bkm__body::-webkit-scrollbar{inline-size:7px}
.bkm__body::-webkit-scrollbar-thumb{background:oklch(0.55 0.03 258 / 0.3);border-radius:4px}
.bk-shell--modal{
background:none !important;
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
box-shadow:none !important;
padding:0 !important;
border-radius:0 !important;
opacity:1 !important;
transform:none !important;
}
.bk-shell--modal > .glass-card__bloom,
.bk-shell--modal > .glass-card__sheen{display:none}
.bk-shell--modal{overflow:visible !important}
@media (max-width:720px){
.bkm{padding:0;place-items:end stretch}
.bkm__panel{
inline-size:100%;
max-block-size:100dvh;block-size:100dvh;
border-radius:0;
translate:0 calc((1 - var(--bkm-in)) * 26px);
}
.bkm__head{
grid-template-columns:minmax(0,1fr) auto;
padding-block-start:max(16px,env(safe-area-inset-top));
}
.bkm__tel{grid-column:1 / -1;justify-content:center}
.bkm__x{grid-column:2;grid-row:1}
.bkm__body{padding-block-end:max(24px,env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
.bkm__veil,.bkm__panel{transition-duration:0.01ms !important}
.bkm__panel{translate:none !important;scale:none !important}
}
body.bkm-open{overflow:hidden}
@media (max-width:720px){
.bkm__head{
grid-template-columns:minmax(0,1fr) auto auto;
align-items:center;
gap:8px;
padding:max(10px,env(safe-area-inset-top)) 12px 10px;
}
.bkm__eyebrow{display:none}
.bkm__lead{
position:absolute;inline-size:1px;block-size:1px;
padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);
white-space:nowrap;
}
.bkm__title{margin:0;font-size:1rem;line-height:1.25}
.lang-ar .bkm__title{font-size:1.02rem}
.bkm__tel{
grid-column:auto;grid-row:auto;
inline-size:40px;block-size:40px;padding:0;
justify-content:center;
}
.bkm__tel span{display:none}
.bkm__tel svg{inline-size:17px;block-size:17px}
.bkm__x{inline-size:40px;block-size:40px}
.bkm__body{padding:12px 12px 0}
.bkm .bk-rail{margin-block-end:14px}
.bkm .bk-rail__t{display:none}
.bkm .bk-modes{gap:10px}
.bkm .bk-mode{
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
align-items:center;
gap:12px;
text-align:start;
padding:14px 14px;
}
.bkm .bk-mode__ic{inline-size:40px;block-size:40px;margin:0}
.bkm .bk-mode b{font-size:0.98rem;grid-column:2}
.bkm .bk-mode > span:not(.bk-mode__ic):not(.bk-mode__go){
grid-column:2;font-size:0.78rem;line-height:1.4;
}
.bkm .bk-mode__go{grid-column:3;grid-row:1 / span 2}
.bkm .bk-doc{padding:8px 10px;gap:10px}
.bkm .bk-doc__ph{inline-size:46px;block-size:46px;position:relative}
.bkm .bk-doc__ph img{
position:absolute;inset:0;
inline-size:100%;block-size:100%;
object-fit:cover;object-position:center top;
}
.bkm .bk-doc__b b{font-size:0.9rem}
.bkm .bk-doc__b span{
font-size:0.76rem;line-height:1.35;
display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.bkm .bk-doc__b em{font-size:0.7rem}
.bkm .bk-docs{max-block-size:46dvh;overflow-y:auto;overscroll-behavior:contain}
.bkm .bk-specs{gap:8px}
.bkm .bk-spec{padding:12px 10px}
.bkm .bk-days{
display:flex;gap:8px;
overflow-x:auto;scroll-snap-type:x proximity;
padding-block-end:4px;
scrollbar-width:none;
}
.bkm .bk-days::-webkit-scrollbar{display:none}
.bkm .bk-day{flex:0 0 auto;scroll-snap-align:start;inline-size:62px;padding:9px 6px}
.bkm .bk-slot-row{gap:7px}
.bkm .bk-slot{padding:10px 12px;font-size:0.83rem}
.bkm .bk-period{margin-block-start:12px}
.bkm .bk-form{gap:10px}
.bkm .bk-field input,.bkm .bk-field textarea{font-size:16px}
.bkm .bk-nav{
position:sticky;inset-block-end:0;z-index:2;
margin-block-start:14px;
padding:10px 0 max(10px,env(safe-area-inset-bottom));
background:linear-gradient(180deg,
oklch(1 0 0 / 0) 0%,oklch(1 0 0 / 0.86) 22%,oklch(1 0 0 / 0.95) 100%);
-webkit-backdrop-filter:blur(12px);
backdrop-filter:blur(12px);
}
.bkm .bk-nav{flex-wrap:nowrap;gap:10px}
.bkm .bk-btn{padding:13px 16px;font-size:0.9rem;flex:0 0 auto}
.bkm .bk-count{
flex:1 1 auto;min-inline-size:0;
text-align:center;white-space:nowrap;
font-size:0.74rem;
overflow:hidden;text-overflow:ellipsis;
}
}
@media (max-width:720px) and (max-height:700px){
.bkm .bk-rail{display:none}
.bkm .bk-docs{max-block-size:38dvh}
.bkm__body{padding-block-start:10px}
}
.dpt-section{
position:relative;
background:var(--paper);
padding-block:clamp(64px,8vw,118px);
overflow:clip;
}
.dpt-section::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(58% 42% at 8% 0%,oklch(0.50 0.12 196 / 0.07) 0%,transparent 62%),
radial-gradient(52% 40% at 96% 96%,oklch(0.34 0.16 268 / 0.07) 0%,transparent 60%);
}
.dpt-section > .wrap{position:relative;z-index:1}
.dpt-head{max-inline-size:54ch;margin-block-end:clamp(30px,4vw,52px)}
.dpt-head__eyebrow{
display:inline-flex;align-items:center;gap:9px;
font-size:0.74rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
color:var(--gold-text);
}
.dpt-head__eyebrow::before{content:"";inline-size:24px;block-size:2px;border-radius:2px;background:var(--gold-deep)}
.lang-ar .dpt-head__eyebrow{letter-spacing:normal;text-transform:none;font-size:0.88rem}
.dpt-head__title{
margin-block:14px 12px;
font-size:clamp(1.9rem,4.2vw,3.2rem);line-height:1.07;font-weight:800;
letter-spacing:-0.02em;color:var(--ink);text-wrap:balance;
}
.lang-ar .dpt-head__title{letter-spacing:normal;line-height:1.3}
.dpt-head__lead{font-size:clamp(0.98rem,1.3vw,1.1rem);line-height:1.7;color:var(--ink-soft);max-inline-size:64ch}
.dpt-grid{
list-style:none;margin:0;padding:0;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(14px,1.6vw,22px);
}
.dpt-card--wide{grid-column:span 2}
@media (min-width:981px){
.dpt-grid >:nth-child(3n + 2){margin-block-start:clamp(18px,2.4vw,38px)}
}
.dpt-card{position:relative}
.dpt-card__a{
position:relative;display:block;isolation:isolate;
block-size:100%;min-block-size:clamp(230px,26vw,330px);
border-radius:22px;overflow:hidden;
text-decoration:none;color:inherit;
background:var(--navy-deep);
box-shadow:
0 0 0 1px oklch(0.55 0.03 258 / 0.10),
0 18px 40px -26px oklch(0.28 0.06 262 / 0.45);
transition:transform .55s var(--ease-out-quart),box-shadow .55s var(--ease-out);
}
.dpt-card--wide .dpt-card__a{min-block-size:clamp(230px,22vw,300px)}
.dpt-card__a:hover{
transform:translateY(-6px);
box-shadow:
0 0 0 1px color-mix(in oklab,var(--acc) 40%,transparent),
0 34px 62px -30px oklch(0.24 0.07 262 / 0.6),
0 0 60px -22px color-mix(in oklab,var(--acc) 55%,transparent);
}
.dpt-card__a:focus-visible{outline:3px solid var(--primary);outline-offset:3px}
.dpt-card__shot{position:absolute;inset:0;z-index:-2;overflow:hidden}
.dpt-card__img{
inline-size:100%;block-size:100%;object-fit:cover;
filter:saturate(0.55) contrast(1.05) brightness(0.86);
scale:1.06;
transition:filter .6s var(--ease-out),scale 1.1s var(--ease-out-quart);
}
.dpt-card__a:hover .dpt-card__img{filter:saturate(1) contrast(1.02) brightness(0.96);scale:1}
.dpt-card__tint{
position:absolute;inset:0;
background:
linear-gradient(178deg,
color-mix(in oklab,var(--navy-darkest) 58%,transparent) 0%,
transparent 30%,
transparent 34%,
color-mix(in oklab,var(--navy-darkest) 62%,transparent) 74%,
color-mix(in oklab,var(--navy-darkest) 88%,transparent) 100%),
linear-gradient(152deg,
color-mix(in oklab,var(--acc) 52%,transparent) 0%,
color-mix(in oklab,var(--acc) 12%,transparent) 62%,
transparent 100%);
transition:opacity .6s var(--ease-out);
}
.dpt-card__a:hover .dpt-card__tint{opacity:0.82}
.dpt-card__grain{
position:absolute;inset:0;opacity:0.28;pointer-events:none;
background-image:radial-gradient(oklch(1 0 0 / 0.10) 1px,transparent 1px);
background-size:3px 3px;
}
.dpt-card__pulse{
position:absolute;inset-inline:0;inset-block-end:34%;
block-size:42px;z-index:-1;
color:color-mix(in oklab,var(--acc) 70%,white);
opacity:0;
transition:opacity .4s var(--ease-out);
filter:drop-shadow(0 0 6px color-mix(in oklab,var(--acc) 70%,transparent));
}
.dpt-card__pulse path{
stroke-dasharray:620;stroke-dashoffset:620;
transition:stroke-dashoffset 1.1s var(--ease-out);
}
.dpt-card__a:hover .dpt-card__pulse{opacity:1}
.dpt-card__a:hover .dpt-card__pulse path{stroke-dashoffset:0}
.dpt-card__no{
position:absolute;inset-block-start:14px;inset-inline-end:16px;
font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:800;line-height:1;
letter-spacing:-0.03em;
color:oklch(1 0 0 / 0.70);
text-shadow:0 1px 10px oklch(0.14 0.05 262 / 0.7);
transition:color .45s var(--ease-out);
}
.lang-ar .dpt-card__no{letter-spacing:normal}
.dpt-card__a:hover .dpt-card__no{color:oklch(1 0 0 / 0.7)}
.dpt-card__plate{
position:absolute;inset-inline:10px;inset-block-end:10px;
display:grid;grid-template-columns:auto minmax(0,1fr) auto;
align-items:center;gap:11px;
padding:12px 13px;
border-radius:16px;
background:linear-gradient(148deg,oklch(1 0 0 / 0.16) 0%,oklch(1 0 0 / 0.07) 100%);
-webkit-backdrop-filter:blur(16px) saturate(1.8);
backdrop-filter:blur(16px) saturate(1.8);
box-shadow:inset 0 1px 0 0 oklch(1 0 0 / 0.4),inset 0 0 0 1px oklch(1 0 0 / 0.18);
transition:background .45s var(--ease-out);
}
.dpt-card__a:hover .dpt-card__plate{background:linear-gradient(148deg,oklch(1 0 0 / 0.24) 0%,oklch(1 0 0 / 0.11) 100%)}
.dpt-card__mark{
inline-size:34px;block-size:34px;border-radius:10px;
display:grid;place-items:center;
color:oklch(0.99 0.004 250);
background:color-mix(in oklab,var(--acc) 68%,transparent);
box-shadow:inset 0 0 0 1px oklch(1 0 0 / 0.28);
}
.dpt-card__mark svg{inline-size:18px;block-size:18px}
.dpt-card__txt{min-inline-size:0}
.dpt-card__name{
display:block;
font-size:clamp(0.95rem,1.25vw,1.08rem);font-weight:700;line-height:1.25;
color:oklch(0.99 0.004 250);
}
.dpt-card__blurb{
display:grid;grid-template-rows:0fr;opacity:0;
transition:grid-template-rows .5s var(--ease-out),opacity .4s var(--ease-out);
}
.dpt-card__blurb > span{
overflow:hidden;
font-size:0.79rem;line-height:1.45;
color:oklch(0.99 0.004 250 / 0.9);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.dpt-card__a:hover .dpt-card__blurb,
.dpt-card__a:focus-visible .dpt-card__blurb{grid-template-rows:1fr;opacity:1;padding-block-start:4px}
.dpt-card__go{
inline-size:26px;block-size:26px;border-radius:50%;
display:grid;place-items:center;
color:oklch(0.99 0.004 250);
background:oklch(1 0 0 / 0.16);
translate:calc(var(--dpt-go,-1) * 5px) 0;opacity:0;
transition:opacity .4s var(--ease-out),translate .5s var(--ease-out-quart),background .4s var(--ease-out);
}
[dir="rtl"] .dpt-card{--dpt-go:1}
[dir="rtl"] .dpt-card__go svg{transform:scaleX(-1)}
.dpt-card__go svg{inline-size:14px;block-size:14px}
.dpt-card__a:hover .dpt-card__go{opacity:1;translate:0 0;background:color-mix(in oklab,var(--acc) 75%,transparent)}
.dpt-card__edge{
position:absolute;inset-inline:0;inset-block-end:0;block-size:3px;
background:var(--acc);
transform:scaleX(0);transform-origin:left center;
transition:transform .6s var(--ease-out-quart);
}
[dir="rtl"] .dpt-card__edge{transform-origin:right center}
.dpt-card__a:hover .dpt-card__edge{transform:scaleX(1)}
.dpt-foot{margin-block-start:clamp(28px,3.6vw,48px);display:flex;flex-wrap:wrap;gap:13px}
.dpt-foot .btn--ghost{color:var(--ink);box-shadow:inset 0 0 0 1px oklch(0.55 0.03 258 / 0.28)}
.dpt-foot .btn--ghost:hover{background:oklch(0.55 0.03 258 / 0.07)}
@media (max-width:980px){
.dpt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.dpt-card--wide{grid-column:span 2}
.dpt-card__a{min-block-size:clamp(210px,34vw,280px)}
}
@media (max-width:620px){
.dpt-grid{grid-template-columns:1fr;gap:12px}
.dpt-card--wide{grid-column:auto}
.dpt-card__a,.dpt-card--wide .dpt-card__a{min-block-size:208px}
.dpt-grid >:nth-child(3n + 2){margin-block-start:0}
.dpt-card__img{filter:saturate(0.92) contrast(1.02) brightness(0.94);scale:1}
.dpt-card__blurb{grid-template-rows:1fr;opacity:1;padding-block-start:4px}
.dpt-card__go{opacity:1;translate:0 0}
.dpt-card__edge{transform:scaleX(1)}
.dpt-card__pulse{opacity:0.55}
.dpt-card__pulse path{stroke-dashoffset:0}
.dpt-card__no{font-size:1.4rem}
.dpt-foot .btn{flex:1 1 200px;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
.dpt-card__a,.dpt-card__img,.dpt-card__tint,.dpt-card__plate,
.dpt-card__no,.dpt-card__go,.dpt-card__edge,.dpt-card__blurb,
.dpt-card__pulse,.dpt-card__pulse path{transition-duration:0.01ms !important}
.dpt-card__a:hover{transform:none}
.dpt-card__img{scale:1}
.dpt-card__go{translate:none}
.dpt-card__pulse path{stroke-dasharray:none;stroke-dashoffset:0}
}
@supports not (background:color-mix(in oklab,red 50%,transparent)){
.dpt-card__tint{background:linear-gradient(178deg,transparent 30%,oklch(0.18 0.09 268 / 0.9) 100%)}
.dpt-card__mark{background:var(--navy)}
.dpt-card__go{background:var(--navy)}
.dpt-card__pulse{color:oklch(0.9 0.06 200)}
}
.svc-section{
--svc-acc:var(--pepsi-1);
--svc-ink:var(--pepsi-3);
position:relative;
background:var(--paper);
padding-block:clamp(54px,7vw,100px);
overflow:clip;
}
.svc-section::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(64% 52% at 6% 20%,color-mix(in oklab,var(--pepsi-1) 7%,transparent) 0%,transparent 68%),
radial-gradient(58% 46% at 98% 70%,color-mix(in oklab,var(--pepsi-2) 6%,transparent) 0%,transparent 66%);
-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 200px);
mask-image:linear-gradient(to bottom,transparent 0,#000 200px);
}
.svc-section > .wrap{position:relative;z-index:1}
.svc-head{
margin-inline:auto;
margin-block-end:clamp(32px,4.4vw,60px);
text-align:center;
}
.svc-head__eyebrow{
display:inline-flex;align-items:center;gap:10px;
font-size:0.74rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;
color:var(--gold-text);
}
.svc-head__eyebrow::before,
.svc-head__eyebrow::after{
content:"";inline-size:22px;block-size:2px;border-radius:2px;
background:linear-gradient(90deg,transparent,var(--gold-deep));
}
.svc-head__eyebrow::after{background:linear-gradient(90deg,var(--gold-deep),transparent)}
.lang-ar .svc-head__eyebrow{letter-spacing:normal;text-transform:none;font-size:0.9rem}
.svc-head__title{
display:block;
inline-size:fit-content;
margin-inline:auto;
margin-block:18px 16px;
padding:0.34em 0.82em 0.40em;
font-size:clamp(1.5rem,3.4vw,2.9rem);
line-height:1.18;font-weight:800;letter-spacing:-0.02em;
color:oklch(0.99 0.004 250);
border-radius:999px;
background-image:linear-gradient(100deg,
var(--pepsi-3) 0%,var(--pepsi-1) 22%,var(--pepsi-2) 42%,
var(--pepsi-1) 62%,var(--pepsi-3) 82%,var(--pepsi-1) 100%);
background-size:320% 100%;
background-position:0% 50%;
animation:svc-flow 14s linear infinite;
box-shadow:
inset 0 1px 0 0 oklch(1 0 0 / 0.22),
0 16px 40px -18px color-mix(in oklab,var(--pepsi-1) 62%,transparent);
position:relative;
isolation:isolate;
}
.svc-head__title::after{
content:"";position:absolute;inset:0;z-index:-1;
border-radius:inherit;
background:linear-gradient(100deg,
transparent 38%,oklch(1 0 0 / 0.16) 50%,transparent 62%);
background-size:260% 100%;
animation:svc-sheen 9s linear infinite;
}
@keyframes svc-flow{to{background-position:320% 50%}}
@keyframes svc-sheen{to{background-position:-260% 50%}}
.lang-ar .svc-head__title{letter-spacing:normal;line-height:1.5;padding-block:0.24em 0.34em}
@media (min-width:861px){
.svc-head__title{white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
.svc-head__title,.svc-head__title::after{animation:none}
.svc-head__title{background-position:42% 50%}
}
.svc-head__lead{
font-size:clamp(0.98rem,1.35vw,1.14rem);line-height:1.72;
color:var(--ink-soft);
max-inline-size:62ch;margin-inline:auto;
text-wrap:pretty;
}
.svc-foot{
margin-block-start:clamp(30px,4vw,52px);
display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
}
.svc-foot .btn--book{
color:#fff;
background:
linear-gradient(148deg,oklch(1 0 0 / 0.20) 0%,oklch(1 0 0 / 0.04) 44%,transparent 68%),
color-mix(in oklab,var(--pepsi-2) 82%,transparent);
box-shadow:
inset  1px  1px 1px -0.5px oklch(1 0 0 / 0.55),
inset -1px -1px 1px -0.5px oklch(0 0 0 / 0.28),
0 0 0 1px oklch(1 0 0 / 0.22),
0 12px 28px -14px color-mix(in oklab,var(--pepsi-3) 65%,transparent);
}
.svc-foot .btn--book::before{background:oklch(1 0 0 / 0.92)}
.svc-foot .btn--book:hover{
color:var(--navy-deep);
box-shadow:
inset 1px 1px 1px -0.5px oklch(1 0 0 / 0.9),
0 0 0 1px oklch(1 0 0 / 0.5),
0 20px 38px -14px oklch(0.14 0.06 262 / 0.5);
}
.svc-foot .btn--ghost{
color:var(--ink);
box-shadow:inset 0 0 0 1px oklch(0.55 0.03 258 / 0.26);
}
.svc-foot .btn--ghost:hover{background:oklch(0.55 0.03 258 / 0.07)}
@media (max-width:700px){
.svc-foot .btn{flex:1 1 100%;justify-content:center}
}
.svc-grid{
list-style:none;margin:0;padding:0;
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:clamp(12px,1.4vw,20px);
}
.svc-card--feature{grid-column:span 2;grid-row:span 2}
.svc-card{position:relative}
.svc-card__a{
position:relative;display:flex;flex-direction:column;isolation:isolate;
block-size:100%;min-block-size:clamp(196px,18vw,244px);
padding:clamp(18px,1.8vw,26px);
border-radius:clamp(28px,3vw,40px);
text-decoration:none;color:inherit;
overflow:hidden;
transition:transform .55s var(--ease-out-quart);
}
.svc-card--feature .svc-card__a{
min-block-size:clamp(340px,34vw,420px);
border-radius:clamp(34px,3.6vw,52px);
justify-content:center;
}
.svc-card--feature .svc-card__iconwrap{margin-block-end:0}
.svc-card--feature .svc-card__body{margin-block-start:clamp(18px,2vw,28px)}
.svc-card__a:hover{transform:translateY(-6px)}
.svc-card__a:focus-visible{outline:3px solid var(--svc-acc);outline-offset:3px}
.svc-card__slab{
position:absolute;inset:0;z-index:-2;border-radius:inherit;
}
.svc-card__slab.lglass--light::before{padding:3px;opacity:0.34}
.svc-card__a:hover .svc-card__slab.lglass--light::before{opacity:0.5}
.svc-card__slab{
background:linear-gradient(148deg,
oklch(1 0 0 / 0.60) 0%,oklch(1 0 0 / 0.42) 52%,oklch(1 0 0 / 0.36) 100%);
-webkit-backdrop-filter:blur(26px) saturate(1.6);
backdrop-filter:blur(26px) saturate(1.6);
box-shadow:
inset 0 1px 0 0 oklch(1 0 0 / 0.85),
0 16px 36px -22px color-mix(in oklab,var(--pepsi-3) 32%,transparent);
transition:background .5s var(--ease-out),box-shadow .5s var(--ease-out);
}
.svc-card__a:hover .svc-card__slab{
background:linear-gradient(148deg,
oklch(1 0 0 / 0.76) 0%,oklch(1 0 0 / 0.58) 52%,oklch(1 0 0 / 0.50) 100%);
box-shadow:
inset 0 1px 0 0 oklch(1 0 0 / 1),
0 28px 54px -26px color-mix(in oklab,var(--pepsi-3) 42%,transparent),
0 0 40px -16px color-mix(in oklab,var(--pepsi-1) 34%,transparent);
}
.svc-card__iconwrap{display:flex;justify-content:center;margin-block-end:auto}
.svc-card__icon{
display:block;
inline-size:clamp(84px,9.5vw,124px);aspect-ratio:1;
background:linear-gradient(158deg,
color-mix(in oklab,var(--svc-ink) 82%,var(--svc-acc)) 0%,
var(--svc-ink) 62%,
color-mix(in oklab,var(--svc-ink) 88%,black) 100%);
-webkit-mask-image:var(--icon);mask-image:var(--icon);
-webkit-mask-size:contain;mask-size:contain;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:center;mask-position:center;
filter:drop-shadow(0 6px 14px color-mix(in oklab,var(--pepsi-3) 26%,transparent));
transition:scale .6s var(--ease-out-quart),filter .5s var(--ease-out),background .5s var(--ease-out);
}
.svc-card--feature .svc-card__icon{inline-size:clamp(190px,21vw,290px)}
.svc-card__a:hover .svc-card__icon{
scale:1.07;
background:linear-gradient(158deg,
color-mix(in oklab,var(--svc-acc) 72%,white) 0%,
var(--svc-acc) 58%,
color-mix(in oklab,var(--svc-acc) 82%,black) 100%);
filter:drop-shadow(0 10px 22px color-mix(in oklab,var(--svc-acc) 42%,transparent));
}
.svc-card__icon--svg{background:none;-webkit-mask-image:none;mask-image:none;color:var(--svc-ink)}
.svc-card__icon--svg svg{inline-size:100%;block-size:100%}
.svc-card__body{margin-block-start:clamp(16px,1.8vw,22px);text-align:center}
.svc-card__name{
display:block;
font-size:clamp(0.95rem,1.15vw,1.12rem);font-weight:700;line-height:1.3;
color:var(--ink);text-wrap:balance;
}
.svc-card--feature .svc-card__name{font-size:clamp(1.25rem,2vw,1.7rem)}
.svc-card__blurb{
display:none;
margin-block-start:8px;
font-size:0.86rem;line-height:1.6;color:var(--ink-soft);
}
.svc-card--feature .svc-card__blurb{display:block;max-inline-size:46ch;margin-inline:auto}
.svc-card__go{
position:absolute;inset-block-end:clamp(14px,1.4vw,18px);
inset-inline-end:clamp(14px,1.4vw,18px);
inline-size:30px;block-size:30px;border-radius:50%;
display:grid;place-items:center;
color:oklch(0.99 0.004 250);
background:var(--svc-acc);
box-shadow:inset 0 0 0 1px oklch(1 0 0 / 0.28);
opacity:0;translate:calc(var(--svc-go,-1) * 6px) 0;
transition:opacity .4s var(--ease-out),translate .5s var(--ease-out-quart);
}
[dir="rtl"] .svc-card{--svc-go:1}
[dir="rtl"] .svc-card__go svg{transform:scaleX(-1)}
.svc-card__go svg{inline-size:15px;block-size:15px}
.svc-card__a:hover .svc-card__go,.svc-card__a:focus-visible .svc-card__go{opacity:1;translate:0 0}
.svc-card__rim{
display:block;
position:absolute;inset:0;z-index:-1;
border-radius:inherit;
padding:1.6px;
background:linear-gradient(148deg,
oklch(1 0 0 / 0.92) 0%,
color-mix(in oklab,var(--pepsi-1) 34%,transparent) 30%,
oklch(1 0 0 / 0.42) 54%,
color-mix(in oklab,var(--pepsi-2) 30%,transparent) 78%,
oklch(1 0 0 / 0.78) 100%);
-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,linear-gradient(#000 0 0);
mask-composite:exclude;
opacity:0.75;
transition:opacity .5s var(--ease-out),padding .5s var(--ease-out);
}
.svc-card__a:hover .svc-card__rim{opacity:1;padding:2.2px}
@supports not ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
.svc-card__rim{
background:none;padding:0;
box-shadow:inset 0 0 0 1.6px oklch(1 0 0 / 0.6);
}
}
@media (max-width:1080px){
.svc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.svc-card--feature{grid-column:span 3;grid-row:span 1}
.svc-card--feature .svc-card__a{min-block-size:clamp(210px,28vw,260px)}
}
@media (max-width:700px){
.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.svc-card--feature{grid-column:span 2}
.svc-card__a{min-block-size:178px;padding:16px 12px;border-radius:26px}
.svc-card--feature .svc-card__a{min-block-size:210px;border-radius:30px}
.svc-card__a{justify-content:center}
.svc-card__iconwrap{margin-block-end:0}
.svc-card__icon{inline-size:96px}
.svc-card--feature .svc-card__icon{inline-size:128px}
.svc-card__name{font-size:0.86rem}
.svc-card--feature .svc-card__name{font-size:1.16rem}
.svc-card__body{margin-block-start:11px}
.svc-card__icon{
background:linear-gradient(158deg,
color-mix(in oklab,var(--svc-acc) 66%,white) 0%,
var(--svc-acc) 58%,
color-mix(in oklab,var(--svc-acc) 84%,black) 100%);
}
.svc-card__go{display:none}
}
@media (prefers-reduced-motion:reduce){
.svc-card__a,.svc-card__slab,.svc-card__icon,
.svc-card__go{transition-duration:0.01ms !important}
.svc-card__a:hover{transform:none}
.svc-card__a:hover .svc-card__icon{scale:1}
.svc-card__go{translate:none}
}
@supports not ((-webkit-mask-image:url('')) or (mask-image:url(''))){
.svc-card__icon{
background:var(--svc-ink);
background-image:var(--icon);
background-size:70%;background-repeat:no-repeat;background-position:center;
border-radius:50%;
filter:none;
}
.svc-card__a:hover .svc-card__icon{background-color:var(--svc-acc)}
}
@supports not (background:color-mix(in oklab,red 50%,transparent)){
.svc-card__icon{background:var(--svc-ink)}
}
.dp-aura,.svp-aura{
position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
contain:paint;
}
.dp-aura i,.svp-aura i{
position:absolute;display:block;
}
.dp-aura i:first-child,.svp-aura i:first-child{
inline-size:70%;aspect-ratio:1.1;
inset-block-start:-22%;inset-inline-start:-16%;
background:radial-gradient(closest-side circle,
color-mix(in oklab,var(--acc) 16%,transparent),
color-mix(in oklab,var(--acc) 5%,transparent) 58%,transparent 100%);
}
.dp-aura i:last-child,.svp-aura i:last-child{
inline-size:62%;aspect-ratio:1.15;
inset-block-end:-26%;inset-inline-end:-14%;
background:radial-gradient(closest-side circle,
color-mix(in oklab,var(--gold) 15%,transparent),
color-mix(in oklab,var(--gold) 4%,transparent) 58%,transparent 100%);
}
.dp-aura ~ .wrap,.svp-aura ~ .wrap{position:relative;z-index:1}
.gcard{
position:relative;
border:1px solid oklch(1 0 0 / 0.78);
background:
linear-gradient(148deg,oklch(1 0 0 / 0.96) 0%,oklch(1 0 0 / 0.80) 44%,oklch(1 0 0 / 0.72) 100%);
box-shadow:
inset  1.5px  1.5px 1px -1px oklch(1 0 0 / 0.95),
inset -1.5px -1.5px 1px -1px oklch(0.55 0.03 258 / 0.16),
inset  0  10px 20px -16px oklch(1 0 0 / 0.9),
inset  0 -12px 24px -18px oklch(0.42 0.04 260 / 0.20),
0 0 0 1px oklch(0.50 0.03 258 / 0.09),
0 14px 30px -18px oklch(0.30 0.06 262 / 0.26);
transition:transform .32s var(--ease-out),box-shadow .32s var(--ease-out),
border-color .32s var(--ease-out),background .32s var(--ease-out);
}
.gcard-host:hover,.gcard-host:focus-visible,.gcard-host:focus-within{
transform:translateY(-6px) scale(1.02);
border-color:color-mix(in oklab,var(--acc) 34%,oklch(1 0 0 / 0.8));
background:
linear-gradient(148deg,oklch(1 0 0 / 1) 0%,oklch(1 0 0 / 0.92) 44%,oklch(1 0 0 / 0.86) 100%);
box-shadow:
inset  1.5px  1.5px 1px -1px oklch(1 0 0 / 1),
inset -1.5px -1.5px 1px -1px oklch(0.55 0.03 258 / 0.18),
inset  0  10px 20px -16px oklch(1 0 0 / 1),
inset  0 -12px 24px -18px oklch(0.42 0.04 260 / 0.16),
0 0 0 1px color-mix(in oklab,var(--acc) 22%,transparent),
0 0 0 5px color-mix(in oklab,var(--acc) 9%,transparent),
0 26px 46px -22px color-mix(in oklab,var(--acc) 42%,transparent);
}
.gcard-host:active{transform:translateY(-2px) scale(0.994);transition-duration:.12s}
@supports not (background:color-mix(in oklab,red 50%,transparent)){
.gcard{background:var(--white)}
}
.ph{
position:relative;overflow:hidden;isolation:isolate;
display:grid;place-items:center;margin:0;
border-radius:20px;
background:
linear-gradient(150deg,oklch(1 0 0 / 0.72),oklch(1 0 0 / 0.34)),
color-mix(in oklab,var(--acc) 6%,var(--paper-2));
border:1.5px dashed color-mix(in oklab,var(--acc) 34%,oklch(0.86 0.01 258));
box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.8),0 14px 30px -22px oklch(0.30 0.06 262 / 0.34);
color:color-mix(in oklab,var(--acc) 60%,var(--ink-soft));
transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),
border-color .4s var(--ease-out);
}
.ph--1-1{aspect-ratio:1}
.ph--4-3{aspect-ratio:4/3}
.ph--3-2{aspect-ratio:3/2}
.ph--16-9{aspect-ratio:16/9}
.ph:hover{
transform:translateY(-4px);
border-color:color-mix(in oklab,var(--acc) 55%,transparent);
box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.9),0 24px 44px -26px color-mix(in oklab,var(--acc) 50%,transparent);
}
.ph__mesh{
position:absolute;inset:0;opacity:0.5;
background-image:
linear-gradient(color-mix(in oklab,var(--acc) 12%,transparent) 1px,transparent 1px),
linear-gradient(90deg,color-mix(in oklab,var(--acc) 12%,transparent) 1px,transparent 1px);
background-size:30px 30px;
-webkit-mask-image:radial-gradient(70% 70% at 50% 45%,#000,transparent 78%);
mask-image:radial-gradient(70% 70% at 50% 45%,#000,transparent 78%);
}
.ph__sheen{
position:absolute;inset-block:-30%;inset-inline:-60% auto;inline-size:45%;
background:linear-gradient(105deg,transparent,oklch(1 0 0 / 0.55),transparent);
opacity:0;transition:none;
}
.ph:hover .ph__sheen{animation:ph-sheen 0.9s var(--ease-out) forwards}
@keyframes ph-sheen{
from{opacity:0;transform:translateX(0)}
30%{opacity:1}
to{opacity:0;transform:translateX(340%)}
}
[dir="rtl"] .ph:hover .ph__sheen{animation-name:ph-sheen-rtl}
@keyframes ph-sheen-rtl{
from{opacity:0;transform:translateX(0)}
30%{opacity:1}
to{opacity:0;transform:translateX(-340%)}
}
.ph__body{
position:relative;z-index:1;
display:flex;flex-direction:column;align-items:center;gap:8px;
padding:18px;text-align:center;
}
.ph__ic{
display:grid;place-items:center;inline-size:46px;block-size:46px;border-radius:15px;
background:color-mix(in oklab,var(--acc) 13%,oklch(1 0 0 / 0.7));
box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.8);
transition:transform .4s var(--ease-out-quart);
}
.ph:hover .ph__ic{transform:translateY(-2px) scale(1.06)}
.ph__ic svg{inline-size:23px;block-size:23px}
.ph__label{font-weight:700;font-size:0.92rem;line-height:1.3}
.ph__note{
font-family:var(--font-en);font-size:0.7rem;font-weight:700;
letter-spacing:0.14em;opacity:0.55;
direction:ltr;unicode-bidi:isolate;
}
@media (prefers-reduced-motion:reduce){
.ph,.ph__ic{transition:none !important}
.ph:hover{transform:none}
.ph:hover .ph__sheen{animation:none;opacity:0}
.gcard{transition:none !important}
.gcard-host:hover,.gcard-host:focus-visible,.gcard-host:focus-within{transform:none}
}
.dp-body{align-items:stretch}
.dp-panel{
position:relative;
display:flex;flex-direction:column;justify-content:center;
block-size:100%;
padding:clamp(24px,3vw,40px);
border-radius:clamp(18px,1.8vw,24px);
}
.dp-panel .tag{margin-block-end:14px}
.dp-bio{
font-size:clamp(1.02rem,1.3vw,1.1rem);line-height:1.9;color:var(--ink-soft);
margin-block-end:clamp(20px,2.2vw,28px);
}
.dp-approach{
margin-block-start:0;margin-block-end:0;
padding:clamp(18px,2vw,24px);
border-radius:16px;
background:color-mix(in oklab,var(--acc) 8%,oklch(1 0 0 / 0.55));
border:1px solid color-mix(in oklab,var(--acc) 18%,transparent);
border-inline-start:3px solid color-mix(in oklab,var(--acc) 70%,transparent);
box-shadow:inset 0 2px 10px -6px oklch(0.30 0.06 262 / 0.22);
}
.dp-body__aside{display:grid;gap:clamp(16px,1.8vw,22px);align-content:start}
.dp-focus{
position:relative;
inset-block-start:auto;
padding:clamp(22px,2.4vw,30px);
border-radius:clamp(18px,1.8vw,24px);
}
.dp-focus h3{color:var(--navy)}
.dp-focus li{transition:color .3s var(--ease-out),transform .3s var(--ease-out)}
.dp-focus li:hover{color:var(--ink)}
.dp-exp{
background:var(--pepsi-field);
padding-block:clamp(56px,6.2vw,92px);
}
.dp-exp__swirl{
position:absolute;inset:-15% -10%;
background:
radial-gradient(58% 58% at 16% 14%,color-mix(in oklab,var(--crimson) 46%,transparent),transparent 64%),
radial-gradient(52% 52% at 86% 88%,color-mix(in oklab,var(--pepsi-1) 85%,white),transparent 62%);
filter:blur(40px);opacity:0.6;
}
.dp-exp__swirl::after{
content:"";position:absolute;inset-inline:-10%;inset-block-start:44%;
block-size:26%;border-radius:50%;
background:linear-gradient(90deg,transparent,oklch(1 0 0 / 0.16) 45%,transparent);
transform:rotate(-6deg);filter:blur(26px);
}
.dp-exp__mesh{
position:absolute;inset:0;opacity:0.35;
background-image:
linear-gradient(oklch(1 0 0 / 0.06) 1px,transparent 1px),
linear-gradient(90deg,oklch(1 0 0 / 0.06) 1px,transparent 1px);
background-size:56px 56px;
-webkit-mask-image:radial-gradient(80% 70% at 50% 30%,#000,transparent 82%);
mask-image:radial-gradient(80% 70% at 50% 30%,#000,transparent 82%);
}
.dp-exp .tag{color:var(--gold)}
.dp-exp .tag::before{background:var(--gold)}
.dp-exp .section-head h2{color:#fff;text-shadow:0 6px 34px oklch(0.20 0.10 268 / 0.5)}
.dp-chips{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:clamp(12px,1.4vw,18px);
text-align:start;
}
.dp-chip{
position:relative;list-style:none;
--lg-tint:var(--accent,var(--hero-accent));
display:flex;flex-direction:column;align-items:flex-start;gap:10px;
padding:clamp(18px,2vw,26px) clamp(16px,1.8vw,22px) clamp(24px,2.4vw,30px);
border-radius:clamp(16px,1.6vw,20px);
min-block-size:128px;
transition:transform .45s var(--ease-out-quart),box-shadow .45s var(--ease-out);
}
.dp-chip__n{
font-family:var(--font-en);font-size:0.86rem;font-weight:800;letter-spacing:0.12em;
color:var(--gold);
}
.dp-chip__t{
font-size:clamp(0.98rem,1.1vw,1.06rem);font-weight:700;color:#fff;line-height:1.45;
text-shadow:0 1px 3px oklch(0 0 0 / 0.35);
}
.dp-chip__bar{
position:absolute;inset-block-end:clamp(14px,1.4vw,18px);
inset-inline-start:clamp(16px,1.8vw,22px);
inline-size:38px;block-size:3px;border-radius:3px;background:var(--gold);
transform:scaleX(0);transform-origin:var(--u-origin,left);
transition:transform .45s var(--ease-out);
}
[dir="rtl"] .dp-chip__bar{transform-origin:right}
.dp-chip:hover .dp-chip__bar{transform:scaleX(1)}
.dp-chip:hover{
box-shadow:
inset  1.5px  1.5px 1px -1px oklch(1 0 0 / 0.95),
inset -1.5px -1.5px 1px -1px oklch(1 0 0 / 0.38),
inset  0  9px 18px -15px oklch(1 0 0 / 0.7),
inset  0 -11px 22px -16px oklch(0 0 0 / 0.5),
0 0 0 1px oklch(1 0 0 / 0.22),
0 0 0 5px color-mix(in oklab,var(--gold) 12%,transparent),
0 22px 40px -20px oklch(0 0 0 / 0.55);
}
.dp-chip:active{transform:translateY(-1px) scale(0.985);transition-duration:.12s}
.dp-rel-grid{gap:clamp(14px,1.5vw,18px)}
@media (prefers-reduced-motion:reduce){
.dp-chip,.dp-chip__bar{transition:none !important}
.dp-chip:hover{transform:none}
}
.svp-overview__ph{margin-block-start:clamp(22px,2.6vw,32px)}
.svp-why{gap:clamp(12px,1.3vw,16px);align-content:start}
.svp-why__item{
position:relative;
padding:clamp(18px,1.9vw,22px);
border:0;border-radius:clamp(16px,1.6vw,20px);
--lg-tint:oklch(1 0 0);
}
.svp-why__item:hover{transform:translateY(-2px)}
[dir="rtl"] .svp-why__item:hover{transform:translateY(-2px)}
.svp-why__ic{
background:color-mix(in oklab,var(--acc) 14%,oklch(1 0 0 / 0.6));
box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.75);
transition:transform .4s var(--ease-out-quart),background .4s var(--ease-out);
}
.svp-why__item:hover .svp-why__ic{
transform:scale(1.06);background:color-mix(in oklab,var(--acc) 22%,oklch(1 0 0 / 0.6));
}
.svp-cards{
--svp-gap:clamp(14px,1.5vw,18px);
display:flex;flex-wrap:wrap;justify-content:center;
gap:var(--svp-gap);
}
.svp-card{
flex:1 1 calc((100% - 2 * var(--svp-gap)) / 3);
max-inline-size:calc((100% - 2 * var(--svp-gap)) / 3);
border:0;border-radius:clamp(16px,1.6vw,20px);
padding:clamp(24px,2.6vw,32px) clamp(20px,2.2vw,26px);
display:flex;flex-direction:column;align-items:center;
}
.svp-cards:has(> .svp-card:nth-child(4):last-child) .svp-card{
flex-basis:calc((100% - 3 * var(--svp-gap)) / 4);
max-inline-size:calc((100% - 3 * var(--svp-gap)) / 4);
}
.svp-card__no{color:color-mix(in oklab,var(--acc) 60%,transparent)}
.svp-card__ic{
background:color-mix(in oklab,var(--acc) 13%,oklch(1 0 0 / 0.6));
box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.8);
}
.svp-card:hover .svp-card__ic{background:color-mix(in oklab,var(--acc) 22%,oklch(1 0 0 / 0.6))}
.svp-card::after{content:none}
.svp-gallery-sec{
position:relative;
background:linear-gradient(180deg,var(--paper) 0%,color-mix(in oklab,var(--acc) 7%,var(--paper)) 100%);
}
.svp-gallery{
--svp-gap:clamp(14px,1.6vw,22px);
display:flex;flex-wrap:wrap;justify-content:center;gap:var(--svp-gap);
}
.svp-gallery > .ph{
flex:1 1 calc((100% - 2 * var(--svp-gap)) / 3);
max-inline-size:calc((100% - 2 * var(--svp-gap)) / 3);
}
.svp-chips{gap:clamp(10px,1.1vw,12px)}
.svp-chip{
position:relative;border:0;
padding:13px 22px;min-block-size:46px;
}
.svp-chip__dot{box-shadow:0 0 0 4px color-mix(in oklab,var(--acc) 20%,transparent)}
.svp-step{
border:0;border-radius:clamp(16px,1.6vw,20px);
padding:clamp(24px,2.6vw,32px) clamp(20px,2.2vw,26px);
}
.svp-step__n{margin-inline:auto}
.svp-step:not(:last-child)::after{
background:color-mix(in oklab,var(--acc) 40%,transparent);
}
.svp-faq{gap:clamp(10px,1.1vw,14px)}
.svp-faq__item{border:0;border-radius:clamp(16px,1.6vw,20px)}
.svp-faq__item.gcard[open]{
border:0;
box-shadow:
inset  1.5px  1.5px 1px -1px oklch(1 0 0 / 1),
inset -1.5px -1.5px 1px -1px oklch(0.55 0.03 258 / 0.18),
inset  0  10px 20px -16px oklch(1 0 0 / 1),
inset  0 -12px 24px -18px oklch(0.42 0.04 260 / 0.16),
0 0 0 1px color-mix(in oklab,var(--acc) 24%,transparent),
0 20px 38px -22px color-mix(in oklab,var(--acc) 38%,transparent);
}
.svp-faq__item summary{padding:22px 24px}
.svp-faq__item.gcard-host:hover,.svp-faq__item.gcard-host:focus-within{transform:translateY(-3px) scale(1.004)}
.svp-related__card{border:0;border-radius:clamp(16px,1.6vw,20px);padding:20px 22px;min-block-size:84px}
.svp-related__ic{
background:color-mix(in oklab,var(--acc) 13%,oklch(1 0 0 / 0.6));
box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.8);
}
@media (max-width:980px){
.svp-card,
.svp-cards:has(> .svp-card:nth-child(4):last-child) .svp-card,
.svp-gallery > .ph{
flex-basis:calc((100% - var(--svp-gap)) / 2);
max-inline-size:calc((100% - var(--svp-gap)) / 2);
}
}
@media (max-width:900px){
.dp-body__aside{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.dp-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
.svp-overview__ph{margin-block-start:22px}
}
@media (max-width:700px){
.dp-body__aside{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
.dp-chips,.dp-rel-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.svp-cards,.svp-gallery{--svp-gap:12px}
.svp-card{flex-basis:130px;max-inline-size:calc((100% - var(--svp-gap)) / 2)}
.dp-chip{min-block-size:108px;padding:16px 14px 24px}
.dp-chip__t{font-size:0.93rem}
.svp-why{grid-template-columns:minmax(0,1fr)}
.dp-panel,.dp-focus{padding:20px 18px}
.dp-approach{padding:16px 16px}
.svp-card,.svp-step{padding:20px 13px}
.svp-card h3,.svp-step h3{font-size:1rem;line-height:1.3}
.svp-card p,.svp-step p{font-size:0.85rem;line-height:1.55}
.svp-card__ic{inline-size:46px;block-size:46px;border-radius:14px;margin-block-end:12px}
.svp-card__ic svg{inline-size:23px;block-size:23px}
.svp-step__n{inline-size:40px;block-size:40px;border-radius:12px;font-size:1.1rem;margin-block-end:12px}
.svp-card__no{inset-block-start:12px;inset-inline-end:13px;font-size:0.76rem}
.svp-faq__item summary{padding:18px 18px;font-size:1rem}
.svp-faq__a{padding:0 18px 18px}
.svp-related__card{padding:16px 14px}
.ph__ic{inline-size:38px;block-size:38px;border-radius:12px}
.ph__ic svg{inline-size:19px;block-size:19px}
.ph__label{font-size:0.82rem}
.ph__note{font-size:0.64rem}
.dp-back{min-block-size:44px}
}
.why-sec{
position:relative;isolation:isolate;overflow:hidden;
background:linear-gradient(180deg,var(--paper) 0%,oklch(0.972 0.008 258) 50%,var(--paper) 100%);
}
.why-sec__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.why-sec > .wrap{position:relative;z-index:1}
.why-sec__aurora{
position:absolute;inset-block:-60%;inset-inline:-30%;
background:
radial-gradient(34% 40% at 22% 30%,color-mix(in oklab,var(--navy) 16%,transparent),transparent 70%),
radial-gradient(30% 36% at 74% 24%,color-mix(in oklab,var(--gold) 20%,transparent),transparent 72%),
radial-gradient(38% 42% at 56% 82%,color-mix(in oklab,var(--primary) 14%,transparent),transparent 74%);
animation:why-drift 34s linear infinite;
}
@keyframes why-drift{
from{transform:rotate(0deg)   scale(1.04)}
50%{transform:rotate(180deg) scale(1.12)}
to{transform:rotate(360deg) scale(1.04)}
}
.why-sec__streaks{position:absolute;inset:0}
.why-sec__streaks i{
position:absolute;inset-block:-40%;inline-size:16%;
background:linear-gradient(100deg,transparent,oklch(1 0 0 / 0.55) 45%,transparent);
transform:rotate(14deg) translateX(-260%);
animation:why-streak 17s ease-in-out infinite;
}
.why-sec__streaks i:nth-child(1){inset-inline-start:6%;animation-delay:0s}
.why-sec__streaks i:nth-child(2){inset-inline-start:42%;animation-delay:5.5s;inline-size:10%}
.why-sec__streaks i:nth-child(3){inset-inline-start:74%;animation-delay:11s;inline-size:13%}
@keyframes why-streak{
0%{transform:rotate(14deg) translateX(-260%);opacity:0}
18%,40%{opacity:1}
60%,100%{transform:rotate(14deg) translateX(260%);opacity:0}
}
.why-sec__mesh{
position:absolute;inset:0;opacity:0.5;
background-image:
linear-gradient(oklch(0.34 0.16 268 / 0.05) 1px,transparent 1px),
linear-gradient(90deg,oklch(0.34 0.16 268 / 0.05) 1px,transparent 1px);
background-size:46px 46px;
-webkit-mask-image:radial-gradient(72% 66% at 50% 46%,#000,transparent 82%);
mask-image:radial-gradient(72% 66% at 50% 46%,#000,transparent 82%);
}
.why-grid{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:clamp(14px,1.5vw,20px);align-items:start;
}
.why{
position:relative;isolation:isolate;
--lg-tint:oklch(1 0 0);
display:flex;flex-direction:column;align-items:center;
padding:clamp(24px,2.4vw,32px) clamp(18px,1.9vw,24px) clamp(22px,2.2vw,28px);
border:0;border-radius:clamp(18px,1.8vw,22px);
block-size:100%;
}
@media (min-width:1081px){
.why-grid >:nth-child(even){margin-block-start:clamp(18px,2.4vw,34px)}
}
@media (max-width:1080px){
.why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.why__ic{
display:grid;place-items:center;
inline-size:56px;block-size:56px;border-radius:18px;
color:var(--navy);
background:linear-gradient(150deg,oklch(1 0 0 / 0.9),color-mix(in oklab,var(--navy) 10%,oklch(1 0 0 / 0.6)));
box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.95),0 10px 22px -14px oklch(0.30 0.06 262 / 0.5);
transition:transform .5s var(--ease-out-quart),color .4s var(--ease-out),background .4s var(--ease-out);
}
.why__ic svg{inline-size:27px;block-size:27px}
.why:hover .why__ic{
transform:translateY(-4px) scale(1.06) rotate(-4deg);
color:var(--crimson);
background:linear-gradient(150deg,oklch(1 0 0 / 1),color-mix(in oklab,var(--crimson) 12%,oklch(1 0 0 / 0.7)));
}
.why__n{
display:block;margin-block-start:16px;
font-family:var(--font-en);font-weight:800;font-size:0.82rem;letter-spacing:0.16em;
color:color-mix(in oklab,var(--navy) 45%,transparent);
}
.why h3{font-size:clamp(1.06rem,1.25vw,1.2rem);color:var(--navy);margin-block:8px 8px}
.why p{color:var(--ink-soft);font-size:0.96rem;line-height:1.6}
.why__bar{
display:block;block-size:3px;inline-size:34px;border-radius:3px;
margin-block-start:auto;margin-inline:auto;
padding-block-start:0;
background:var(--gold);
transition:inline-size .5s var(--ease-out),background .4s var(--ease-out);
}
.why > .why__bar{margin-block-start:18px}
.why:hover .why__bar{inline-size:62%;background:var(--crimson)}
.why:active{transform:translateY(-1px) scale(0.985);transition-duration:.12s}
.why-hint{display:none}
@media (prefers-reduced-motion:reduce){
.why-sec__aurora,.why-sec__streaks i{animation:none !important}
.why-sec__streaks{display:none}
.why__ic{transition:none !important}
.why:hover .why__ic{transform:none}
}
@media (max-width:700px){
.why-grid{
display:flex;align-items:stretch;
gap:12px;
margin-inline:-24px;padding-inline:24px;
padding-block:4px 10px;
overflow-x:auto;overscroll-behavior-inline:contain;
scroll-snap-type:x mandatory;scroll-padding-inline-start:24px;
scrollbar-width:none;
}
.why-grid::-webkit-scrollbar{display:none}
.why{
flex:0 0 clamp(200px,62vw,250px);
scroll-snap-align:start;
padding:20px 16px 18px;
}
.why__ic{inline-size:46px;block-size:46px;border-radius:15px}
.why__ic svg{inline-size:23px;block-size:23px}
.why__n{margin-block-start:12px;font-size:0.74rem}
.why h3{font-size:1rem;margin-block:6px 6px}
.why p{font-size:0.88rem;line-height:1.55}
.why > .why__bar{margin-block-start:14px}
.why-hint{
display:block;margin-block-start:12px;text-align:center;
font-size:0.78rem;font-weight:700;letter-spacing:0.02em;
color:color-mix(in oklab,var(--navy) 55%,transparent);
}
}
.bgrid{
--bg-gap:clamp(16px,1.6vw,24px);
display:flex;flex-wrap:wrap;justify-content:center;gap:var(--bg-gap);
}
.bgrid > .bcard{
flex:1 1 calc((100% - 3 * var(--bg-gap)) / 4);
max-inline-size:calc((100% - 3 * var(--bg-gap)) / 4);
}
.art-related-sec .bgrid > .bcard{
flex-basis:calc((100% - 2 * var(--bg-gap)) / 3);
max-inline-size:calc((100% - 2 * var(--bg-gap)) / 3);
}
.bcard{
position:relative;isolation:isolate;overflow:hidden;
display:flex;flex-direction:column;
border-radius:clamp(16px,1.7vw,20px);
background:linear-gradient(160deg,oklch(1 0 0 / 0.96),oklch(1 0 0 / 0.86));
box-shadow:
inset  1.5px  1.5px 1px -1px oklch(1 0 0 / 0.95),
inset -1.5px -1.5px 1px -1px oklch(0.55 0.03 258 / 0.16),
0 0 0 1px oklch(0.50 0.03 258 / 0.09),
0 16px 34px -20px oklch(0.30 0.06 262 / 0.30);
transition:transform .4s var(--ease-out-quart),box-shadow .4s var(--ease-out);
}
.bcard:hover,.bcard:focus-visible{
transform:translateY(-8px);
box-shadow:
inset  1.5px  1.5px 1px -1px oklch(1 0 0 / 1),
inset -1.5px -1.5px 1px -1px oklch(0.55 0.03 258 / 0.18),
0 0 0 1px color-mix(in oklab,var(--acc) 26%,transparent),
0 0 0 5px color-mix(in oklab,var(--acc) 9%,transparent),
0 30px 54px -24px color-mix(in oklab,var(--acc) 46%,transparent);
}
.bcard:active{transform:translateY(-2px) scale(0.993);transition-duration:.12s}
.bcard:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.bcard__media{position:relative;display:block;aspect-ratio:16 / 9;overflow:hidden}
.bcard__img{
inline-size:100%;block-size:100%;object-fit:cover;
transform:scale(1.01);
transition:transform 1s var(--ease-out-quart),filter .5s var(--ease-out);
}
.bcard:hover .bcard__img{transform:scale(1.06);filter:saturate(1.08) contrast(1.03)}
.bcard__fallback{
position:absolute;inset:0;display:grid;place-items:center;color:#fff;
background:linear-gradient(150deg,color-mix(in oklab,var(--acc) 82%,var(--navy-deep)),var(--navy-darkest));
}
.bcard__fallback svg{inline-size:27%;max-inline-size:84px;block-size:auto}
.bcard__veil{
position:absolute;inset:0;pointer-events:none;
background:
linear-gradient(to top,color-mix(in oklab,var(--acc) 26%,transparent) 0%,transparent 52%),
linear-gradient(to top,
oklch(0.16 0.02 262 / 0.86) 0%,
oklch(0.16 0.02 262 / 0.46) 34%,
oklch(0.16 0.02 262 / 0.10) 66%,
transparent 100%),
linear-gradient(to bottom,oklch(0.16 0.02 262 / 0.42) 0%,transparent 34%);
transition:opacity .45s var(--ease-out);
}
.bcard__cat,.bcard__read{
position:absolute;z-index:2;
display:inline-flex;align-items:center;gap:7px;
padding:6px 12px;border-radius:999px;
font-size:0.72rem;font-weight:800;line-height:1.35;letter-spacing:0.02em;
color:#fff;white-space:nowrap;
background:oklch(0.16 0.02 262 / 0.46);border:1px solid oklch(1 0 0 / 0.28);
box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.28),0 8px 20px -14px oklch(0 0 0 / 0.8);
-webkit-backdrop-filter:blur(12px) saturate(1.6);backdrop-filter:blur(12px) saturate(1.6);
transition:background .4s var(--ease-out),border-color .4s var(--ease-out);
}
.bcard__cat{inset-block-start:12px;inset-inline-start:12px;max-inline-size:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}
.bcard__read{inset-block-end:12px;inset-inline-end:12px;font-weight:700}
.bcard__read svg{inline-size:14px;block-size:14px;flex:none}
.bcard:hover .bcard__cat{background:color-mix(in oklab,var(--acc) 58%,transparent);border-color:oklch(1 0 0 / 0.5)}
.bcard__body{
position:relative;display:flex;flex-direction:column;flex:1;
padding:clamp(16px,1.5vw,20px) clamp(16px,1.5vw,20px) clamp(16px,1.6vw,20px);
text-align:start;
}
.bcard__title{
font-size:clamp(1rem,1.1vw,1.1rem);font-weight:800;line-height:1.4;
color:var(--navy);letter-spacing:-0.01em;
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
transition:color .35s var(--ease-out);
}
.bcard:hover .bcard__title{color:color-mix(in oklab,var(--acc) 70%,var(--navy))}
.bcard__excerpt{
margin-block-start:8px;color:var(--ink-soft);font-size:0.9rem;line-height:1.6;
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.bcard__more{
margin-block-start:auto;padding-block-start:14px;
display:inline-flex;align-items:center;gap:7px;
font-weight:800;font-size:0.86rem;color:var(--acc);
}
.bcard__more svg{inline-size:16px;block-size:16px;transition:transform .4s var(--ease-out)}
[dir="rtl"] .bcard__more svg{transform:scaleX(-1)}
.bcard:hover .bcard__more svg{transform:translateX(5px)}
[dir="rtl"] .bcard:hover .bcard__more svg{transform:scaleX(-1) translateX(5px)}
.bfeat{
position:relative;isolation:isolate;overflow:hidden;
display:grid;grid-template-columns:1.05fr 0.95fr;align-items:stretch;
border-radius:clamp(20px,2vw,26px);
background:linear-gradient(160deg,oklch(1 0 0 / 0.96),oklch(1 0 0 / 0.86));
box-shadow:
inset  1.5px  1.5px 1px -1px oklch(1 0 0 / 0.95),
inset -1.5px -1.5px 1px -1px oklch(0.55 0.03 258 / 0.16),
0 0 0 1px oklch(0.50 0.03 258 / 0.09),
0 22px 46px -26px oklch(0.30 0.06 262 / 0.34);
transition:transform .45s var(--ease-out-quart),box-shadow .45s var(--ease-out);
}
.bfeat:hover{
transform:translateY(-6px);
box-shadow:
inset  1.5px  1.5px 1px -1px oklch(1 0 0 / 1),
inset -1.5px -1.5px 1px -1px oklch(0.55 0.03 258 / 0.18),
0 0 0 1px color-mix(in oklab,var(--acc) 26%,transparent),
0 0 0 6px color-mix(in oklab,var(--acc) 9%,transparent),
0 38px 66px -30px color-mix(in oklab,var(--acc) 46%,transparent);
}
.bfeat:active{transform:translateY(-2px) scale(0.996);transition-duration:.12s}
.bfeat:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.bfeat__media{position:relative;overflow:hidden;min-block-size:320px}
.bfeat__media .bcard__img{position:absolute;inset:0}
.bfeat:hover .bcard__img{transform:scale(1.05);filter:saturate(1.08) contrast(1.03)}
.bcard__veil--feat{
background:
linear-gradient(to top,color-mix(in oklab,var(--acc) 22%,transparent) 0%,transparent 58%),
linear-gradient(to top,oklch(0.16 0.02 262 / 0.62) 0%,oklch(0.16 0.02 262 / 0.12) 48%,transparent 82%);
}
.bfeat__flag{
position:absolute;z-index:2;inset-block-start:14px;inset-inline-end:14px;
padding:6px 14px;border-radius:999px;
font-size:0.72rem;font-weight:800;letter-spacing:0.03em;
color:var(--navy-deep);background:var(--gold);
box-shadow:0 10px 22px -12px oklch(0.72 0.13 80 / 0.8);
}
.bfeat__body{
display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
padding:clamp(24px,3vw,44px);
}
.bfeat__title{
font-size:clamp(1.4rem,2.5vw,2rem);font-weight:800;line-height:1.25;color:var(--navy);
letter-spacing:-0.015em;
}
.bfeat__excerpt{
margin-block-start:14px;color:var(--ink-soft);font-size:clamp(0.98rem,1.2vw,1.06rem);line-height:1.7;
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
.bfeat__meta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-block-start:22px}
.bfeat__read{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:0.9rem;color:var(--gold-text)}
.bfeat__read svg{inline-size:16px;block-size:16px}
.bfeat .bcard__more{margin-block-start:0;padding-block-start:0}
.bfeat:hover .bcard__more svg{transform:translateX(5px)}
[dir="rtl"] .bfeat:hover .bcard__more svg{transform:scaleX(-1) translateX(5px)}
@media (max-width:1240px){
.bgrid > .bcard{
flex-basis:calc((100% - 2 * var(--bg-gap)) / 3);
max-inline-size:calc((100% - 2 * var(--bg-gap)) / 3);
}
}
@media (max-width:900px){
.bgrid > .bcard,.art-related-sec .bgrid > .bcard{
flex-basis:calc((100% - var(--bg-gap)) / 2);
max-inline-size:calc((100% - var(--bg-gap)) / 2);
}
}
@media (max-width:900px){
.bfeat{grid-template-columns:minmax(0,1fr)}
.bfeat__media{min-block-size:0;aspect-ratio:16 / 9}
.bfeat__media .bcard__img{position:relative}
}
@media (max-width:620px){
.bgrid{--bg-gap:12px}
.bcard__body{padding:12px 12px 14px}
.bcard__title{font-size:0.92rem;line-height:1.35}
.bcard__excerpt{font-size:0.8rem;line-height:1.5;margin-block-start:6px;-webkit-line-clamp:2}
.bcard__more{font-size:0.78rem;padding-block-start:10px}
.bcard__more svg{inline-size:14px;block-size:14px}
.bcard__cat,.bcard__read{font-size:0.64rem;padding:4px 9px;gap:5px}
.bcard__cat{inset-block-start:8px;inset-inline-start:8px;max-inline-size:calc(100% - 16px)}
.bcard__read{inset-block-end:8px;inset-inline-end:8px}
.bcard__read svg{inline-size:12px;block-size:12px}
.bfeat__meta{gap:14px;margin-block-start:16px}
}
@media (prefers-reduced-motion:reduce){
.bcard,.bcard__img,.bcard__title,.bcard__more svg,.bfeat{transition:none !important}
.bcard:hover,.bfeat:hover{transform:none}
.bcard:hover .bcard__img,.bfeat:hover .bcard__img{transform:scale(1.01)}
}
.abt-intro{
display:grid;grid-template-columns:1.15fr 0.85fr;
gap:clamp(22px,3vw,44px);align-items:center;
margin-block-start:clamp(20px,2.4vw,30px);
}
.abt-intro__panel{
position:relative;
padding:clamp(24px,3vw,42px);
border-radius:clamp(20px,2vw,26px);
background:linear-gradient(155deg,oklch(1 0 0 / 0.94),oklch(1 0 0 / 0.72));
box-shadow:
inset  1.5px  1.5px 1px -1px oklch(1 0 0 / 0.95),
inset -1.5px -1.5px 1px -1px oklch(0.55 0.03 258 / 0.16),
0 0 0 1px oklch(0.50 0.03 258 / 0.09),
0 20px 44px -26px oklch(0.30 0.06 262 / 0.32);
}
.abt-intro__panel::before{
content:"";position:absolute;inset-block:clamp(24px,3vw,42px);
inset-inline-start:0;inline-size:3px;border-radius:3px;
background:linear-gradient(var(--crimson),var(--gold));
}
.abt-intro__panel .abt-claim{margin:0}
.abt-intro__panel .abt-lead{margin-block-start:14px}
.abt-figs{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:clamp(12px,1.4vw,18px);
margin-block-start:clamp(28px,3.4vw,44px);
border-block-start:0;
}
.abt-fig{
position:relative;isolation:isolate;overflow:hidden;
padding:clamp(20px,2.4vw,30px) clamp(16px,1.8vw,24px);
border:0;border-radius:clamp(16px,1.6vw,20px);
background:linear-gradient(155deg,oklch(1 0 0 / 0.95),oklch(1 0 0 / 0.76));
box-shadow:
inset  1.5px  1.5px 1px -1px oklch(1 0 0 / 0.95),
inset -1.5px -1.5px 1px -1px oklch(0.55 0.03 258 / 0.16),
0 0 0 1px oklch(0.50 0.03 258 / 0.09),
0 14px 30px -20px oklch(0.30 0.06 262 / 0.28);
transition:transform .4s var(--ease-out-quart),box-shadow .4s var(--ease-out);
}
.abt-fig::after{
content:"";position:absolute;z-index:-1;
inset-block-end:-55%;inset-inline-start:-25%;
inline-size:85%;aspect-ratio:1;border-radius:50%;
background:radial-gradient(closest-side circle,color-mix(in oklab,var(--crimson) 22%,transparent),transparent 70%);
opacity:0;transition:opacity .5s var(--ease-out);
}
.abt-fig:nth-child(even)::after{background:radial-gradient(closest-side circle,color-mix(in oklab,var(--navy) 24%,transparent),transparent 70%)}
.abt-fig:hover{transform:translateY(-6px);box-shadow:0 0 0 1px oklch(0.50 0.03 258 / 0.14),0 30px 52px -26px oklch(0.30 0.06 262 / 0.4)}
.abt-fig:hover::after{opacity:1}
.abt-fig:last-child{border-inline-end:0}
.abt-fig__k{margin-block-start:10px}
.abt-sec--vision{position:relative;isolation:isolate}
.abt-vision__bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:paint}
.abt-vision__bg i{position:absolute;display:block}
.abt-vision__bg i:first-child{
inline-size:62%;aspect-ratio:1.1;inset-block-start:-18%;inset-inline-start:-14%;
background:radial-gradient(closest-side circle,color-mix(in oklab,var(--navy) 13%,transparent),transparent 100%);
}
.abt-vision__bg i:last-child{
inline-size:56%;aspect-ratio:1.15;inset-block-end:-22%;inset-inline-end:-12%;
background:radial-gradient(closest-side circle,color-mix(in oklab,var(--gold) 16%,transparent),transparent 100%);
}
.abt-vm{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(16px,1.8vw,24px);
margin-block-start:clamp(26px,3vw,38px);
}
.abt-vm__card{
position:relative;
padding:clamp(24px,2.8vw,36px);
border:0;border-radius:clamp(18px,1.8vw,24px);
--lg-tint:oklch(1 0 0);
}
.abt-vm__ic{
display:grid;place-items:center;
inline-size:54px;block-size:54px;border-radius:17px;margin-block-end:18px;
color:var(--navy);
background:linear-gradient(150deg,oklch(1 0 0 / 0.9),color-mix(in oklab,var(--navy) 12%,oklch(1 0 0 / 0.6)));
box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.95),0 10px 22px -14px oklch(0.30 0.06 262 / 0.5);
transition:transform .5s var(--ease-out-quart),color .4s var(--ease-out);
}
.abt-vm__ic svg{inline-size:26px;block-size:26px}
.abt-vm__card:hover .abt-vm__ic{transform:translateY(-3px) scale(1.06);color:var(--crimson)}
.abt-vm__card h3{font-size:clamp(1.15rem,1.7vw,1.4rem);color:var(--navy);margin-block-end:10px}
.abt-vm__card p{color:var(--ink-soft);font-size:clamp(0.98rem,1.2vw,1.06rem);line-height:1.8}
.abt-vals{margin-block-start:clamp(24px,3vw,36px)}
.abt-vals__k{
display:block;margin-block-end:14px;
font-size:0.82rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
color:var(--ink-soft);
}
.lang-ar .abt-vals__k{letter-spacing:0;text-transform:none;font-size:0.95rem}
.abt-vals__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,14px)}
.abt-vals__list li{
padding:16px 18px;border-radius:16px;
background:oklch(1 0 0 / 0.6);border:1px solid oklch(1 0 0 / 0.8);
box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.9),0 10px 24px -20px oklch(0.30 0.06 262 / 0.5);
transition:transform .4s var(--ease-out),border-color .4s var(--ease-out),box-shadow .4s var(--ease-out);
}
.abt-vals__list li:hover{
transform:translateY(-4px);
border-color:color-mix(in oklab,var(--primary) 40%,transparent);
box-shadow:0 0 0 4px color-mix(in oklab,var(--primary) 8%,transparent),0 18px 34px -22px oklch(0.30 0.06 262 / 0.5);
}
.abt-vals__list b{display:block;font-size:0.98rem;color:var(--navy)}
.abt-vals__list span{display:block;margin-block-start:4px;font-size:0.88rem;color:var(--ink-soft);line-height:1.55}
.abt-env{
--env-gap:clamp(14px,1.6vw,20px);
display:flex;flex-wrap:wrap;justify-content:center;gap:var(--env-gap);
margin-block-start:clamp(28px,3.4vw,44px);
}
.abt-env__tile{
flex:1 1 calc((100% - 2 * var(--env-gap)) / 3);
max-inline-size:calc((100% - 2 * var(--env-gap)) / 3);
position:relative;isolation:isolate;overflow:hidden;
border-radius:clamp(16px,1.7vw,20px);
background:var(--paper-2);
box-shadow:0 0 0 1px oklch(0.50 0.03 258 / 0.10),0 16px 32px -24px oklch(0.30 0.06 262 / 0.35);
transition:transform .45s var(--ease-out-quart),box-shadow .45s var(--ease-out);
}
.abt-env__tile:hover{
transform:translateY(-6px);
box-shadow:0 0 0 1px color-mix(in oklab,var(--primary) 26%,transparent),
0 0 0 5px color-mix(in oklab,var(--primary) 8%,transparent),
0 30px 54px -28px oklch(0.30 0.06 262 / 0.45);
}
.abt-env__frame{display:block;aspect-ratio:4 / 3;overflow:hidden}
.abt-env__zoom{
position:relative;display:grid;place-items:center;
inline-size:100%;block-size:100%;
color:color-mix(in oklab,var(--primary) 55%,var(--ink-soft));
background:
linear-gradient(150deg,oklch(1 0 0 / 0.7),oklch(1 0 0 / 0.2)),
color-mix(in oklab,var(--primary) 7%,var(--paper-2));
transform:scale(1);
transition:transform 1s var(--ease-out-quart);
}
.abt-env__tile:hover .abt-env__zoom{transform:scale(1.07)}
.abt-env__zoom svg{position:relative;inline-size:34px;block-size:34px;opacity:0.75}
.abt-env__mesh{
position:absolute;inset:0;
background-image:
linear-gradient(color-mix(in oklab,var(--primary) 11%,transparent) 1px,transparent 1px),
linear-gradient(90deg,color-mix(in oklab,var(--primary) 11%,transparent) 1px,transparent 1px);
background-size:28px 28px;
-webkit-mask-image:radial-gradient(70% 70% at 50% 45%,#000,transparent 80%);
mask-image:radial-gradient(70% 70% at 50% 45%,#000,transparent 80%);
}
.abt-env__cap{
position:absolute;z-index:2;inset-inline:10px;inset-block-end:10px;
padding:11px 14px;border-radius:13px;
font-size:0.92rem;font-weight:700;color:var(--navy);line-height:1.35;
background:oklch(1 0 0 / 0.72);border:1px solid oklch(1 0 0 / 0.9);
box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.95),0 10px 24px -16px oklch(0.30 0.06 262 / 0.55);
-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
transition:background .4s var(--ease-out),color .4s var(--ease-out);
}
.abt-env__tile:hover .abt-env__cap{background:oklch(1 0 0 / 0.88);color:var(--primary-hover)}
.abt-roster{margin-block-start:clamp(34px,4vw,52px)}
.abt-roster__k{
display:block;margin-block-end:16px;
font-size:0.82rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
color:var(--ink-soft);
}
.lang-ar .abt-roster__k{letter-spacing:0;text-transform:none;font-size:0.95rem}
@media (max-width:980px){
.abt-intro{grid-template-columns:minmax(0,1fr)}
.abt-intro__visual{max-inline-size:520px}
.abt-vals__list{grid-template-columns:repeat(2,minmax(0,1fr))}
.abt-env__tile{flex-basis:calc((100% - var(--env-gap)) / 2);max-inline-size:calc((100% - var(--env-gap)) / 2)}
}
@media (max-width:760px){
.abt-vm{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
.abt-figs{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.abt-fig{padding:16px 14px}
.abt-vals__list{gap:10px}
.abt-vals__list li{padding:13px 14px}
.abt-env{--env-gap:12px}
.abt-env__cap{inset-inline:7px;inset-block-end:7px;padding:8px 10px;font-size:0.8rem;border-radius:11px}
.abt-vm__card{padding:20px 18px}
.abt-vm__ic{inline-size:46px;block-size:46px;border-radius:15px;margin-block-end:14px}
.abt-vm__ic svg{inline-size:22px;block-size:22px}
.abt-intro__panel{padding:20px 18px}
.abt-intro__panel::before{inset-block:20px}
}
@media (prefers-reduced-motion:reduce){
.abt-fig,.abt-env__tile,.abt-env__zoom,.abt-vm__ic,.abt-vals__list li{transition:none !important}
.abt-fig:hover,.abt-env__tile:hover,.abt-vals__list li:hover{transform:none}
.abt-env__tile:hover .abt-env__zoom{transform:none}
}
.eyebrow,
.tag,
.svc-head__eyebrow,
.dpt-head__eyebrow,
.ctab__eyebrow,
.bkm__eyebrow{display:none}
.section-head:has(> .tag:only-child){display:none}
.abtc{
padding-block:calc(var(--header-h) + clamp(18px,3vh,38px)) clamp(34px,5vw,68px);
background:var(--paper);
}
.abtc__plate{
position:relative;
margin:0;
inline-size:100%;
}
.abtc__img{
display:block;
inline-size:100%;
block-size:auto;
transform:scale(1.03);
transform-origin:50% 85%;
transition:transform 1.6s var(--ease-out);
}
.abtc__plate.in .abtc__img{transform:scale(1)}
.abtc__cap{
display:flex;align-items:center;gap:14px;
margin-block-start:clamp(10px,1.4vw,16px);
padding-block-start:clamp(10px,1.4vw,16px);
border-block-start:1px solid var(--line);
color:var(--ink-soft);
font-size:clamp(0.78rem,1.4vw,0.9rem);
opacity:0;transform:translateY(8px);
transition:opacity .8s var(--ease-out) .3s,transform .8s var(--ease-out) .3s;
}
.abtc__plate.in .abtc__cap{opacity:1;transform:none}
.abtc__cap-name{font-weight:700;color:var(--ink);letter-spacing:0.01em}
.abtc__cap-sep{
flex:1 1 auto;block-size:1px;min-inline-size:20px;
background:var(--line);
}
.abtc__cap-year{
font-family:var(--font-en);
font-weight:700;letter-spacing:0.12em;
font-variant-numeric:tabular-nums;
color:var(--gold-text);
}
.abtc__body{
margin-block-start:clamp(26px,3.6vw,46px);
}
.abtc__mark{display:flex;align-items:center;gap:14px;margin-block-end:18px}
.abtc__dot{
flex:none;inline-size:11px;block-size:11px;border-radius:50%;
background:var(--crimson);
box-shadow:0 0 0 5px var(--paper),0 0 0 6px oklch(0.44 0.19 25 / 0.25);
transform:scale(0);
transition:transform .7s var(--ease-out) .1s;
}
.abtc__mark.in .abtc__dot{transform:scale(1)}
.abtc__rule{
inline-size:0;block-size:1px;background:var(--line);
transition:inline-size 1.1s var(--ease-out) .15s;
}
.abtc__mark.in .abtc__rule{inline-size:min(220px,40vw)}
.abtc__title{
margin:0;
font-size:clamp(2.1rem,5.2vw,3.6rem);
line-height:1.08;
font-weight:800;
letter-spacing:-0.02em;
color:var(--ink);
text-wrap:balance;
}
.lang-ar .abtc__title{letter-spacing:normal;line-height:1.32}
.abtc__lead{
max-inline-size:68ch;
margin-block-start:clamp(14px,1.8vw,22px);
margin-block-end:0;
color:var(--ink-soft);
font-size:clamp(1rem,1.6vw,1.12rem);
line-height:1.75;
}
@media (max-width:560px){
.abtc__cap{gap:10px}
.abtc__cap-name{font-size:0.8rem}
}
@media (prefers-reduced-motion:reduce){
.abtc__img,
.abtc__cap,
.abtc__dot,
.abtc__rule{transition:none}
.abtc__img{transform:none}
.abtc__cap{opacity:1;transform:none}
.abtc__dot{transform:scale(1)}
.abtc__rule{inline-size:min(220px,40vw)}
}
h1,h2,
.slide__content h1,
.svp-hero h1,
.ah-title,
.ctab__title,
.bkm__title,
.abt-claim{text-wrap:balance}
.hero-seal-rail{
position:absolute;
inset-block-start:calc(var(--header-h) + clamp(10px,1.6vh,22px));
inset-inline:0;
margin-inline:auto;
z-index:4;
display:flex;
justify-content:flex-end;
pointer-events:none;
}
.hero-seal{
inline-size:clamp(64px,7.4vw,108px);
block-size:auto;
filter:drop-shadow(0 10px 22px oklch(0.18 0.09 268 / 0.45));
opacity:0;
transform:translateY(-10px) scale(0.94);
animation:hero-seal-in .8s var(--ease-out) .5s forwards;
}
@keyframes hero-seal-in{
to{opacity:1;transform:none}
}
@media (max-width:720px){
.hero-seal{inline-size:clamp(54px,13vw,72px)}
.hero-seal-rail{inset-block-start:calc(var(--header-h) + 6px)}
}
@media (prefers-reduced-motion:reduce){
.hero-seal{animation:none;opacity:1;transform:none}
}
@media (min-width:901px){
.about-hero--pepsi .ah-inner{
display:grid;
grid-template-columns:auto auto;
align-items:center;
column-gap:clamp(20px,2.6vw,48px);
min-block-size:0;
grid-template-columns:max-content 360px;
justify-content:center;
direction:rtl;
}
.lang-en .about-hero--pepsi .ah-card,
.lang-en .about-hero--pepsi .ah-stage{direction:ltr}
.about-hero--pepsi .ah-card{justify-self:auto}
.about-hero--pepsi .ah-stage{
position:relative;
inset:auto;
display:block;
align-self:center;
min-block-size:0;
block-size:clamp(300px,30vw,460px);
aspect-ratio:1.58;
padding:0;
}
.about-hero--pepsi .ah-3d{
position:absolute;inset:0;
inline-size:auto;block-size:auto;
}
.about-hero--pepsi .ah-frame,
.about-hero--pepsi .ah-building-wrap{inline-size:100%;block-size:100%}
.about-hero--pepsi .ah-building{
inline-size:100%;block-size:100%;
object-fit:contain;
}
}
#departments{padding-block-start:clamp(28px,3.4vw,52px)}
.ah-card .ah-cta__primary{white-space:nowrap}
.ah-card .ah-cta__primary svg{
inline-size:18px;block-size:18px;
flex:none;
}
[dir="rtl"] .ah-card .ah-cta__primary svg{transform:scaleX(-1)}
@media (max-width:560px){
.ah-card .ah-cta__primary{
inline-size:auto;
padding-inline:22px;
font-size:0.88rem;
}
}
.bkm__wa{
display:inline-flex;align-items:center;gap:8px;
padding:10px 15px;border-radius:12px;
font-size:0.85rem;font-weight:700;text-decoration:none;
color:#fff;
background:linear-gradient(148deg,var(--wa-1) 0%,var(--wa-2) 55%,var(--wa-3) 100%);
box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.22),0 8px 20px -10px oklch(0.39 0.098 155 / 0.7);
white-space:nowrap;
transition:filter .3s var(--ease-out),box-shadow .3s var(--ease-out);
}
.bkm__wa:hover{
filter:brightness(1.06);
box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.28),0 10px 24px -10px oklch(0.39 0.098 155 / 0.85);
}
.bkm__wa svg{inline-size:16px;block-size:16px;flex:none}
.bkm__wa:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
@media (max-width:560px){
.bkm__wa{padding:9px 12px;font-size:0.8rem}
.bkm__wa svg{inline-size:15px;block-size:15px}
}
.bk-chosen{
display:flex;align-items:center;gap:10px;
margin:0 0 clamp(14px,2vw,22px);
padding:10px 14px;
border-radius:12px;
background:color-mix(in oklab,var(--primary) 8%,transparent);
box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--primary) 22%,transparent);
font-size:0.9rem;
}
.bk-chosen__k{
font-size:0.72rem;font-weight:700;
letter-spacing:0.08em;text-transform:uppercase;
color:var(--ink-soft);
flex:none;
}
.lang-ar .bk-chosen__k{letter-spacing:normal;text-transform:none;font-size:0.8rem}
.bk-chosen__v{color:var(--navy);font-weight:700}
@media (max-width:900px){
.plogo__sheen{display:none}
.partners__pool,
.ofh__pool,
.ctab__pool,
.svp-orb,
.dp-glow,
.gf-glow{filter:blur(42px)}
}
.ofh,
.dcar-section,
.partners,
.glass-footer{
border-radius:clamp(18px,2.6vw,40px);
margin-inline:min(1cm,4vw);
}
.glass-footer{
margin-block-end:min(1cm,4vw);
}
.glass-footer::before{content:none}
.qact{
position:fixed;
z-index:90;
inset-inline-end:clamp(12px,2vw,22px);
inset-block-end:calc(clamp(12px,2vw,22px) + env(safe-area-inset-bottom,0px));
display:flex;flex-direction:column;gap:10px;
}
.qact__btn{
display:inline-flex;align-items:center;gap:0;
inline-size:52px;block-size:52px;
border-radius:999px;
padding:0;
color:#fff;text-decoration:none;
box-shadow:0 10px 26px -10px oklch(0.2 0.05 260 / 0.55),
inset 0 1px 0 oklch(1 0 0 / 0.25);
overflow:hidden;
transition:inline-size .34s var(--ease-out),gap .34s var(--ease-out),
padding .34s var(--ease-out),filter .3s var(--ease-out);
}
.qact__btn svg{inline-size:24px;block-size:24px;flex:none;margin-inline:14px}
.qact__btn--wa{background:linear-gradient(148deg,var(--wa-1) 0%,var(--wa-2) 55%,var(--wa-3) 100%)}
.qact__btn--tel{background:var(--pepsi-pill)}
.qact__label{
max-inline-size:0;opacity:0;
white-space:nowrap;font-weight:700;font-size:0.88rem;
transition:max-inline-size .34s var(--ease-out),opacity .24s var(--ease-out);
}
@media (hover:hover) and (min-width:700px){
.qact__btn:hover,.qact__btn:focus-visible{
inline-size:auto;padding-inline-end:18px;
filter:brightness(1.05);
}
.qact__btn:hover .qact__label,
.qact__btn:focus-visible .qact__label{max-inline-size:14ch;opacity:1}
}
.qact__btn:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
@media (max-width:560px){
.qact__btn{inline-size:48px;block-size:48px}
.qact__btn svg{inline-size:22px;block-size:22px;margin-inline:13px}
}
body.bkm-open .qact,
body.modal-open .qact,
body.menu-open .qact
{opacity:0;pointer-events:none}
.qact{transition:opacity .25s var(--ease-out)}
@media (prefers-reduced-motion:reduce){
.qact,.qact__btn,.qact__label{transition:none}
}
@media (max-width:900px){
*:not(.site-header,.bkm__panel,.bk-nav,.qv__slab){
-webkit-backdrop-filter:none !important;
backdrop-filter:none !important;
}
}
.abt{content-visibility:auto;contain-intrinsic-size:auto 7400px}
.of-sec{content-visibility:auto;contain-intrinsic-size:auto 6000px}
.blog-section{content-visibility:auto;contain-intrinsic-size:auto 4200px}
.ofh{content-visibility:auto;contain-intrinsic-size:auto 1200px}
.grev{content-visibility:auto;contain-intrinsic-size:auto 1100px}
.dcar-section{content-visibility:auto;contain-intrinsic-size:auto 900px}
.glass-footer{content-visibility:auto;contain-intrinsic-size:auto 900px}
.partners{content-visibility:auto;contain-intrinsic-size:auto 700px}
.nav-item{position:relative;display:flex;align-items:center;gap:2px}
.nav-caret{
display:grid;place-items:center;
inline-size:20px;block-size:20px;border-radius:7px;
color:inherit;opacity:0.6;cursor:pointer;
transition:opacity .3s var(--ease-out),rotate .4s var(--ease-out-quart),
background .3s var(--ease-out);
}
.nav-caret svg{inline-size:12px;block-size:12px}
.nav-caret--void{pointer-events:none}
.nav-item:hover .nav-caret,.nav-caret:focus-visible{opacity:1}
.nav-caret:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.nav-item.is-open .nav-caret{opacity:1;rotate:180deg;background:oklch(1 0 0 / 0.14)}
.site-header[data-state="scrolled"] .nav-item.is-open .nav-caret{background:oklch(0.34 0.16 268 / 0.10)}
.nav-item.is-open .nav-link::after{transform:scaleX(1)}
.navp{
position:absolute;inset-block-start:calc(100% + 10px);
left:50%;translate:calc(-50% + var(--navp-x,0px)) 0;
z-index:60;
inline-size:max-content;max-inline-size:min(92vw,480px);
padding-block-start:10px;
}
.navp--wide{max-inline-size:min(94vw,860px)}
.navp[hidden]{display:none}
.navp__slab{
position:relative;
display:grid;gap:clamp(14px,1.4vw,22px);
padding:clamp(16px,1.5vw,24px);
border-radius:22px;
background:linear-gradient(148deg,
oklch(1 0 0 / 0.80) 0%,oklch(0.995 0.003 250 / 0.74) 52%,oklch(0.98 0.006 250 / 0.72) 100%);
-webkit-backdrop-filter:blur(30px) saturate(1.35) brightness(1.55);
backdrop-filter:blur(30px) saturate(1.35) brightness(1.55);
color:var(--ink);
transform-origin:top center;
opacity:0;translate:0 -8px;scale:0.985;
transition:opacity .26s var(--ease-out),translate .38s var(--ease-out-quart),
scale .38s var(--ease-out-quart);
}
.navp--wide .navp__slab{grid-template-columns:1fr auto;align-items:start}
.nav-item.is-open .navp__slab{opacity:1;translate:0 0;scale:1}
.navp__grip{
position:absolute;inset-block-start:0;inset-inline:18%;
block-size:1px;border-radius:2px;pointer-events:none;
background:linear-gradient(90deg,transparent,oklch(1 0 0 / 0.95),transparent);
}
.navp__cols{display:grid;gap:clamp(12px,1.2vw,20px)}
.navp--wide .navp__cols{grid-template-columns:repeat(2,minmax(200px,1fr))}
.navp__col{min-inline-size:0}
.navp__ct{
font-size:0.7rem;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;
color:color-mix(in oklab,var(--navy) 55%,transparent);
padding-inline:10px;margin-block-end:6px;
}
.lang-ar .navp__ct{letter-spacing:0;text-transform:none;font-size:0.76rem}
.navp__list{display:grid;gap:1px}
.navp-i{
--navp-acc:var(--navy);
position:relative;display:flex;align-items:center;gap:11px;
padding:9px 10px;border-radius:13px;
color:var(--ink);text-decoration:none;
transition:color .28s var(--ease-out);
}
.navp-i::before{
content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
background:linear-gradient(to var(--navp-dir,right),
color-mix(in oklab,var(--navp-acc) 18%,transparent),
color-mix(in oklab,var(--navp-acc) 6%,transparent));
opacity:0;transform:scaleX(0.86);transform-origin:var(--u-origin,left);
transition:opacity .3s var(--ease-out),transform .42s var(--ease-out-quart);
}
[dir="rtl"] .navp-i{--navp-dir:left}
.navp-i:hover::before,.navp-i:focus-visible::before{opacity:1;transform:scaleX(1)}
.navp-i:hover,.navp-i:focus-visible{color:var(--navp-acc)}
.navp-i:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.navp-i__ic{
display:grid;place-items:center;flex:none;
inline-size:34px;block-size:34px;border-radius:11px;
color:var(--navp-acc);
background:color-mix(in oklab,var(--navp-acc) 9%,transparent);
box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--navp-acc) 16%,transparent);
transition:background .3s var(--ease-out),scale .4s var(--ease-out-quart);
}
.navp-i__ic svg{inline-size:17px;block-size:17px}
.navp-i:hover .navp-i__ic{background:color-mix(in oklab,var(--navp-acc) 16%,transparent);scale:1.06}
.navp-i__b{display:grid;min-inline-size:0}
.navp-i__t{font-size:0.92rem;font-weight:700;line-height:1.35}
.navp-i__m{
font-size:0.76rem;font-weight:500;line-height:1.35;
color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.navp-i__go{
margin-inline-start:auto;flex:none;display:grid;place-items:center;
inline-size:16px;block-size:16px;color:var(--navp-acc);
opacity:0;translate:-5px 0;
transition:opacity .3s var(--ease-out),translate .4s var(--ease-out-quart);
}
[dir="rtl"] .navp-i__go svg{transform:scaleX(-1)}
.navp-i:hover .navp-i__go,.navp-i:focus-visible .navp-i__go{opacity:1;translate:0 0}
.navp-f{
position:relative;overflow:hidden;isolation:isolate;
display:grid;align-content:start;gap:6px;
padding:16px;border-radius:16px;
min-inline-size:216px;max-inline-size:240px;
color:#fff;text-decoration:none;
background:linear-gradient(155deg,var(--pepsi-1) 0%,var(--pepsi-2) 52%,var(--pepsi-3) 100%);
box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.22),0 14px 30px -18px oklch(0.24 0.10 258 / 0.6);
transition:box-shadow .4s var(--ease-out),translate .4s var(--ease-out-quart);
}
.navp:not(.navp--wide) .navp-f{max-inline-size:none}
.navp-f:hover{translate:0 -2px;box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.3),0 20px 38px -18px oklch(0.24 0.10 258 / 0.7)}
.navp-f:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.navp-f__glow{
position:absolute;inset:-30% -10% auto -10%;z-index:-1;block-size:150%;
background:radial-gradient(closest-side,oklch(0.82 0.14 88 / 0.30),transparent 72%);
translate:0 -22%;transition:translate .55s var(--ease-out-quart);
}
.navp-f:hover .navp-f__glow{translate:0 -6%}
.navp-f__ic{
display:grid;place-items:center;inline-size:32px;block-size:32px;
border-radius:10px;margin-block-end:4px;
background:oklch(1 0 0 / 0.14);box-shadow:inset 0 0 0 1px oklch(1 0 0 / 0.2);
}
.navp-f__ic svg{inline-size:17px;block-size:17px}
.navp-f__t{font-size:0.98rem;font-weight:800;line-height:1.3}
.navp-f__d{font-size:0.78rem;line-height:1.5;color:oklch(1 0 0 / 0.78)}
.navp-f__cta{
display:inline-flex;align-items:center;gap:6px;margin-block-start:8px;
font-size:0.8rem;font-weight:800;color:var(--gold);
}
.navp-f__cta svg{inline-size:14px;block-size:14px;transition:translate .35s var(--ease-out-quart)}
[dir="rtl"] .navp-f__cta svg{transform:scaleX(-1)}
.navp-f:hover .navp-f__cta svg{translate:3px 0}
[dir="rtl"] .navp-f:hover .navp-f__cta svg{translate:-3px 0}
.navp:not(.navp--wide) .navp__slab{grid-template-columns:1fr}
@media (prefers-reduced-motion:reduce){
.navp__slab,.navp-i::before,.navp-i__go,.navp-f,.navp-f__glow,.nav-caret
{transition:none !important}
.navp__slab{translate:none;scale:1}
}
.mm-row{display:flex;align-items:center;gap:6px}
.mm-row .mm-link{flex:1;min-inline-size:0}
.mm-toggle{
flex:none;display:grid;place-items:center;
inline-size:46px;block-size:46px;border-radius:14px;
color:oklch(1 0 0 / 0.7);cursor:pointer;
background:oklch(1 0 0 / 0.06);
box-shadow:inset 0 0 0 1px oklch(1 0 0 / 0.1);
transition:color .3s var(--ease-out),background .3s var(--ease-out),
rotate .4s var(--ease-out-quart);
}
.mm-toggle svg{inline-size:20px;block-size:20px}
.mm-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.mm-item.is-open .mm-toggle{rotate:180deg;color:var(--gold);background:oklch(1 0 0 / 0.12)}
.mm-sub{
display:grid;grid-template-rows:0fr;
transition:grid-template-rows .42s var(--ease-out-quart);
}
.mm-sub[hidden]{display:none}
.mm-item.is-open .mm-sub{grid-template-rows:1fr}
.mm-sub__list{
overflow:hidden;
display:grid;gap:2px;
padding-inline-start:6px;
}
.mm-item.is-open .mm-sub__list{padding-block:6px 12px}
.mm-sub__i{
--navp-acc:var(--gold);
display:flex;align-items:center;gap:11px;
padding:10px 12px;border-radius:13px;
color:oklch(1 0 0 / 0.82);text-decoration:none;
background:oklch(1 0 0 / 0.04);
box-shadow:inset 0 0 0 1px oklch(1 0 0 / 0.07);
transition:background .3s var(--ease-out),color .3s var(--ease-out);
}
.mm-sub__i:hover,.mm-sub__i:focus-visible{color:#fff;background:oklch(1 0 0 / 0.1)}
.mm-sub__i:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.mm-sub__i__ic{
display:grid;place-items:center;flex:none;
inline-size:30px;block-size:30px;border-radius:10px;
color:var(--gold);background:oklch(1 0 0 / 0.07);
}
.mm-sub__i__ic svg{inline-size:16px;block-size:16px}
.mm-sub__i__b{display:grid;min-inline-size:0}
.mm-sub__i__t{font-size:0.92rem;font-weight:700;line-height:1.35}
.mm-sub__i__m{
font-size:0.74rem;line-height:1.35;color:oklch(1 0 0 / 0.55);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mm-sub__i__go{margin-inline-start:auto;flex:none;inline-size:15px;block-size:15px;opacity:0.45}
[dir="rtl"] .mm-sub__i__go svg{transform:scaleX(-1)}
@media (prefers-reduced-motion:reduce){
.mm-sub,.mm-toggle,.mm-sub__i{transition:none !important}
}
.navp__cols{max-block-size:min(66vh,560px);overflow-y:auto;overscroll-behavior:contain}
.navp__cols::-webkit-scrollbar{inline-size:6px}
.navp__cols::-webkit-scrollbar-thumb{
background:color-mix(in oklab,var(--navy) 22%,transparent);border-radius:4px;
}
.navp__cols{scrollbar-width:thin;scrollbar-color:color-mix(in oklab,var(--navy) 22%,transparent) transparent}