/* Gateway refinement — layered on the existing ocean presentation, without changing media. */
:root{--premium-line:rgba(237,251,250,.32);--premium-glow:rgba(217,250,241,.16)}
body{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
.page{width:min(1240px,100%);padding-inline:clamp(16px,3vw,42px)}
.header{padding-top:clamp(25px,3.5vw,46px)}
.logo{width:clamp(220px,24vw,278px);height:66px;transition:filter .3s ease,transform .3s ease}
.header a:hover .logo{transform:translateY(-2px);filter:drop-shadow(0 5px 18px rgba(197,245,239,.28))}
.gateway{padding-top:clamp(24px,3.5vw,46px);gap:clamp(30px,3vw,42px)}
.intro{text-wrap:balance}
h1{font-size:clamp(43px,5.4vw,74px);letter-spacing:-.055em;font-weight:480;line-height:1.09;text-shadow:0 3px 20px rgba(0,21,32,.5)}
h1 em{font-style:italic;letter-spacing:-.048em;color:#e0f5ed}
.selector{padding:clamp(16px,2.6vw,30px);border-radius:30px;background:linear-gradient(150deg,rgba(9,35,48,.22),rgba(9,35,48,.10));border:1px solid rgba(244,255,253,.4);backdrop-filter:blur(11px) saturate(120%);-webkit-backdrop-filter:blur(11px) saturate(120%);box-shadow:0 25px 85px rgba(0,20,30,.17),inset 0 1px rgba(255,255,255,.17)}
.language-grid{gap:clamp(12px,1.45vw,18px);perspective:none}
.language-card,.language-card[data-language="en"]{min-height:190px;padding:23px 23px 20px;border-radius:21px;border:1px solid rgba(228,250,247,.28);background:linear-gradient(145deg,rgba(13,46,60,.66),rgba(8,33,48,.53));box-shadow:0 8px 28px rgba(0,17,29,.095),inset 0 1px 0 rgba(255,255,255,.11);transition:transform .32s cubic-bezier(.2,.8,.2,1),border-color .3s ease,background .3s ease,box-shadow .3s ease;will-change:auto}
.language-card::before{z-index:-1;background:radial-gradient(ellipse at 15% 0%,rgba(224,255,247,.14),transparent 70%)}
.language-card::after{width:24%;background:linear-gradient(90deg,transparent,rgba(252,255,254,.12),transparent)}
.card-heading{margin-bottom:16px;grid-template-columns:32px minmax(0,1fr) auto;column-gap:11px}
.card-heading img{width:32px;height:23px;object-fit:cover;border-radius:4px;border:1px solid rgba(255,255,255,.19)}
.card-heading .native{font-size:clamp(19px,1.8vw,22px);font-weight:570;letter-spacing:-.5px}
.card-heading .recommended-badge{font-size:9px;font-weight:650;letter-spacing:.05em;background:rgba(204,242,228,.15);border-color:rgba(226,255,243,.49);color:#edfff7;padding:5px 8px}
.language-card>.localized-description{font-size:12.5px;line-height:1.65;letter-spacing:.005em;color:rgba(247,255,254,.91);margin-bottom:18px}
.language-card>.domain{font-size:11px;letter-spacing:.055em;text-transform:lowercase;color:#d9f1e8;border-top-color:rgba(245,255,251,.19);padding-top:12px}
.language-card>.domain::after{content:"↗";float:right;font-size:16px;font-weight:400;line-height:1;color:rgba(231,255,244,.77);transition:transform .3s ease,color .3s ease}
.language-card.recommended{background:linear-gradient(140deg,rgba(37,84,86,.68),rgba(12,51,63,.55));border-color:rgba(229,255,241,.78);box-shadow:inset 0 1px rgba(255,255,255,.16),0 0 26px rgba(187,247,223,.12)}
@media(hover:hover) and (pointer:fine){.language-card:hover{transform:translateY(-5px);background:linear-gradient(140deg,rgba(32,76,86,.79),rgba(12,47,64,.72));border-color:rgba(235,255,247,.83);box-shadow:0 20px 48px rgba(0,20,31,.25),0 0 25px rgba(214,255,244,.12)}.language-card:hover>.domain::after{transform:translate(3px,-3px);color:#fff}}
.language-card:focus-visible{transform:translateY(-3px);border-color:#fff;outline-offset:3px;background:rgba(30,78,88,.82)}
.recommendation-slot{width:min(940px,100%);margin-top:24px;min-height:0}
.recommendation-popup{gap:22px;padding:25px 29px;border-radius:24px;border-color:rgba(231,255,245,.56);background:linear-gradient(125deg,rgba(24,65,75,.82),rgba(7,37,54,.78));backdrop-filter:blur(18px) saturate(115%);-webkit-backdrop-filter:blur(18px) saturate(115%);box-shadow:0 24px 65px rgba(0,18,27,.28),inset 0 1px rgba(255,255,255,.18)}
.popup-eyebrow{font-size:10px;letter-spacing:.14em;color:#d0f3e4}
.recommendation-popup h2{font-weight:570;font-size:clamp(18px,2.2vw,23px);letter-spacing:-.035em;margin-bottom:7px}
.popup-description{font-size:13px;margin-bottom:8px;color:#e6f3f1}
.popup-domain{font-size:12px;letter-spacing:.05em}
.popup-button{position:relative;overflow:hidden;min-width:165px;min-height:49px;font-size:13px;letter-spacing:.01em;background:#e4f6ec;border-color:rgba(255,255,255,.6);box-shadow:0 9px 25px rgba(0,20,25,.22);transition:transform .28s ease,box-shadow .28s ease,background .28s ease}
.popup-button::after{content:'↗';margin-left:13px;font-size:17px;font-weight:400;line-height:1}
.popup-button:hover{background:#f3fff7;transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,20,25,.27),0 0 25px rgba(233,255,244,.18)}
footer{max-width:none;font-size:11px;color:rgba(255,255,255,.94);letter-spacing:.012em;margin-top:24px;text-shadow:0 2px 8px rgba(0,14,22,.75)}
.footer-actions{gap:20px}
.footer-actions button,.footer-actions summary{transition:color .2s ease,opacity .2s ease}
.footer-actions button:hover,.footer-actions summary:hover{color:#d6ffed}
@media(max-width:1000px){.language-card[data-language="en"]{min-height:157px}}
@media(max-width:760px){.gateway{padding-top:24px;gap:27px}.selector{padding:17px;border-radius:25px}.language-grid{gap:12px}.language-card,.language-card[data-language="en"]{padding:19px 20px;min-height:154px;border-radius:19px}.card-heading{margin-bottom:12px}.card-heading .native{font-size:21px}.language-card>.localized-description{font-size:13px;line-height:1.48;margin-bottom:13px}.language-card>.domain{padding-top:10px}.recommendation-popup{padding:23px}.recommendation-popup h2{font-size:19px}}
@media(max-width:600px){.header{padding-top:25px}.logo{width:222px;height:55px}h1{font-size:clamp(37px,9vw,48px);letter-spacing:-.05em}.selector{padding:13px}.language-card,.language-card[data-language="en"]{min-height:148px;padding:19px}.recommendation-slot{margin-top:18px}.popup-button{width:100%}footer{font-size:clamp(9px,2.35vw,11px);gap:6px;padding:13px 0 18px}.footer-actions{gap:12px}}
@media(max-width:380px){.card-heading{grid-template-columns:27px minmax(0,1fr) auto;gap:7px}.card-heading img{width:27px;height:19px}.card-heading .native{font-size:19px}.card-heading .recommended-badge{font-size:8px;padding:4px 6px}.language-card,.language-card[data-language="en"]{padding:17px}.footer-actions{gap:8px}}
@media(prefers-reduced-motion:reduce){.language-card,.language-card:focus-visible,.language-card:hover,.popup-button:hover{transform:none!important}.language-card::after{display:none}}