/* ============================================================
   Ferryports.com — Desktop 1440 (Figma "Desktop - 3" 1:1)
   ============================================================ */

@font-face{font-family:Gilroy;src:url(assets/fonts/Gilroy-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Gilroy;src:url(assets/fonts/Gilroy-Medium.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Gilroy;src:url(assets/fonts/Gilroy-SemiBold.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Gilroy;src:url(assets/fonts/Gilroy-Bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{--ease-out:cubic-bezier(.16,.8,.24,1)}
html{background:#fff;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  font-family:Gilroy,'Helvetica Neue',Arial,sans-serif;
  color:#000;background:#fff;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{display:block;fill:currentColor}
.sprite{position:absolute;width:0;height:0;overflow:hidden}


@media (max-width:1024px){
/* ============================================================
   RESPONSIVE — mobile (<768px) & tablet (768–1024px)
   Desktop pixel-perfect Figma layout lives in the @media
   (min-width:1025px) block below and is untouched by this.
   ============================================================ */

#viewport{width:100%;margin:0;position:static}
#stage{position:static;width:100%;height:auto;background:#fff}

.h-section{position:static;display:block;width:auto;font-size:26px;line-height:1.2;font-weight:600;text-transform:capitalize;color:#000;text-align:center;margin:0 0 22px}

.btn{position:static;display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 26px;border-radius:100px;background:#000;color:#fff;font-size:15px;line-height:1;font-weight:600;text-transform:capitalize;white-space:nowrap;transition:opacity .2s ease}
.btn:active{opacity:.8}

.circle{position:static;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;color:#1C1B1F;flex:none}

.logo{position:static;display:inline-flex;align-items:flex-end;gap:2px;font-size:22px;line-height:1;font-weight:600;color:#151515}
.logo__tld{position:static;font-size:9px;line-height:1;font-weight:600;padding-bottom:2px}

/* ---- page rhythm ---- */
.services,.h-ports,.ports,.btn--ports,.dest,.news,.partners{padding-left:20px;padding-right:20px}
.services{margin-top:36px}
.h-ports{margin-top:64px}
.ports{margin-top:28px}
.btn--ports{display:flex;width:max-content;margin:28px auto 0}
.dest{margin-top:64px;padding-left:20px;padding-right:0}
.cport{margin-top:0}
.news{margin-top:56px}
.partners{margin-top:56px;margin-bottom:56px}

/* ---- hero ---- */
.hero{position:relative;margin:12px;border-radius:26px;overflow:hidden;background:#D9D9D9;padding:20px 20px 26px;
  display:grid;grid-template-columns:1fr auto;column-gap:12px;row-gap:14px;
  grid-template-areas:"logo lang" "nav nav" "title title" "text text" "btn btn";
  min-height:600px;align-content:start}
.hero__bg{position:absolute;inset:0;z-index:0;background-image:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.88) 55%,rgba(255,255,255,.5) 68%,rgba(255,255,255,.08) 80%,rgba(255,255,255,0) 90%),url(assets/img/hero-ship.jpg);background-position:0 0,center 5%;background-size:100% 100%,auto 178%;background-repeat:no-repeat,no-repeat}
.hero>*:not(.hero__bg){position:relative;z-index:1}
.logo--hero{grid-area:logo;align-self:start}
.lang{grid-area:lang;justify-self:end;align-self:start;display:flex;align-items:center;gap:4px;font-size:12px;font-weight:500;color:rgba(0,0,0,.75)}
.lang__ic{width:11px;height:11px;flex:none}
.hero__nav{grid-area:nav;display:flex;flex-wrap:wrap;gap:10px}
.drop{display:flex;align-items:center;gap:4px;height:auto;padding:8px 14px;border-radius:100px;background:rgba(255,255,255,.55);font-size:14px;font-weight:600;color:rgba(0,0,0,.85)}
.drop__ic{width:11px;height:11px;flex:none}
.hero__title{grid-area:title;width:auto;max-width:540px;margin:6px 0 0;font-size:clamp(30px,7.5vw,42px);line-height:1.08;font-weight:600;text-transform:capitalize;color:#000}
.hero__text{grid-area:text;width:auto;max-width:46ch;font-size:15px;line-height:1.55;font-weight:500;color:rgba(0,0,0,.8)}
.btn--hero{grid-area:btn;justify-self:start;margin-top:6px}

/* ---- services ---- */
.services{display:grid;grid-template-columns:1fr;gap:14px}
.svc{position:static;display:grid;grid-template-columns:54px 1fr auto;column-gap:16px;row-gap:10px;
  grid-template-areas:"ico title arr" "ico link link";
  align-items:start;padding:20px;border-radius:20px;background:rgba(225,231,236,.5)}
.svc__ico{grid-area:ico;position:static;width:48px;height:48px}
.svc__title{grid-area:title;position:static;width:auto;height:auto;font-size:17px;line-height:1.25;font-weight:600;text-transform:capitalize;color:#000}
.svc__link{grid-area:link;position:static;align-self:end;font-size:14px;line-height:1;font-weight:600;text-transform:capitalize;text-decoration:underline;color:rgba(0,0,0,.4)}
.svc__arr{grid-area:arr;position:static;width:13px;height:13px;color:#1C1B1F;opacity:.4}

/* ---- popular ports ---- */
.ports{position:static;display:flex;flex-direction:column}
.ports__line{display:none}
.ports__col{position:static;width:100%}
.ports__col li{height:auto;margin:0;padding:14px 2px;border-bottom:1px solid rgba(0,0,0,.1)}
.ports__col a{display:flex;align-items:center;height:auto}
.ports__pin{flex:none;width:16px;height:20px;margin:0 12px 0 2px;opacity:.3}
.ports__col span{font-size:16px;line-height:1.3}
.dot{flex:none;width:4px;height:4px;border-radius:50%;background:#B5B5B5}

/* ---- popular destination ---- */
.dest{position:static;overflow:visible}
.dest__nav{display:none}
.dest__track{position:static;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-right:20px;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.dcard{position:relative;left:0!important;top:0!important;flex:0 0 78%;width:auto;height:400px;border-radius:20px;scroll-snap-align:start;background-size:cover!important;background-position:center!important}
.dcard--1{background-image:url(assets/img/dest-1.jpg)}
.dcard--2{background-image:url(assets/img/dest-2.jpg);background-color:#F2F2F3}
.dcard--3{background-image:url(assets/img/dest-3.jpg);background-color:#E1E7EC}
.dcard--4{background-image:url(assets/img/dest-4.jpg)}
.dcard__meta{position:static;display:flex;align-items:center;gap:8px;margin:18px 20px 0;top:auto;left:auto!important;font-size:13px;font-weight:600;color:rgba(0,0,0,.45)}
.dcard__title{position:static;width:auto;margin:10px 20px 0;top:auto;left:auto!important;font-size:19px;line-height:1.3}
.dcard__go{position:absolute;left:auto!important;right:16px;top:auto;bottom:16px;width:44px;height:44px}
.dcard__go svg{width:13px;height:13px}

/* ---- choose port ---- */
.cport{position:relative;margin:12px;border-radius:26px;overflow:hidden;background:#EDEFF2;
  padding:24px 20px 28px;display:flex;flex-direction:column;gap:16px}
.cport__mapwrap{position:relative;order:-1;width:calc(100% + 40px);margin:-24px -20px 0;aspect-ratio:4/3;overflow:hidden}
.cport__map{position:absolute;inset:0;left:0;top:0;width:100%;height:100%;background:url(assets/img/chooseport-bg.jpg) center/cover no-repeat}
.cport__panel{display:none}
.cport__title{position:static;font-size:26px;line-height:1.2;font-weight:600;text-transform:capitalize;color:#000}
.field{position:static;display:flex;align-items:center;gap:12px;width:100%;height:60px;padding:0 8px;
  border-radius:100px;background:rgba(255,255,255,.65);border:1px solid rgba(0,0,0,.08)}
.field+.field{margin-top:12px}
.field__ico{position:static;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#F1F1F1;color:#1C1B1F;flex:none}
.field__txt{position:static;font-size:14px;line-height:1.2;font-weight:500;color:#000}
.btn--cport{position:static;width:100%;margin-top:6px}
.bub{position:absolute;transform:translate(-50%,-50%);border-radius:50%;background:rgba(93,177,255,.24);
  display:flex;align-items:center;justify-content:center}
.bub__in{border-radius:50%;background:#5DB1FF;color:#fff;font-weight:600;display:flex;align-items:center;justify-content:center}
.bub--45{left:53.8%;top:38.9%;width:64px;height:64px}
.bub--45 .bub__in{width:50px;height:50px;font-size:18px}
.bub--14{left:47.1%;top:43%;width:38px;height:38px}
.bub--14 .bub__in{width:30px;height:30px;font-size:12px}
.bub--25{left:46.4%;top:32.4%;width:50px;height:50px}
.bub--25 .bub__in{width:40px;height:40px;font-size:15px}
.bub--95{left:61.8%;top:62.2%;width:66px;height:66px}
.bub--95 .bub__in{width:52px;height:52px;font-size:18px}

/* ---- news ---- */
.news{position:static}
.ncard{position:static;width:100%;height:auto}
.ncard__img{position:static;width:100%;height:auto;aspect-ratio:392/253;border-radius:18px;background-size:cover;background-position:center;background-repeat:no-repeat}
.ncard__date{position:static;margin-top:16px;top:auto}
.ncard__h{position:static;width:auto;margin-top:8px;top:auto;font-size:19px;line-height:1.3}
.ncard__more{position:static;display:inline-block;margin-top:10px;top:auto}
.btn--news{position:static;display:flex;width:max-content;margin:8px auto 0}
.news>.ncard{margin-bottom:24px}
.news>.ncard:last-of-type{margin-bottom:0}

/* ---- partners ---- */
.partners{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.partners__title{grid-column:1/-1}
.pcard{position:static;height:104px;border-radius:16px;background:rgba(225,231,236,.5);
  display:flex;align-items:center;justify-content:center;padding:14px;left:auto!important;top:auto!important}
.pcard__logo{width:100%;height:34px;background-size:contain!important;background-position:center!important;background-repeat:no-repeat}

/* ---- footer ---- */
.foot{position:relative;margin:12px;border-radius:26px;background:rgba(225,231,236,.5);
  padding:28px 20px 24px;display:flex;flex-direction:column;gap:22px}
.logo--foot{align-self:start}
.foot__about{position:static;width:auto;font-size:13px;line-height:1.6;font-weight:500;color:rgba(0,0,0,.45)}
.foot__col{position:static;width:auto}
.foot__ch{font-size:15px;line-height:1.2;font-weight:600;color:#000;margin-bottom:10px}
.foot__links a{display:block;font-size:13px;line-height:1.3;font-weight:600;color:rgba(0,0,0,.45);margin-bottom:9px}
.foot__links a:last-child{margin-bottom:0}
.foot__soc{position:static;display:flex;gap:8px}
.soc{position:relative;width:46px;height:44px;border-radius:24px;background:#fff;color:#000;flex:none}
.soc__ic{position:absolute;left:12px;top:11px;width:22px;height:22px}
.soc__fb{position:absolute;left:0;top:0;width:46px;height:44px}
.foot__copy,.foot__legal{position:static;font-size:11px;line-height:1.3;font-weight:500;color:rgba(0,0,0,.45)}

/* ---- tablet refinements ---- */
@media (min-width:600px){
  .services{grid-template-columns:repeat(2,1fr)}
  .partners{grid-template-columns:repeat(4,1fr)}
  .news{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
  .news__title{grid-column:1/-1}
  .news>.ncard{margin-bottom:0}
  .news>.ncard:nth-child(3){grid-column:1/-1;max-width:100%}
  .btn--news{grid-column:1/-1}
}
@media (min-width:768px){
  .services,.h-ports,.ports,.dest,.news,.partners{padding-left:32px;padding-right:32px}
  .dest{padding-right:0}
  .hero,.cport,.foot{margin:16px}
  .hero{padding:28px 32px 34px;min-height:520px}
  .hero__title{font-size:clamp(36px,5.2vw,46px)}
  .hero__bg{background-image:linear-gradient(180deg,rgba(255,255,255,.74) 0%,rgba(255,255,255,.5) 38%,rgba(255,255,255,.16) 64%,rgba(255,255,255,0) 82%),url(assets/img/hero-ship.jpg);background-position:0 0,4% 32%;background-size:100% 100%,210% auto}
  .services{grid-template-columns:repeat(3,1fr)}
  .dcard{flex:0 0 46%;height:440px}
  .cport{flex-direction:row;flex-wrap:wrap;padding:32px}
  .cport__mapwrap{order:2;width:100%;margin:0;aspect-ratio:16/7}
  .cport__title,.field,.field+.field,.btn--cport{width:100%}
  .foot{flex-direction:row;flex-wrap:wrap;padding:36px 32px;column-gap:48px;row-gap:20px}
  .logo--foot{width:100%}
  .foot__about{flex:1 1 320px}
  .foot__col{flex:0 0 auto}
  .foot__soc{flex:1 1 auto;justify-content:flex-end}
  .foot__copy{order:10;flex:0 0 auto}
  .foot__legal{order:11;flex:1 1 auto;text-align:right}
}

} /* end max-width:1024px */

@media (min-width:1025px){
/* ---------- stage ---------- */
#viewport{width:1440px;height:5015px;margin:0 auto;position:relative}
#stage{position:relative;width:1440px;height:5015px;transform-origin:top left;background:#fff}

/* ---------- shared ---------- */
.h-section{position:absolute;font-size:44px;line-height:48.4px;font-weight:600;text-transform:capitalize;color:#000}

.btn{
  position:absolute;display:flex;align-items:center;justify-content:center;
  width:144px;height:56px;border-radius:100px;background:#000;color:#fff;
  font-size:16px;line-height:17.6px;font-weight:600;text-transform:capitalize;
  transition:opacity .2s ease,transform .2s ease;
}
.btn:hover{opacity:.85}
.btn:active{transform:scale(.98)}

.circle{
  position:absolute;display:flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:50%;background:#fff;color:#1C1B1F;
}

.logo{position:absolute;font-size:30.9261px;line-height:36.9px;font-weight:600;color:#151515;white-space:nowrap}
.logo__tld{position:absolute;left:120px;top:28px;font-size:10.9898px;line-height:13.1px;font-weight:600}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:absolute;left:14px;top:14px;width:1413px;height:649px;border-radius:40px;overflow:hidden;background:#D9D9D9}
.hero__bg{position:absolute;inset:0;background:url(assets/img/hero-ship.jpg) 6% 18%/160% auto no-repeat}

.logo--hero{left:106px;top:27px}

.hero__nav{position:absolute;left:596px;top:28px;display:flex;align-items:flex-start;gap:24px}
.drop{display:flex;align-items:center;gap:4px;height:22px;font-size:16px;line-height:22.4px;font-weight:600;color:rgba(0,0,0,.8);text-transform:none;transition:color .2s}
.drop:hover{color:#000}
.drop__ic{width:12px;height:12px;flex:none}

.lang{position:absolute;left:1252px;top:31px;display:flex;align-items:center;gap:4px;height:17px;font-size:12px;line-height:16.8px;font-weight:500;color:rgba(0,0,0,.8);transition:color .2s}
.lang:hover{color:#000}
.lang__ic{width:12px;height:12px;flex:none}

.hero__title{position:absolute;left:106px;top:197px;width:493px;font-size:44px;line-height:48.4px;font-weight:600;text-transform:capitalize;color:#000}
.hero__text{position:absolute;left:106px;top:307px;width:462px;font-size:16px;line-height:22.4px;font-weight:500;color:rgba(0,0,0,.8)}
.btn--hero{left:106px;top:445px}

/* ============================================================
   SERVICES
   ============================================================ */
.services{position:absolute;left:120px;top:801px;width:1200px;height:317px}
.svc{position:absolute;width:392px;height:152px;border-radius:24px;background:rgba(225,231,236,.5);transition:background .2s ease}
.svc:hover{background:rgba(225,231,236,.85)}
.svc:nth-child(1){left:0;top:0}
.svc:nth-child(2){left:404px;top:0}
.svc:nth-child(3){left:808px;top:0}
.svc:nth-child(4){left:0;top:165px}
.svc:nth-child(5){left:404px;top:165px}
.svc:nth-child(6){left:808px;top:165px}

.svc__ico{position:absolute;left:24px;top:23px;display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:#fff;color:#1C1B1F}
.svc__title{position:absolute;left:99px;top:28px;display:flex;align-items:center;width:225px;height:44px;font-size:20.0811px;line-height:22.1px;font-weight:600;text-transform:capitalize;color:#000}
.svc__link{position:absolute;left:99px;top:107px;font-size:16px;line-height:17.6px;font-weight:600;text-transform:capitalize;text-decoration:underline;color:rgba(0,0,0,.4)}
.svc__arr{position:absolute;left:365px;top:18px;width:12px;height:12px;color:#1C1B1F;opacity:.4}

/* ============================================================
   POPULAR PORTS
   ============================================================ */
.h-ports{left:0;top:1244px;width:1440px;text-align:center}
.ports{position:absolute;left:112px;top:1357px;width:1208px;height:363px}
.ports__line{position:absolute;left:0;width:1208px;height:1px;background:#000;opacity:.2}
.ports__col{position:absolute;top:0;width:285px}
.ports__col li{height:27px;margin-bottom:57px}
.ports__col li:last-child{margin-bottom:0}
.ports__col a{display:flex;align-items:center;height:27px}
.ports__pin{flex:none;width:18px;height:22px;margin:0 13px 0 4px;color:#000;opacity:.2}
.ports__col span{font-size:18px;line-height:19.8px;font-weight:600;text-transform:capitalize;color:#000;transition:opacity .2s}
.ports__col a:hover span{opacity:.6}
.btn--ports{left:648px;top:1785px}

/* ============================================================
   POPULAR DESTINATION
   ============================================================ */
.dest{position:absolute;left:0;top:1967px;width:1440px;height:593px;overflow:hidden}
.dest__title{left:120px;top:0}
.dest__nav{position:absolute;left:1233px;top:14px;width:86px;height:24px}
.dest__arrow{position:absolute;top:0;width:24px;height:24px;color:#1C1B1F;transition:opacity .2s}
.dest__arrow:hover{opacity:.55}
.dest__arrow svg{position:absolute;left:2px;top:5px;width:20px;height:14px}
.dest__arrow--prev{left:0;transform:rotate(180deg)}
.dest__arrow--next{left:62px}
.dest__div{position:absolute;left:43px;top:2px;width:2px;height:19px;background:#000;opacity:.1}

.dest__track{position:absolute;left:0;top:86px;width:1440px;height:507px;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.dcard{position:absolute;top:0;width:392px;height:507px;border-radius:24px;overflow:hidden;background-repeat:no-repeat}
.dcard--1{background:url(assets/img/dest-1.jpg) center/cover no-repeat}
.dcard--2{background:url(assets/img/dest-2.jpg) -193.9px 118px/583.5px 389px no-repeat,linear-gradient(to left,#F2F2F3 0%,#F8F6F8 27.8%,#FEFDFD 100%)}
.dcard--3{background:url(assets/img/dest-3.jpg) -133px -7.2px/550.1px 733.9px no-repeat,rgba(225,231,236,.5)}
.dcard--4{background:url(assets/img/dest-4.jpg) center/cover no-repeat}
.dcard__meta{position:absolute;top:38px;display:flex;align-items:center;gap:10px;font-size:14px;line-height:16.8px;font-weight:600;text-transform:capitalize;color:rgba(0,0,0,.4);white-space:nowrap}
.dot{flex:none;width:4px;height:4px;border-radius:50%;background:#B5B5B5}
.dcard__title{position:absolute;top:69px;width:315px;font-size:24px;line-height:28.8px;font-weight:600;text-transform:capitalize;color:#000}
.dcard__go{top:433px;transition:transform .2s ease}
.dcard__go:hover{transform:scale(1.08)}

/* ============================================================
   CHOOSE PORT
   ============================================================ */
.cport{position:absolute;left:14px;top:2686px;width:1413px;height:649px;border-radius:40px;overflow:hidden;background:#D9D9D9}
.cport::after{content:'';position:absolute;inset:0;border:1px solid #C8C8C8;border-radius:40px;pointer-events:none;z-index:5}
.cport__map{position:absolute;left:-1109px;top:-191px;width:3758px;height:1938px;background:url(assets/img/chooseport-bg.jpg) 0 0/100% 100% no-repeat}
.cport__panel{position:absolute;left:15px;top:12px;width:519px;height:501px;border-radius:40px;background:rgba(218,218,218,.2);-webkit-backdrop-filter:blur(112px);backdrop-filter:blur(112px)}

.cport__title{position:absolute;left:106px;top:69px;font-size:31px;line-height:34.1px;font-weight:600;text-transform:capitalize;color:#000}
.field{position:absolute;left:106px;width:337px;height:68px;border-radius:1000px;background:rgba(255,255,255,.5);border:1px solid rgba(0,0,0,.1);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}
.field__ico{position:absolute;left:6px;top:5px;display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;background:#F1F1F1;color:#1C1B1F}
.field__txt{position:absolute;left:74px;top:24px;font-size:16px;line-height:18.8px;font-weight:500;color:#000}
.btn--cport{left:106px;top:403px}

.bub{position:absolute;border-radius:50%;background:rgba(93,177,255,.21)}
.bub__in{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#5DB1FF;color:#fff;font-weight:600;text-transform:capitalize}
.bub--45{left:696px;top:202px;width:101px;height:101px;z-index:1}
.bub--45 .bub__in{left:10px;top:9px;width:82px;height:82px;font-size:31px;line-height:34.1px}
.bub--14{left:636px;top:249px;width:60px;height:60px;z-index:2}
.bub--14 .bub__in{left:6px;top:5px;width:48px;height:48px;font-size:18.2882px;line-height:20.1px}
.bub--25{left:614px;top:168px;width:84px;height:84px;z-index:3}
.bub--25 .bub__in{left:8px;top:7px;width:68px;height:68px;font-size:25.7043px;line-height:28.3px}
.bub--95{left:822px;top:352px;width:103px;height:103px;z-index:4}
.bub--95 .bub__in{left:10px;top:9px;width:83px;height:83px;font-size:31.5275px;line-height:34.7px}

/* ============================================================
   NEWS
   ============================================================ */
.news{position:absolute;left:120px;top:3461px;width:1200px;height:605px}
.news__title{left:0;top:0;width:1200px;text-align:center}
.ncard{position:absolute;top:86px;width:392px;height:399px}
.ncard__img{position:absolute;left:0;top:0;width:392px;height:253px;border-radius:24px;background-position:center;background-size:cover;background-repeat:no-repeat}
.ncard__date{position:absolute;top:277px;font-size:14px;line-height:16.8px;font-weight:600;text-transform:capitalize;color:rgba(0,0,0,.4)}
.ncard__h{position:absolute;top:308px;width:392px;font-size:24px;line-height:28.8px;font-weight:600;text-transform:capitalize;color:#000}
.ncard__more{position:absolute;top:380px;font-size:16px;line-height:19.2px;font-weight:600;text-transform:capitalize;text-decoration:underline;color:rgba(0,0,0,.4);transition:color .2s}
.ncard__more:hover{color:rgba(0,0,0,.7)}
.btn--news{left:528px;top:549px}

/* ============================================================
   PARTNERS
   ============================================================ */
.partners{position:absolute;left:120px;top:4192px;width:1200px;height:398px}
.partners__title{left:0;top:0;width:1200px;text-align:center}
.pcard{position:absolute;display:flex;align-items:center;justify-content:center;width:291px;height:150px;border-radius:24px;background:rgba(225,231,236,.3);transition:background .2s ease}
.pcard:hover{background:rgba(225,231,236,.6)}
.pcard__logo{display:block;width:191px;height:50px;background-position:center;background-size:cover;background-repeat:no-repeat}
.pcard__logo--4{background-size:163.8px 145.6px;background-position:15.64px -70.9px}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{position:absolute;left:14px;top:4716px;width:1412px;height:285px;border-radius:40px;background:rgba(225,231,236,.5)}
.logo--foot{left:120px;top:44px}
.foot__about{position:absolute;left:120px;top:109px;width:494px;font-size:14px;line-height:16.8px;font-weight:500;color:rgba(0,0,0,.4)}
.foot__col{position:absolute;left:750px;top:50px;width:90px}
.foot__ch{font-size:16px;line-height:19.2px;font-weight:600;color:#000;margin-bottom:12px}
.foot__links a{display:block;font-size:14px;line-height:16.8px;font-weight:600;color:rgba(0,0,0,.4);margin-bottom:8px;transition:color .2s}
.foot__links a:last-child{margin-bottom:0}
.foot__links a:hover{color:rgba(0,0,0,.7)}
.foot__soc{position:absolute;left:1052px;top:50px;display:flex;gap:8px}
.soc{position:relative;width:54px;height:52px;border-radius:26px;background:#fff;color:#000;transition:transform .2s ease}
.soc:hover{transform:translateY(-2px)}
.soc__ic{position:absolute;left:15px;top:14px;width:24px;height:24px}
.soc__fb{position:absolute;left:0;top:0;width:54px;height:52px}
.foot__copy{position:absolute;left:120px;top:227px;font-size:12px;line-height:14.4px;font-weight:500;color:rgba(0,0,0,.4)}
.foot__legal{position:absolute;left:1167px;top:227px;font-size:12px;line-height:14.4px;font-weight:500;color:rgba(0,0,0,.4)}

}
/* ---------- focus ---------- */
a:focus-visible,button:focus-visible{outline:2px solid #5DB1FF;outline-offset:3px;border-radius:4px}

/* ============================================================
   ANIMATIONS — scroll reveal, hover micro-interactions, parallax
   Pure CSS + IntersectionObserver, no framework dependency.
   Uses only opacity/transform/box-shadow/background-size so it
   never fights the px-absolute Figma layout or the mobile grid.
   ============================================================ */

/* ---- scroll reveal ---- */
.reveal-up{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal-up.is-visible{opacity:1;transform:translateY(0)}
.reveal-fade{opacity:0;transition:opacity .6s var(--ease-out)}
.reveal-fade.is-visible{opacity:1}
@media (prefers-reduced-motion:reduce){
  .reveal-up,.reveal-fade{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---- hero load-in ---- */
.hero__bg{opacity:0;transition:opacity 1s var(--ease-out) .05s}
.hero__bg.is-in{opacity:1}
.hero-in{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.hero-in.is-in{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  .hero__bg,.hero-in{opacity:1!important;transform:none!important;animation:none!important}
}

/* ---- map bubbles: gentle live pulse ---- */
@keyframes bubble-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(93,177,255,.38)}
  50%{box-shadow:0 0 0 12px rgba(93,177,255,0)}
}
.bub{animation:bubble-pulse 3.2s ease-in-out infinite}
.bub--14{animation-delay:.35s}
.bub--25{animation-delay:.7s}
.bub--95{animation-delay:1.05s}
@media (prefers-reduced-motion:reduce){.bub{animation:none}}

/* ---- pointer-only hover interactions ---- */
@media (hover:hover) and (pointer:fine){
  .logo{transition:opacity .25s ease}
  .logo:hover{opacity:.72}

  .drop,.lang{transition:color .2s ease,transform .25s var(--ease-out)}
  .drop:hover,.lang:hover{transform:translateY(-2px)}

  .btn{transition:opacity .2s ease,transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
  .btn:hover{opacity:1;transform:translateY(-3px) scale(1.015);box-shadow:0 12px 28px rgba(0,0,0,.28)}
  .btn:active{transform:translateY(-1px) scale(.98);box-shadow:0 6px 14px rgba(0,0,0,.22)}

  .circle{transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}

  .svc{transition:background .25s ease,transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
  .svc:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.10)}
  .svc__ico{transition:transform .35s var(--ease-out)}
  .svc:hover .svc__ico{transform:scale(1.08) rotate(-4deg)}
  .svc__arr{transition:transform .3s var(--ease-out),opacity .3s ease}
  .svc:hover .svc__arr{transform:translate(3px,-3px);opacity:.8}

  .ports__pin{transition:transform .3s var(--ease-out),opacity .25s ease}
  .ports__col a:hover .ports__pin{transform:scale(1.18) rotate(-6deg);opacity:.75}
  .ports__col a{transition:transform .25s var(--ease-out)}
  .ports__col a:hover{transform:translateX(4px)}

  .dest__arrow{transition:opacity .2s ease,transform .25s var(--ease-out),background .25s ease}
  .dest__arrow:hover{transform:scale(1.12)}

  .dcard{transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out)}
  .dcard:hover{transform:scale(1.025);box-shadow:0 24px 48px rgba(0,0,0,.2)}
  .dcard__go{transition:transform .3s var(--ease-out)}
  .dcard:hover .dcard__go{transform:scale(1.12)}

  .field{transition:background .25s ease,box-shadow .3s var(--ease-out),transform .25s var(--ease-out)}
  .field:hover,.field:focus-within{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.08)}

  .ncard__img{transition:transform .4s var(--ease-out)}
  .ncard:hover .ncard__img{transform:scale(1.045)}
  .ncard__h{transition:color .25s ease}
  .ncard:hover .ncard__h{color:rgba(0,0,0,.65)}

  .pcard{transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),background .25s ease}
  .pcard:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(0,0,0,.08)}
  .pcard__logo{transition:transform .3s var(--ease-out)}
  .pcard:hover .pcard__logo{transform:scale(1.05)}

  .soc{transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
  .soc:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 10px 22px rgba(0,0,0,.16)}

  .foot__links a{transition:color .2s ease,transform .2s var(--ease-out)}
  .foot__links a:hover{transform:translateX(3px)}
}