/* ==========================================================
   SEA LICENSING — SEAFARERS PREMIUM HUB V1
   Fully isolated .sfw namespace
   ========================================================== */

.sfw{
  --navy:#072d45;
  --navy2:#104c69;
  --blue:#0d83b7;
  --cyan:#28a8d5;
  --cyan2:#7bd9f2;
  --ink:#102f42;
  --muted:#637d89;
  --line:#d5e7ee;
  --pale:#f2f9fc;

  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      rgba(20,148,197,.026) 25%,
      transparent 25%
    ) 0 0/42px 42px,
    #fff;
}

.sfw-shell{
  width:min(1240px,calc(100% - 48px));
  margin:auto;
}


/* ==========================================================
   HERO
   ========================================================== */

.sfw-hero{
  position:relative;

  min-height:690px;

  display:flex;
  align-items:center;

  overflow:hidden;

  color:#fff;

  background:
    linear-gradient(
      90deg,
      rgba(3,25,40,.96) 0%,
      rgba(5,39,59,.89) 40%,
      rgba(8,50,72,.62) 67%,
      rgba(4,28,43,.42) 100%
    ),
    url('/assets/images/hero-seafarers.jpg')
    center 44% / cover no-repeat;

  isolation:isolate;
}

.sfw-hero::before{
  content:"";

  position:absolute;
  inset:0;

  z-index:-1;

  pointer-events:none;

  background:
    radial-gradient(
      circle at 80% 18%,
      rgba(70,190,229,.18),
      transparent 31%
    ),
    linear-gradient(
      135deg,
      rgba(255,255,255,.028) 0 1px,
      transparent 1px 35px
    );

  background-size:
    auto,
    35px 35px;
}

.sfw-hero-grid{
  width:min(1240px,calc(100% - 48px));

  margin:auto;
  padding:92px 0 78px;

  display:grid;

  grid-template-columns:
    minmax(0,1.08fr)
    minmax(390px,.82fr);

  gap:66px;

  align-items:center;
}

.sfw-kicker{
  display:block;

  margin-bottom:10px;

  color:#70d3ef;

  font-size:9px;
  line-height:1;
  font-weight:850;

  letter-spacing:.17em;
  text-transform:uppercase;
}

.sfw-hero-copy h1{
  max-width:760px;

  margin:0;

  color:#fff;

  font-size:
    clamp(52px,5.8vw,86px);

  line-height:.96;

  letter-spacing:-.052em;
}

.sfw-hero-copy h2{
  max-width:690px;

  margin:21px 0 0;

  color:#fff;

  font-size:
    clamp(23px,2.2vw,34px);

  line-height:1.18;

  letter-spacing:-.026em;
}

.sfw-hero-copy > p{
  max-width:660px;

  margin:18px 0 0;

  color:
    rgba(230,244,249,.78);

  font-size:14px;
  line-height:1.72;
}

.sfw-actions{
  display:flex;
  flex-wrap:wrap;

  gap:11px;

  margin-top:28px;
}

.sfw-btn{
  position:relative;

  min-height:48px;

  padding:0 19px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  border-radius:8px;

  text-decoration:none;

  font-size:10px;
  font-weight:850;

  transition:
    transform .28s cubic-bezier(.22,1,.36,1),
    background .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
}

.sfw-btn.primary{
  color:#fff;

  border:1px solid #1ca0cf;

  background:#1ca0cf;
}

.sfw-btn.primary:hover{
  transform:translateY(-3px);

  background:
    linear-gradient(
      135deg,
      #087eb9,
      #079fd1 52%,
      #16b6dd
    );

  box-shadow:
    0 10px 24px rgba(5,106,158,.24),
    0 0 0 4px rgba(47,188,225,.08);
}

.sfw-btn.ghost{
  color:#fff;

  border:
    1px solid rgba(255,255,255,.27);

  background:
    rgba(255,255,255,.055);
}

.sfw-btn.ghost:hover{
  transform:translateY(-3px);

  background:
    rgba(255,255,255,.12);
}


/* HERO PATHWAYS */

.sfw-paths{
  padding:24px;

  border-radius:18px;

  border:
    1px solid rgba(255,255,255,.15);

  background:
    linear-gradient(
      145deg,
      rgba(7,39,58,.87),
      rgba(5,29,46,.77)
    );

  box-shadow:
    0 26px 65px rgba(0,0,0,.27),
    inset 0 1px 0 rgba(255,255,255,.06);

  backdrop-filter:blur(14px);
}

.sfw-path-head{
  padding:2px 2px 15px;

  border-bottom:
    1px solid rgba(255,255,255,.10);
}

.sfw-path-head span{
  color:#79d4f0;

  font-size:8px;
  font-weight:850;

  letter-spacing:.16em;
  text-transform:uppercase;
}

.sfw-path-head h3{
  margin:6px 0 0;

  color:#fff;

  font-size:22px;
}

.sfw-path-list{
  display:grid;

  gap:7px;

  margin-top:11px;
}

.sfw-path{
  min-height:68px;

  padding:11px 13px;

  display:grid;

  grid-template-columns:
    36px minmax(0,1fr) auto;

  align-items:center;

  gap:11px;

  border-radius:10px;

  border:1px solid transparent;

  background:
    rgba(255,255,255,.045);

  text-decoration:none;

  transition:.22s ease;
}

.sfw-path:hover{
  transform:translateX(4px);

  background:
    linear-gradient(
      110deg,
      rgba(26,103,139,.58),
      rgba(41,137,180,.27)
    );

  border-color:
    rgba(105,206,239,.28);

  box-shadow:
    0 10px 25px
    rgba(0,0,0,.16);
}

.sfw-path-num{
  width:36px;
  height:36px;

  display:grid;
  place-items:center;

  border-radius:50%;

  color:#99e2f6;

  background:
    rgba(47,147,187,.14);

  border:
    1px solid
    rgba(108,207,238,.30);

  font-size:9px;
  font-weight:850;
}

.sfw-path-copy strong{
  display:block;

  color:#fff;

  font-size:12px;
  line-height:1.25;
}

.sfw-path-copy small{
  display:block;

  margin-top:4px;

  color:
    rgba(220,240,247,.64);

  font-size:9px;
  line-height:1.35;
}

.sfw-path-tag{
  padding:5px 7px;

  border-radius:20px;

  color:#8cddf4;

  background:
    rgba(48,163,202,.10);

  border:
    1px solid
    rgba(90,196,231,.18);

  font-size:7px;
  font-weight:850;

  letter-spacing:.08em;
  text-transform:uppercase;
}


/* ==========================================================
   HEADINGS
   ========================================================== */

.sfw-head{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(320px,.75fr);

  gap:55px;

  align-items:center;

  margin-bottom:28px;
}

.sfw-head h2{
  margin:0;

  color:var(--ink);

  font-size:
    clamp(30px,3vw,43px);

  line-height:1.04;

  letter-spacing:-.045em;
}

.sfw-head > p{
  margin:0;

  padding-left:19px;

  border-left:
    2px solid #4bb8dd;

  color:var(--muted);

  font-size:11px;
  line-height:1.7;
}


/* ==========================================================
   SERVICE NAVIGATOR
   ========================================================== */

.sfw-navigator{
  padding:62px 0;

  background:
    radial-gradient(
      circle at 85% 0%,
      rgba(51,181,224,.12),
      transparent 30%
    ),
    #eff8fc;

  border-bottom:
    1px solid #dcebf1;
}

.sfw-nav-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:11px;
}

.sfw-nav-card{
  min-height:165px;

  padding:20px;

  display:flex;
  flex-direction:column;

  border-radius:12px;

  border:
    1px solid #d2e6ee;

  background:#fff;

  text-decoration:none;

  transition:.23s ease;
}

.sfw-nav-card:hover{
  transform:translateY(-4px);

  background:
    linear-gradient(
      145deg,
      #113b54,
      #257397
    );

  border-color:#3984a4;

  box-shadow:
    0 16px 32px
    rgba(10,54,76,.15);
}

.sfw-nav-card > span:first-child{
  color:#168fbd;

  font-size:8px;
  font-weight:850;

  letter-spacing:.11em;
  text-transform:uppercase;
}

.sfw-nav-card strong{
  margin-top:16px;

  color:#15364a;

  font-size:15px;
  line-height:1.25;
}

.sfw-nav-card p{
  margin:7px 0 0;

  color:#6b828d;

  font-size:9.5px;
  line-height:1.52;
}

.sfw-nav-card > span:last-child{
  margin-top:auto;

  padding-top:13px;

  color:#168bb6;

  font-size:9px;
  font-weight:800;
}

.sfw-nav-card:hover *{
  color:#fff !important;
}


/* ==========================================================
   PREPARE DOCUMENTS
   ========================================================== */

.sfw-prepare{
  position:relative;

  padding:78px 0;

  overflow:hidden;

  color:#fff;

  background:
    radial-gradient(
      circle at 85% 10%,
      rgba(57,185,226,.22),
      transparent 27%
    ),
    linear-gradient(
      135deg,
      rgba(255,255,255,.025) 0 1px,
      transparent 1px 34px
    ),
    linear-gradient(
      145deg,
      #072c42,
      #10516f
    );

  background-size:
    auto,
    34px 34px,
    auto;
}

.sfw-prepare .sfw-head h2{
  color:#fff;
}

.sfw-prepare .sfw-head > p{
  color:
    rgba(233,247,251,.86);

  font-size:12px;
}

.sfw-doc-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:9px;
}

.sfw-doc{
  min-height:105px;

  padding:14px;

  border-radius:9px;

  border:
    1px solid
    rgba(119,213,241,.16);

  background:
    rgba(255,255,255,.055);

  transition:.22s ease;
}

.sfw-doc:hover{
  transform:translateY(-3px);

  background:
    linear-gradient(
      135deg,
      rgba(42,142,180,.40),
      rgba(34,105,137,.29)
    );

  border-color:
    rgba(112,217,247,.35);
}

.sfw-doc-num{
  width:29px;
  height:29px;

  display:grid;
  place-items:center;

  border-radius:50%;

  color:#88def5;

  background:
    rgba(50,165,204,.13);

  border:
    1px solid
    rgba(103,205,236,.24);

  font-size:8px;
  font-weight:900;
}

.sfw-doc strong{
  display:block;

  margin-top:11px;

  color:#fff;

  font-size:10.5px;
}

.sfw-doc small{
  display:block;

  margin-top:4px;

  color:
    rgba(225,241,247,.67);

  font-size:8px;
  line-height:1.45;
}


/* ==========================================================
   ROUTE SELECTOR
   ========================================================== */

.sfw-routes{
  padding:78px 0;
}

.sfw-route-layout{
  display:grid;

  grid-template-columns:
    .82fr 1.18fr;

  gap:17px;
}

.sfw-route-buttons{
  display:grid;

  gap:8px;
}

.sfw-route-btn{
  padding:15px;

  text-align:left;

  border-radius:10px;

  border:
    1px solid #d4e7ee;

  background:#fff;

  cursor:pointer;

  transition:.22s ease;
}

.sfw-route-btn span{
  display:block;

  color:#168fbd;

  font-size:8px;
  font-weight:850;

  letter-spacing:.10em;
  text-transform:uppercase;
}

.sfw-route-btn strong{
  display:block;

  margin-top:6px;

  color:#17394b;

  font-size:12px;
}

.sfw-route-btn:hover,
.sfw-route-btn.active{
  transform:translateX(4px);

  color:#fff;

  background:
    linear-gradient(
      135deg,
      #113e57,
      #27799d
    );

  border-color:#428ead;

  box-shadow:
    0 10px 24px
    rgba(12,60,82,.10);
}

.sfw-route-btn:hover *,
.sfw-route-btn.active *{
  color:#fff !important;
}

.sfw-route-panel{
  min-height:390px;

  padding:28px;

  border-radius:14px;

  color:#fff;

  background:
    radial-gradient(
      circle at 85% 5%,
      rgba(66,190,229,.18),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #0a334a,
      #185872
    );

  border:
    1px solid #317997;

  box-shadow:
    0 15px 34px
    rgba(9,51,70,.10);
}

.sfw-route-panel > span{
  color:#83dbf3;

  font-size:8px;
  font-weight:850;

  letter-spacing:.12em;
  text-transform:uppercase;
}

.sfw-route-panel h3{
  margin:6px 0 9px;

  color:#fff;

  font-size:27px;
}

.sfw-route-panel > p{
  margin:0;

  max-width:690px;

  color:
    rgba(229,243,248,.72);

  font-size:10px;
  line-height:1.6;
}

.sfw-route-list{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:8px;

  margin-top:20px;
}

.sfw-route-item{
  min-height:66px;

  padding:11px 12px;

  display:grid;

  grid-template-columns:
    26px 1fr;

  align-items:center;

  gap:9px;

  border-radius:8px;

  background:
    rgba(255,255,255,.06);
}

.sfw-route-item::before{
  content:"✓";

  width:26px;
  height:26px;

  display:grid;
  place-items:center;

  border-radius:50%;

  color:#fff;

  background:#2792b9;

  font-size:8px;
  font-weight:900;
}

.sfw-route-item b{
  color:#eff9fc;

  font-size:9.5px;
  line-height:1.4;
}


/* ==========================================================
   FLAG-STATE PATHWAYS
   ========================================================== */

.sfw-flags{
  padding:76px 0;

  background:
    linear-gradient(
      135deg,
      rgba(21,151,198,.032) 25%,
      transparent 25%
    ) 0 0/40px 40px,
    #f3f9fc;

  border-top:
    1px solid #e0edf2;

  border-bottom:
    1px solid #e0edf2;
}

.sfw-flag-grid{
  display:grid;

  grid-template-columns:
    repeat(5,1fr);

  gap:9px;
}

.sfw-flag{
  min-height:182px;

  padding:17px;

  display:flex;
  flex-direction:column;

  border-radius:11px;

  border:
    1px solid #d3e6ee;

  background:#fff;

  text-decoration:none;

  transition:.22s ease;
}

.sfw-flag:hover{
  transform:translateY(-4px);

  background:
    linear-gradient(
      145deg,
      #123e57,
      #247296
    );

  border-color:#428cab;

  box-shadow:
    0 14px 29px
    rgba(10,55,76,.14);
}

.sfw-flag-top{
  display:flex;
  align-items:center;

  gap:10px;
}

.sfw-flag-img{
  width:42px;
  height:29px;

  object-fit:cover;

  border-radius:4px;

  border:
    1px solid #d7e4e9;
}

.sfw-flag-code{
  width:42px;
  height:29px;

  display:grid;
  place-items:center;

  border-radius:4px;

  color:#178db7;

  background:#e7f6fb;

  font-size:8px;
  font-weight:900;
}

.sfw-flag strong{
  color:#17394b;

  font-size:12px;
}

.sfw-flag p{
  margin:13px 0 0;

  color:#6d838e;

  font-size:8.5px;
  line-height:1.48;
}

.sfw-flag > span{
  margin-top:auto;

  padding-top:13px;

  color:#168bb6;

  font-size:8px;
  font-weight:850;
}

.sfw-flag:hover *{
  color:#fff !important;
}


/* ==========================================================
   PORTAL FEATURE
   ========================================================== */

.sfw-portal{
  padding:82px 0;

  color:#fff;

  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(59,186,226,.22),
      transparent 28%
    ),
    linear-gradient(
      120deg,
      #072b42,
      #0f526f
    );
}

.sfw-portal-grid{
  display:grid;

  grid-template-columns:
    .82fr 1.18fr;

  gap:58px;

  align-items:center;
}

.sfw-portal-copy h2{
  margin:0;

  color:#fff;

  font-size:
    clamp(31px,3.3vw,47px);

  line-height:1.02;

  letter-spacing:-.045em;
}

.sfw-portal-copy > p{
  margin:16px 0 0;

  max-width:520px;

  color:
    rgba(229,244,249,.73);

  font-size:11px;
  line-height:1.7;
}

.sfw-portal-features{
  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:7px;

  margin:22px 0 25px;
}

.sfw-portal-feature{
  padding:10px;

  border-radius:8px;

  color:#edf9fc;

  background:
    rgba(255,255,255,.06);

  border:
    1px solid
    rgba(116,211,240,.12);

  font-size:9px;
}

.sfw-portal-shot{
  padding:10px;

  border-radius:16px;

  border:
    1px solid
    rgba(255,255,255,.17);

  background:
    rgba(255,255,255,.065);

  box-shadow:
    0 28px 65px
    rgba(0,0,0,.25);

  transform:
    perspective(1200px)
    rotateY(-2deg);
}

.sfw-portal-shot img{
  display:block;

  width:100%;

  border-radius:10px;
}


/* ==========================================================
   PORTAL ACTIONS
   ========================================================== */

.sfw-digital{
  padding:68px 0;
}

.sfw-digital-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:11px;
}

.sfw-digital-card{
  min-height:200px;

  padding:22px;

  display:flex;
  flex-direction:column;

  border-radius:12px;

  border:
    1px solid #d3e6ee;

  background:#fff;

  text-decoration:none;

  transition:.22s ease;
}

.sfw-digital-card:nth-child(2){
  background:
    linear-gradient(
      135deg,
      #effaff,
      #d8f2fc
    );

  border-color:#9bd6eb;
}

.sfw-digital-card:nth-child(3){
  color:#fff;

  background:
    linear-gradient(
      145deg,
      #113d56,
      #237295
    );

  border-color:#3d89a8;
}

.sfw-digital-card > span{
  color:#198fba;

  font-size:8px;
  font-weight:850;

  letter-spacing:.12em;
  text-transform:uppercase;
}

.sfw-digital-card:nth-child(3) > span{
  color:#8ee2f6;
}

.sfw-digital-card h3{
  margin:13px 0 0;

  color:#15374a;

  font-size:19px;
}

.sfw-digital-card:nth-child(3) h3{
  color:#fff;
}

.sfw-digital-card p{
  margin:8px 0 0;

  color:#6c828d;

  font-size:9.5px;
  line-height:1.55;
}

.sfw-digital-card:nth-child(3) p{
  color:
    rgba(232,246,250,.74);
}

.sfw-digital-card > b{
  margin-top:auto;

  padding-top:18px;

  color:#168bb6;

  font-size:9px;
}

.sfw-digital-card:nth-child(3) > b{
  color:#8edff5;
}

.sfw-digital-card:hover{
  transform:translateY(-4px);

  box-shadow:
    0 15px 30px
    rgba(10,55,76,.12);
}


/* ==========================================================
   SUPPORT SERVICES
   ========================================================== */

.sfw-support{
  padding:76px 0;

  background:#f3f9fc;
}

.sfw-support-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:11px;
}

.sfw-support-card{
  min-height:210px;

  padding:23px;

  display:flex;
  flex-direction:column;

  border-radius:12px;

  border:
    1px solid #d2e5ed;

  background:#fff;

  text-decoration:none;

  transition:.22s ease;
}

.sfw-support-card:hover{
  transform:translateY(-4px);

  background:
    linear-gradient(
      145deg,
      #113c55,
      #247296
    );

  border-color:#408aa9;
}

.sfw-support-card > span{
  color:#168fbd;

  font-size:8px;
  font-weight:850;

  letter-spacing:.11em;
  text-transform:uppercase;
}

.sfw-support-card h3{
  margin:14px 0 0;

  color:#15364a;

  font-size:19px;
}

.sfw-support-card p{
  margin:8px 0 0;

  color:#6d838e;

  font-size:9.5px;
  line-height:1.56;
}

.sfw-support-card b{
  margin-top:auto;

  padding-top:18px;

  color:#168bb6;

  font-size:9px;
}

.sfw-support-card:hover *{
  color:#fff !important;
}


/* ==========================================================
   FINAL CTA
   ========================================================== */

.sfw-final{
  padding:58px 0;

  color:#fff;

  background:
    radial-gradient(
      circle at 84% 0%,
      rgba(70,194,232,.22),
      transparent 29%
    ),
    linear-gradient(
      120deg,
      #082f47,
      #0d5878
    );
}

.sfw-final-inner{
  display:flex;

  justify-content:space-between;
  align-items:center;

  gap:40px;
}

.sfw-final span{
  color:#74d4ef;

  font-size:8px;
  font-weight:850;

  letter-spacing:.13em;
  text-transform:uppercase;
}

.sfw-final h2{
  margin:6px 0 0;

  color:#fff;

  font-size:29px;

  letter-spacing:-.035em;
}

.sfw-final p{
  margin:7px 0 0;

  color:
    rgba(230,245,250,.72);

  font-size:10px;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:1050px){

  .sfw-hero-grid,
  .sfw-route-layout,
  .sfw-portal-grid{
    grid-template-columns:1fr;
  }

  .sfw-nav-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .sfw-doc-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .sfw-flag-grid{
    grid-template-columns:
      repeat(3,1fr);
  }

}


@media(max-width:760px){

  .sfw-shell,
  .sfw-hero-grid{
    width:min(100% - 28px,1240px);
  }

  .sfw-hero{
    min-height:auto;
  }

  .sfw-hero-grid{
    padding:68px 0 52px;
  }

  .sfw-head{
    grid-template-columns:1fr;

    gap:16px;
  }

  .sfw-route-list{
    grid-template-columns:1fr;
  }

  .sfw-flag-grid,
  .sfw-digital-grid,
  .sfw-support-grid{
    grid-template-columns:1fr;
  }

  .sfw-final-inner{
    display:grid;
  }

}


@media(max-width:560px){

  .sfw-nav-grid,
  .sfw-doc-grid{
    grid-template-columns:1fr;
  }

  .sfw-path{
    grid-template-columns:
      34px minmax(0,1fr);
  }

  .sfw-path-tag{
    display:none;
  }

  .sfw-portal-features{
    grid-template-columns:1fr;
  }

}