/* Creative & Modern CSS using Flexbox - Following Design System */
:root{
  --primary:#003D7A;
  --secondary:#003C79;
  --accent:#E63946;
  --danger:#D80C18;
  --cyan:#55CAC7;
  --cyan2:#41b1c6;
  --text:#111111;
  --muted:#333333;
  --bg:#FFFFFF;
  --bg2:#F5F5F5;
  --line:rgba(17,17,17,.10);
  --shadow:0 14px 40px rgba(16,24,40,.12);
  --shadow2:0 18px 60px rgba(16,24,40,.18);
  --radius:14px;
  --radius2:18px;
  --container:1200px;
  --ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior: smooth;}
html,body{height:100%}
body{
  margin:0;
  font-family:"Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.75;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
.only-mobile {
  display: inline !important;
}
.only-desktop {
  display: none !important;
}
.only-table{
  display: none !important;
}
@media (min-width: 768px) {
  .only-mobile {
    display: none !important;
  }
  .only-desktop {
    display: inline !important;
  }
}

@media (min-width: 1100px) {
  .only-table{
    display: inline-block !important;
  }
}
.skip{
  position:absolute; left:-9999px; top:10px;
  background:#000; color:#fff; padding:10px 12px; border-radius:10px;
}
.skip:focus{left:10px; z-index:9999}

.container{
  width:min(var(--container), calc(100% - 40px));
  margin:0 auto;
}

.mgt15{margin-top: 15px !important;}
.mgb0{margin-bottom: 0 !important;}

/* Header */
.header{
  position:fixed;width: 100%;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,1);
  /* backdrop-filter:saturate(140%) blur(12px); */
  border-bottom:1px solid rgba(17,17,17,.08);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:16px;
}
.brand{display:flex; align-items:center; gap:10px; max-width:200px}
/* .brand__logo{width:38px; height:38px; object-fit:contain} */
.brand__name{font-weight:900; letter-spacing:.02em; color:var(--primary)}

.nav{display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:center}
.nav__link{
  font-size:14px;
  color:rgba(17,17,17,.78);
  padding:8px 10px;
  border-radius:10px;
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.nav__link:hover{background:rgba(0,61,122,.08); color:var(--primary); transform:translateY(-1px)}
@media screen and (max-width: 1079px) {
  .nav{gap: 0;}
}
.header__cta{display:flex; align-items:center; gap:10px}

.hamburger{
  width:44px; height:44px;
  border-radius:12px;
  border:1px solid rgba(17,17,17,.10);
  background:#fff;
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:6px;
  cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.hamburger:hover{transform:translateY(-1px); box-shadow:0 10px 24px rgba(16,24,40,.10)}
.hamburger span{width:18px; height:2px; background:rgba(17,17,17,.8); border-radius:999px}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size: 18px;
  line-height: 1.3;
  padding:15px 20px;
  border-radius:10px;
  font-weight:800;
  letter-spacing:.01em;
  border:1px solid transparent;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
  cursor:pointer;
  white-space:nowrap;
}
.btn--primary{
  background:linear-gradient(135deg, var(--danger), var(--accent));
  color:#fff;
  box-shadow:0 8px 25px rgba(216,12,24,.22);
}
.btn.btn--blue{background: linear-gradient(135deg, var(--primary), #044789) ;color: #ffff;box-shadow: 0 4px 15px rgba(57, 103, 230, 0.3);}
.btn--primary:hover{transform:translateY(-1px) scale(1.02);}
.btn--secondary{
  background:#fff;
  color:var(--primary);
  border-color:rgba(0,61,122,.18);
}
.btn--secondary:hover{transform:translateY(-1px) scale(1.02); box-shadow:0 16px 40px rgba(0,61,122,.14)}
.btn--block{width:100%}

/* Chips */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border: 1px solid rgba(0, 61, 122, .10);
  color: #1a2f4a;
}
.chip--accent{background:rgba(230,57,70,.14); color:#fff; border-color:rgba(230,57,70,.28)}
.chip--ghost{background:rgba(255,255,255,.10); color:#fff; border-color:rgba(255,255,255,.18)}
.chip--navy{background:rgba(0,61,122,.10); color:var(--primary); border-color:rgba(0,61,122,.18)}

/* Sections */
.section{padding:76px 0}
.section--light{background:linear-gradient(180deg, var(--bg2), #fff)}
.section--white{background:#fff}
.section--navy{
  background:
    radial-gradient(900px 500px at 10% 10%, rgba(85,202,199,.16), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(230,57,70,.14), transparent 60%),
    linear-gradient(180deg, #062a52, #041f3e);
  color:#fff;
}

.sectionHead{display:flex; flex-direction:column; gap:10px; margin-bottom:28px}
.sectionHead__eyebrow{
  display:flex; align-items:center; gap:10px;
  font-weight:900; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(0,61,122,.85);
  font-size:12px;
}
.sectionHead__title{margin:0; font-size:40px; line-height:1.15; color:var(--primary); letter-spacing:.01em}
.sectionHead__desc{margin:0; color:rgba(17,17,17,.68); }
.sectionHead--inverse .sectionHead__eyebrow{color:rgba(255,255,255,.78)}
.sectionHead--inverse .sectionHead__title{color:#fff}
.sectionHead--inverse .sectionHead__desc{color:rgba(255,255,255,.72)}

/* Hero */
.hero{position:relative; overflow:hidden; background:var(--primary); color:#fff}
.hero__bg{
  position:absolute; inset:-2px;
  background:
    radial-gradient(900px 520px at 15% 15%, rgba(85,202,199,.22), transparent 60%),
    radial-gradient(900px 520px at 85% 25%, rgba(230,57,70,.18), transparent 60%),
    linear-gradient(180deg, #003d7a, #022a52);
  opacity:1;
}
.hero__inner{position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:72px 0}
.hero__copy{flex:1; min-width:320px;max-width: 550px;}
.hero__visual{flex:1; min-width:320px; display:flex; justify-content:flex-end}
.hero__kicker{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px}
.hero__title{margin:0; font-size:52px; line-height:1.2; letter-spacing:.01em}
.hero__by{    color: #ffd600;}
.hero__lead{text-align: justify; margin:16px 0 0; color:rgba(255,255,255,.82); max-width:62ch}
.hero__actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px}
.hero__meta{margin-top:22px}

.meta{display:flex; gap:12px; flex-wrap:wrap}
.meta__item{
  display:flex; align-items:flex-start; gap:0;
  flex-direction: column;
  padding:12px 14px;
  border-radius:14px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .14);
  color: #003d7a;
}
.meta__head{    display: flex;
    align-items: flex-start;
    gap: 10px;}
.meta__item i{margin-top:2px; color:#e22d3a}
.meta__label{font-size:12px; opacity:1; font-weight:700;}
.meta__value{font-size:13px; font-weight:700; opacity:1;padding-left: 30px;}

.visualCard{
  position:relative;
  width:min(520px, 100%);
  border-radius:var(--radius2);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  box-shadow:0 26px 80px rgba(0,0,0,.28);
}
.visualCard__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: linear-gradient(90deg, rgba(0, 61, 122, 1), rgba(85, 202, 199, 1));
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.signal {
    display: flex;
    gap: 6px;
}
.dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    opacity: .9;
}
.dot--r {
    background: #ff5b5b;
}
.dot--y {
    background: #ffcc4d;
}
.dot--g {
    background: #3ddc84;
}
.visualCard__label {
    font-weight: 900;
    color: #0f2f55;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.visualCard__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 1);
    border-top: 1px solid rgba(0, 0, 0, .06);
}
.visualCard__glow{
  position:absolute; inset:-60px;
  background:radial-gradient(closest-side, rgba(85,202,199,.28), transparent 70%);
  filter:blur(10px);
}
.visualCard__img{position:relative; width:100%; height:auto}
.visualCard__badge{
  position:absolute; left:14px; bottom:14px;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.34);
  border:1px solid rgba(255,255,255,.18);
  font-size:12px;
  font-weight:800;
}

.hero__scroll{position:absolute; left:50%; bottom:16px; transform:translateX(-50%); opacity:.9}
.scrollHint{display:flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.12em; text-transform:uppercase}
.scrollHint i{animation:bounce 1.4s var(--ease) infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* Layout helpers */
.split{display:flex; gap:28px; align-items:flex-start; justify-content:space-between}
.split--reverse{flex-direction:row-reverse}
.split__left{flex:1; min-width:320px}
.split__right{flex:1; min-width:320px}

.cards{display:flex; flex-wrap:wrap; gap:18px}
.cards--3 .card{flex:0 1 calc((100% - 36px)/3); min-width:295px}
.cards--2 .card{flex:1 1 calc((100% - 18px)/2); min-width:260px}

.card{
  background:#fff;
  border:1px solid rgba(17,17,17,.08);
  border-radius:14px;
  padding:20px;
  box-shadow:0 10px 30px rgba(16,24,40,.08);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.cards.jus-center{justify-content: center;}
.line-left{border-left: 4px solid #D80C18;}
.card:hover{transform:translateY(-3px) scale(1.02) !important; box-shadow:0 18px 55px rgba(16,24,40,.14); border-color:rgba(0,61,122,.20);}
.card.line-left:hover{border-color:rgba(0,61,122,.20) rgba(0,61,122,.20) rgba(0,61,122,.20) #D80C18;}
.card__body{display: flex;gap: 12px;}
.card__icon{
 max-width: 48px;
  width:48px; height:48px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(0,61,122,.12), rgba(65,177,198,.12));
  color:var(--primary);
  margin-bottom:12px;
  font-size:18px;
  flex: 1 0 auto;
}
.card__title{margin:0; font-size:18px; line-height:1.35; color:#212121;display: flex;align-items: center;}
.card__text{margin:10px 0 0; font-size:14px; color:rgba(17,17,17,.72)}
.card--soft{background:linear-gradient(180deg, #fff, #fbfbff)}
#problems .card__text{
      width: calc(100% - 60px);
    margin: 10px 0 0 auto;
}
.card--dark{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14);
  box-shadow:none;
}
.card--dark .card__icon{background:rgba(255,255,255,.10); color:#fff}
.card--dark .card__title{color:#fff}
.card--dark .card__text{color:rgba(255,255,255,.74)}

.callout{
  margin-top:30px;
  display:flex; gap:14px; align-items:center;flex-wrap: wrap;
  padding:18px 18px;
  border-radius:16px;
  border:1px solid rgba(230,57,70,.20);
  background:linear-gradient(135deg, rgba(230,57,70,.08), rgba(0,61,122,.06));
}
.callout__icon{max-width: 44px;flex: 1 0 auto;width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:rgba(230,57,70,.12); color:var(--danger)}
.callout__title{margin:0; font-weight:900; color:var(--primary);font-size: 20px;display: flex;align-items: center;}
.callout__title .larg{font-size: 26px;line-height: 1.4;display: inline-flex;align-items: center;}
.callout__text{margin:0 0 0 auto; color:rgba(17,17,17,.72); font-size:14px;width: calc(100% - 58px);}
.callout__body{flex: 1 auto;width: 100%;display: flex;gap: 14px;}
.imageFrame{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(17,17,17,.10);
  background:#fff;
  box-shadow:var(--shadow);
}
.imageFrame.noShadow{box-shadow: none;}
.imageFrame--dark{border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.06); box-shadow:none}
.imageFrame__label{
  position:absolute; left:14px; bottom:14px;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(17,17,17,.08);
  font-size:12px; font-weight:900;
  color:var(--primary);
}
.section--navy .imageFrame__label{background:rgba(0,0,0,.32); border-color:rgba(255,255,255,.18); color:#fff}

.miniStats{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}
.miniStats__item{
  flex:1 1 160px;
  background:#fff;
  border:1px solid rgba(17,17,17,.08);
  border-radius:16px;
  padding:14px 16px;
}
.miniStats__num{font-size:26px; font-weight:900; color:var(--primary); line-height:1}
.miniStats__num span{font-size:12px; font-weight:900; color:rgba(17,17,17,.55); margin-left:6px}
.miniStats__label{margin-top:8px; font-size:12px; color:rgba(17,17,17,.65); font-weight:700}

@media (max-width: 767px) {
  .callout{padding: 15px;gap: 10px;}
}

/* Features */
.featureList{display:flex; flex-wrap: wrap; gap:15px}
.feature{
  display:flex; gap:8px; align-items:flex-start;flex-direction: column;
  flex: 1 1 calc((100% - 30px) / 3);
  min-width: 300px;
  padding:16px 16px;
  border-radius:16px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .06);
  color: #1a2f4a;
}
.feature__icon{flex: 1 0 auto;max-width: 46px;width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, rgba(230, 57, 70, .12), rgba(85, 202, 199, .14));border: 1px solid rgba(230, 57, 70, .16);color: #E63946;}
.feature__icon i{color: #E63946;}
.feature__title{margin:0; font-size:18px; line-height:1.35;display: flex;align-items: center;}
.feature__text{width: calc(100% - 60px);margin:0 0 0 auto; color: #5b6672;; font-size:15px}
.accent{color:#D80C18}
.feature__body{display: flex;gap: 15px;}
.bannerNote{
  margin-top:20px;
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(85,202,199,.22);
  background:linear-gradient(135deg, rgba(85,202,199,.10), rgba(255,255,255,.06));
}
.bannerNote i{margin-top:5px}
.bannerNote p{margin:0; color:rgba(255,255,255,1);}
.bannerNote p .larg{font-size: 22px;line-height: 1;}
.stack{display:flex; flex-direction:column; gap:14px}
.stack__item{display:flex}

.glassCTA{
  margin-top:30px;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.glassCTA.jus-center{justify-content: center;}
.glassCTA.style01{background: transparent;border: none;}
.glassCTA__title{font-weight:900; margin:0; color:#fff;font-size: 24px;line-height: 1.5;}
.glassCTA__actions{display:flex; gap:10px; flex-wrap:wrap}

/* Steps */
.steps{display:flex; gap:18px; flex-wrap:wrap}
.step{
  flex:1 1 280px;
  background:#fff;
  border:1px solid rgba(17,17,17,.08);
  border-radius:18px;
  padding:22px;
  box-shadow:0 14px 40px rgba(16,24,40,.10);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  position:relative;
  overflow:hidden;
}
.step:hover{transform:translateY(-3px) scale(1.02); box-shadow:0 20px 60px rgba(16,24,40,.14)}
.step__num{position:absolute; top:14px; right:14px; font-weight:900; color:rgba(0,61,122,.18); font-size:28px}
.step__icon{width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, rgba(0,61,122,.12), rgba(85,202,199,.14)); color:var(--primary); font-size:18px}
.step__title{margin:12px 0 0; font-size:20px; color:#1a1a1a}
.step__text{margin:10px 0 0; color:rgba(17,17,17,.72); font-size:14px}
.step__media{margin-top:14px; border-radius:14px; overflow:hidden; border:1px solid rgba(17,17,17,.08)}

.subSection{margin-top:44px}
.subSection__head{display:flex; flex-direction:column; gap:8px; margin-bottom:16px}
.subSection__title{margin:0; font-size:26px; color:var(--primary); letter-spacing:.01em}
.subSection__desc{margin:0; color:rgba(17,17,17,.70)}

.pillRow{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px}
.pill{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; font-weight:900; font-size:12px; border:1px solid transparent}
.pill--ng{background:rgba(216,12,24,.10); color:var(--danger); border-color:rgba(216,12,24,.18)}
.pill--risk{background:rgba(230,57,70,.10); color:var(--accent); border-color:rgba(230,57,70,.18)}
.pill--fact{background:rgba(65,177,198,.10); color:#0c5f7e; border-color:rgba(65,177,198,.18)}

.note{margin:0 0 14px; color:rgba(17,17,17,.66); font-size:14px}

.fullMedia{border-radius:18px; overflow:hidden; border:1px solid rgba(17,17,17,.10); box-shadow:var(--shadow)}
.haftMedia{max-width: 850px;border-radius:18px; overflow:hidden; border:1px solid rgba(17,17,17,.10); box-shadow:var(--shadow);margin: 0 auto;}

.noteBox{
  margin-top:14px;
  display:flex; gap:10px; align-items:flex-start;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(65,177,198,.20);
  background:linear-gradient(135deg, rgba(65,177,198,.08), rgba(0,61,122,.04));
}
.noteBox p{margin:0; color:rgba(17,17,17,.70); font-size:14px}
.noteBox i{color:var(--cyan2); margin-top:2px}

/* Tags */
.tagRow{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.tag{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; border:1px solid rgba(0,61,122,.14); background:rgba(0,61,122,.06); font-size:12px; font-weight:800; color:var(--primary)}

/* Statement */
.statement{
  margin-top:18px;
  display:flex; gap:14px; align-items:flex-start;
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(0,61,122,.14);
  background:linear-gradient(135deg, rgba(0,61,122,.06), rgba(85,202,199,.08));
}
.statement__icon{width:48px; height:48px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:rgba(0,61,122,.10); color:var(--primary)}
.statement__body{width: calc(100% - 62px);}
.statement__lead{margin:0; font-weight:800; color:rgba(17,17,17,.80)}
.statement__title{margin:10px 0 0; font-weight:900; font-size:18px; color:rgba(15,47,85,.98)}
.statement__title .larg{font-size: 24px;line-height: 1;}
/* Pricing */
.pricing{display:flex; gap:18px; flex-wrap:wrap}
.priceCard{
  flex:1 1 240px;
  background:#fff;
  border:1px solid rgba(17,17,17,.08);
  border-radius:18px;
  padding:22px;
  box-shadow:0 14px 40px rgba(16,24,40,.10);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.priceCard:hover{transform:translateY(-3px) scale(1.02); box-shadow:0 20px 60px rgba(16,24,40,.14)}
.priceCard__head{display:flex; align-items:center; gap:12px}
.priceCard__icon{width:48px; height:48px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, rgba(230,57,70,.10), rgba(0,61,122,.10)); color:var(--danger)}
.priceCard__title{margin:0; font-size:18px; color:#212121;width: calc(100% - 60px);}
.priceCard__price{margin-top:14px; font-size:34px; font-weight:900; color:var(--primary); line-height:1;display: flex;gap: 10px;;align-items: flex-end;justify-content: space-between;}
.priceCard__unit{font-size:12px; font-weight:900; color:rgba(17,17,17,.55); margin-left:8px;transform: translateY(-2px);display: inline-block;}
.priceCard__desc{margin:12px 0 0; color:rgba(17,17,17,.70); font-size:14px}
.priceCard__desc-note{margin:0 0 0; color:rgba(17,17,17,.70); font-size:12px}

.totalBox{
  position: relative;
  margin-top:30px;
  display:flex; gap:30px; align-items:center; flex-wrap:wrap;
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(230,57,70,.18);
  background:linear-gradient(135deg, rgba(230,57,70,.06), rgba(0,61,122,.04));
}
.totalBox__inner{
  position: relative;
  flex: 1 1 calc(50% - 25px);
}
.totalBox__bg{
  position: relative;
  flex: 1 1 calc(50% - 25px);
  border-radius: 15px;
  overflow: hidden;
}

.totalBox__btn{display: flex;flex-direction: column;gap: 15px;max-width: 445px;margin: 20px 0 0;}
.totalBox__left{flex:1 1 340px}
.totalBox__right{flex:0 1 320px; display:flex; flex-direction:column; gap:10px; justify-content:center}
.totalBox__title{font-weight:900; color:var(--primary); display:flex; align-items:center; gap:10px}
.totalBox__heading{ font-weight:900; font-size:22px;color: #E63946;line-height: 1.3;}
.totalBox__note{margin:8px 0 0; color:rgba(17,17,17,.66); font-size:13px}
.totalBox_pic{margin: 10px 0 0;max-width: 600px;height: 230px;overflow: hidden;position: relative;}
.totalBox_pic img{object-fit: cover;object-position: center;width: 100%;height: 100%;}

/* Patrol */
.flow{margin-top:14px; display:flex; flex-direction:column; gap:10px}
.flow__item{display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:16px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06)}
.flow__num{width:28px; height:28px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(85,202,199,.16); color:#fff; font-weight:900}
.flow__item p{margin:0; color:rgba(255,255,255,.76); font-size:14px}

.priceRibbon{margin-top:14px; display:flex; gap:12px; align-items:center; padding:14px 16px; border-radius:18px; border:1px solid rgba(230,57,70,.22); background:linear-gradient(135deg, rgba(230,57,70,.10), rgba(255,255,255,.06))}
.priceRibbon i{color:#ffd1d6}
.priceRibbon__label{font-size:12px; opacity:.8; font-weight:800; color:rgba(255,255,255,.80)}
.priceRibbon__value{font-size:18px; font-weight:900; color:#fff}

/* Contact */
.contact__inner{display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap}
.contactCard{
  flex:1 1 520px;
  background:#fff;
  border:1px solid rgba(17,17,17,.08);
  border-radius:18px;
  padding:18px;
  box-shadow:0 14px 40px rgba(16,24,40,.10);
}
.contactCard__row{display:flex; gap:12px; align-items:flex-start; padding:12px 10px; border-radius:14px}
.contactCard__row + .contactCard__row{border-top:1px solid rgba(17,17,17,.06)}
.contactCard__icon{width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:rgba(0,61,122,.08); color:var(--primary)}
.contactCard__label{font-size:12px; font-weight:900; color:rgba(17,17,17,.55)}
.contactCard__value{font-size:15px; font-weight:800; color:#003d7a; margin-top:2px}
.contactCard__value a{color:#e63946; text-decoration:underline; text-decoration-color:rgba(0,61,122,.25);word-break: break-word;}

.contactAside{flex:1 1 320px; display:flex; flex-direction:column; gap:14px}
.contactAside__box{
  background:linear-gradient(180deg, #fff, #fbfbfb);
  border:1px solid rgba(17,17,17,.08);
  border-radius:18px;
  padding:18px;
  box-shadow:0 14px 40px rgba(16,24,40,.08);
}
.contactAside__box--soft{background:linear-gradient(135deg, rgba(65,177,198,.08), rgba(0,61,122,.04))}
.contactAside__title{margin:0; font-size:18px; color:var(--primary); display:flex; align-items:center; gap:10px}
.contactAside__text{margin:10px 0 0; color:rgba(17,17,17,.70); font-size:14px}
.contactAside__note{margin:15px 0 0; font-size:12px; color:rgba(17,17,17,.60)}
@media screen and (max-width: 767px) {
  .contactCard{flex: 1 auto; width: 100%;}.contactAside{flex: 1 auto;width: 100%;}.contactCard__body{width: calc(100% - 56px);}
}

/* Footer */
.footer{background:#071a33; color:rgba(255,255,255,.82); padding:28px 0 0}
.footer__inner{display:flex; align-items:flex-start;flex-wrap: wrap; justify-content:space-between; gap:18px; flex-wrap:wrap}
.footer__brand{margin-bottom: 20px;}
.footer-bottom{width: 100%;display: flex;justify-content: space-between;border-top: 1px solid #7d7d7d;margin-top: 30px;align-items: center;}
.footer-bottom .footer__inner{align-items: center;}
.footer__logoRow{display:flex; align-items:center; gap:12px;max-width: 250px;}
/* .footer__logoRow img{width:38px; height:38px; object-fit:contain; filter:brightness(1.2)} */
.footer__company{font-weight:900; color:#fff}
.footer__tag{font-size:12px; opacity:.75; font-weight:700}
.footer__copy{ font-size:12px; opacity:.7}
.footer__links{display:flex; flex-wrap: wrap; gap:10px}
.footer__links a{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); transition:transform .3s var(--ease), background .3s var(--ease)}
.footer__links a:hover{transform:translateY(-1px); background:rgba(255,255,255,.07)}

/* Reveal animation */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.is-visible{opacity:1; transform:translateY(0)}
@media screen and (max-width: 767px) {
  .header__cta .btn{font-size: 12px;padding: 0 10px;min-height: 45px;}
  .footer__inner{justify-content: center;gap: 0;}
  .glassCTA__title{font-size: 22px;}
  .footer__links {
    flex-direction: column;
  }
}


/* ====================================================================
   13. Scroll to Top (Required)
   ==================================================================== */

.scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #071a33;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all .3s ease;
  z-index: 900;
}
.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.scroll-to-top:hover {
  background-color: color-mix(in srgb, #41b1c6 80%, black);
  transform: translateY(-4px);
}

@media (min-width: 768px) {
  .scroll-to-top {
    bottom: 30px;
    right: 30px;
  }
}

@media (max-width: 980px){
  .nav{display:none}
  .hamburger{display:flex}
  .hero__inner{flex-direction:column;gap: 40px;}
  .hero__visual{justify-content:center}
  .sectionHead__title{font-size:34px}
  .hero__title{font-size:44px}
  .split{flex-direction:column}
  .split--reverse{flex-direction:column}
}

@media (max-width: 560px){
  .brand{max-width: 145px;}
  .container{width:calc(100% - 28px)}
  .header__inner{padding: 10px 0;}
  .btn{font-size: 16px;}
  .section{padding:40px 0}
  .hero__inner{padding:30px 0 60px}
  .hero__title{font-size:38px}
  .cards--3 .card{flex-basis:100%}
  .cards--2 .card{flex-basis:100%}
  .pricing .priceCard{flex-basis:100%}
  .meta__item{flex: 1 1 31%;gap: 5px;padding: 8px;}
  .meta__label{font-size: 11px;}
  .meta__value{font-size: 11px;padding: 0;}
  .visualCard__badge{ left: 10px;bottom: 10px;padding: 5px 12px;font-size: 10px;}
  .hero .btn{flex: 1 1 48%;font-size: 16px;padding: 14px;}
  .visualCard__bottom{padding: 14px;}
  .chip{padding: 8px 8px; border-radius: 14px;}
}

@media (prefers-reduced-motion: reduce){
  .reveal{transition:none}
  .scrollHint i{animation:none}
  .btn,.card,.step,.priceCard,.nav__link{transition:none}
}

.floating{
  position: fixed;
  width: 100%;
  background-color: #fff;
  top: auto;
  bottom: -1px;
  left: 0;
  z-index: 999;
  display: none;
  transition: opacity 0.3s ease;
}
#floating.hide {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 389px){
  .floating{display: block;}
  .header__inner {padding: 15px 0;}
  .header__cta{display: none;}
}

.floating__inner{
  padding: 15px 10px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.floating .btn {
    font-size: 14px;
    padding: 0 10px;
    min-height: 50px;
    flex: 1 1 48%;
}

.text-center{
  text-align: center;
}

body.sub-page{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}