/* ─── ROKA Digital Assets — Shared Stylesheet ─── */
:root {
  --bg:      #0E1A30;
  --card:    #162847;
  --card2:   #1D3358;
  --accent:  #00E0A0;
  --accent2: #00BFFF;
  --pink:    #E8879F;
  --text:    #E2E8F4;
  --text2:   #A8BBDA;
  --text3:   #D8E2F4;
  --border:  rgba(226,232,244,.06);
  --bh:      rgba(0,224,160,.14);
  --grad:    linear-gradient(135deg,#00E0A0 0%,#00BFFF 50%,#E8879F 100%);
  --nav-h:   72px;
  --max:     1200px;
  --pad:     clamp(16px,4vw,28px);
  --r:       20px;
  --r2:      12px;
  --shadow:  0 20px 60px rgba(0,0,0,.35);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:'Manrope',sans-serif;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:rgba(0,224,160,.18);color:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:'Manrope',sans-serif;cursor:pointer;border:none;background:none}

/* ── Layout ── */
.ctr{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.section{padding:clamp(60px,8vw,120px) 0}

/* ── Typography ── */
.label{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.label::before{content:'';width:24px;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:1px;flex-shrink:0}
h1,h2,h3,h4{line-height:1.15;letter-spacing:-.01em}
.h1{font-size:clamp(36px,5.5vw,72px);font-weight:800;color:var(--text)}
.h2{font-size:clamp(26px,3.8vw,48px);font-weight:700;color:var(--text)}
.h3{font-size:clamp(18px,2vw,24px);font-weight:700;color:var(--text)}
.grad-text{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.body-lg{font-size:clamp(15px,1.6vw,18px);color:var(--text3);line-height:1.75}
.body-sm{font-size:14px;color:var(--text3);line-height:1.6}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:15px 34px;border-radius:60px;font-weight:700;font-size:15px;transition:all .35s cubic-bezier(.16,1,.3,1);white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,#00E0A0,#00C88E);color:#0A1020;box-shadow:0 4px 24px rgba(0,224,160,.22)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 40px rgba(0,224,160,.38)}
.btn-outline{border:1.5px solid rgba(226,232,244,.15);color:var(--text)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn-sm{padding:10px 24px;font-size:13px}

/* ── Cards ── */
.card{background:var(--card);border-radius:var(--r);border:1px solid var(--border);transition:all .4s cubic-bezier(.16,1,.3,1)}
.card:hover{background:var(--card2);border-color:var(--bh);transform:translateY(-4px);box-shadow:var(--shadow)}

/* ── Noise overlay ── */
.noise{position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.018;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:128px}

/* ── Nav ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;transition:padding .3s,background .3s;padding:16px 0}
.nav.scrolled{padding:10px 0;background:rgba(14,26,48,.9);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-logo{display:flex;align-items:center;flex-shrink:0}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{padding:10px 16px;border-radius:10px;font-size:15px;font-weight:600;color:#C8D8EE;transition:all .25s;letter-spacing:.01em}
.nav-links a:hover,.nav-links a.active{color:#fff;background:rgba(226,232,244,.1)}
.nav-right{display:flex;align-items:center;gap:10px}
.lang-sw{display:flex;border-radius:12px;background:rgba(14,26,48,.8);border:1px solid var(--border);padding:3px;gap:2px}
.lang-sw button{padding:7px 14px;border-radius:9px;font-weight:700;font-size:12px;transition:all .25s;color:var(--text2)}
.lang-sw button.on{background:linear-gradient(135deg,var(--accent),#00C88E);color:#0E1A30;box-shadow:0 2px 10px rgba(0,224,160,.28)}
.nav-consult{padding:10px 18px;font-size:13px;border-radius:60px;border:1.5px solid rgba(226,232,244,.2);color:var(--text);font-weight:600;transition:all .3s;white-space:nowrap;display:inline-flex;align-items:center}
.nav-consult:hover{border-color:var(--accent);color:var(--accent);background:rgba(0,224,160,.06)}
.nav-cta{padding:10px 22px;font-size:13px}
.burger{display:none;width:40px;height:40px;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--border);color:var(--text)}

/* Mobile overlay */
.mob-menu{position:fixed;inset:0;z-index:300;background:rgba(14,26,48,.97);backdrop-filter:blur(20px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;transform:translateX(100%);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.mob-menu.open{transform:translateX(0)}
.mob-menu a{font-size:22px;font-weight:700;color:var(--text);transition:color .2s}
.mob-menu a:hover{color:var(--accent)}
.mob-close{position:absolute;top:20px;right:20px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid var(--border);color:var(--text)}

/* ── Curtain ── */
.curtain{position:fixed;inset:0;z-index:10000;background:radial-gradient(ellipse at 50% 50%,#121F38,#0A1222);display:flex;align-items:center;justify-content:center;text-align:center;padding:0 20px;animation:curtFade 1.7s cubic-bezier(.4,0,.2,1) .3s forwards}
@keyframes curtFade{0%{opacity:1}60%{opacity:1}100%{opacity:0;pointer-events:none;visibility:hidden}}
.curtain-logo{animation:logoReveal 1.5s cubic-bezier(.4,0,.2,1) .1s forwards;opacity:0}
@keyframes logoReveal{0%{opacity:0;transform:scale(.85);filter:blur(10px)}50%{opacity:1;transform:scale(1.02);filter:blur(0)}100%{opacity:0;transform:scale(1.06);filter:blur(2px)}}

/* ── IBM Plex Mono for BLOCKCHAIN/tag labels — Cyrillic + Latin, no italic ── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap');

.blockchain-label{
  display:inline-block;
  font-family:'IBM Plex Mono','Courier New',monospace;
  font-size:clamp(10px,1.05vw,11.5px);
  font-weight:400;
  font-style:normal;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(210,224,248,.88);
  padding:4px 12px;
  border:1px solid rgba(226,232,244,.18);
  border-radius:20px;
  margin-bottom:0;
}

/* Label row: BLOCKCHAIN + reg tags side by side */
.hero-label-row{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.reg-tags{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.reg-tag{
  font-family:'IBM Plex Mono','Courier New',monospace;
  font-size:clamp(10px,1.05vw,11.5px);
  font-weight:400;
  font-style:normal;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(210,224,248,.88);
  padding:4px 9px 4px 10px;
  border:1px solid rgba(226,232,244,.18);
  border-radius:20px;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
/* ── Hero Mesh — blobs strictly clipped to hero zone ── */
.hero-wrap{
  position:relative;
  overflow:hidden;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding-top:var(--nav-h);
  /* Force GPU compositing layer — ensures blur doesn't bleed past bounds */
  transform:translateZ(0);
  will-change:transform;
  /* Explicit clip that browsers honour even with filter:blur children */
  -webkit-mask-image:-webkit-radial-gradient(white,black);
}
.mesh-bg{position:absolute;inset:0;overflow:hidden;z-index:0}
.blob{position:absolute;border-radius:50%;filter:blur(72px);opacity:.42;will-change:transform}
@keyframes bA{0%{transform:translate(0,0) scale(1)}15%{transform:translate(12%,-10%) scale(1.18)}35%{transform:translate(-6%,14%) scale(.88)}55%{transform:translate(10%,6%) scale(1.1)}75%{transform:translate(-10%,-8%) scale(.93)}100%{transform:translate(0,0) scale(1)}}
@keyframes bB{0%{transform:translate(0,0) scale(1)}15%{transform:translate(-12%,12%) scale(1.12)}35%{transform:translate(10%,-6%) scale(.85)}55%{transform:translate(-8%,10%) scale(1.15)}75%{transform:translate(6%,-12%) scale(.94)}100%{transform:translate(0,0) scale(1)}}
@keyframes bC{0%{transform:translate(0,0) scale(1.06)}20%{transform:translate(9%,11%) scale(.82)}45%{transform:translate(-12%,-7%) scale(1.2)}70%{transform:translate(6%,-10%) scale(.9)}100%{transform:translate(0,0) scale(1.06)}}
@keyframes bD{0%{transform:translate(0,0) scale(.94)}20%{transform:translate(14%,-8%) scale(1.14)}45%{transform:translate(-5%,12%) scale(.86)}70%{transform:translate(-11%,-5%) scale(1.08)}100%{transform:translate(0,0) scale(.94)}}
@keyframes bE{0%{transform:translate(0,0) scale(1)}25%{transform:translate(8%,14%) scale(1.18)}50%{transform:translate(-12%,-10%) scale(.85)}75%{transform:translate(5%,-6%) scale(1.05)}100%{transform:translate(0,0) scale(1)}}
@keyframes bF{0%{transform:translate(0,0) scale(1.1)}20%{transform:translate(-10%,8%) scale(.88)}45%{transform:translate(12%,-12%) scale(1.16)}70%{transform:translate(-7%,5%) scale(.92)}100%{transform:translate(0,0) scale(1.1)}}
@keyframes bG{0%{transform:translate(0,0) scale(.9)}25%{transform:translate(11%,9%) scale(1.12)}50%{transform:translate(-9%,-11%) scale(.96)}75%{transform:translate(4%,7%) scale(1.06)}100%{transform:translate(0,0) scale(.9)}}
.blob-cursor{
  /* absolute inside .hero-wrap so it never bleeds outside */
  position:absolute;
  width:320px;height:320px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(0,180,255,.38) 0%,rgba(0,130,255,.18) 40%,transparent 68%);
  border-radius:50%;
  pointer-events:none;
  z-index:3;
  filter:blur(22px);
  mix-blend-mode:screen;
  top:40%;left:50%;
  /* opacity toggled by JS when cursor leaves hero */
  transition:opacity .5s ease;
}
.hero-content{position:relative;z-index:2;width:100%}

/* ── Stats bar ── */
.stats-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border-radius:var(--r);overflow:hidden;margin-top:clamp(40px,6vw,80px)}
.stat-item{background:var(--card);padding:28px 24px;text-align:center}
.stat-num{font-size:clamp(24px,3vw,38px);font-weight:800;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1}
.stat-label{font-size:13px;color:var(--text2);margin-top:4px}

/* ── Services ── */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.srv-card{background:var(--card);border-radius:var(--r);padding:28px 24px;border:1px solid var(--border);transition:all .4s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden}
.srv-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,224,160,.04),transparent);opacity:0;transition:opacity .4s}
.srv-card:hover{background:var(--card2);border-color:var(--bh);transform:translateY(-5px);box-shadow:var(--shadow)}
.srv-card:hover::before{opacity:1}
.srv-icon{width:52px;height:52px;border-radius:14px;background:rgba(0,224,160,.1);border:1px solid rgba(0,224,160,.15);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.srv-icon svg{color:var(--accent)}
.srv-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:8px}
.srv-desc{font-size:13px;color:var(--text2);line-height:1.6}

/* ── Process ── */
.process-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;position:relative}
.process-grid::before{content:'';position:absolute;top:38px;left:calc(10% + 20px);right:calc(10% + 20px);height:1px;background:linear-gradient(90deg,transparent,rgba(0,224,160,.3),rgba(0,191,255,.3),rgba(232,135,159,.3),transparent);z-index:0}
.step{text-align:center;position:relative;z-index:1}

/* All step-nums share ONE wide multi-colour gradient that sweeps across */
.step-num{
  font-size:60px;font-weight:800;line-height:1;margin-bottom:16px;display:block;
  background-image:linear-gradient(90deg,
    #00E0A0 0%,
    #00D4B8 12%,
    #00BFFF 25%,
    #0099EE 38%,
    #6677CC 50%,
    #C080A0 62%,
    #E8879F 74%,
    #00BFFF 87%,
    #00E0A0 100%
  );
  background-size:250% 100%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:numShimmer 3.5s ease-in-out infinite alternate;
}
@keyframes numShimmer{
  0%{background-position:0% 50%}
  100%{background-position:100% 50%}
}
/* Wave: each digit is offset so colours roll left→right across all 5 */
.step:nth-child(1) .step-num{animation-delay:0s}
.step:nth-child(2) .step-num{animation-delay:.45s}
.step:nth-child(3) .step-num{animation-delay:.9s}
.step:nth-child(4) .step-num{animation-delay:1.35s}
.step:nth-child(5) .step-num{animation-delay:1.8s}

/* Hero heading line 2 — same shimmer as step numbers */
.hero-shimmer{
  background-image:linear-gradient(90deg,
    #00E0A0 0%,
    #00D4B8 12%,
    #00BFFF 25%,
    #0099EE 38%,
    #6677CC 50%,
    #C080A0 62%,
    #E8879F 74%,
    #00BFFF 87%,
    #00E0A0 100%
  );
  background-size:250% 100%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:numShimmer 8s ease-in-out infinite alternate;
  /* stretch to fill full container width */
  display:block;
  width:100%;
}

.step-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:8px}
.step-desc{font-size:13px;color:var(--text2);line-height:1.55}

/* ── Audience ── */
.aud-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.aud-card{padding:48px 40px;border-radius:24px;border:1px solid var(--border);transition:all .4s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden}
.aud-card-biz{background:linear-gradient(145deg,rgba(0,224,160,.06),rgba(22,40,71,1))}
.aud-card-inv{background:linear-gradient(145deg,rgba(0,191,255,.06),rgba(22,40,71,1))}
.aud-card:hover{transform:translateY(-4px);border-color:var(--bh);box-shadow:var(--shadow)}
.aud-type{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.aud-list{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:10px}
.aud-list li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--text3)}
.aud-list li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-top:8px}

/* ── Partners marquee ── */
.marquee-wrap{overflow:hidden;padding:12px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:0;width:max-content;animation:marq 35s linear infinite;align-items:center}
@keyframes marq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.marquee-wrap:hover .marquee-track{animation-play-state:paused}
.partner-item{
  /* perfectly uniform slots — generous spacing */
  width:300px;
  height:110px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  opacity:.75;
  transition:opacity .3s;
  padding:0 36px;
}
.partner-item:hover{opacity:1}
.partner-item img,.partner-item svg{
  /* all logos same height, prominent */
  height:64px;
  width:auto;
  max-width:220px;
  object-fit:contain;
}

/* ── Partner logo CSS helpers ── */
.partner-logo{display:block}
.partner-logo-invert{filter:brightness(0) invert(1);opacity:.72}
.partner-logo-screen{mix-blend-mode:screen;filter:brightness(1.15);opacity:.9}

/* ── Blog ── */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.blog-card{background:var(--card);border-radius:var(--r);overflow:hidden;border:1px solid var(--border);transition:all .4s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column}
.blog-card:hover{transform:translateY(-5px);border-color:rgba(0,191,255,.2);box-shadow:var(--shadow)}
.blog-thumb{height:200px;background:linear-gradient(135deg,var(--card2),#1a3050);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.blog-thumb-pattern{width:100%;height:100%;opacity:.15}
.blog-tag{position:absolute;top:16px;left:16px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:20px;background:rgba(0,224,160,.15);color:var(--accent);border:1px solid rgba(0,224,160,.2)}
.blog-body{padding:24px;flex:1;display:flex;flex-direction:column}
.blog-date{font-size:12px;color:var(--text2);margin-bottom:8px}
.blog-title{font-size:17px;font-weight:700;color:var(--text);line-height:1.4;margin-bottom:10px;flex:1}
.blog-excerpt{font-size:13px;color:var(--text2);line-height:1.6;margin-bottom:16px}
.blog-read{font-size:13px;font-weight:700;color:var(--accent);display:inline-flex;align-items:center;gap:6px;transition:gap .25s}
.blog-card:hover .blog-read{gap:10px}

/* ── CTA ── */
.cta-section{background:linear-gradient(145deg,rgba(0,224,160,.05),rgba(0,191,255,.04),transparent);border-radius:32px;padding:clamp(48px,6vw,80px) clamp(28px,4vw,64px);border:1px solid var(--border);position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;top:-80px;right:-80px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(0,224,160,.07),transparent 70%);pointer-events:none}
.cta-form{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:14px;margin-top:36px;align-items:end}
.form-group{display:flex;flex-direction:column;gap:8px}
.form-label{font-size:12px;font-weight:600;color:var(--text2)}
.form-input,.form-select{width:100%;padding:15px 18px;border-radius:var(--r2);background:rgba(14,26,48,.8);border:1px solid rgba(226,232,244,.1);color:var(--text);font-family:'Manrope',sans-serif;font-size:14px;outline:none;transition:border-color .3s;-webkit-appearance:none}
.form-input:focus,.form-select:focus{border-color:var(--accent)}
.form-input::placeholder{color:var(--text2)}
.form-select option{background:#162847}

/* ── Footer ── */
.footer{padding:clamp(48px,6vw,80px) 0 32px;border-top:1px solid var(--border)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-brand-desc{font-size:14px;color:var(--text2);line-height:1.7;margin-top:14px;max-width:280px}
.footer-col-title{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text2);margin-bottom:18px}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-links a{font-size:14px;color:var(--text2);transition:color .25s}
.footer-links a:hover{color:var(--accent)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:24px;border-top:1px solid var(--border)}
.footer-contacts{display:flex;align-items:center;gap:32px}
.footer-contact-link{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:#fff;transition:color .25s;white-space:nowrap}
.footer-contact-link:hover{color:var(--accent)}
.footer-copy{font-size:13px;color:var(--text2)}

/* ── Floating Telegram ── */
.ftg-wrap{position:fixed;bottom:28px;right:28px;z-index:90}
.ftg-btn{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#00C88E);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,224,160,.35);position:relative;z-index:2;transition:all .3s cubic-bezier(.16,1,.3,1);color:#0A1020}
.ftg-btn:hover{transform:scale(1.1);box-shadow:0 8px 32px rgba(0,224,160,.5)}
.ftg-ring{position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(0,224,160,.4);animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;z-index:1}
.ftg-ring2{position:absolute;inset:-12px;border-radius:50%;border:1.5px solid rgba(0,224,160,.2);animation:pulse 2s cubic-bezier(.4,0,.6,1) .6s infinite;z-index:0}
@keyframes pulse{0%{transform:scale(.85);opacity:.8}100%{transform:scale(1.4);opacity:0}}

/* ══ REVEALS — investax.io style ══ */

/* 1. Standard reveal: slide up + fade */
.reveal{
  opacity:0;
  transform:translateY(50px) scale(.97);
  transition:
    opacity  1s cubic-bezier(.16,1,.3,1),
    transform 1s cubic-bezier(.16,1,.3,1);
}
.reveal.in{opacity:1;transform:none}

/* Stagger delays */
.reveal-d1{transition-delay:.12s}
.reveal-d2{transition-delay:.24s}
.reveal-d3{transition-delay:.36s}
.reveal-d4{transition-delay:.48s}
.reveal-d5{transition-delay:.6s}

/* 2. Clip-path wipe — headings slide up from underneath mask */
.reveal-clip{
  display:block;
  clip-path:inset(0 0 100% 0);
  transform:translateY(20px);
  opacity:0;
  transition:
    clip-path 1.1s cubic-bezier(.16,1,.3,1),
    transform 1.1s cubic-bezier(.16,1,.3,1),
    opacity .6s ease;
}
.reveal-clip.in{
  clip-path:inset(0 0 0% 0);
  transform:translateY(0);
  opacity:1;
}

/* 3. Slide from left — labels */
.reveal-left{
  opacity:0;
  transform:translateX(-30px);
  transition:
    opacity .8s cubic-bezier(.16,1,.3,1),
    transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal-left.in{opacity:1;transform:none}

/* 4. Section sweep line — thin accent drawn on section enter */
.section-sweep-line{
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(0,224,160,.5) 30%,
    rgba(0,191,255,.4) 60%,
    transparent 100%
  );
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.2s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
  z-index:1;
}
section.section{position:relative;}
.section-sweep-line.drawn{transform:scaleX(1)}

/* 5. Investax-style gradient section dividers */
.section-gradient-divider{
  position:absolute;
  bottom:0;left:0;right:0;
  height:120px;
  background:linear-gradient(to bottom,transparent,rgba(14,26,48,.6));
  pointer-events:none;
  z-index:1;
}

/* 6. Section parallax content shift */
.section .ctr{
  transition:transform .1s linear;
}

/* ── Page Hero (inner pages) ── */
.page-hero{padding:clamp(100px,12vw,150px) 0 clamp(48px,6vw,80px);position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at 30% 50%,rgba(0,224,160,.05),transparent 60%);pointer-events:none}
.page-hero-breadcrumb{font-size:12px;color:var(--text2);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.page-hero-breadcrumb a{color:var(--accent);transition:opacity .2s}
.page-hero-breadcrumb a:hover{opacity:.7}
.page-hero-breadcrumb span{color:var(--text2)}
/* Inner page titles → white, not gradient */
.page-hero .grad-text{background:none;-webkit-background-clip:unset;-webkit-text-fill-color:var(--text);background-clip:unset;color:var(--text)}
/* Page hero content is always at top — no reveal animation, immediately visible */
.page-hero .reveal{opacity:1!important;transform:none!important;transition:none!important}
.page-hero .label{opacity:1!important;transform:none!important}

/* ── Partner logos ── */
.partner-logo{height:64px;width:auto;object-fit:contain;display:block}
.partner-logo-invert{filter:brightness(0) invert(1);opacity:.72}
.partner-logo-screen{mix-blend-mode:screen;filter:brightness(1.15);opacity:.9}

/* ── Divider ── */
.divider{height:1px;background:var(--border);margin:0}

/* ─── RESPONSIVE ─── */
@media(max-width:1024px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .process-grid{grid-template-columns:repeat(3,1fr);gap:20px}
  .process-grid::before{display:none}
  .step:nth-child(4),.step:nth-child(5){grid-column:auto}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .footer-grid > *:first-child{grid-column:1/-1}
  .cta-form{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  :root{--nav-h:62px}
  .nav-links,.nav-cta,.nav-consult{display:none}
  .burger{display:flex}
  .services-grid{grid-template-columns:1fr 1fr;gap:12px}
  .srv-card{padding:20px 18px}
  .process-grid{grid-template-columns:1fr 1fr;gap:16px}
  .step:nth-child(5){grid-column:1/-1}
  .aud-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .stats-bar{grid-template-columns:1fr 1fr}
  .cta-form{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .footer-bottom{flex-direction:column;gap:20px;text-align:center}
  .footer-contacts{flex-wrap:wrap;justify-content:center;gap:16px}
  .footer-contact-link{font-size:13px}
  .ftg-wrap{bottom:20px;right:20px}
  .aud-card{padding:32px 24px}
  /* Hero label row stack on mobile */
  .hero-label-row{gap:8px}
  .reg-tag,.blockchain-label{font-size:10px;padding:3px 8px}
}
@media(max-width:480px){
  .services-grid{grid-template-columns:1fr}
  .process-grid{grid-template-columns:1fr}
  .step:nth-child(5){grid-column:auto}
  .stats-bar{grid-template-columns:1fr 1fr}
  .blog-grid{grid-template-columns:1fr}
  .btn{padding:13px 26px;font-size:14px}
  .step-num{font-size:48px}
}

/* ─── BENEFITS SECTION (inspired by cfa.digital) ─── */
.benefits-layout{display:grid;grid-template-columns:1fr 2fr;gap:48px;align-items:start}
.benefits-left-label{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;line-height:1.4}
.benefits-left-text{font-size:clamp(15px,1.6vw,18px);color:var(--text3);line-height:1.75;margin-top:auto;padding-top:32px}
.benefits-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border-radius:var(--r);overflow:hidden}
.benefit-card--wide{grid-column:span 2;display:flex;flex-direction:row;align-items:center;gap:28px;padding:28px 32px}
.benefit-card--wide .benefit-icon{margin-bottom:0;flex-shrink:0}
.benefit-card--wide .benefit-text{margin:0}
.benefit-card{background:var(--card);padding:32px 28px;position:relative;transition:background .3s}
.benefit-card:hover{background:var(--card2)}
/* Top-right corner bracket decoration — copied from cfa.digital */
.benefit-card::after{content:'';position:absolute;top:16px;right:16px;width:14px;height:14px;border-top:2px solid rgba(0,224,160,.35);border-right:2px solid rgba(0,224,160,.35)}
.benefit-icon{margin-bottom:20px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.benefit-icon svg path{fill:var(--accent) !important}
.benefit-text{font-size:14px;color:var(--text3);line-height:1.65}

/* ─── WHO NEEDS CFA (isometric illustrated cards) ─── */
.who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border-radius:var(--r);overflow:hidden}
.who-card{background:var(--card);padding:0;position:relative;transition:background .3s;display:flex;flex-direction:column}
.who-card:hover{background:var(--card2)}
.who-card::after{content:'';position:absolute;top:16px;right:16px;width:14px;height:14px;border-top:2px solid rgba(0,191,255,.3);border-right:2px solid rgba(0,191,255,.3)}
.who-card-illus{height:220px;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;overflow:hidden}
.who-card-illus::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 80%,rgba(0,191,255,.06),transparent 70%)}
.who-card-label{padding:20px 28px 28px;font-size:clamp(15px,1.4vw,17px);font-weight:700;color:var(--accent)}
.who-card-sub{padding:0 28px 24px;font-size:13px;color:var(--text2);line-height:1.6;margin-top:-8px}

/* ─── PLATFORM CAPABILITIES (alternating layout) ─── */
.platform-row{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border)}
.platform-row:first-child{border-radius:var(--r) var(--r) 0 0;overflow:hidden}
.platform-row:last-child{border-radius:0 0 var(--r) var(--r);overflow:hidden}
.platform-cell{background:var(--card);padding:clamp(32px,5vw,56px) clamp(28px,4vw,52px);display:flex;flex-direction:column;justify-content:center;transition:background .3s;position:relative}
.platform-cell:hover{background:var(--card2)}
.platform-cell-label{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.platform-cell-title{font-size:clamp(18px,2.2vw,26px);font-weight:700;color:var(--text);margin-bottom:16px;line-height:1.25}
.platform-cell-desc{font-size:14px;color:var(--text2);line-height:1.7}
.platform-cell.mockup-cell{background:rgba(14,26,48,.6);padding:clamp(24px,4vw,40px);align-items:center;justify-content:center}
/* Corner bracket on mockup cells */
.platform-cell.mockup-cell::after{content:'';position:absolute;top:16px;right:16px;width:14px;height:14px;border-top:2px solid rgba(0,224,160,.25);border-right:2px solid rgba(0,224,160,.25)}

/* App mockup styles */
.app-mockup{background:rgba(22,40,71,.9);border-radius:16px;border:1px solid rgba(226,232,244,.1);overflow:hidden;width:100%;max-width:320px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.app-mockup-bar{background:rgba(0,48,96,.8);padding:10px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(226,232,244,.08)}
.app-mockup-title{font-size:12px;font-weight:600;color:var(--text);flex:1}
.app-mockup-dots{display:flex;gap:5px}
.app-mockup-dot{width:8px;height:8px;border-radius:50%}
.app-mockup-body{padding:16px}
.app-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(226,232,244,.05)}
.app-row:last-child{border-bottom:none}
.app-row-icon{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(0,224,160,.1)}
.app-row-lines{flex:1}
.app-row-line{height:5px;border-radius:3px;background:rgba(226,232,244,.1);margin-bottom:4px}
.app-row-line:last-child{margin-bottom:0;width:60%}

/* Blockchain explorer mockup */
.explorer-mockup{background:rgba(14,26,48,.95);border-radius:16px;border:1px solid rgba(226,232,244,.1);overflow:hidden;width:100%;max-width:340px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.explorer-bar{background:rgba(0,40,80,.9);padding:10px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(226,232,244,.08)}
.explorer-body{padding:20px}
.explorer-label{font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--text2);margin-bottom:12px}
.explorer-hash{height:6px;border-radius:3px;background:rgba(0,191,255,.4);margin-bottom:6px}
.explorer-hash2{height:6px;border-radius:3px;background:rgba(0,224,160,.3);width:60%}
.explorer-confirm-label{font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--text2);margin:16px 0 8px}
.explorer-num{font-family:'Space Mono',monospace;font-size:26px;font-weight:700;color:var(--accent);letter-spacing:.05em}

/* Documents mockup */
.doc-mockup{background:rgba(22,40,71,.9);border-radius:16px;border:1px solid rgba(226,232,244,.1);overflow:hidden;width:100%;max-width:300px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.doc-body{padding:20px}
.doc-title{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.doc-line{height:5px;border-radius:3px;background:rgba(226,232,244,.1);margin-bottom:6px}
.doc-line.short{width:55%}
.doc-line.med{width:80%}
.doc-stamp{margin-top:16px;border:1px solid rgba(0,224,160,.25);border-radius:8px;padding:10px 14px;display:flex;align-items:center;gap:10px}
.doc-stamp-icon{width:22px;height:22px;border-radius:6px;background:rgba(0,224,160,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.doc-stamp-text{font-size:11px;font-weight:700;color:var(--accent)}

/* Responsive */
@media(max-width:1024px){
  .benefits-layout{grid-template-columns:1fr}
  .who-grid{grid-template-columns:1fr 1fr}
  .platform-row{grid-template-columns:1fr}
}
@media(max-width:640px){
  .benefits-grid{grid-template-columns:1fr}
  .who-grid{grid-template-columns:1fr}
  .platform-row{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════
   COMPREHENSIVE MOBILE & TABLET ADAPTATION
   Breakpoints: 1200 | 1024 | 768 | 600 | 400
═══════════════════════════════════════════ */

/* ─── Tablet 1024 ─── */
@media(max-width:1024px){
  :root{ --section-gap:72px; }
  .ctr{ padding:0 32px; }
  .h1{ font-size:clamp(36px,5vw,56px); }
  .h2{ font-size:clamp(26px,3.5vw,38px); }
  .hero-wrap{ min-height:90vh; padding-top:100px; }
  .hero-heading{ font-size:clamp(38px,5.5vw,62px); }
  .hero-sub{ font-size:clamp(15px,1.8vw,18px); }
  .hero-cta{ flex-wrap:wrap; gap:12px; }
  .stats-row{ grid-template-columns:repeat(2,1fr); gap:20px; }
  .services-grid{ grid-template-columns:1fr 1fr; }
  .process-grid{ grid-template-columns:repeat(3,1fr); }
  .mkt-grid{ grid-template-columns:1fr 1fr; }
  .blog-grid{ grid-template-columns:1fr 1fr; }
  /* FAQ */
  .faq-wrap{ max-width:100%; }
  /* nav compact */
  .nav-links a{ font-size:13px; margin:0 10px; }
}

/* ─── Tablet portrait 768 ─── */
@media(max-width:768px){
  :root{ --section-gap:56px; }
  .ctr{ padding:0 20px; }
  .h1{ font-size:clamp(30px,7vw,48px); }
  .h2{ font-size:clamp(22px,5vw,32px); }
  .nav-links{ display:none; }
  .nav-consult{ display:none; }
  .burger{ display:flex; }
  .hero-wrap{ min-height:85vh; padding-top:90px; padding-bottom:40px; }
  .hero-heading{ font-size:clamp(32px,8vw,52px); line-height:1.15; }
  .hero-sub{ font-size:15px; max-width:100%; }
  .hero-cta{ flex-direction:column; align-items:flex-start; gap:12px; }
  .hero-cta .btn{ width:100%; max-width:280px; text-align:center; justify-content:center; }
  .stats-row{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .stat-num{ font-size:clamp(28px,5vw,40px); }
  .services-grid{ grid-template-columns:1fr; gap:16px; }
  .process-grid{ grid-template-columns:1fr 1fr; gap:16px; }
  .who-grid{ grid-template-columns:1fr; }
  .mkt-grid{ grid-template-columns:1fr; }
  .blog-grid{ grid-template-columns:1fr; }
  .blog-full-grid{ grid-template-columns:1fr!important; }
  .aud-grid{ grid-template-columns:1fr; }
  .why-grid{ grid-template-columns:1fr 1fr; }
  .benefits-grid{ grid-template-columns:1fr 1fr; }
  .platform-row{ grid-template-columns:1fr; }
  .platform-cell.mockup-cell{ padding:20px 16px; min-height:auto; }
  /* CTA section */
  .cta-section{ padding:40px 28px; border-radius:20px; }
  .cta-section .h2{ font-size:clamp(22px,5vw,32px); }
  .cta-section .btn{ width:100%; max-width:280px; justify-content:center; }
  /* FAQ */
  .faq-q{ font-size:15px!important; padding:18px 0; }
  .faq-a-inner p,.faq-a-inner ul li{ font-size:14px!important; }
  /* Footer */
  .footer-grid{ grid-template-columns:1fr; gap:32px; }
  .footer-bottom{ flex-direction:column; gap:20px; align-items:flex-start; }
  .footer-contacts{ flex-wrap:wrap; gap:12px; }
  /* Page hero */
  .page-hero{ padding:100px 0 40px; }
  .page-hero .h1{ font-size:clamp(28px,7vw,44px); }
  /* Blog filters */
  .blog-filters{ gap:6px; }
  .blog-filter{ padding:7px 14px; font-size:12px; }
  /* Marquee */
  .partner-logo{ height:28px!important; }
  /* Services page */
  .service-item-grid{ grid-template-columns:1fr!important; }
}

/* ─── Mobile 600 ─── */
@media(max-width:600px){
  :root{ --section-gap:48px; }
  .ctr{ padding:0 16px; }
  .h1{ font-size:clamp(26px,8vw,40px); }
  .h2{ font-size:clamp(20px,5.5vw,28px); }
  .hero-wrap{ padding-top:80px; }
  .hero-heading{ font-size:clamp(28px,9vw,44px); }
  .hero-eyebrow{ font-size:11px; }
  .stats-row{ grid-template-columns:1fr 1fr; gap:12px; }
  .stat-card{ padding:20px 16px; }
  .stat-num{ font-size:clamp(26px,7vw,36px); }
  .stat-label{ font-size:11px; }
  .section{ padding:var(--section-gap) 0; }
  .why-grid{ grid-template-columns:1fr; }
  .benefits-grid{ grid-template-columns:1fr; }
  .process-grid{ grid-template-columns:1fr; }
  .step{ padding:24px; }
  .step-num{ font-size:32px; }
  /* Blog card */
  .blog-card{ border-radius:16px; }
  .blog-thumb{ height:150px!important; }
  .blog-title{ font-size:15px; }
  /* FAQ */
  .faq-q{ font-size:14px!important; padding:16px 0; }
  .faq-icon{ width:26px!important; height:26px!important; }
  /* Buttons */
  .btn{ padding:12px 22px; font-size:14px; }
  .nav-consult{ display:none; }
  /* Who card */
  .who-card-illus{ height:160px; }
  /* Mobile menu bigger */
  .mob-menu a{ font-size:18px; padding:14px 0; }
  /* marquee slower on mobile for readability */
  .marquee-track{ animation-duration:30s; }
  /* Global header hero images — hide decorative on small screens */
  .hero-img-wrap{ display:none; }
  /* Contacts grid */
  .contacts-grid{ grid-template-columns:1fr!important; }
  /* Footer compact */
  .footer{ padding:40px 0 24px; }
  .footer-copy{ font-size:12px; text-align:center; width:100%; }
}

/* ─── Small mobile 400 ─── */
@media(max-width:400px){
  .ctr{ padding:0 12px; }
  .h1{ font-size:clamp(22px,9vw,34px); }
  .h2{ font-size:clamp(18px,6vw,24px); }
  .hero-heading{ font-size:clamp(24px,10vw,38px); }
  .stats-row{ grid-template-columns:1fr; }
  .stat-card{ padding:18px 14px; }
  .blog-filter{ padding:6px 12px; font-size:11px; }
  .btn{ padding:11px 18px; font-size:13px; border-radius:10px; }
  /* FAQ very small */
  .faq-q{ font-size:13px!important; }
  .faq-a-inner p,.faq-a-inner ul li{ font-size:13px!important; }
}

/* ─── Mobile menu improved ─── */
.mob-menu{
  position:fixed; inset:0; background:rgba(7,17,31,.97); backdrop-filter:blur(20px);
  z-index:999; display:flex; flex-direction:column; align-items:flex-start;
  padding:80px 32px 40px; gap:0;
  transform:translateX(100%); transition:transform .35s cubic-bezier(.16,1,.3,1);
  overflow-y:auto;
}
.mob-menu.open{ transform:translateX(0); }
.mob-close{
  position:absolute; top:20px; right:20px; background:rgba(226,232,244,.08);
  border:none; border-radius:10px; width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  color:var(--text); cursor:pointer; transition:background .2s;
}
.mob-close:hover{ background:rgba(226,232,244,.14); }
.mob-menu a{
  font-size:20px; font-weight:600; color:var(--text); text-decoration:none;
  padding:14px 0; border-bottom:1px solid rgba(226,232,244,.07); width:100%;
  transition:color .2s;
}
.mob-menu a:last-of-type{ border-bottom:none; }
.mob-menu a:hover,.mob-menu a.active{ color:var(--accent); }
.mob-menu .lang-sw{ margin-top:24px; }

/* ─── Touch scroll restore (no smooth scroll on mobile) ─── */
@media(pointer:coarse){
  html{ scroll-behavior:auto; overflow-x:hidden; }
  body{ overflow-x:hidden; }
}

/* ─── General overflow fix ─── */
html,body{ overflow-x:hidden; max-width:100vw; }

/* ─── Improve tap targets on mobile ─── */
@media(max-width:768px){
  .btn{ min-height:46px; display:inline-flex; align-items:center; }
  .nav-consult,.lang-sw button{ min-height:36px; }
  a,button{ -webkit-tap-highlight-color:transparent; }
}

/* ─── Blog post page styles ─── */
.post-hero{
  padding:120px 0 60px;
  background:linear-gradient(160deg,rgba(14,26,48,.95),var(--bg));
  border-bottom:1px solid var(--border);
}
.post-hero .post-tag{
  display:inline-block; padding:5px 14px; border-radius:20px;
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(0,224,160,.12); color:var(--accent); border:1px solid rgba(0,224,160,.25);
  margin-bottom:20px;
}
.post-hero h1{
  font-size:clamp(28px,4vw,52px); font-weight:800; color:var(--text);
  line-height:1.2; max-width:800px; margin-bottom:20px;
}
.post-meta{ display:flex; gap:20px; flex-wrap:wrap; align-items:center; }
.post-meta-item{ font-size:13px; color:var(--text2); display:flex; align-items:center; gap:6px; }
.post-body{
  max-width:760px; margin:0 auto; padding:60px 0 80px;
  font-size:17px; color:rgba(226,232,244,.82); line-height:1.85;
}
.post-body h2{ font-size:clamp(20px,2.5vw,28px); font-weight:700; color:var(--text); margin:48px 0 16px; line-height:1.3; }
.post-body h3{ font-size:clamp(17px,2vw,22px); font-weight:700; color:var(--text); margin:36px 0 12px; }
.post-body p{ margin-bottom:20px; }
.post-body ul,.post-body ol{ padding-left:0; list-style:none; margin-bottom:20px; }
.post-body ul li,.post-body ol li{ padding:6px 0 6px 24px; position:relative; }
.post-body ul li::before{ content:'—'; position:absolute; left:0; color:var(--accent); }
.post-body ol{ counter-reset:ol; }
.post-body ol li{ counter-increment:ol; }
.post-body ol li::before{ content:counter(ol)'.'; position:absolute; left:0; color:var(--accent); font-weight:700; }
.post-body blockquote{
  border-left:3px solid var(--accent); padding:16px 24px; margin:28px 0;
  background:rgba(0,224,160,.04); border-radius:0 8px 8px 0;
  font-style:italic; color:var(--text2);
}
.post-body .post-highlight{
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:24px 28px; margin:32px 0; font-size:16px;
}
.post-body .post-highlight strong{ color:var(--accent); }
.post-nav{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:32px 0; border-top:1px solid var(--border); margin-top:40px;
}
.post-nav a{
  display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600;
  color:var(--text2); text-decoration:none; padding:10px 18px; border-radius:10px;
  border:1px solid var(--border); transition:all .25s;
}
.post-nav a:hover{ color:var(--accent); border-color:rgba(0,224,160,.3); }
@media(max-width:600px){
  .post-hero{ padding:100px 0 40px; }
  .post-hero h1{ font-size:clamp(22px,7vw,36px); }
  .post-body{ font-size:15px; padding:40px 0 60px; }
  .post-body h2{ font-size:clamp(18px,5vw,24px); }
  .post-body h3{ font-size:clamp(16px,4.5vw,20px); }
}

/* ─── Book card (blog page) ─── */
.book-card{
  background:var(--card); border:1px solid var(--border); border-radius:24px;
  display:grid; grid-template-columns:1fr 200px; gap:0; overflow:hidden;
  transition:all .4s cubic-bezier(.16,1,.3,1); cursor:pointer;
}
.book-card:hover{ background:var(--card2); border-color:rgba(0,224,160,.2); transform:translateY(-4px); box-shadow:var(--shadow); }
.book-card-body{ padding:36px 36px; display:flex; flex-direction:column; justify-content:space-between; }
.book-card-tag{ display:inline-block; padding:4px 12px; border-radius:16px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:rgba(0,191,255,.1); color:var(--accent2); border:1px solid rgba(0,191,255,.2); margin-bottom:16px; }
.book-card-title{ font-size:clamp(20px,2.5vw,28px); font-weight:800; color:var(--text); line-height:1.25; margin-bottom:12px; }
.book-card-desc{ font-size:14px; color:var(--text2); line-height:1.7; margin-bottom:24px; }
.book-card-cover{
  background:linear-gradient(135deg,#0a1628,#1a3060);
  display:flex; align-items:center; justify-content:center; padding:20px;
  position:relative; overflow:hidden;
}
.book-card-cover::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(0,191,255,.15),transparent 70%);
}
.book-spine{
  width:130px; height:180px; border-radius:4px 12px 12px 4px;
  background:linear-gradient(160deg,#0d2040,#162850);
  border:1px solid rgba(0,191,255,.25); position:relative; overflow:hidden;
  box-shadow:6px 6px 24px rgba(0,0,0,.6),-2px 0 8px rgba(0,191,255,.1);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:16px 12px; text-align:center;
}
.book-spine::before{
  content:''; position:absolute; top:0; left:0; width:6px; height:100%;
  background:linear-gradient(180deg,rgba(0,191,255,.3),rgba(0,224,160,.2));
}
.book-spine-title{ font-size:11px; font-weight:800; color:var(--text); letter-spacing:.06em; text-transform:uppercase; line-height:1.3; }
.book-spine-accent{ width:30px; height:2px; background:var(--accent); border-radius:2px; margin:10px auto; }
.book-spine-sub{ font-size:9px; color:var(--text2); letter-spacing:.04em; }
@media(max-width:600px){
  .book-card{ grid-template-columns:1fr; }
  .book-card-cover{ min-height:160px; }
  .book-card-body{ padding:24px 20px; }
}

/* ═══════════════════════════════════════════════════
   COMPREHENSIVE MOBILE & TABLET RESPONSIVE STYLES
   v9 — full overhaul for iPhone, Android, iPad
═══════════════════════════════════════════════════ */

/* ── Base performance hints ── */
* { -webkit-tap-highlight-color: transparent; }
img, svg { max-width: 100%; }

/* ── IPAD (768–1024px) ── */
@media (max-width: 1024px) {
  .h1 { font-size: clamp(36px, 6vw, 64px); }
  .h2 { font-size: clamp(28px, 4vw, 42px); }
  .hero-wrap { min-height: 85vh; padding-top: 90px; }
  .hero-content { max-width: 90%; }
  .stats-bar { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .platform-row { grid-template-columns: 1fr; }
  .platform-cell.mockup-cell { padding:20px 16px; min-height:auto; }
  .benefits-layout { grid-template-columns: 1fr; gap: 32px; }
  .who-grid { grid-template-columns: 1fr 1fr; }
  .cta-section { padding: 48px 40px; border-radius: 22px; }
  .blog-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-grid > *:first-child { grid-column: 1 / -1; }
  .marquee-track { animation-duration: 25s; }
}

/* ── MOBILE PHONES (≤767px) ── */
@media (max-width: 767px) {
  :root {
    --nav-h: 60px;
    --r: 16px;
  }

  /* Typography scale-down */
  .h1 { font-size: clamp(28px, 8vw, 42px); line-height: 1.15; letter-spacing: -.02em; }
  .h2 { font-size: clamp(22px, 6vw, 32px); line-height: 1.2; }
  .body-lg { font-size: 15px; }
  .body-sm { font-size: 14px; }
  .label { font-size: 10px; letter-spacing: .12em; }

  /* NAV */
  .nav-links, .nav-consult { display: none !important; }
  .burger { display: flex !important; }
  .nav-inner { padding: 0 16px; }

  /* HERO */
  .hero-wrap { min-height: 92vh; padding: 80px 0 60px; }
  .hero-content { max-width: 100%; text-align: center; }
  .hero-btns { justify-content: center; flex-wrap: wrap; gap: 12px; }
  .hero-btns .btn { width: 100%; max-width: 280px; text-align: center; justify-content: center; }
  .hero-label-row { justify-content: center; flex-wrap: wrap; }
  .blob-cursor { display: none !important; }

  /* CTA SECTION */
  .cta-section {
    padding: 36px 24px;
    border-radius: 18px;
    text-align: center;
  }
  .cta-section > div { max-width: 100% !important; }
  .cta-section .h2 { font-size: 24px; }
  .cta-section div[style*="flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .cta-section .btn { width: 100%; text-align: center; justify-content: center; }

  /* STATS BAR */
  .stats-bar { grid-template-columns: 1fr 1fr; gap: 1px; }
  .stat-val { font-size: clamp(28px, 8vw, 38px); }
  .stat-label { font-size: 11px; }

  /* SERVICES GRID */
  .services-grid { grid-template-columns: 1fr; gap: 10px; }
  .srv-card { padding: 20px 18px; }
  .srv-num { font-size: 11px; }
  .srv-title { font-size: 16px; }

  /* PLATFORM SECTION */
  .platform-row { grid-template-columns: 1fr; }
  .platform-cell { padding: 24px 20px; }
  .platform-cell.mockup-cell { padding:20px 16px; min-height:auto; }
  .platform-cell-title { font-size: 18px; }
  .platform-cell-desc { font-size: 13px; }

  /* PROCESS GRID */
  .process-grid { grid-template-columns: 1fr; gap: 1px; background: var(--border); }
  .step { padding: 24px 20px; }
  .step-num { font-size: 42px; }
  .step-title { font-size: 15px; }
  .step-desc { font-size: 13px; }

  /* BENEFITS */
  .benefits-layout { grid-template-columns: 1fr; gap: 24px; }
  .benefits-grid { grid-template-columns: 1fr; }
  .benefit-card--wide { flex-direction: column; gap: 16px; padding: 20px; }
  .benefit-card { padding: 20px; }

  /* WHO GRID */
  .who-grid { grid-template-columns: 1fr; }
  .who-card-illus { height: 160px; }
  .who-card-label { padding: 16px 20px 0; font-size: 15px; }
  .who-card-sub { padding: 8px 20px 20px; }

  /* BLOG GRID */
  .blog-grid { grid-template-columns: 1fr; gap: 14px; }
  .blog-card { border-radius: 16px; }
  .blog-card-body { padding: 18px 20px; }
  .blog-card-title { font-size: 16px; }

  /* BLOG FULL GRID */
  .blog-full-grid { grid-template-columns: 1fr; gap: 16px; }

  /* PARTNERS MARQUEE */
  .marquee-track { animation-duration: 18s; }
  .partner-logo { max-height: 28px; }

  /* FAQ */
  .faq-wrap { max-width: 100%; }
  .faq-q { font-size: 15px; padding: 20px 0; }
  .faq-a-inner p { font-size: 14px; }
  .faq-a-inner ul li { font-size: 13px; }

  /* FOOTER */
  .footer { padding: 48px 0 32px; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-grid > *:first-child { grid-column: auto; }
  .footer-bottom { flex-direction: column; gap: 20px; text-align: center; }
  .footer-contacts { flex-wrap: wrap; justify-content: center; gap: 14px; }
  .footer-contact-link { font-size: 13px; }
  .footer-brand-desc { font-size: 13px; max-width: 260px; }

  /* CONTACTS PAGE */
  .contacts-grid { grid-template-columns: 1fr !important; gap: 20px; }
  .contact-form { padding: 24px 20px !important; }

  /* GLOBAL PAGE */
  .global-grid { grid-template-columns: 1fr !important; }

  /* SERVICES PAGE */
  .services-detail-grid { grid-template-columns: 1fr !important; }

  /* PAGE HERO (inner pages) */
  .page-hero { padding: 100px 0 60px; }
  .page-hero-title { font-size: clamp(26px, 7vw, 40px); }

  /* CTA ROW BUTTONS */
  div[style*="display:flex"][style*="gap:14px"] {
    flex-direction: column !important;
    gap: 10px !important;
  }
  div[style*="display:flex"][style*="gap:14px"] .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Section spacing */
  .section { padding: 60px 0; }
  .ctr { padding: 0 20px; }

  /* Mobile menu full screen */
  .mob-menu {
    padding: 24px 20px;
    gap: 4px;
  }
  .mob-menu a {
    font-size: 22px;
    padding: 14px 0;
  }

  /* Book card */
  .book-card { grid-template-columns: 1fr; }
  .book-card-cover { min-height: 180px; }

  /* Financing page */
  .fin-grid { grid-template-columns: 1fr !important; }
  .fin-comparison { overflow-x: auto; }
}

/* ── SMALL PHONES (≤400px) ── */
@media (max-width: 400px) {
  .h1 { font-size: 26px; }
  .h2 { font-size: 20px; }
  .ctr { padding: 0 16px; }
  .btn { padding: 12px 20px; font-size: 13px; }
  .stats-bar { grid-template-columns: 1fr 1fr; }
  .stat-val { font-size: 28px; }
  .mob-menu a { font-size: 20px; }
  .section { padding: 48px 0; }
}

/* ── LANDSCAPE PHONES ── */
@media (max-width: 767px) and (orientation: landscape) {
  .hero-wrap { min-height: 100vh; padding: 70px 0 40px; }
  .h1 { font-size: clamp(24px, 5vw, 36px); }
}

/* ── iPad LANDSCAPE (1024px) ── */
@media (min-width: 768px) and (max-width: 1024px) {
  .who-grid { grid-template-columns: 1fr 1fr 1fr; }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .stats-bar { grid-template-columns: repeat(4, 1fr); }
  .cta-section { padding: 48px 40px; }
  .footer-contacts { flex-wrap: wrap; gap: 14px; }
}

/* ── Touch devices: remove hover effects ── */
@media (pointer: coarse) {
  .srv-card:hover,
  .benefit-card:hover,
  .who-card:hover,
  .blog-card:hover {
    transform: none;
    background: var(--card);
  }
  /* Native scroll on touch */
  html { scroll-behavior: smooth; }
}

/* ── Performance: GPU hints for animated elements ── */
.hero-wrap,
.blob-cursor,
.marquee-track,
.mob-menu,
.nav {
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.reveal {
  will-change: opacity, transform;
}
.reveal.in {
  will-change: auto; /* release after animation */
}

/* ── Prevent font-size zoom on iOS ── */
input, select, textarea {
  font-size: 16px !important;
}


/* ─── TELEGRAM SUBSCRIBE BUTTON ─── */
.btn-tg-sub {
  display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(135deg,#229ED9,#1a8abf);
  color:#fff; font-weight:700; font-size:14px;
  padding:12px 24px; border-radius:50px;
  text-decoration:none; margin-top:24px;
  transition:all .3s; border:none;
  box-shadow:0 4px 20px rgba(34,158,217,.3);
}
.btn-tg-sub:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(34,158,217,.45);
  background:linear-gradient(135deg,#2db5f0,#1e9fd9);
}
.btn-tg-sub svg { flex-shrink:0; }

/* ─── MOBILE MOCKUPS — visible & adapted (v25) ─── */
@media (max-width: 767px) {
  .platform-cell.mockup-cell {
    display: flex !important;
    padding: 24px 16px;
    min-height: auto;
  }
  .app-mockup, .doc-mockup, .explorer-mockup {
    max-width: 100%;
    border-radius: 12px;
  }
  .app-mockup-body { padding: 12px; }
  .app-row { padding: 8px 0; }
  .doc-body, .explorer-body { padding: 16px; }
}

/* ─── PARTNER LOGOS — uniform & larger (v25) ─── */
.partner-item {
  width: 320px;
  height: 120px;
  padding: 0 40px;
}
.partner-item img,
.partner-item svg,
.partner-logo {
  height: 48px !important;
  width: auto;
  max-width: 240px;
  object-fit: contain;
}
@media (max-width: 767px) {
  .partner-item {
    width: 220px;
    height: 90px;
    padding: 0 24px;
  }
  .partner-item img,
  .partner-item svg,
  .partner-logo {
    height: 36px !important;
  }
}