/* Official JellyKool brand artwork, displayed directly from the proof artwork. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.logo-crop {
  display: block;
  position: relative;
  overflow: hidden;
  flex: none;
}

.logo-crop img {
  position: absolute;
  display: block;
  max-width: none;
}

.brand-main {
  filter: drop-shadow(0 6px 12px rgba(6, 25, 43, .08));
}

.brand-main .logo-leaf,
.logo-leaf {
  width: 156px;
  height: 44px;
}

.logo-leaf img {
  width: 680px;
  left: -20px;
  top: -7px;
}

.logo-fleur {
  width: 174px;
  height: 42px;
}

.logo-fleur img {
  width: 640px;
  left: 0;
  top: 0;
}

.logo-apparel {
  width: 220px;
  height: 48px;
}

.logo-apparel img {
  width: 640px;
  left: -17px;
  top: -1px;
}

.core-brand {
  background: rgba(255, 255, 255, .94);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 58, 120, .18);
}

.product-brand {
  margin: 22px 0 8px;
  background: #07101a;
  border-radius: 10px;
}

.mini-visual .logo-crop {
  transform: scale(.88);
  background: rgba(255, 255, 255, .92);
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 76, 148, .16);
}

.snowflake-mark {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border: 2px solid rgba(255, 255, 255, .88);
  border-radius: 20px;
  color: white;
  font-size: 3.4rem;
  line-height: 1;
  background: #087bd9;
  box-shadow: 0 12px 28px rgba(0, 77, 150, .24);
}

footer .brand-main { filter: none; }
footer .logo-leaf { background: #fff; border-radius: 8px; }

.applications {
  padding: 8vw 5vw;
  background: linear-gradient(180deg, #eefaff 0, #f7fbfd 48%, #ffffff 100%);
}

.applications-heading {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 7vw;
  align-items: end;
  margin-bottom: 54px;
}

.applications-heading h2 {
  margin: 0;
  font-size: clamp(2.7rem, 5.2vw, 5.8rem);
  line-height: .94;
  letter-spacing: -.055em;
}

.applications-heading > p {
  margin: 0;
  color: #52697b;
  font-size: 1.05rem;
  line-height: 1.7;
}

.solution-tree {
  position: relative;
  margin: 0 0 34px;
  overflow: hidden;
  border: 1px solid rgba(64, 199, 244, .35);
  border-radius: 28px;
  background: #06192b;
  box-shadow: 0 28px 75px rgba(6, 25, 43, .18);
}

.solution-tree img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.solution-tree figcaption {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  display: flex;
  justify-content: space-between;
  gap: 25px;
  align-items: center;
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 15px;
  background: rgba(4, 18, 30, .82);
  color: #fff;
  backdrop-filter: blur(12px);
}

.solution-tree figcaption span { color: #8fe6ff; font-size: .75rem; font-weight: 900; letter-spacing: .14em; }
.solution-tree figcaption p { margin: 0; color: #d7eaf5; font-size: .9rem; }

.solution-directory {
  display: grid;
  grid-template-columns: .75fr 1.15fr .9fr;
  gap: 24px;
  align-items: stretch;
  margin: 0 0 34px;
  padding: 26px;
  border: 1px solid #cfe0e9;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 55px rgba(6, 25, 43, .06);
}

.directory-heading h3 { margin: 9px 0 10px; font-size: 2rem; letter-spacing: -.04em; }
.directory-heading > p:last-child { margin: 0; color: #647586; line-height: 1.55; }
.guide-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.guide-choice { display: flex; gap: 12px; align-items: center; min-height: 76px; padding: 11px; border: 1px solid #d7e4eb; border-radius: 15px; background: #f7fbfd; color: #06192b; text-align: left; cursor: pointer; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.guide-choice:hover { transform: translateY(-2px); border-color: #40c7f4; }
.guide-choice.active { border-color: #006fe6; background: #e7f6ff; box-shadow: 0 8px 24px rgba(0, 111, 230, .12); }
.guide-avatar { display: grid; place-items: center; width: 45px; height: 45px; flex: none; border-radius: 50%; background: linear-gradient(145deg, #06192b, #087bd9); color: #fff; font-weight: 950; box-shadow: inset 0 0 0 2px rgba(143,230,255,.4); }
.guide-choice b, .guide-choice small { display: block; }
.guide-choice b { font-size: .9rem; }
.guide-choice small { margin-top: 3px; color: #647586; font-size: .72rem; }
.guide-result { display: flex; flex-direction: column; justify-content: center; padding: 20px; border-radius: 17px; background: linear-gradient(145deg, #071827, #075eb3); color: #fff; }
.guide-kicker { margin: 0 0 8px; color: #8fe6ff; font-size: .7rem; font-weight: 900; letter-spacing: .14em; }
.guide-result h4 { margin: 0; font-size: 1.35rem; line-height: 1.12; }
.guide-result > p:not(.guide-kicker) { margin: 10px 0 16px; color: #c8deec; font-size: .83rem; line-height: 1.5; }
.guide-result a { color: #fff; font-size: .82rem; font-weight: 850; }
.application-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.application-card.recommended { transform: translateY(-5px); border-color: #40c7f4; box-shadow: 0 22px 60px rgba(0, 111, 230, .16), inset 0 0 0 2px rgba(64, 199, 244, .35); }

.application-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.application-card {
  position: relative;
  min-height: 390px;
  padding: 30px;
  overflow: hidden;
  border: 1px solid #d7e4eb;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 55px rgba(6, 25, 43, .06);
}

.application-card::after {
  content: "";
  position: absolute;
  right: -42px;
  bottom: -52px;
  width: 150px;
  height: 150px;
  border: 24px solid rgba(0, 111, 230, .06);
  border-radius: 50%;
}

.application-card.coldchain,
.application-card.logistics {
  color: #fff;
  border-color: #0a4f93;
  background: linear-gradient(145deg, #09233b, #0455a8);
}

.application-card.coldchain::after,
.application-card.logistics::after { border-color: rgba(64, 199, 244, .12); }
.application-code { float: right; color: #9cb5c5; font-size: .78rem; font-weight: 900; }
.application-label { margin: 0; color: #006fe6; font-size: .72rem; font-weight: 900; letter-spacing: .14em; }
.coldchain .application-label, .logistics .application-label { color: #8fe6ff; }
.application-card h3 { margin: 24px 0 12px; font-size: 1.9rem; line-height: 1.05; letter-spacing: -.04em; }
.application-card > p:not(.application-label) { color: #52697b; line-height: 1.62; }
.coldchain > p:not(.application-label), .logistics > p:not(.application-label) { color: #c1d5e4; }
.application-card ul { position: relative; z-index: 1; margin: 22px 0 0; padding-left: 18px; color: #456075; line-height: 1.75; font-size: .88rem; }
.coldchain ul, .logistics ul { color: #d9eaf5; }

.applications-note {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: center;
  margin-top: 28px;
  padding: 22px 26px;
  border: 1px solid #d4e2ea;
  border-radius: 16px;
  background: rgba(255,255,255,.78);
}

.applications-note p { max-width: 850px; margin: 0; color: #647586; font-size: .82rem; line-height: 1.55; }
.applications-note a { flex: none; color: #006fe6; font-weight: 850; }

.roadmap {
  padding: 8vw 6vw;
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 7vw;
  background: #071827;
  color: #fff;
}

.roadmap-intro {
  position: sticky;
  top: 118px;
  align-self: start;
}

.roadmap h2 {
  margin: 0 0 24px;
  font-size: clamp(2.6rem, 4.8vw, 5.3rem);
  line-height: .94;
  letter-spacing: -.055em;
}

.roadmap-intro > p:last-of-type {
  max-width: 560px;
  color: #a9bfd0;
  font-size: 1.05rem;
  line-height: 1.7;
}

.roadmap-email {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
  padding-bottom: 7px;
  border-bottom: 2px solid #40c7f4;
  color: #8fe6ff;
  font-weight: 850;
}

.roadmap-phases {
  border-top: 1px solid rgba(173, 203, 217, .35);
}

.roadmap-phase {
  display: grid;
  grid-template-columns: .72fr 1fr 1fr;
  gap: 25px;
  padding: 29px 0;
  border-bottom: 1px solid rgba(173, 203, 217, .35);
}

.roadmap-phase.current,
.roadmap-phase.launch {
  margin: 0 -24px;
  padding: 29px 24px;
  border-radius: 18px;
  border-bottom-color: transparent;
}

.roadmap-phase.current { background: rgba(0, 111, 230, .16); }
.roadmap-phase.launch { background: linear-gradient(135deg, rgba(0, 111, 230, .38), rgba(64, 199, 244, .10)); }
.phase-meta { display: flex; flex-direction: column; gap: 9px; }
.phase-meta span { color: #40c7f4; font-size: .75rem; font-weight: 900; letter-spacing: .14em; }
.phase-meta strong { font-size: 1.45rem; letter-spacing: -.03em; }
.roadmap-phase b { color: #8fe6ff; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; }
.roadmap-phase p { margin: 9px 0 0; color: #b6cad8; line-height: 1.6; font-size: .92rem; }
.direct-email { margin-top: 28px; font-weight: 800; }
.direct-email a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.65); }
footer a:hover, .direct-email a:hover, .roadmap-email:hover { color: #40c7f4; }

@media (max-width: 540px) {
  .brand-main .logo-leaf { width: 132px; height: 38px; }
  .brand-main .logo-leaf img { width: 580px; left: -17px; top: -6px; }
  .nav-cta { padding: 11px 14px; }
  .logo-apparel { transform: scale(.86); transform-origin: left center; }
}

@media (max-width: 900px) {
  .applications-heading { grid-template-columns: 1fr; align-items: start; }
  .application-grid { grid-template-columns: repeat(2, 1fr); }
  .solution-directory { grid-template-columns: 1fr; }
  .roadmap { grid-template-columns: 1fr; padding: 16vw 7vw; }
  .roadmap-intro { position: static; }
  .roadmap-phase { grid-template-columns: 1fr; gap: 16px; }
  .roadmap-phase.current, .roadmap-phase.launch { margin: 0 -14px; padding: 25px 14px; }
}

@media (max-width: 620px) {
  .applications { padding: 16vw 5vw; }
  .application-grid { grid-template-columns: 1fr; }
  .application-card { min-height: auto; }
  .applications-note { align-items: flex-start; flex-direction: column; }
  .solution-tree { border-radius: 18px; }
  .solution-tree img { aspect-ratio: 4 / 5; object-position: center; }
  .solution-tree figcaption { position: static; align-items: flex-start; flex-direction: column; margin: 0; border: 0; border-radius: 0; }
  .guide-choices { grid-template-columns: 1fr; }
}

/* Interactive snowflake solution tree and guided configuration journey. */
.experience-shell { padding: 22px; border: 1px solid rgba(64,199,244,.32); border-radius: 28px; background: #06192b; box-shadow: 0 30px 85px rgba(6,25,43,.2); }
.experience-topline { display: flex; justify-content: space-between; gap: 20px; padding: 4px 4px 18px; color: #8fe6ff; font-size: .72rem; font-weight: 900; letter-spacing: .13em; }
.pad-origin{display:grid;grid-template-columns:auto 1fr auto;gap:15px;align-items:center;margin-bottom:18px;padding:15px 18px;border:1px solid rgba(143,230,255,.25);border-radius:16px;background:linear-gradient(90deg,rgba(0,111,230,.24),rgba(64,199,244,.08));color:#fff}.pad-origin-icon{display:grid;place-items:center;width:54px;aspect-ratio:1.38/1;border:1px solid rgba(255,255,255,.55);border-radius:10px;background:linear-gradient(145deg,#dff7ff,#087bd9);font-weight:950;box-shadow:inset 0 0 14px rgba(255,255,255,.45)}.pad-origin b,.pad-origin small{display:block}.pad-origin small{margin-top:3px;color:#a9c8dc}.pad-origin-arrow{color:#40c7f4;font-size:1.6rem}
.avatar-select { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 18px; }
.avatar-choice { display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; column-gap: 11px; align-items: center; padding: 12px; border: 1px solid rgba(143,230,255,.2); border-radius: 15px; background: rgba(255,255,255,.06); color: #fff; text-align: left; cursor: pointer; transition: .18s ease; }
.avatar-choice:hover,.avatar-choice.active { border-color: #40c7f4; background: rgba(0,111,230,.24); transform: translateY(-2px); }
.avatar-choice > span { grid-row: 1/3; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #40c7f4; border-radius: 50%; background: linear-gradient(145deg,#0a2f55,#087bd9); color: #fff; font-size: 1.15rem; font-weight: 950; box-shadow: inset 0 0 18px rgba(143,230,255,.25); }
.avatar-choice b,.avatar-choice small { display: block; }.avatar-choice b { font-size: .9rem; }.avatar-choice small { color: #9db8ca; font-size: .7rem; }
.crystal-tree-map { position: relative; margin: 0; overflow: hidden; border: 1px solid rgba(143,230,255,.28); border-radius: 22px; background: #03101c; }
.crystal-tree-map > img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.crystal-tree-map figcaption { position:absolute; left:20px; bottom:18px; display:flex; flex-direction:column; gap:4px; padding:13px 16px; border:1px solid rgba(255,255,255,.18); border-radius:12px; background:rgba(3,16,28,.78); color:#fff; backdrop-filter:blur(10px); }
.crystal-tree-map figcaption b { color:#8fe6ff; }.crystal-tree-map figcaption span { color:#c7dce9; font-size:.75rem; }
.crystal-node { position:absolute; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; width:13.2%; min-width:95px; aspect-ratio:1.15/1; padding:8px; border:1px solid rgba(255,255,255,.58); clip-path:polygon(25% 6%,75% 6%,100% 50%,75% 94%,25% 94%,0 50%); background:rgba(0,55,120,.56); color:#fff; text-align:center; cursor:pointer; text-shadow:0 2px 8px #00182e; backdrop-filter:blur(3px); transition:transform .18s ease,background .18s ease,filter .18s ease; }
.crystal-node span { color:#a8efff; font-size:clamp(.8rem,1.25vw,1.25rem); line-height:1; }
.crystal-node b { font:850 clamp(.58rem,.82vw,.78rem)/1.08 Inter,system-ui,sans-serif; letter-spacing:.015em; }
.crystal-node:hover,.crystal-node.active { transform:scale(1.07); background:rgba(0,111,230,.78); filter:drop-shadow(0 0 16px #40c7f4); }
.node-1{left:12%;top:10%}.node-2{right:12%;top:10%}.node-3{left:31%;top:34%}.node-4{right:31%;top:34%}.node-5{left:4.5%;top:45%}.node-6{right:4.5%;top:45%}
.build-station { margin-top:18px; padding:26px; border-radius:20px; background:#fff; color:#06192b; }
.build-header { display:flex; justify-content:space-between; gap:25px; align-items:end; padding-bottom:20px; border-bottom:1px solid #d9e5eb; }
.build-header h3 { margin:7px 0 0; font-size:2rem; letter-spacing:-.04em; }.build-identity{text-align:right}.build-identity span,.build-identity b{display:block}.build-identity span{color:#647586;font-size:.75rem}.build-identity b{margin-top:4px;color:#006fe6}
.build-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px 24px; padding:24px 0; }.build-grid>label>span,.build-grid legend{display:block;margin-bottom:8px;font-size:.76rem;font-weight:850}.build-grid select{width:100%;padding:13px;border:1px solid #c9d7df;border-radius:11px;background:#fff;font:inherit}.build-grid fieldset{margin:0;padding:0;border:0}.choice-row{display:flex;flex-wrap:wrap;gap:8px}.choice-row label{display:flex;align-items:center;gap:7px;padding:9px 11px;border:1px solid #d7e4eb;border-radius:10px;background:#f7fbfd;font-size:.78rem;cursor:pointer}.choice-row input{accent-color:#006fe6}.color-dot{width:13px;height:13px;border-radius:50%;box-shadow:0 0 0 1px rgba(6,25,43,.2)}.royal{background:#006fe6}.black{background:#07101a}.camo{background:linear-gradient(135deg,#eef6fa 25%,#728da0 25% 50%,#213d54 50% 75%,#c7dce9 75%)}.custom{background:conic-gradient(#006fe6,#40c7f4,#52a816,#006fe6)}
.build-actions{display:flex;justify-content:space-between;gap:25px;align-items:center;padding-top:20px;border-top:1px solid #d9e5eb}.build-actions p{margin:0;color:#647586;font-size:.82rem}.build-actions button{flex:none;padding:14px 20px;border:0;border-radius:999px;background:#006fe6;color:#fff;font-weight:900;cursor:pointer;box-shadow:0 12px 26px rgba(0,111,230,.22)}
.core{width:310px;height:225px}.pad-foundation{clip-path:none;border-radius:36px;margin:36px;background:radial-gradient(circle at 30% 25%,#dffaff,#62d6fa 40%,#006dcf);box-shadow:inset 12px 12px 25px rgba(255,255,255,.52),inset -12px -18px 30px rgba(0,51,112,.26),0 25px 55px rgba(0,91,173,.22)}
.token-gift { display:grid;grid-template-columns:.72fr 1.28fr;gap:34px;align-items:center;margin-top:18px;padding:30px;border:1px solid rgba(143,230,255,.28);border-radius:20px;background:linear-gradient(145deg,#07233c,#004fa7);color:#fff}.gift-card-visual{aspect-ratio:1.58/1;display:flex;flex-direction:column;justify-content:space-between;padding:24px;border:1px solid rgba(255,255,255,.42);border-radius:20px;background:radial-gradient(circle at 75% 20%,rgba(64,199,244,.55),transparent 34%),linear-gradient(145deg,#06192b,#087bd9);box-shadow:0 24px 55px rgba(0,0,0,.25);font-weight:900;letter-spacing:.1em}.gift-card-visual b{font-size:clamp(3rem,7vw,6.5rem);line-height:.8;letter-spacing:-.07em}.gift-card-visual small{color:#9fe9ff}.gift-copy h3{margin:8px 0 13px;font-size:clamp(2rem,3.2vw,3.5rem);line-height:.98;letter-spacing:-.05em}.gift-copy>p:not(.application-label){color:#c8deec;line-height:1.6}.token-amounts{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.token-amounts button{padding:10px 14px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(255,255,255,.08);color:#fff;font-weight:850;cursor:pointer}.token-amounts button.active{background:#fff;color:#0054ac}.gift-copy>a{display:inline-block;margin:2px 0 14px;padding:13px 18px;border-radius:999px;background:#fff;color:#0054ac;font-weight:900}.gift-copy>small{display:block;color:#9db8ca;font-size:.7rem;line-height:1.45}
.gift-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}.gift-fields label span{display:block;margin-bottom:6px;color:#bfeaff;font-size:.7rem;font-weight:850}.gift-fields input,.gift-fields select{width:100%;padding:11px;border:1px solid rgba(255,255,255,.34);border-radius:10px;background:rgba(3,16,28,.5);color:#fff;font:inherit}.gift-fields option{color:#06192b;background:#fff}
.rewards-network{margin-top:18px;padding:34px;border:1px solid rgba(121,200,66,.34);border-radius:20px;background:linear-gradient(145deg,#071d31,#063b4f);color:#fff}.rewards-heading{display:grid;grid-template-columns:1fr 1.4fr;gap:24px;align-items:end}.rewards-heading .application-label{grid-column:1/-1}.rewards-heading h3{margin:0;font-size:clamp(2.2rem,4vw,4rem);line-height:.94;letter-spacing:-.05em}.rewards-heading>p:last-child{margin:0;color:#bdd6e4;line-height:1.6}.rewards-paths{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}.rewards-paths article{position:relative;padding:26px;border:1px solid rgba(143,230,255,.22);border-radius:16px;background:rgba(255,255,255,.05)}.rewards-code{display:grid;place-items:center;width:44px;height:44px;border:1px solid #40c7f4;border-radius:50%;background:#006fe6;font-weight:950}.rewards-paths h4{margin:18px 0 8px;font-size:1.4rem}.rewards-paths p,.rewards-paths li{color:#bdd6e4;line-height:1.55}.rewards-paths ul{padding-left:20px}.rewards-paths a{display:inline-block;margin-top:8px;color:#8fe6ff;font-weight:900;border-bottom:1px solid rgba(143,230,255,.55)}.token-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:10px;align-items:center;margin-top:18px;padding:18px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(0,0,0,.16)}.token-flow span{color:#d7ecf6;font-size:.82rem}.token-flow b{display:block;margin-bottom:4px;color:#79c842}.token-flow i{color:#40c7f4;font-style:normal}.rewards-terms{margin:16px 0 0;color:#8eafc1;font-size:.72rem;line-height:1.5}
@media(max-width:900px){.avatar-select{grid-template-columns:1fr 1fr}.build-grid{grid-template-columns:1fr}.token-gift{grid-template-columns:1fr}.crystal-node{min-width:76px}.experience-topline{align-items:flex-start;flex-direction:column}}
@media(max-width:900px){.rewards-heading,.rewards-paths{grid-template-columns:1fr}.token-flow{grid-template-columns:1fr}.token-flow i{transform:rotate(90deg);justify-self:start}}
@media(max-width:850px){.core{width:235px;height:170px}}
@media(max-width:620px){.experience-shell{padding:10px}.avatar-select{grid-template-columns:1fr}.crystal-tree-map{overflow:visible;padding-bottom:12px}.crystal-tree-map>img{aspect-ratio:4/5}.crystal-tree-map figcaption{position:static;border:0;border-radius:0}.crystal-node{position:static;display:inline-flex;width:calc(50% - 7px);min-width:0;aspect-ratio:auto;clip-path:none;margin:6px 2px;padding:11px;border-radius:10px}.crystal-node span{font-size:.85rem}.crystal-node b{font-size:.68rem}.build-station,.token-gift{padding:20px 15px}.build-header,.build-actions{align-items:flex-start;flex-direction:column}.build-identity{text-align:left}.build-actions button{width:100%}.gift-fields{grid-template-columns:1fr}}
@media(max-width:620px){.pad-origin{grid-template-columns:auto 1fr}.pad-origin-arrow{display:none}}