/* ═══════════════════════════════════════════════════════════════
   АКАДЕМІК · GATEWAY
   Преміальна прокладка-розподільник за рівнями
   ═══════════════════════════════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%}
body{
  font-family:'Source Sans 3',sans-serif;
  color:#0f172a;background:#f0f4fb;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

:root{
  --az:#2563eb; --cy:#0891b2; --sk:#0ea5e9; --dp:#1e40af;
  --tg:#2AABEE; --tg2:#229ED9;
  --gold:#fbbf24; --gold2:#f59e0b;
  --td:#0f172a; --tm:#334155; --tl:#64748b; --tf:#94a3b8;
}

/* ═══════════════ AMBIENT BACKGROUND ═══════════════ */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-mesh{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 50% at 12% 30%,rgba(37,99,235,.13),transparent 60%),
    radial-gradient(ellipse 50% 60% at 88% 25%,rgba(8,145,178,.11),transparent 55%),
    radial-gradient(ellipse 55% 45% at 50% 92%,rgba(14,165,233,.10),transparent 60%),
    linear-gradient(165deg,#f5f8ff 0%,#e9f0fb 35%,#dfe8f8 65%,#e6edfb 100%);
}
.bg-grid{
  position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(90deg,rgba(37,99,235,.04) 0,rgba(37,99,235,.04) 1px,transparent 1px,transparent 90px),
    repeating-linear-gradient(0deg,rgba(37,99,235,.04) 0,rgba(37,99,235,.04) 1px,transparent 1px,transparent 90px);
  animation:gdrift 25s linear infinite;
}
@keyframes gdrift{to{transform:translate(90px,90px)}}

/* Floating blurry blobs */
.hb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55}
.hb1{width:580px;height:580px;top:-10%;left:-6%;background:radial-gradient(circle,rgba(37,99,235,.22),transparent 70%);animation:hba 22s ease-in-out infinite}
.hb2{width:460px;height:460px;bottom:-4%;right:6%;background:radial-gradient(circle,rgba(8,145,178,.18),transparent 70%);animation:hbb 26s ease-in-out infinite}
.hb3{width:360px;height:360px;top:42%;left:44%;background:radial-gradient(circle,rgba(14,165,233,.14),transparent 70%);animation:hbc 18s ease-in-out infinite}
.hb4{width:300px;height:300px;top:15%;right:24%;background:radial-gradient(circle,rgba(125,211,252,.16),transparent 70%);animation:hba 28s ease-in-out 3s infinite}
@keyframes hba{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(70px,50px) scale(1.12)}66%{transform:translate(-40px,70px) scale(.94)}}
@keyframes hbb{0%,100%{transform:translate(0,0)}33%{transform:translate(-60px,-40px) scale(1.06)}66%{transform:translate(50px,-60px) scale(1.12)}}
@keyframes hbc{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-50px) scale(1.18)}}

/* Diagonal light beams */
.beam{position:absolute;width:2px;background:linear-gradient(to bottom,transparent,rgba(37,99,235,.10),transparent);opacity:0}
.bm1{height:380px;top:5%;left:10%;transform:rotate(22deg);animation:bmf 7s ease-in-out infinite}
.bm2{height:280px;top:55%;left:5%;transform:rotate(-18deg);animation:bmf 9s ease-in-out 2.5s infinite}
.bm3{height:320px;top:8%;right:14%;transform:rotate(30deg);animation:bmf 8s ease-in-out 1s infinite}
.bm4{height:240px;bottom:14%;right:7%;transform:rotate(-25deg);animation:bmf 6s ease-in-out 4s infinite}
@keyframes bmf{0%,100%{opacity:0}25%,75%{opacity:1}}

/* Floating Greek letters */
.gl{
  position:absolute;pointer-events:none;
  font-family:'Cormorant Garamond',serif;
  font-style:italic;font-weight:700;
  color:var(--az);user-select:none;
  animation:glf 14s ease-in-out infinite;
}
.gl1{top:6%;left:5%;font-size:130px;opacity:.07}
.gl2{top:12%;right:7%;font-size:150px;opacity:.06;animation-delay:-3s}
.gl3{bottom:14%;left:8%;font-size:140px;opacity:.07;animation-delay:-6s}
.gl4{bottom:10%;right:6%;font-size:120px;opacity:.06;animation-delay:-9s}
.gl5{top:48%;left:3%;font-size:90px;opacity:.06;animation-delay:-12s}
.gl6{top:46%;right:3%;font-size:100px;opacity:.06;animation-delay:-2s}
.gl7{top:32%;left:42%;font-size:80px;opacity:.05;animation-delay:-7s}
.gl8{bottom:30%;right:38%;font-size:90px;opacity:.05;animation-delay:-4s}
@keyframes glf{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(4deg)}}

/* Geometric SVG decos */
.deco{position:absolute;pointer-events:none;opacity:0}
.deco svg{width:100%;height:100%}
.dc1{width:42px;height:42px;top:18%;left:22%;animation:dflt 10s ease-in-out infinite}
.dc2{width:36px;height:36px;top:70%;left:14%;animation:dflt 12s ease-in-out 1.5s infinite}
.dc3{width:30px;height:30px;top:26%;right:24%;animation:dflt 9s ease-in-out 3s infinite}
.dc4{width:26px;height:26px;bottom:22%;right:30%;animation:dflt 11s ease-in-out 2s infinite}
.dc5{width:32px;height:32px;top:50%;right:12%;animation:dflt 8s ease-in-out .5s infinite}
.dc6{width:36px;height:36px;bottom:30%;left:24%;animation:dflt 10s ease-in-out 4s infinite}
@keyframes dflt{
  0%,100%{opacity:0;transform:translateY(0) rotate(0)}
  15%{opacity:.65}
  50%{opacity:.4;transform:translateY(-28px) rotate(60deg)}
  85%{opacity:.6}
  100%{opacity:0;transform:translateY(6px) rotate(120deg)}
}

/* Sparkle stars */
.spark{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:#fff;
  box-shadow:0 0 8px #fff,0 0 16px rgba(37,99,235,.5);
  opacity:0;animation:spark 4s ease-in-out infinite;
}
.sp1{top:22%;left:28%;animation-delay:0s}
.sp2{top:34%;right:18%;animation-delay:.8s}
.sp3{bottom:30%;left:20%;animation-delay:1.6s}
.sp4{bottom:18%;right:32%;animation-delay:2.4s}
.sp5{top:62%;left:11%;animation-delay:3.2s}
.sp6{top:8%;right:38%;animation-delay:1.2s}
.sp7{top:55%;right:9%;animation-delay:2s}
.sp8{bottom:42%;left:38%;animation-delay:2.8s}
@keyframes spark{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1.4)}}

/* ═══════════════ LAYOUT — mobile default ═══════════════ */
.gate{
  position:relative;z-index:1;
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:48px 22px;gap:22px;
  max-width:560px;margin:0 auto;
}

/* ═══════════════ DESKTOP — 2-column grid ═══════════════ */
@media(min-width:900px){
  .gate{
    display:grid;
    grid-template-columns:1fr 1.05fr;
    grid-template-rows:auto 1fr;
    grid-template-areas:
      "figure  brand"
      "figure  card";
    column-gap:48px;
    row-gap:18px;
    align-items:center;
    justify-items:center;
    max-width:1120px;
    padding:32px 40px;
    min-height:100vh;
  }
  .hero-figure{grid-area:figure;align-self:center}
  .brand{grid-area:brand;align-self:end;margin-bottom:4px;width:100%;max-width:520px}
  .card{
    grid-area:card;
    align-self:start;
    width:100%;max-width:520px;
    margin:0;
  }
}

/* ═══════════════ BRAND ═══════════════ */
.brand{text-align:center;animation:enter 1s cubic-bezier(.16,1,.3,1) .1s both}
@keyframes enter{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}

.logo-orb{
  position:relative;
  width:72px;height:72px;
  margin:0 auto 14px;
  background:linear-gradient(135deg,#fff,#eef3fc);
  border:1.5px solid rgba(37,99,235,.18);
  border-radius:50%;
  display:grid;place-items:center;
  box-shadow:0 10px 30px rgba(37,99,235,.2),inset 0 1px 0 rgba(255,255,255,.85);
}
.logo-orb .orb-logo{
  width:46px;height:46px;object-fit:contain;
  position:relative;z-index:2;
  filter:drop-shadow(0 2px 6px rgba(37,99,235,.22));
}
.orb-ring{
  position:absolute;inset:-8px;border-radius:50%;
  border:1.5px solid rgba(37,99,235,.2);
  animation:lspin 22s linear infinite;
}
.orb-ring::before{
  content:'';position:absolute;top:-4px;left:50%;
  width:8px;height:8px;background:var(--az);border-radius:50%;
  box-shadow:0 0 14px var(--az);
  transform:translateX(-50%);
}
.orb-ring::after{
  content:'';position:absolute;bottom:-3px;right:18%;
  width:5px;height:5px;background:var(--cy);border-radius:50%;
  box-shadow:0 0 10px var(--cy);
}
.orb-pulse{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,rgba(37,99,235,.3),transparent 70%);
  animation:lpulse 3s ease-in-out infinite;
}
.orb-orbit{position:absolute;inset:-18px;border-radius:50%;animation:lspin 9s linear infinite reverse}
.orb-orbit span{
  position:absolute;top:0;left:50%;
  width:5px;height:5px;background:var(--sk);
  border-radius:50%;box-shadow:0 0 10px var(--sk);
  transform:translateX(-50%);
}
@keyframes lspin{to{transform:rotate(360deg)}}
@keyframes lpulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.85;transform:scale(1.18)}}

.brand-name{
  font-family:'Cormorant Garamond',serif;
  font-size:48px;font-weight:700;line-height:1;
  letter-spacing:-.6px;
  background:linear-gradient(135deg,var(--td) 0%,var(--az) 60%,var(--cy) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;background-size:200% 200%;
  animation:gsh 6s ease-in-out infinite;
}
@keyframes gsh{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.tagline{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;font-size:17px;
  color:var(--tm);font-weight:500;
  margin-top:6px;
}

.olive{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin-top:8px;opacity:.45;color:var(--az);
}
.ol-line{
  width:60px;height:1px;
  background:linear-gradient(90deg,transparent,var(--az),transparent);
}

/* ═══════════════ DISCOBOLUS — Central figure ═══════════════ */
/* Figure has bigger frame so animations don't escape */
.hero-figure{
  position:relative;
  width:360px;height:360px;
  margin:0 auto;
  display:flex;align-items:center;justify-content:center;
  animation:enter 1.1s cubic-bezier(.16,1,.3,1) .25s both;
}

.hf-glow{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(37,99,235,.18),rgba(8,145,178,.08) 55%,transparent 75%);
  filter:blur(34px);
  animation:hfpulse 4.5s ease-in-out infinite;
}
@keyframes hfpulse{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}50%{opacity:.95;transform:translate(-50%,-50%) scale(1.15)}}

.hf-img{
  position:relative;z-index:2;
  width:220px;height:220px;
  object-fit:cover;
  border-radius:50%;
  border:2.5px solid rgba(37,99,235,.18);
  background:linear-gradient(135deg,#fff,#eef3fc);
  box-shadow:
    0 12px 36px rgba(37,99,235,.16),
    0 0 0 8px rgba(37,99,235,.04);
  filter:brightness(.96) contrast(1.08);
  opacity:.95;
  transition:all .55s cubic-bezier(.16,1,.3,1);
  cursor:pointer;
}
.hero-figure:hover .hf-img{
  opacity:1;
  transform:scale(1.04);
  border-color:rgba(8,145,178,.34);
  box-shadow:
    0 16px 56px rgba(37,99,235,.3),
    0 0 0 12px rgba(37,99,235,.08),
    0 0 70px rgba(125,211,252,.45);
}
.hero-figure:hover .hf-glow{opacity:1;transform:translate(-50%,-50%) scale(1.18)}

.hf-ring{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;
}
.r1{width:258px;height:258px;border:1.5px solid rgba(37,99,235,.2);animation:ring-spin 24s linear infinite}
.r1::before{content:'';position:absolute;top:-5px;left:50%;width:10px;height:10px;background:var(--az);border-radius:50%;box-shadow:0 0 14px var(--az);transform:translateX(-50%)}
.r1::after{content:'';position:absolute;bottom:-3px;left:30%;width:6px;height:6px;background:var(--sk);border-radius:50%;box-shadow:0 0 10px var(--sk)}
.r2{width:298px;height:298px;border:1px dashed rgba(8,145,178,.18);animation:ring-spin 40s linear infinite reverse}
.r2::before{content:'';position:absolute;top:50%;right:-4px;width:7px;height:7px;background:var(--cy);border-radius:50%;box-shadow:0 0 12px var(--cy)}
@keyframes ring-spin{
  from{transform:translate(-50%,-50%) rotate(0)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}

.hf-pulse{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  border-radius:50%;border:1.5px solid rgba(37,99,235,.22);
  width:236px;height:236px;opacity:0;pointer-events:none;
}
.pulse1{animation:pulse-ring 6s ease-out infinite}
@keyframes pulse-ring{0%{width:236px;height:236px;opacity:.45}100%{width:316px;height:316px;opacity:0}}


/* ═══════════════ CHOICE CARD ═══════════════ */
.card{
  position:relative;width:100%;
  padding:48px 30px 36px;
  background:linear-gradient(155deg,#1e3a8a 0%,#1e40af 40%,#0e7490 100%);
  border-radius:28px;
  box-shadow:
    0 30px 80px rgba(30,64,175,.32),
    0 0 0 1px rgba(125,211,252,.14),
    inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;
  animation:enter 1.1s cubic-bezier(.16,1,.3,1) .4s both;
}
.card::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 18% 18%,rgba(125,211,252,.18),transparent 50%),
    radial-gradient(circle at 82% 82%,rgba(8,145,178,.22),transparent 50%);
}
.card::after{
  content:'';position:absolute;top:-30%;right:-25%;
  width:340px;height:340px;
  border:1px solid rgba(255,255,255,.05);
  border-radius:50%;pointer-events:none;
  animation:lspin 30s linear infinite;
}

/* Shimmer sweep */
.card-shimmer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:28px}
.card-shimmer::before{
  content:'';position:absolute;top:0;left:-100%;
  width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),rgba(125,211,252,.08),rgba(255,255,255,.06),transparent);
  transform:skewX(-15deg);
  animation:sweep 6s ease-in-out infinite;
}
@keyframes sweep{0%,100%{left:-100%}50%{left:150%}}

/* Meander borders — simple thin lines */
.card-meander{
  position:absolute;left:24px;right:24px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(125,211,252,.55),transparent);
}
.card-meander-t{top:18px}
.card-meander-b{bottom:18px}

/* Corner laurels */
.laurel{position:absolute;width:56px;height:56px;opacity:.22;pointer-events:none}
.laurel svg{width:100%;height:100%}
.laurel-l{top:30px;left:24px}
.laurel-r{top:30px;right:24px;transform:scaleX(-1)}

/* Floating gold particles inside card */
.g-particle{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 8px var(--gold);
  opacity:0;pointer-events:none;
}
.gp1{top:24%;left:14%;animation:gldf 5s ease-in-out infinite}
.gp2{top:70%;left:8%;animation:gldf 6s ease-in-out 1s infinite}
.gp3{top:32%;right:14%;animation:gldf 5.5s ease-in-out 2s infinite}
.gp4{bottom:22%;right:22%;animation:gldf 4.5s ease-in-out .5s infinite}
@keyframes gldf{
  0%,100%{opacity:0;transform:translateY(0) scale(.5)}
  25%{opacity:.85;transform:translateY(-10px) scale(1.25)}
  75%{opacity:.6;transform:translateY(-22px) scale(1)}
}

.card-head{position:relative;z-index:2;text-align:center;margin-bottom:24px}
.card-head h2{
  font-family:'Cormorant Garamond',serif;
  font-size:30px;font-weight:700;
  color:#fff;line-height:1.15;margin-bottom:8px;
  text-shadow:0 2px 18px rgba(0,0,0,.15);
}
.card-head p{
  font-size:14px;color:rgba(255,255,255,.74);
  font-weight:400;
}
.point-down{
  margin-top:14px;
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  animation:bounce 2s ease-in-out infinite;
}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ═══════════════ CHOICE BUTTONS ═══════════════ */
.choices{
  position:relative;z-index:2;
  display:flex;flex-direction:column;gap:12px;
}

.ch{
  position:relative;
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;
  background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
  text-decoration:none;color:#fff;
  backdrop-filter:blur(10px);
  transition:all .4s cubic-bezier(.16,1,.3,1);
  overflow:hidden;
}
.ch::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(125,211,252,.22),rgba(8,145,178,.18));
  opacity:0;transition:opacity .35s;border-radius:16px;
}
.ch::after{
  content:'';position:absolute;top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
  transition:left .55s;
}
.ch:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.28);
  box-shadow:0 12px 32px rgba(8,145,178,.28);
}
.ch:hover::before{opacity:1}
.ch:hover::after{left:100%}

.ch-icon{
  position:relative;z-index:1;flex-shrink:0;
  width:40px;height:40px;border-radius:11px;
  display:grid;place-items:center;
}
.ch-icon-c{
  background:linear-gradient(135deg,var(--az),var(--cy));
  box-shadow:0 4px 14px rgba(37,99,235,.32);
}
.ch-icon-m{
  background:linear-gradient(135deg,var(--cy),var(--sk));
  box-shadow:0 4px 14px rgba(8,145,178,.32);
}
.ch-icon-p{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  box-shadow:0 4px 14px rgba(251,191,36,.4);
}

.ch-text{
  position:relative;z-index:1;flex:1;
  display:flex;flex-direction:column;gap:2px;min-width:0;
}
.ch-title{
  font-family:'Cormorant Garamond',serif;
  font-size:19px;font-weight:700;line-height:1.2;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.ch-sub{
  font-size:12px;font-weight:400;
  color:rgba(255,255,255,.6);letter-spacing:.2px;
}

/* Paper-plane arrow */
.ch-arr{
  position:relative;z-index:1;flex-shrink:0;
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--cy),var(--sk));
  display:grid;place-items:center;
  box-shadow:0 4px 12px rgba(8,145,178,.4);
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.ch-arr svg{transform:translateX(-1px)} /* visual centering */
.ch:hover .ch-arr{transform:translateX(4px) scale(1.06)}
.ch-gold .ch-arr{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  box-shadow:0 4px 12px rgba(251,191,36,.45);
}

/* Premium PhD tier — golden */
.ch-gold{
  background:linear-gradient(135deg,rgba(251,191,36,.18),rgba(245,158,11,.10));
  border-color:rgba(251,191,36,.36);
}
.ch-gold::before{
  background:linear-gradient(135deg,rgba(251,191,36,.26),rgba(245,158,11,.18));
}
.ch-gold:hover{box-shadow:0 12px 32px rgba(251,191,36,.36)}

/* PhD badge — inline next to title (no longer overlaps anything) */
.ch-badge{
  display:inline-block;
  font-family:'Cormorant Garamond',serif;
  font-size:10px;font-weight:700;letter-spacing:1.4px;
  color:#0c1c3a;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  padding:2px 8px;border-radius:6px;
  text-transform:uppercase;
  line-height:1;vertical-align:1px;
  box-shadow:0 2px 8px rgba(251,191,36,.4);
}

/* ═══════════════ CARD FOOTER (inside the card) ═══════════════ */
.card-foot{
  position:relative;z-index:2;
  margin-top:22px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.12);
  text-align:center;
}
.card-foot-line{
  font-size:13px;color:rgba(255,255,255,.72);
  font-weight:400;
  margin-bottom:14px;
}
.card-foot-line b{color:#fff;font-weight:700;font-family:'Source Sans 3',sans-serif}

.card-trust{
  display:flex;justify-content:center;gap:18px;flex-wrap:wrap;
}
.tb{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:500;
  color:rgba(255,255,255,.65);
}
.tb svg{opacity:.65;stroke:rgba(125,211,252,.85)}

/* ═══════════════ RESPONSIVE — mobile tweaks ═══════════════ */
@media(max-width:899px){
  .hero-figure{
    width:300px;height:300px;
  }
  .hf-img{width:194px;height:194px}
  .r1{width:228px;height:228px}
  .r2{width:262px;height:262px}
  .hf-glow{width:220px;height:220px}
  .hf-pulse{width:208px;height:208px}
  @keyframes pulse-ring{0%{width:208px;height:208px;opacity:.45}100%{width:280px;height:280px;opacity:0}}
}

@media(max-width:520px){
  .gate{padding:36px 16px 32px;gap:16px}
  .logo-orb{width:60px;height:60px}
  .logo-orb i{font-size:30px}
  .brand-name{font-size:40px}
  .tagline{font-size:16px}
  .hero-figure{width:250px;height:250px}
  .hf-img{width:168px;height:168px}
  .r1{width:196px;height:196px}.r2{width:224px;height:224px}
  .hf-glow{width:180px;height:180px}
  .hf-pulse{width:180px;height:180px}
  @keyframes pulse-ring{0%{width:180px;height:180px;opacity:.45}100%{width:240px;height:240px;opacity:0}}
  .card{padding:40px 18px 30px;border-radius:24px}
  .card-meander{left:14px;right:14px}
  .laurel{width:44px;height:44px}
  .laurel-l{top:22px;left:14px}
  .laurel-r{top:22px;right:14px}
  .card-head h2{font-size:24px}
  .card-head p{font-size:13px}
  .ch{padding:12px 14px;gap:10px;border-radius:14px}
  .ch-icon{width:36px;height:36px}
  .ch-title{font-size:16px}
  .ch-sub{font-size:11px}
  .ch-arr{width:30px;height:30px}
  .ch-arr svg{width:15px;height:15px}
  .ch-badge{font-size:9px;padding:2px 6px}
  .card-trust{gap:12px}
  .gl{font-size:78px!important}
}

@media(max-width:380px){
  .ch-sub{display:none}
}

/* ═══ MOBILE — компактніша прокладка ═══ */
@media(max-width:520px){
  .gate{padding:24px 14px 18px;gap:10px;min-height:auto}
  .logo-orb{width:52px;height:52px;margin-bottom:8px}
  .logo-orb .orb-logo{width:38px;height:38px}
  .brand-name{font-size:34px}
  .tagline{font-size:14px;margin-top:2px}
  .olive{margin-top:4px}
  .ol-line{width:42px}
  .hero-figure{width:200px;height:200px;margin:2px auto -4px}
  .hf-img{width:132px;height:132px}
  .r1{width:158px;height:158px}
  .r2{width:178px;height:178px}
  .hf-glow{width:140px;height:140px}
  .hf-pulse{width:140px;height:140px}
  @keyframes pulse-ring{0%{width:140px;height:140px;opacity:.45}100%{width:188px;height:188px;opacity:0}}
  .card{padding:30px 16px 22px;border-radius:20px}
  .card-meander{left:14px;right:14px}
  .laurel{width:38px;height:38px}
  .laurel-l{top:14px;left:12px}
  .laurel-r{top:14px;right:12px}
  .card-head{margin-bottom:18px}
  .card-head h2{font-size:22px;margin-bottom:4px}
  .card-head p{font-size:12px}
  .point-down{margin-top:10px;width:32px;height:32px}
  .point-down svg{width:18px;height:18px}
  .choices{gap:10px}
  .ch{padding:11px 12px;gap:9px;border-radius:13px}
  .ch-icon{width:34px;height:34px;border-radius:9px}
  .ch-icon svg{width:18px;height:18px}
  .ch-title{font-size:14.5px;gap:6px}
  .ch-sub{display:none}
  .ch-arr{width:28px;height:28px}
  .ch-arr svg{width:13px;height:13px}
  .ch-badge{font-size:8.5px;padding:1px 5px;letter-spacing:1px}
  .card-foot{margin-top:14px;padding-top:12px}
  .card-foot-line{font-size:11.5px;margin-bottom:8px}
  .card-trust{gap:10px}
  .tb{font-size:10.5px}
}