/* ===== Cloud graphics (hero + footer), inspired by layered scallop illustrations ===== */
.clouds{position:absolute;left:50%;width:100vw;transform:translateX(-50%);pointer-events:none}
.cloud-layer{position:absolute;inset:0}
.cloud-layer svg{position:absolute;left:0;bottom:0;width:100%;height:100%;display:block}

/* --- hero --- */
.showcase{isolation:isolate;padding-top:40px;margin-bottom:140px}
.hero-word{position:absolute;left:50%;top:-150px;transform:translateX(-50%);z-index:-2;font-weight:800;letter-spacing:-.06em;line-height:.8;
  font-size:clamp(160px,30vw,460px);color:#141a0a;-webkit-text-stroke:1px rgba(200,255,61,.18);user-select:none;white-space:nowrap}
.hero-clouds{bottom:-170px;height:85%;z-index:-1}
.hero-clouds-front{bottom:-260px;height:52%;z-index:3}
.showcase .window{position:relative;z-index:1}
.bubbles i{position:absolute;border-radius:50%;background:#fbf6e6;animation:bob 6s ease-in-out infinite}
.bubbles i:nth-child(1){width:34px;height:34px;left:8%;top:18%}
.bubbles i:nth-child(2){width:18px;height:18px;left:11%;top:8%;animation-delay:-2s}
.bubbles i:nth-child(3){width:12px;height:12px;left:6%;top:4%;animation-delay:-4s}
.bubbles i:nth-child(4){width:46px;height:46px;right:7%;top:6%;animation-delay:-1s}
.bubbles i:nth-child(5){width:20px;height:20px;right:12%;top:-6%;animation-delay:-3s}
@keyframes bob{50%{transform:translateY(-14px)}}
.showcase .float-card{z-index:4}

/* --- footer --- */
.footer{position:relative;padding:0;border-top:none;overflow:visible;margin-top:120px;background:transparent}
.foot-clouds{top:-150px;height:240px;z-index:0}
.foot-body{position:relative;z-index:1;background:var(--accent);color:#0a0a0a;padding:40px 20px 28px;overflow:hidden}
.foot-nav{display:flex;justify-content:center;gap:clamp(16px,3vw,36px);flex-wrap:wrap;font-weight:500;font-size:15px}
.foot-nav a{position:relative}
.foot-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.foot-nav a:hover::after{transform:scaleX(1);transform-origin:left}
.foot-stage{position:relative;display:grid;place-items:center;min-height:560px;margin-top:20px}
.foot-word{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;pointer-events:none;user-select:none}
.foot-word span{font-size:clamp(90px,17vw,270px);font-weight:800;letter-spacing:-.06em;line-height:.8;color:#a9dc1f;white-space:nowrap}
.foot-word span:first-child{margin-left:-2vw}.foot-word span:last-child{margin-right:-2vw}

/* pager device */
.pager{position:relative;z-index:1;width:min(560px,100%);background:#141514;border-radius:34px;padding:22px;
  box-shadow:0 2px 0 #2a2b2a inset,0 -6px 0 #0a0b0a inset,0 40px 80px rgba(20,40,0,.35),0 12px 24px rgba(0,0,0,.25)}
.pager-screen{position:relative;background:#0f0f0f;border-radius:22px;padding:18px}
.pager-screen{background:linear-gradient(#0c0c0c,#0c0c0c) padding-box}
.pager-screen::before{content:"";position:absolute;inset:18px 18px auto 18px;height:0}
.lcd-top,.lcd-msg,.lcd-mail,.lcd-phone{position:relative;z-index:1}
.pager-screen{display:grid;gap:6px;color:#0b2a06;font-family:var(--mono);
  background:radial-gradient(120% 140% at 50% 0%,#d9ff7a,#b5f03a 60%,#9bd32a);border:10px solid #0c0c0c;box-shadow:inset 0 0 30px rgba(20,60,0,.35)}
.pager-screen::after{content:"";position:absolute;inset:0;border-radius:12px;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px)}
.lcd-top{display:flex;justify-content:space-between;font-size:14px;font-weight:500}
.lcd-msg{text-align:center;font-size:14px;margin-top:6px}
.lcd-mail{text-align:center;font-size:clamp(18px,3.4vw,28px);font-weight:500;letter-spacing:-.02em;word-break:break-all}
.lcd-phone{text-align:center;font-size:15px;opacity:.8}
.lcd-mail:hover,.lcd-phone:hover{text-decoration:underline}
.lcd-cursor{position:absolute;right:18px;bottom:14px;width:10px;height:16px;background:#0b2a06;animation:blink 1s steps(1) infinite;z-index:1}
.pager-brand{display:flex;justify-content:space-between;align-items:baseline;padding:16px 8px 18px;color:#6e706d}
.pager-brand em{font-weight:700;font-size:15px;font-style:italic;color:#8b8d89}
.pager-brand span{font-family:var(--mono);font-size:11px}
.pager-keys{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.grip{width:34px;height:40px;background:repeating-linear-gradient(110deg,#2a2b2a 0 5px,transparent 5px 10px);border-radius:6px}
.key{padding:13px 18px;border-radius:999px;background:#1d1e1d;color:#c9cbc6;font-size:14px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.06),inset 0 -3px 0 rgba(0,0,0,.6),0 3px 0 #0a0a0a;transition:transform .15s,box-shadow .15s,color .2s}
.key:hover{color:#fff}
.key:active{transform:translateY(2px);box-shadow:inset 0 2px 4px rgba(0,0,0,.6),0 1px 0 #0a0a0a}
.key-main{margin-left:auto;background:#f2e3c2;color:#1a1a1a;font-weight:600;padding:14px 22px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(0,0,0,.18),0 3px 0 #a99b78}
.key-main:hover{color:#000;background:#fff2d4}

.foot-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:20px;margin-top:30px;font-size:13px;color:#2c3a10}
.foot-mark{font-size:44px;line-height:1;color:#0a0a0a;transition:transform .6s var(--ease)}
.foot-mark:hover{transform:rotate(180deg) scale(1.1)}
.foot-legal{display:flex;gap:16px;justify-content:flex-end;flex-wrap:wrap}
.foot-legal a:hover{text-decoration:underline}

@media (max-width:760px){
  .hero-clouds{height:55%;bottom:-40px}
  .hero-clouds-front{height:30%;bottom:-90px}
  .bubbles i:nth-child(4){width:28px;height:28px}
  .footer{margin-top:80px}
  .foot-clouds{top:-90px;height:140px}
  .foot-stage{min-height:0;padding:70px 0 40px}
  .foot-word{flex-direction:column;justify-content:space-between;align-items:center}
  .foot-word span{font-size:30vw}
  .pager{padding:14px;border-radius:26px}
  .pager-screen{padding:14px;border-width:7px}
  .key{padding:11px 14px;font-size:13px}
  .key-main{margin-left:0;width:100%;text-align:center}
  .grip{display:none}
  .foot-bottom{grid-template-columns:1fr;text-align:center;justify-items:center;padding-bottom:70px}
  .foot-legal{justify-content:center}
}
.hero-ctas,.hero-sub,.hero-title,.proof{position:relative;z-index:5}
@media (max-width:760px){.hero-word{top:-60px;font-size:42vw}}
/* hero scene without dashboard */
.showcase{height:clamp(320px,40vw,520px);margin-top:40px;margin-bottom:0}
.hero-word{top:0}
.hero-clouds{bottom:-40px;height:90%}
.hero-clouds-front{bottom:-120px;height:55%}
@media (max-width:760px){.showcase{height:300px}.hero-word{top:10px}}
.hero-word{color:#1a2210;-webkit-text-stroke:1px rgba(200,255,61,.3)}
.foot-clouds{top:-230px;height:320px}
.foot-body{margin-top:-2px}
@media (max-width:760px){.foot-clouds{top:-120px;height:170px}}
.footer{margin-top:calc(28vw + 40px)}
@media (max-width:760px){.footer{margin-top:calc(28vw + 60px)}}
/* compact footer */
.footer{margin-top:220px}
.foot-clouds{z-index:0}
.foot-body{padding:10px 20px 22px}
.foot-stage{min-height:0;padding:36px 0 30px;margin-top:10px}
.foot-word span{font-size:clamp(80px,12vw,180px)}
.pager{width:min(470px,100%);padding:16px;border-radius:28px}
.pager-screen{padding:12px 14px;border-width:8px;gap:4px}
.lcd-mail{font-size:clamp(17px,2.4vw,23px)}
.lcd-top,.lcd-msg{font-size:12.5px}
.pager-brand{padding:10px 6px 12px}
.key{padding:10px 15px;font-size:13px}
.key-main{padding:11px 18px}
.foot-bottom{margin-top:6px}
.foot-mark{font-size:30px}
@media (max-width:760px){.foot-stage{padding:30px 0 20px}.foot-word span{font-size:26vw}}
.pager{width:min(530px,100%)}
.pager-keys{flex-wrap:nowrap;gap:8px}
@media (max-width:760px){.pager-keys{flex-wrap:wrap}}