/* Base */
*,
*::before,
*::after{ box-sizing:border-box }
:root{
  --bg:#0b0b0f;
  --ink:#eef1f6;
  --muted:#aeb4c5;
  --panel:#11151d;
  --card1:rgba(255,255,255,.07);
  --card2:rgba(255,255,255,.03);
  --border:rgba(255,255,255,.10);
  --brand:#19e0b2;
  --blue:#0059FF;
  --indigo:#7c8fff;
  --radius:28px;
  --shadow:0 24px 70px rgba(0,0,0,.35);
}
html{ scroll-behavior:smooth }
body{ margin:0; font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--ink); background:var(--bg); line-height:1.6 }
.container{ width:min(1200px,92%); margin-inline:auto }

.header{ padding:16px 0; border-bottom:1px solid var(--border); background:#0b0e14 }
.header-row{ display:flex; align-items:center; justify-content:space-between; gap:18px }
.brand img{ height:45px; display:block }
.nav{ display:flex; gap:18px }
.nav a{ color:#cbd1e3; text-decoration:none; font-size:14px }
.nav a:hover{ color:#fff }
.btn {
  display: inline-flex
;
  align-items: center;
  gap: .55rem;
  padding: .2rem 1.5rem;
  border-radius: 5px;
  border: 1px solid transparent;
  font-weight: 700;
  text-decoration: none; 
}
.btn.primary{ background:#000; color:#fff }
.btn-secondary {
  border: 1px solid var(--border);
  color: #000;
  background: transparent;
}
.btn-primary, .btn-secondary {
  display: inline-flex
;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.15rem;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.text-black{
  color: #000;
}
.btn.blue {
  background: var(--blue);
  color: #fff;
  padding: 10px 30px;
}
.btn.outline{ background:transparent; border-color:var(--border); color:#e6e8f2 }
.btn.muted{ background:#2a303a; color:#e7ebf5; border-color:rgba(255,255,255,.08) }
.btn.small{ padding:.6rem .9rem; font-size:14px }
.link{ color:#bfc3d6; text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px }
.link:hover{ border-color:#bfc3d6 }
.eyebrow{ color:#000000; text-transform:uppercase; letter-spacing:.08em; font-size:12px }
.green{ color:#7bf0c8 }
.center{ text-align:center }

/* HERO */
.hero-wrap{ padding:24px 0 18px }
.hero-card{
  position:relative; border-radius:42px; overflow:hidden; min-height:580px;
  background:url('assets/bg-hero.jpg') center center/cover no-repeat;
  box-shadow:var(--shadow)
}

/* === HERO PHONES — precise sizing/position like the mockup === */
.hero-card{
  /* easy dials for phone widths */
  --phone-left-w: clamp(300px, 28.5vw, 460px);
  --phone-right-w: clamp(370px, 33vw, 580px);
  --phone-right-top: 72px;   /* right phone vertical offset */
  --phone-left-top: -10px;   /* left phone vertical offset */
  --phone-right-gap: 2.0vw;  /* distance from the card's right edge */
  --phone-left-gap: 2.2vw;   /* distance from the column boundary */
}

.hero-grid{
  grid-template-columns: 1.05fr .95fr;   /* keep your proportions */
  column-gap: clamp(20px, 3vw, 32px);
}

.hero-phones{
  position: relative;
  min-height: clamp(560px, 56vw, 720px);   /* taller stage to match mock */
}

/* Left phone — straight, slightly higher */
.phone.left{
  width: var(--phone-left-w);
  left: var(--phone-left-gap);
  top: var(--phone-left-top);
  transform: none;                 /* remove the tiny tilt */
  z-index: 2;
}

/* Right phone — bigger, aligned to far right, a bit lower */
.phone.right{
  width: var(--phone-right-w);
  right: var(--phone-right-gap);   /* anchor to right edge (closer to mockup) */
  left: auto;                      /* cancel previous left */
  top: var(--phone-right-top);
  transform: none;                 /* keep it straight like the comp */
  z-index: 3;
}

/* Keep things tidy on medium screens */
@media (max-width: 1200px){
  .hero-phones{ min-height: clamp(520px, 60vw, 680px); }
  .hero-card{
    --phone-left-w: clamp(280px, 30vw, 440px);
    --phone-right-w: clamp(340px, 34vw, 560px);
    --phone-right-top: 64px;
  }
  .hero-pill {
    position: absolute;
    right: 8%;
    top: 5%;
    z-index: 3;
    padding: .55rem .9rem;
    font-weight: 700;
    font-size: 13px;
    border-radius: 10px;
    background: #111827;
    color: #e8ebf3;
    text-decoration: none;
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
}

/* Stack layout you already use on mobile — just ensure sizing feels right */
@media (max-width: 1100px){
  .phone.left{ left: 6%; top: -6px; width: min(46vw, 500px); }
  .phone.right{ left: 46%; right: auto; top: 34px; width: min(42vw, 350px); }
}

@media (max-width: 560px){
  .phone{ position: static; width: min(82vw, 360px); margin: 0 auto 12px; }
  .hero-phones{ min-height: 0; }

  .hero-pill {
    position: absolute;
    right: 8%;
    top: 5%;
    z-index: 3;
    padding: .55rem .9rem;
    font-weight: 700;
    font-size: 13px;
    border-radius: 10px;
    background: #111827;
    color: #e8ebf3;
    text-decoration: none;
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

}
@media (max-width: 768px){
  .hero-pill {
    position: absolute;
    right: 8%;
    top: 5%;
    z-index: 3;
    padding: .55rem .9rem;
    font-weight: 700;
    font-size: 13px;
    border-radius: 10px;
    background: #111827;
    color: #e8ebf3;
    text-decoration: none;
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.intro-split {
  display: flow-root !important;
  grid-template-columns: .9fr 1.1fr;
  gap: 3px;
  /* align-items: start; */
}
.intro-sub {
  margin-top: 20px !important;
}
.intro-left .muted {

  padding: 0px 5px 5px 0px !important;
}
.intro-ctas {
  display: flex 
;
  gap: 25px !important;
  align-items: center;
  margin-top: 25px !important;
}
.checks li {
  position: relative;
  padding-left: 5px !important;
}


  .hero-pill {
    position: absolute;
    right: 8% !important;
    top: 5% !important;
}

}
.hero-card::after{ content:""; position:absolute; inset:0; background:rgba(10, 12, 16, 0) }
.hero-pill{
  position:absolute;
  right:12%; top:7%; z-index:3;
  padding:.55rem .9rem; font-weight:700; font-size:13px; border-radius:10px;
  background:#111827; color:#e8ebf3; text-decoration:none; border:1px solid var(--border);
  box-shadow:0 10px 30px rgba(0,0,0,.25)
}
a.btn-secondary {
  text-decoration: underline;
}
.hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:28px; padding:40px 5px }
.hero-copy h1{ font-size:clamp(30px,4.2vw,49px); line-height:1.1; margin:.35rem 0 1rem; max-width:20ch; font-weight: 900; }
.hero-copy .lead {
  opacity: .95;
  max-width: 36ch;
  color: #000;
  font-size: 19px;
  line-height: 28px;
}
.actions{ display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 12px }
.trust{ display:flex; flex-wrap:wrap; gap:5px; padding:0; margin:50px 0 0; list-style:none; color:#000; opacity:.87; font-size:16px }
.trust li{ position:relative; padding-left:5px; display: flex;}
ul.trust li img {
  margin-right: 5px;
}
.hero-phones{ position:relative; min-height:440px }
.phone{ position:absolute; height:auto; border-radius:42px;  }
.phone.left {
  width: min(34vw, 500px);
  left: -70px;
  top: -40px;
  transform: rotate(0);
  z-index: 2;
}
.phone.right {
  width: min(31vw, 500px);
  left: 180px;
  top: 60px;
  /* transform: rotate(2deg); */
  z-index: 1;
}
/* Intro + tiles */
.intro-wrap{ padding: 40px 0 10px }
.intro-split{ display:grid; grid-template-columns:.9fr 1.1fr; gap:28px; align-items:start }
.kicker{ color:#7bf0c8; font-weight:700; font-size:20px; line-height:1.4 }
.intro-sub .mini{ color:#e9edf9; font-weight:700; margin:.3rem 0 .25rem }
.muted{ color:var(--muted) }
.intro-right h2{ font-size:clamp(22px,2.8vw,28px); line-height:1.35; margin:0 0 12px }
.intro-ctas {
  display: flex
;
  gap: 12px;
  align-items: center;
  margin-top: 100px;
}
.intro-sub {
  margin-top: 130px;
}
.tiles{ margin-top:22px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.tile{
  box-shadow: 0px 2px 0px 0px #FFFFFF26 inset !important;
    background: linear-gradient(180deg, #181818 0%, #000000 100%) !important;
    border: 1px solid;
    border-image-source: linear-gradient(180deg, #404040 0%, rgba(0, 0, 0, 0) 100%) !important;
}
.tile{ background:linear-gradient(180deg, rgba(46,49,56,.55) 0%, rgba(23,26,32,.38) 100%); border:1px solid rgba(255,255,255,.11); border-radius:30px; box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 40px 120px rgba(0,0,0,.45); padding:26px; display:flex; flex-direction:column; gap:12px; min-height:320px }
.tile h3{ font-size:clamp(20px,2.2vw,28px); line-height:1.15; margin:2px 0 6px }
.tile .arrow{ transform:translateX(0); transition:transform .18s ease }
.tile .btn:hover .arrow{ transform:translateX(3px) }
.tile-icon{ width:68px; height:68px; border-radius:999px; display:grid; place-items:center; margin-bottom:6px }
.tile-icon.fill{ background:#19e0b2 }
.tile-icon.outline{ border:2px solid rgba(255,255,255,.24) }
.globe{ width:28px; height:28px; fill:none; stroke:#0b0d12; stroke-width:1.8 }
.tile-icon.outline .globe{ stroke:rgba(255,255,255,.9) }

/* Panels */
.panel-wrap{ padding: 18px 0 }

.panel{
  border: 1px solid;

border-image-source: linear-gradient(180deg, rgba(0, 228, 114, 0.15) 0%, rgba(3, 6, 22, 0) 100%) !important;

background: linear-gradient(180deg, rgba(11, 12, 16, 0) 0%, #0B0C10 100%) !important;
box-shadow: 0px 2px 0px 0px #00E47233 inset !important;

}

.panel2 {
  border: 1px solid;
  border-image-source: linear-gradient(180deg, rgba(0, 228, 114, 0.15) 0%, rgba(3, 6, 22, 0) 100%) !important;
  background: linear-gradient(180deg, rgba(11, 12, 16, 0) 0%, #0B0C10 100%) !important;
  box-shadow: 0px 2px 0px 0px #7e93fe inset !important;
}
.panel{ background:linear-gradient(180deg, rgba(46,49,56,.5) 0%, rgba(23,26,32,.34) 100%); border:1px solid rgba(255,255,255,.10); border-radius:30px; box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 40px 120px rgba(0,0,0,.45); padding:28px; display:grid; grid-template-columns:1.2fr .8fr; gap:22px; align-items:center }
.panel.alt{ margin-top:16px }
.label{ font-weight:700; font-size:13px }
.label.green{ color:#7bf0c8 }
.label.indigo{ color:var(--indigo) }
.panel-copy h3{ font-size:clamp(22px,2.8vw,28px); margin:4px 0 12px }
.checks {
  list-style: none;
  margin: 0;
  padding: 0;
}

.checks li {
  display: flex;
  align-items: center;
  gap: 16px; /* space between icon and text */
  margin-bottom: 20px;
}

.check-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7bf0c8; /* globe color */
}

.check-icon svg {
  width: 20px;
  height: 20px;
}

.check-content h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.check-content p {
  margin: 4px 0 0;
  font-size: 14px;
  color: rgba(255,255,255,0.75);
}
.checks{ list-style:none; padding:0; margin:0; display:grid; gap:8px; color:var(--muted) }
.checks .globe {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.8;
}
.checks li{ position:relative; padding-left:26px;  }

/*.checks li::before{ content:''; position:absolute; left:0; top:0; width:18px; height:18px; border-radius:999px; display:grid; place-items:center; background:rgba(124,255,192,.15); color:#7bf0c8; font-weight:800 }*/
.panel-art img{ width:100%; height:auto; display:block; filter:drop-shadow(0 20px 60px rgba(0,0,0,.45)) }

/* Why */
.why-wrap{ padding: 16px 0 8px }
.why-title{ text-align:center; margin:6px auto 14px; width:min(900px,92%); font-size:clamp(22px,2.6vw,26px) }
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.why-card{ background:linear-gradient(180deg, rgba(46,49,56,.5) 0%, rgba(23,26,32,.32) 100%); border:1px solid rgba(255,255,255,.10); border-radius:24px; box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 40px 120px rgba(0,0,0,.45); padding:18px }
.badges{ display:flex; gap:18px; justify-content:center; list-style:none; padding:0; margin:14px 0 0; color:#bfc3d6; font-size:14px }

/* CTA */
.cta-wrap{ padding:24px 0 40px }
.cta{ display:grid; grid-template-columns:1.2fr .8fr; gap:22px; align-items:center }
.cta-form{ display:grid; gap:10px }
.cta-form input[type=email]{ padding:.9rem 1rem; border-radius:12px; border:1px solid var(--border); background:#0f1117; color:#fff }
.cta-form label{ color:var(--muted); font-size:13px; display:flex; align-items:center; gap:8px }

/* Footer */
.footer{ border-top:1px solid var(--border); padding:30px 0 16px }
.footer-grid{ display:grid; grid-template-columns:1fr auto; align-items:center }
.footer-logo{ height:26px }
.foot-links{ display:flex; gap:18px }
.foot-links a{ color:#bfc3d6; text-decoration:none }
.copy{ text-align:center; color:#80859a; font-size:12px; margin-top:12px }

/* Responsive */
@media (max-width:1100px){
  .hero-grid{ grid-template-columns:1fr }
  .hero-phones{ min-height:480px }
  .phone.left{ left:6%; bottom:-10px; width:min(46vw,390px) }
  .phone.right{ left:46%; bottom:34px; width:min(42vw,350px) }
}
@media (max-width:860px){
  .tiles{ grid-template-columns:1fr 1fr }
  .panel{ grid-template-columns:1fr }
  .why-grid{ grid-template-columns:1fr 1fr }
  .cta{ grid-template-columns:1fr }
}
@media (max-width:560px){
  .phone{ position:static; transform:none !important; width:min(80vw,340px); margin:0 auto 12px }
  .hero-phones{ min-height:0 }
  .tiles{ grid-template-columns:1fr }
  .footer-grid{ grid-template-columns:1fr; gap:12px }
}


/* ==== Enhanced Surfaces & Borders (closer to mockup) ==== */
/* Generic surface helper */
.surface {
  position: relative;
  background: linear-gradient(180deg, var(--card1), var(--card2));
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.surface::before {
  /* subtle top highlight */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0));
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .25;
}
.surface::after {
  /* inner vignette / inset shadow */
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), inset 0 -30px 60px rgba(0,0,0,.35);
  pointer-events: none;
}

/* Apply to tiles, panels, why cards */
.tile, .panel, .why-card {
  position: relative;
}
.tile::before, .panel::before, .why-card::before,
.tile::after, .panel::after, .why-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
}
.tile {background: linear-gradient(180deg, #181818 0%, #000000 100%);
  border: 1px solid;

  border-image-source: linear-gradient(180deg, #404040 0%, rgba(0, 0, 0, 0) 100%);
  
  }
.panel, .why-card { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); }
.tile { border: 1px solid rgba(255,255,255,.105); 
  box-shadow: 0px 2px 0px 0px #FFFFFF26 inset;
}
.panel, .why-card { border: 1px solid rgba(255,255,255,.10); }
.tile::before, .panel::before, .why-card::before { background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0)); opacity: .25; mix-blend-mode: screen; }
.tile::after, .panel::after, .why-card::after { box-shadow: inset 0 0 0 1px rgba(255,255,255,.045), inset 0 -30px 60px rgba(0,0,0,.34); }

/* Match more rounded corners on mockup cards */
.tile, .panel, .why-card { border-radius: 26px; }
.hero-card { border-radius: 36px; }

/* Buttons — stronger depth & pressed state */
.btn { box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform .08s ease, box-shadow .2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); box-shadow: 0 8px 18px rgba(0,0,0,.28); }

.intro-left .muted {
  color: var(--muted);
  font-size: 16px;
  padding: 0px 136px 40px 0px;
}

/* Tile icon rings — thicker outline look */
.tile-icon.outline {
  border: 2px solid rgba(255,255,255,.26);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.tile-icon.fill:hover {
  box-shadow: 0 8px 24px rgba(25,224,178,.35), inset 0 0 0 1px rgba(255,255,255,.1);
}

/* Hero card inner border/vignette for edge definition */
.hero-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  pointer-events: none; z-index: 1;
}

/* Elevation tweak on cards to match soft drop in mock */
.tile, .panel, .why-card { box-shadow: 0 24px 70px rgba(0,0,0,.38); }

/* Footer link color slightly dimmer like mock */
.foot-links a { color: #aeb4c5; }
.foot-links a:hover { color: #e6e8f2; }


/* ===== Why / Benefits panel (scoped, no global overrides) ===== */
.why-sec { padding: 12px 0; background: #0b0b0f; color: #e9edf6; }
.why-wrap { width: min(1200px, 92%); margin-inline: auto; }

/* The rounded panel container */
.why-panel{
  position: relative;
  padding: 44px 44px 30px;
  border-radius: 30px;                      /* rounded like mockup */
  background: linear-gradient(180deg, rgba(46,49,56,.52), rgba(23,26,32,.34));
  border: 1px solid rgba(255,255,255,.12);  /* outer border */
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 40px 120px rgba(0,0,0,.45);
  overflow: hidden;
}
/* top soft highlight and inner vignette for the beveled look */
.why-panel::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0));
  mix-blend-mode: screen; opacity: .22; pointer-events: none;
}
.why-panel::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05),
              inset 0 -36px 70px rgba(0,0,0,.36);
  pointer-events: none;
}

/* Grid (2 x 2) */
.why-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px 64px;                            /* row x column gap */
}

/* Each item */
.why-item h3{
  margin: 0 0 8px;
  font-size: clamp(18px, 2.1vw, 24px);
  line-height: 1.2;
  font-weight: 800;
}
.why-item p{
  margin: 10px 0 0;
  color: #b7bdcc;                            /* muted paragraph color */
  font-size: 15.5px;
}

/* Icon circle (outlined) */
.why-ico{
  width: 58px; height: 58px; border-radius: 999px;
  display: grid; place-items: center;
  border: 2.4px solid rgba(255,255,255,.26);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  margin-bottom: 12px;
}

/* Globe icon used throughout */
.ico-globe{ width: 26px; height: 26px; fill: none; stroke: rgba(255,255,255,.9); stroke-width: 1.8; }
.ico-flag{ width: 22px; height: 22px; fill: none; stroke: rgba(255,255,255,.9); stroke-width: 1.8; }
.ico-bank{ width: 24px; height: 24px; fill: none; stroke: rgba(255,255,255,.9); stroke-width: 1.8; }

/* Badges row at the bottom */
.why-badges{
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 28px;
  margin: 34px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.badge{
  display: inline-flex; align-items: center; gap: 10px;
  color: #c9cedb; font-size: 15px;
}
.badge-ico{
  width: 28px; height: 28px; border-radius: 999px;
  display: grid; place-items: center;
  border: 1.6px solid rgba(255,255,255,.22);
}

/* Responsive */
@media (max-width: 960px){
  .why-panel{ padding: 34px 22px 24px; }
  .why-grid{ grid-template-columns: 1fr; gap: 36px; }
}


/* ===== Scoped styles for CTA + compact footer ===== */
.ctaFoot-sec{ background:#0b0b0f; color:#eef1f6; padding:28px 0 38px; }
.ctaFoot-container{ width:min(1200px,92%); margin-inline:auto; }

/* CTA grid */
.ctaFoot-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:32px;
  align-items:start;
  margin: 6px 0 18px;
}
.ctaFoot-eyebrow{
  color:#8e93a5; text-transform:uppercase; letter-spacing:.06em;
  font-size:14px; font-weight:800; margin:0 0 10px;
}
.ctaFoot-title{
  margin:0;
  font-weight:600;
  line-height:1.12;
  font-size: clamp(32px, 4.6vw, 36px);
}

/* Form */
.ctaFoot-form{ display:grid; gap:12px; align-content:start; }
.ctaFoot-input{
  width:100%;
  padding:16px 18px;
  font-size:16px;
  color:#e8ebf4;
  background:#0f1117;
  border:1px solid rgba(255,255,255,.30);
  border-radius:12px;
  outline:none;
}
.ctaFoot-input::placeholder{ color:#b8bcc8; opacity:.9; }
.ctaFoot-input:focus{ border-color:#5b86ff; box-shadow:0 0 0 3px rgba(91,134,255,.18); }

.ctaFoot-check{
  display:flex; align-items:center; gap:10px;
  color:#c6cada; font-size:14px;
}

/* Button */
.ctaFoot-btn{
  width:max-content;
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px;
  border-radius:10px;
  background:#1e63ff; color:#fff;
  border:1px solid transparent;
  font-weight:800; cursor:pointer; text-decoration:none;
  box-shadow:0 14px 40px rgba(31,99,255,.35);
}
.ctaFoot-arrow{ transition:transform .18s ease; display:inline-block; }
.ctaFoot-btn:hover .ctaFoot-arrow{ transform:translateX(3px); }

/* Divider */
.ctaFoot-divider{
  margin:34px 0 18px;
  height:1px;
  background: rgba(255,255,255,.10);
}

/* Footer row */
.ctaFoot-footer{
  display:grid; grid-template-columns: 1fr auto; gap:24px; align-items:center;
}
.ctaFoot-brand{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; }
.ctaFoot-logo{ height:36px; display:block; }
.ctaFoot-desc{ margin:0; color:#aeb4c5; max-width:620px; line-height:1.5; }

.ctaFoot-links{ display:flex; align-items:center; gap:10px; color:#aeb4c5; }
.ctaFoot-links a{ color:#aeb4c5; text-decoration:none; }
.ctaFoot-links a:hover{ color:#e7ebf4; }

/* Responsive */
@media (max-width: 960px){
  .ctaFoot-grid{ grid-template-columns:1fr; gap:18px; }
  .ctaFoot-footer{ grid-template-columns:1fr; }
  .ctaFoot-links{ justify-content:flex-start; }
}