/* Main-page composition */
#home.hero,
#services.services { display: none; }

html { scroll-snap-type: none; }


.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  backdrop-filter: blur(10px);
  transition: transform .24s ease;
}

/* Shared card-hover palette: centrally managed and automatically repeated. */
@media (hover: hover) and (pointer: fine) {
  :is(.situation-grid, .service-grid, .shortcuts-grid) > :nth-child(4n + 1):hover,
  .process-list > :nth-child(4n + 1):hover { background: var(--card-hover-1); }
  :is(.situation-grid, .service-grid, .shortcuts-grid) > :nth-child(4n + 2):hover,
  .process-list > :nth-child(4n + 2):hover { background: var(--card-hover-2); }
  :is(.situation-grid, .service-grid, .shortcuts-grid) > :nth-child(4n + 3):hover,
  .process-list > :nth-child(4n + 3):hover { background: var(--card-hover-3); }
  :is(.situation-grid, .service-grid, .shortcuts-grid) > :nth-child(4n + 4):hover,
  .process-list > :nth-child(4n + 4):hover { background: var(--card-hover-4); }

  :is(.situation-grid, .service-grid) > :hover {
    color: #fff;
    transition: background .22s ease, color .22s ease;
  }
  :is(.situation-grid, .service-grid) > :hover p { color: #dbe7f3; }
}
.site-header:not(.is-scrolled) { background: transparent; transition: none; }
.site-header.is-hidden-on-scroll { transform: none; }

.main-hero {
  min-height: 570px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);
  align-items: center;
  gap: clamp(42px, 7vw, 110px);
}
.main-hero-copy { max-width: 650px; }
.main-hero h1 {
  margin: 10px 0 22px;
  font-size: clamp(2.7rem, 5.2vw, 5rem);
  letter-spacing: -.075em;
  line-height: 1.08;
}
.main-hero h1 em { color: var(--blue); font-style: normal; }
.main-hero-copy > p:not(.eyebrow) { max-width: 560px; color: var(--muted); font-size: 1.04rem; line-height: 1.8; }
.main-hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 30px; }
.main-button { display: inline-flex; padding: .86rem 1.15rem; background: #000; color: #fff; font-weight: 800; text-decoration: none; }
.main-button:hover { background: var(--blue); }
.main-text-link { color: var(--ink); font-size: .92rem; font-weight: 800; text-decoration: none; }
.main-text-link span { margin-left: 5px; color: var(--blue); }

.service-map { overflow: hidden; border: 1px solid #cdd8e5; background: #f4f8fc; }
.service-map-brand { display: flex; align-items: center; gap: 12px; padding: 24px 28px; border-bottom: 1px solid #d5e0eb; background: #fff; }
.service-map-brand span { display: grid; place-items: center; width: 32px; height: 32px; background: #000; color: #fff; font-weight: 900; }
.service-map-brand b { font-size: 1.2rem; letter-spacing: .08em; }
.service-map-brand small { margin-left: auto; color: #728198; font-size: .59rem; font-weight: 800; letter-spacing: .12em; }
.service-map-list { display: grid; grid-template-columns: 1fr 1fr; }
.service-map-list span { min-height: 126px; display: flex; flex-direction: column; justify-content: end; gap: 7px; padding: 22px 26px; border-right: 1px solid #d5e0eb; border-bottom: 1px solid #d5e0eb; color: #77869a; font-size: .67rem; font-weight: 800; letter-spacing: .1em; }
.service-map-list span:nth-child(2n) { border-right: 0; }
.service-map-list span:nth-last-child(-n+2) { border-bottom: 0; }
.service-map-list b { color: var(--ink); font-size: 1.08rem; letter-spacing: -.045em; }

.situation-guide { padding: 104px 0; background: #f4f7fb; }
.situation-heading { max-width: 570px; margin-bottom: 38px; }
.situation-heading h2 { margin: 8px 0 13px; font-size: clamp(2rem, 3.7vw, 3.3rem); letter-spacing: -.07em; line-height: 1.15; }
.situation-heading > p:not(.eyebrow) { margin: 0; color: var(--muted); }
.situation-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #cbd6e3; border-left: 1px solid #cbd6e3; }
.situation-grid a { min-height: 270px; display: flex; flex-direction: column; padding: 28px 25px; border-right: 1px solid #cbd6e3; border-bottom: 1px solid #cbd6e3; background: #fff; color: var(--ink); text-decoration: none; }
.situation-grid a:hover { background: #000; color: #fff; }
.situation-grid b { color: var(--blue); font-size: .78rem; }
.situation-grid h3 { margin: 48px 0 10px; font-size: 1.17rem; letter-spacing: -.05em; }
.situation-grid p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.65; }
.situation-grid a:hover p { color: #d9e4ef; }
.situation-grid span { margin-top: auto; color: var(--blue); font-size: .8rem; font-weight: 800; }

@media (max-width: 980px) {
  .main-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 76px; padding-bottom: 76px; }
  .service-map { max-width: 570px; width: 100%; }
  .situation-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .main-hero h1 { font-size: 2.55rem; }
  .main-hero-actions { gap: 16px; }
  .service-map-brand { padding: 18px; }
  .service-map-brand small { display: none; }
  .service-map-list span { min-height: 105px; padding: 18px; }
  .situation-guide { padding: 70px 0; }
  .situation-grid { grid-template-columns: 1fr; }
  .situation-grid a { min-height: 215px; }
  .situation-grid h3 { margin-top: 30px; }
}

/* Header navigation */
.mini-header-bar { height: 30px; background: #0d243f; color: #e5edf6; }
.mini-header-bar .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.mini-header-bar span,
.mini-header-bar a,
.mini-header-bar .utility-menu-trigger { color: #e5edf6; font-size: .68rem; font-weight: 700; line-height: 1; text-decoration: none; }
.mini-header-bar div:last-child { display: flex; gap: 16px; }
.mini-header-bar .utility-divider {
  width: 1px;
  height: 11px;
  background: rgba(255, 255, 255, .38);
}
.topbar { display: none; }
.primary-nav { background: #fff; }
.nav-list { min-height: 80px; padding-left: 0; }
.nav-brand { display: flex; align-items: center; width: 178px; margin-right: 58px; padding: 0 !important; }
.nav-brand img { display: block; width: 164px; height: auto; }
.nav-list .home-mark { display: none !important; }
.site-header:not(.is-scrolled) .primary-nav {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(9px);
}

.main-hero.wrap {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  min-height: min(960px, 100vh);
  margin: 0;
  padding: 190px max(24px, calc((100% - 1200px) / 2)) 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0b1d30;
}
.main-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  right: auto;
  width: 100vw;
  background: url("../../../data_recovery.png") center center / cover no-repeat;
  transform: translateX(-50%) scale(1);
}
.main-hero.is-image-animating::after { animation: hero-image-zoom 5.2s linear both; }
.main-hero.is-paused::after { animation-play-state: paused; }
.main-hero[data-slide="1"]::after {
  background-image: url("../../../gunet_main.png");
}
.main-hero[data-slide="2"]::after {
  background-image: url("../../../data_recovery_slide.png");
}
.main-hero[data-slide="3"]::after {
  background-image: url("../../../data_destruction.png");
}
.main-hero[data-slide="4"]::after {
  background-image: url("../../../nas.png");
}
.main-hero[data-slide="5"]::after {
  background-image: url("../../../network.png");
}
.main-hero[data-slide="6"]::after {
  background-image: url("../../../computer.png");
}
.main-hero[data-slide="7"]::after {
  background-image: url("../../../mac.png");
}
.main-hero[data-slide="8"]::after {
  background-image: url("../../../customer_service.png");
}
.main-service-panel,
.service-panel { scroll-snap-align: start; scroll-snap-stop: always; }
.main-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(0deg, rgba(4, 12, 23, .26), rgba(4, 12, 23, .08));
}
.main-hero-copy { position: relative; z-index: 1; isolation: isolate; max-width: 1000px; padding: 38px 40px; color: #fff; text-align: center; }
.main-hero-copy::before { content: ""; position: absolute; z-index: -1; inset: -72px -130px; border-radius: 0; background: radial-gradient(ellipse at 28% 50%, rgba(3, 14, 28, .38) 0%, rgba(3, 14, 28, .2) 52%, rgba(3, 14, 28, 0) 86%); filter: blur(24px); }
.main-hero h1 { max-width: 710px; color: #fff; }
.main-hero-copy h1 { max-width: none; margin-left: auto; margin-right: auto; font-size: clamp(2.8rem, 4.3vw, 4.55rem); }
.main-hero-copy h1,
.main-hero-copy > p,
.main-hero-copy .eyebrow { text-shadow: 0 2px 16px rgba(0, 0, 0, .55); }
.slide-service-title { display: block; margin-bottom: 2px; color: #69adff; font-size: 1.12rem; font-weight: 800; letter-spacing: -.03em; }
.slide-service-description { display: block; max-width: 610px; color: #e3edf6; font-size: .96rem; line-height: 1.55; }
.main-hero h1 em { color: #8fc6ff; }
.main-hero-copy > p:not(.eyebrow) { margin-left: auto; margin-right: auto; color: #e1ebf5; }
.main-hero-copy .eyebrow { color: #69adff; }
.main-hero .main-button { background: #fff; color: #0b1c2f; }
.main-hero .main-button:hover { background: var(--blue); color: #fff; }
.main-hero .main-text-link { color: #fff; }
.main-hero .main-text-link span { color: #69adff; }
.main-hero .service-map { display: none; }
.main-hero-actions { justify-content: center; }
.hero-tags { position: relative; z-index: 1; left: auto; bottom: auto; display: flex; justify-content: center; gap: 9px; margin: 28px 0 24px; transform: none; }
.hero-tags span { padding: .42rem .86rem; border: 1px solid rgba(255,255,255,.68); border-radius: 999px; color: #fff; font-size: .72rem; font-weight: 800; }
.hero-slide-ui { position: absolute; z-index: 1; left: 50%; bottom: 78px; display: flex; align-items: flex-start; justify-content: center; width: min(260px, 60vw); height: 44px; margin: 0; transform: translateX(-50%); }
.hero-progress-percent { position: absolute; top: 0; left: 50%; transform: translateX(-50%); color: #fff; font-size: .72rem; font-weight: 300; letter-spacing: .04em; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.hero-slide-ui div { display: flex; gap: 0; transform: translateY(22px); }
.hero-progress-name { position: absolute; top: 44px; left: 50%; transform: translateX(-50%); color: #fff; font-size: .68rem; font-weight: 400; letter-spacing: .05em; white-space: nowrap; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.hero-play-toggle { position: absolute; z-index: 2; bottom: 81px; display: grid; place-items: center; width: 20px; height: 25px; padding: 2px 0 0; border: 0; border-radius: 0; background: transparent; color: rgba(255,255,255,.9); font: 700 .7rem/1 Arial, sans-serif; text-shadow: 0 1px 7px rgba(0,0,0,.65); cursor: pointer; transition: color .18s ease, transform .18s ease; }
.hero-play-toggle-left { left: calc(50% - 156px); }
.hero-play-toggle-right { left: calc(50% + 136px); }
.hero-play-toggle:hover, .hero-play-toggle:focus-visible { background: transparent; color: #fff; transform: scale(1.12); outline: 0; }
.hero-play-toggle[aria-pressed="true"] { background: transparent; color: #fff; }
.hero-slide-ui div button { position: relative; width: 30px; height: 14px; margin-left: -1px; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.82); border-radius: 0; background: transparent; cursor: pointer; transition: width .2s ease, background .2s ease; }
.hero-slide-ui div button:first-child { margin-left: 0; }
.hero-slide-ui div button::before { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.main-hero.is-timing .hero-slide-ui div button.is-active::before { animation: slide-timer 5.2s linear infinite; }
.main-hero.is-paused .hero-slide-ui div button.is-active::before { animation-play-state: paused; }
.hero-service-index { position: absolute; z-index: 1; bottom: 0; left: 50%; display: grid; grid-template-columns: repeat(4, 1fr); width: min(1180px, calc(100% - 48px)); min-height: 55px; transform: translateX(-50%); overflow: hidden; border-radius: 10px 10px 0 0; background: #fff; }
.hero-service-index b { display: flex; align-items: center; padding: 0 22px; border-right: 1px solid #d9e1ea; color: var(--blue); font-size: .76rem; }
.hero-service-index b:last-child { border-right: 0; }

/* While the landing visual is being refined, keep only the main slide on the page. */
main > :not(.main-hero) { display: none !important; }
main > #situations { display: block !important; }
main > .service-process { display: block !important; }
main > .service-principles { display: block !important; }
main > .service-shortcuts { display: block !important; }
main > .landing-contact { display: block !important; }
main > .privacy-assurance { display: block !important; }

/* First section below the landing slide */
.situation-guide { padding: 116px 0 124px; background: #f3f6fa; }
.situation-heading { max-width: 680px; margin-bottom: 44px; }
.situation-heading h2 { font-size: clamp(2.2rem, 4vw, 3.65rem); }
.situation-grid { background: #fff; box-shadow: 0 16px 36px rgba(17, 39, 69, .08); }
.situation-grid a { min-height: 290px; transition: background .2s ease, color .2s ease; }
.situation-grid a:first-child { border-top: 3px solid var(--blue); }
.situation-grid h3 { margin-top: 54px; }
.situation-grid a.is-active { background: #000; color: #fff; }
.situation-grid a.is-active p { color: #d9e4ef; }
.situation-grid a.is-active b,
.situation-grid a.is-active span { color: #69adff; }

#situations { display: none; }
.service-panel { display: none; }
.main-hero[data-slide="1"] .hero-tags,
.main-hero[data-slide="1"] .main-text-link,
.main-hero[data-slide="1"] .main-button { display: none; }
.main-hero[data-slide="1"] .main-hero-actions { margin-top: 28px; }
.main-hero[data-slide="1"] { justify-content: flex-start; }
.main-hero[data-slide="1"]::before { background: linear-gradient(90deg, rgba(4, 15, 29, .68) 0%, rgba(4, 15, 29, .42) 42%, rgba(4, 15, 29, .08) 72%, transparent 100%); }
.main-hero[data-slide="1"] .main-hero-copy { max-width: 720px; padding: 28px 16px; text-align: left; }
.main-hero[data-slide="1"] .main-hero-copy::before { inset: -72px -130px; background: radial-gradient(ellipse at 28% 50%, rgba(3, 14, 28, .38) 0%, rgba(3, 14, 28, .2) 52%, rgba(3, 14, 28, 0) 86%); }
.main-hero[data-slide="1"] .main-hero-copy h1 { margin-left: 0; font-size: clamp(2.7rem, 3.9vw, 4.15rem); }
.main-hero[data-slide="1"] .main-hero-copy > p:not(.eyebrow) { margin-left: 0; margin-right: 0; }

/* Use the same balanced composition for every service slide. */
.main-hero { justify-content: flex-start; }
.main-hero::before { background: linear-gradient(90deg, rgba(4, 15, 29, .68) 0%, rgba(4, 15, 29, .42) 42%, rgba(4, 15, 29, .08) 72%, transparent 100%); }
.main-hero-copy { position: absolute; top: 29%; left: max(24px, calc((100% - 1200px) / 2)); width: min(820px, calc(100% - 48px)); max-width: none; padding: 28px 16px; text-align: left; }
.main-hero-copy::before { inset: -72px -130px; background: radial-gradient(ellipse at 28% 50%, rgba(3, 14, 28, .38) 0%, rgba(3, 14, 28, .2) 52%, rgba(3, 14, 28, 0) 86%); filter: blur(24px); }
.main-hero-copy h1 { margin-left: 0; font-size: clamp(2.7rem, 3.9vw, 4.15rem); }
.main-hero-copy > p:not(.eyebrow) { margin-left: 0; margin-right: 0; }
.main-hero-copy .eyebrow,
.main-hero-copy h1,
.main-hero-copy > p:not(.eyebrow),
.main-hero-actions { width: fit-content; }
.hero-tags,
.main-hero-actions { justify-content: flex-start; }
.main-hero-copy.is-changing .eyebrow,
.main-hero-copy.is-changing h1,
.main-hero-copy.is-changing p,
.main-hero-copy.is-changing .main-hero-actions { animation: hero-text-in .62s ease both; }
.main-hero-copy.is-changing h1 { animation-delay: .07s; }
.main-hero-copy.is-changing p { animation-delay: .14s; }
.main-hero-copy.is-changing .main-hero-actions { animation-delay: .21s; }
.hero-slide-ui div button.is-active { width: 57px; border-radius: 0; background: transparent; }
.hero-nav-arrow { position: absolute; z-index: 2; top: 50%; display: grid; place-items: center; width: 46px; height: 46px; transform: translateY(-50%); border: 1px solid rgba(255,255,255,.62); border-radius: 50%; background: rgba(5,15,28,.2); color: #fff; font-size: 2.1rem; font-weight: 300; line-height: 1; opacity: .72; cursor: pointer; transition: background .18s ease, opacity .18s ease, transform .18s ease; }
.hero-nav-arrow:hover { transform: translateY(-50%) scale(1.08); background: rgba(0,0,0,.55); opacity: 1; }
.hero-nav-prev { left: 32px; }
.hero-nav-next { right: 32px; }
.hero-scroll-cue { position: absolute; z-index: 2; bottom: 18px; left: 50%; width: 23px; height: 35px; transform: translateX(-50%); border: 2px solid rgba(255,255,255,.9); border-radius: 14px; }
.hero-scroll-cue::after { content: ""; position: absolute; top: 7px; left: 50%; width: 3px; height: 7px; transform: translateX(-50%); border-radius: 4px; background: #fff; animation: scroll-cue 1.5s ease-in-out infinite; }

@keyframes hero-text-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-image-zoom {
  0% { transform: translateX(-50%) scale(1); animation-timing-function: cubic-bezier(.2,.72,.32,1); }
  20% { transform: translateX(-50%) scale(1.025); animation-timing-function: linear; }
  85% { transform: translateX(-50%) scale(1.048); animation-timing-function: cubic-bezier(.58,0,1,.52); }
  100% { transform: translateX(-50%) scale(1.055); }
}
@keyframes slide-timer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes scroll-cue { 0%, 100% { transform: translate(-50%, 0); opacity: 1; } 60% { transform: translate(-50%, 9px); opacity: .2; } }
.service-panel {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background: #0d243f;
}
.service-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .33;
  background: linear-gradient(120deg, #091827 5%, transparent 58%), url("../../../data_recovery.png") center / cover no-repeat;
}
.service-panel::after {
  content: "";
  position: absolute;
  right: -5vw;
  bottom: -17vw;
  width: min(48vw, 700px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 50%;
}
.panel-inner {
  position: relative;
  z-index: 1;
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  padding: 140px 0 80px;
}
.panel-number { margin: 0 0 32px; color: rgba(255,255,255,.65); font-size: .72rem; font-weight: 800; letter-spacing: .14em; }
.service-panel .eyebrow { color: #69adff; }
.service-panel h2 { max-width: 800px; margin: 10px 0 22px; font-size: clamp(2.6rem, 5vw, 5rem); letter-spacing: -.075em; line-height: 1.08; }
.service-panel h2 em { color: #9bcaff; font-style: normal; }
.service-panel .panel-inner > p:not(.eyebrow):not(.panel-number) { max-width: 570px; margin: 0; color: #e0e9f3; font-size: 1.04rem; line-height: 1.8; }
.service-panel a { display: inline-flex; gap: 9px; margin-top: 32px; padding: .82rem 1.08rem; background: #fff; color: #101d2f; font-size: .86rem; font-weight: 800; text-decoration: none; }
.service-panel a:hover { background: #000; color: #fff; }
.panel-destruction { background: #321b20; }
.panel-destruction::before { background: linear-gradient(120deg, rgba(35,8,13,.93), rgba(35,8,13,.5) 54%, rgba(35,8,13,.15)), url("../../../data_recovery.png") center / cover no-repeat; }
.panel-destruction h2 em { color: #ffb8b8; }
.panel-nas { background: #0b2d40; }
.panel-nas::before { background: linear-gradient(120deg, rgba(4,27,43,.94), rgba(4,27,43,.46) 60%, rgba(4,27,43,.1)), url("../../../data_recovery.png") center / cover no-repeat; }
.panel-network { background: #1b1d4a; }
.panel-network::before { background: linear-gradient(120deg, rgba(18,16,61,.94), rgba(18,16,61,.48) 60%, rgba(18,16,61,.1)), url("../../../data_recovery.png") center / cover no-repeat; }
.panel-computer { background: #26323c; }
.panel-computer::before { background: linear-gradient(120deg, rgba(18,28,36,.93), rgba(18,28,36,.45) 60%, rgba(18,28,36,.1)), url("../../../data_recovery.png") center / cover no-repeat; }
.panel-mac { background: #073744; }
.panel-mac::before { background: linear-gradient(120deg, rgba(2,44,53,.94), rgba(2,44,53,.45) 60%, rgba(2,44,53,.1)), url("../../../computer.png") center / cover no-repeat; }
.panel-support { background: #111827; }
.panel-support::before { background: linear-gradient(120deg, rgba(8,13,26,.94), rgba(8,13,26,.5) 60%, rgba(8,13,26,.1)), url("../../../data_recovery.png") center / cover no-repeat; }

@media (max-width: 980px) {
  .main-hero.wrap { min-height: 720px; padding-top: 160px; padding-bottom: 72px; background-position: 62% center; }
  .main-hero-copy { position: relative; top: auto; left: auto; width: auto; max-width: 720px; margin-right: auto; }
  .panel-inner { padding-top: 130px; }
  .nav-brand { margin-right: 24px; }
  .hero-service-index { width: calc(100% - 36px); }
  .hero-nav-arrow { display: none; }
}
@media (max-width: 600px) {
  .site-header { background: #fff; }
  /*
   * Keep every mobile slide on one fixed stage. Longer titles previously
   * increased the hero height, making slides 4, 6 and 7 appear to drop.
   */
  .main-hero.wrap {
    height: 650px;
    min-height: 650px;
    max-height: 650px;
    padding-top: 118px;
    padding-bottom: 92px;
    background-position: 58% center;
  }
  .main-hero::before { background: rgba(5, 18, 34, .7); }
  .main-hero-copy {
    width: 100%;
    padding: 18px 16px;
  }
  .main-hero-copy h1,
  .main-hero[data-slide="1"] .main-hero-copy h1 {
    margin-top: 8px;
    margin-bottom: 15px;
    font-size: clamp(2.1rem, 9vw, 2.45rem);
    line-height: 1.08;
  }
  .main-hero-copy > p:not(.eyebrow) {
    font-size: .92rem;
    line-height: 1.58;
  }
  .slide-service-title { font-size: 1rem; }
  .hero-tags { margin: 18px 0 14px; }
  .main-hero-actions { margin-top: 18px; }
}

/* Landing page: service process */
.service-process { padding: 112px 0 120px; background: #0d243f; color: #fff; }
.process-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .7fr); gap: 32px 80px; align-items: end; margin-bottom: 58px; }
.process-heading .eyebrow { grid-column: 1 / -1; margin: 0; color: #8fc0ff; }
.process-heading h2 { margin: 0; color: #fff; font-size: clamp(2rem, 3vw, 3.25rem); line-height: 1.22; letter-spacing: -.07em; }
.process-heading > p:last-child { margin: 0 0 4px; color: #c6d2e0; font-size: 1rem; line-height: 1.7; }
.process-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.34); border-bottom: 1px solid rgba(255,255,255,.18); }
.process-list li { display: flex; min-height: 190px; flex-direction: column; padding: 27px 26px 24px; border-left: 1px solid rgba(255,255,255,.18); transition: background .2s ease, color .2s ease; }
.process-list li:last-child { border-right: 1px solid rgba(255,255,255,.18); }
.process-list b { color: #69adff; font-size: .76rem; letter-spacing: .08em; transition: color .2s ease; }
.process-list strong { margin-top: auto; color: #fff; font-size: 1.15rem; transition: color .2s ease; }
.process-list span { margin-top: 10px; color: #bdc9d7; font-size: .86rem; line-height: 1.55; transition: color .2s ease; }
.process-list li:hover { background: #0d243f; }
.process-list li:hover b { color: #69adff; }
.process-list li:hover strong { color: #fff; }
.process-list li:hover span { color: #d6e2f0; }
.process-list li.is-active { background: #0d243f; }
.process-list li.is-active b { color: #69adff; }
.process-list li.is-active strong { color: #fff; }
.process-list li.is-active span { color: #d6e2f0; }
@media (max-width: 760px) {
  .service-process { padding: 72px 0; }
  .process-heading { display: block; margin-bottom: 36px; }
  .process-heading .eyebrow { margin-bottom: 15px; }
  .process-heading > p:last-child { margin-top: 18px; }
  .process-list { grid-template-columns: 1fr; }
  .process-list li { min-height: 126px; border-right: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
  .process-list strong { margin-top: 26px; }
}

/* G.U.NET STANDARD: editorial statement and sequential standards. */
.principle-editorial { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: 90px; align-items: start; padding-top: 20px; border-top: 1px solid #0d243f; }
.principle-statement { margin: 0; color: #64748a; font-size: clamp(1.55rem, 2.35vw, 2.45rem); font-weight: 400; line-height: 1.38; letter-spacing: -.06em; }
.principle-statement strong { color: #0d243f; font-weight: 800; }
.principle-terms { margin: 0; padding: 0; list-style: none; }
.principle-terms li { display: grid; grid-template-columns: 44px minmax(135px, .7fr) 1.3fr; gap: 16px; align-items: center; min-height: 87px; border-bottom: 1px solid #cbd6e3; color: #0d243f; transition: padding .2s ease, background .2s ease; }
.principle-terms b { color: #146cd4; font-size: .74rem; letter-spacing: .08em; }
.principle-terms strong { font-size: 1.08rem; letter-spacing: -.04em; }
.principle-terms span { color: #64748a; font-size: .84rem; line-height: 1.55; word-break: keep-all; }
.principle-terms li.is-active,
.principle-terms li:hover { padding-left: 15px; background: #fff; }
.principle-terms li.is-active strong,
.principle-terms li:hover strong { color: #146cd4; }
@media (max-width: 760px) {
  .principle-editorial { grid-template-columns: 1fr; gap: 40px; }
  .principle-terms li { grid-template-columns: 40px 1fr; gap: 10px; min-height: 98px; padding: 15px 0; }
  .principle-terms span { grid-column: 2; }
}

/* Landing page: G.U.NET standards */
.service-principles { padding: 118px 0 126px; background: #f2f5f8; }
.principles-intro { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 54px; }
.principles-intro .eyebrow { align-self: flex-start; margin: 8px 0 0; }
.principles-intro h2 { max-width: 700px; margin: 0; color: #0d243f; font-size: clamp(2rem, 3vw, 3.25rem); line-height: 1.22; letter-spacing: -.07em; }
.principles-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid #0d243f; }
.principles-grid article { min-height: 260px; padding: 28px 27px 30px; border-right: 1px solid #cbd6e3; border-bottom: 1px solid #cbd6e3; background: transparent; transition: background .2s ease, transform .2s ease; }
.principles-grid article:first-child { border-left: 1px solid #cbd6e3; }
.principles-grid article:hover { background: #fff; transform: translateY(-7px); box-shadow: 0 14px 25px rgba(17,42,68,.1); }
.principles-grid article.is-active { background: #fff; transform: translateY(-7px); box-shadow: 0 14px 25px rgba(17,42,68,.1); }
.principles-grid b { color: #146cd4; font-size: .76rem; letter-spacing: .08em; }
.principles-grid h3 { margin: 75px 0 10px; color: #0d243f; font-size: 1.22rem; letter-spacing: -.04em; }
.principles-grid p { margin: 0; color: #64748a; font-size: .9rem; line-height: 1.65; word-break: keep-all; }
@media (max-width: 760px) {
  .service-principles { padding: 72px 0; }
  .principles-intro { display: block; margin-bottom: 34px; }
  .principles-intro .eyebrow { margin: 0 0 15px; }
  .principles-grid { grid-template-columns: 1fr 1fr; }
  .principles-grid article:nth-child(3) { border-left: 1px solid #cbd6e3; }
  .principles-grid h3 { margin-top: 48px; }
}
@media (max-width: 460px) {
  .principles-grid { grid-template-columns: 1fr; }
  .principles-grid article { min-height: 210px; border-left: 1px solid #cbd6e3; }
}

/* Landing page: service shortcuts */
.service-shortcuts { padding: 120px 0; background: #0d243f; color: #fff; }
.shortcuts-heading { display: flex; align-items: end; justify-content: space-between; gap: 42px; margin-bottom: 52px; }
.shortcuts-heading .eyebrow { margin: 0 0 15px; }
.shortcuts-heading h2 { margin: 0; color: #fff; font-size: clamp(2rem, 3vw, 3.3rem); line-height: 1.2; letter-spacing: -.07em; }
.shortcuts-heading > p { max-width: 330px; margin: 0 0 4px; color: #c6d2e0; font-size: .96rem; line-height: 1.7; }
.shortcuts-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.48); border-left: 1px solid rgba(255,255,255,.18); }
.shortcuts-grid a { position: relative; display: flex; min-height: 194px; flex-direction: column; padding: 24px 25px; border-right: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); color: #fff; text-decoration: none; transition: background .2s ease, color .2s ease; }
.shortcuts-grid span { color: #146cd4; font-size: .74rem; font-weight: 800; letter-spacing: .08em; transition: color .2s ease; }
.shortcuts-grid strong { margin-top: auto; font-size: 1.22rem; letter-spacing: -.045em; }
.shortcuts-grid small { margin-top: 9px; color: #c5d0dc; font-size: .82rem; line-height: 1.5; transition: color .2s ease; }
.shortcuts-grid i { position: absolute; right: 24px; bottom: 22px; color: #146cd4; font-size: 1.3rem; font-style: normal; transition: transform .2s ease, color .2s ease; }
.shortcuts-grid a:hover { background: #0d243f; color: #fff; }
.shortcuts-grid a.is-active { background: #0d243f; color: #fff; }
.shortcuts-grid a:hover span, .shortcuts-grid a:hover i { color: #69adff; }
.shortcuts-grid a.is-active span, .shortcuts-grid a.is-active i { color: #69adff; }
.shortcuts-grid a:hover small { color: #e0e9f3; }
.shortcuts-grid a.is-active small { color: #e0e9f3; }
.shortcuts-grid a:hover i { transform: translateX(5px); }
@media (max-width: 760px) {
  .service-shortcuts { padding: 72px 0; }
  .shortcuts-heading { display: block; margin-bottom: 34px; }
  .shortcuts-heading > p { margin-top: 17px; }
  .shortcuts-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .shortcuts-grid { grid-template-columns: 1fr; }
  .shortcuts-grid a { grid-column: auto; min-height: 154px; }
}

/* Landing page: contact */
.landing-contact { padding: 116px 0; background: #fff; color: #0d243f; }
.landing-contact-inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr); gap: 76px; align-items: center; }
.landing-contact .eyebrow { margin: 0 0 17px; color: #146cd4; }
.landing-contact h2 { margin: 0; color: #0d243f; font-size: clamp(2.1rem, 3.2vw, 3.45rem); line-height: 1.2; letter-spacing: -.07em; }
.landing-contact-copy > p:last-child { max-width: 440px; margin: 22px 0 0; color: #64748a; font-size: .98rem; line-height: 1.7; }
.landing-contact-actions { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #aebbc9; border-left: 1px solid #dce4ec; }
.landing-contact-actions a { position: relative; display: flex; min-height: 139px; flex-direction: column; justify-content: center; padding: 22px 45px 22px 24px; border-right: 1px solid #dce4ec; border-bottom: 1px solid #dce4ec; color: #0d243f; text-decoration: none; transition: background .2s ease, color .2s ease; }
.landing-contact-actions a:hover { background: #0d243f; color: #fff; }
.landing-contact-actions span { color: #146cd4; font-size: .76rem; font-weight: 800; letter-spacing: .05em; transition: color .2s ease; }
.landing-contact-actions strong { margin-top: 8px; font-size: 1.06rem; letter-spacing: -.035em; }
.landing-contact-actions i { position: absolute; right: 22px; top: 50%; color: #146cd4; font-size: 1.35rem; font-style: normal; transform: translateY(-50%); transition: color .2s ease, transform .2s ease; }
.landing-contact-actions a:hover span, .landing-contact-actions a:hover i { color: #b8d8ff; }
.landing-contact-actions a:hover i { transform: translate(4px, -50%); }
@media (max-width: 850px) {
  .landing-contact-inner { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 520px) {
  .landing-contact { padding: 72px 0; }
  .landing-contact-actions { grid-template-columns: 1fr; }
  .landing-contact-actions a { min-height: 112px; }
}

/* Landing page: privacy and data handling notice */
.privacy-assurance {
  position: relative;
  overflow: hidden;
  padding: 132px 0 118px;
  background: #0d2138;
  color: #fff;
}
.privacy-assurance-inner { position: relative; min-height: 0; }
.privacy-watermark {
  position: absolute;
  z-index: 0;
  top: 5%;
  left: 50%;
  color: rgba(255,255,255,.025);
  font-size: clamp(6rem, 13vw, 13rem);
  font-weight: 900;
  letter-spacing: -.1em;
  line-height: 1;
  transform: translateX(-50%);
  white-space: nowrap;
  user-select: none;
}
.privacy-side-label { display: none; }
.privacy-declaration {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 0 66px;
  text-align: left;
}
.privacy-declaration .eyebrow { margin: 0 0 19px; color: #69adff; }
.privacy-declaration h2 {
  max-width: 850px;
  margin: 0;
  color: #fff;
  font-size: clamp(2.5rem, 4vw, 4.2rem);
  line-height: 1.16;
  letter-spacing: -.085em;
}
.privacy-declaration h2 strong { color: #69adff; }
.privacy-declaration > p:last-child { max-width: 620px; margin: 22px 0 0; color: #cfdae6; font-size: .98rem; line-height: 1.7; }
.privacy-editorial {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  align-items: start;
  gap: 90px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.48);
}
.privacy-statement { margin: 0; color: #aebfd0; font-size: clamp(1.5rem, 2.25vw, 2.35rem); font-weight: 400; line-height: 1.4; letter-spacing: -.06em; }
.privacy-statement strong { color: #fff; font-weight: 800; }
.privacy-standards { position: relative; z-index: 1; }
.privacy-standards ul { margin: 0; padding: 0; list-style: none; }
.privacy-standards li {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 78px;
  padding: 0;
  border-bottom: 1px solid rgba(255,255,255,.16);
  border-left: 3px solid transparent;
  color: #94a9bd;
  font-size: .98rem;
  transition: color .2s ease, background .2s ease, border-color .2s ease, padding .2s ease;
}
.privacy-standards b { width: 26px; color: #78b4ff; font-size: .8rem; letter-spacing: .08em; transition: color .2s ease; }
.privacy-standards li.is-active { padding-left: 13px; border-left-color: #6eadff; background: rgba(91,158,244,.13); color: #fff; }
.privacy-standards li.is-active b { color: #69adff; }
.privacy-policy-link { color: #0d243f; font-size: .9rem; font-weight: 800; text-decoration: none; }
.privacy-assurance .privacy-policy-global { display: block; width: fit-content; margin: 36px auto 0; color: #69adff; font-size: .86rem; text-align: center; }
.privacy-assurance .privacy-policy-global:hover { color: #fff; }

@media (max-width: 760px) {
  .privacy-declaration { margin-bottom: 42px; }
  .privacy-editorial { grid-template-columns: 1fr; gap: 39px; }
  .privacy-standards li { min-height: 0; padding: 12px 0; }
}

@media (max-width: 620px) {
  .privacy-assurance { padding: 78px 0; }
  .privacy-watermark { top: 3%; font-size: 6.5rem; }
  .privacy-declaration h2 { font-size: clamp(2.05rem, 9vw, 3.1rem); }
  .privacy-standards { margin-top: 42px; }
}

/* Give each landing section its own visual rhythm. */
.process-heading h2,
.principles-intro h2,
.shortcuts-heading h2 { font-size: clamp(2.35rem, 3.45vw, 3.7rem); }

/* SERVICE PROCESS: a light linear guide rather than another card grid. */
.process-list { position: relative; border-bottom: 0; }
.process-list li { position: relative; min-height: 154px; padding: 24px 22px 20px; border-left: 0; }
.process-list li:last-child { border-right: 0; }
.process-list li::before { content: ""; position: absolute; top: -6px; left: 22px; width: 11px; height: 11px; border: 3px solid #0d243f; border-radius: 0; background: #69adff; box-shadow: 0 0 0 1px rgba(255,255,255,.65); transition: background .2s ease, transform .2s ease; }
.process-list li:not(:last-child)::after { content: ""; position: absolute; top: -1px; right: 0; width: 1px; height: 100%; background: rgba(255,255,255,.18); }
.process-list li:hover,
.process-list li.is-active { background: #0d243f; }
.process-list li:hover::before,
.process-list li.is-active::before { background: #fff; transform: scale(1.25); }
.process-list li:hover b,
.process-list li.is-active b { color: #69adff; }
.process-list li:hover span,
.process-list li.is-active span { color: #d6e2f0; }
.process-list strong { margin-top: 28px; }

/* G.U.NET STANDARD: editorial blocks with generous space, not boxed cards. */
.service-principles { padding-top: 132px; padding-bottom: 138px; }
.principles-intro { display: block; max-width: 820px; margin-bottom: 68px; }
.principles-intro .eyebrow { margin: 0 0 18px; }
.principles-intro h2 { max-width: 760px; }
.principles-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #0d243f; }
.principles-grid article,
.principles-grid article:first-child { min-height: 230px; padding: 24px 24px 22px; border: 0; border-right: 1px solid #cbd6e3; background: transparent; box-shadow: none; transform: none; }
.principles-grid article + article { padding-left: 24px; }
.principles-grid article:last-child { border-right: 0; }
.principles-grid article:hover,
.principles-grid article.is-active { background: #fff; box-shadow: 0 14px 25px rgba(17,42,68,.1); transform: translateY(-7px); }
.principles-grid article.is-active h3 { color: #146cd4; }
.principles-grid h3 { margin: 66px 0 11px; font-size: 1.3rem; transition: color .2s ease; }
.principles-grid p { max-width: 190px; }

@media (max-width: 760px) {
  .process-list li { min-height: 112px; padding-left: 20px; }
  .process-list li::before { left: 20px; }
  .process-list li:not(:last-child)::after { top: auto; right: 0; bottom: 0; width: 100%; height: 1px; }
  .principles-grid { grid-template-columns: 1fr 1fr; }
  .principles-grid article,
  .principles-grid article:first-child,
  .principles-grid article + article { min-height: 190px; padding: 22px; border-right: 1px solid #cbd6e3; border-bottom: 1px solid #cbd6e3; }
  .principles-grid h3 { margin-top: 44px; }
}

/* Keep the static logo readable when front-page image rules override reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .nav-brand .logo-swap .logo-swap-ko { display: none; }
}