:root{
  --ink:#0f1d35;
  --muted:#64748b;
  --line:rgba(15,44,84,.10);
  --blue:#2563eb;
  --cyan:#06b6d4;
  --violet:#7c3aed;
  --bg:#f7fbff;
  --card:#ffffff;
  --shadow:0 30px 80px rgba(30,64,175,.13);
}

/* =========================
   GLOBAL
========================= */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7fbff 48%,
      #eef7ff 100%
    );
  color:var(--ink);
  font-family:
    Manrope,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  overflow-x:hidden;
}

a{
  text-decoration:none;
  color:inherit;
}

img{
  max-width:100%;
  display:block;
}

.wrap{
  width:min(1180px,calc(100% - 36px));
  margin:auto;
}


/* =========================
   HEADER
========================= */

header{

  z-index:1000;

  height:72px;

  background:rgba(255,255,255,.90);

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  border-bottom:1px solid var(--line);

  box-shadow:
    0 1px 0 rgba(15,23,42,.02),
    0 8px 30px rgba(15,23,42,.035);
}

.nav{
  height:72px;
  min-height:72px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:24px;
}


/* LOGO */

.brand{
  height:100%;

  display:flex;
  align-items:center;

  flex-shrink:0;

  text-decoration:none;
}

.brand img{
  display:block;

  width:auto;
  height:56px;
  max-height:56px;

  object-fit:contain;
}

.brand strong{
  font-size:18px;
  font-weight:800;
}

.brand small{
  display:block;

  margin-top:2px;

  color:var(--muted);

  font-size:11px;
  font-weight:700;

  letter-spacing:.08em;
  text-transform:uppercase;
}


/* NAVIGATION */

.navlinks{
  display:flex;
  align-items:center;

  gap:28px;

  color:#334155;

  font-size:14px;
  font-weight:800;
}

.navlinks a{
  position:relative;

  padding:8px 0;

  color:inherit;

  transition:color .2s ease;
}

.navlinks a:hover{
  color:var(--blue);
}

.navlinks a::after{
  content:"";

  position:absolute;

  left:0;
  bottom:2px;

  width:0;
  height:2px;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      var(--blue),
      var(--cyan)
    );

  transition:width .22s ease;
}

.navlinks a:hover::after{
  width:100%;
}


/* CREATE WALLET BUTTON */

.navcta{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:9px;

  min-height:44px;

  padding:0 16px 0 7px;

  border-radius:14px;

  color:#fff;

  font-size:14px;
  font-weight:800;

  white-space:nowrap;

  background:
    linear-gradient(
      135deg,
      var(--blue),
      var(--violet)
    );

  box-shadow:
    0 10px 25px rgba(37,99,235,.22);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.navcta:hover{
  color:#fff;

  transform:translateY(-1px);

  box-shadow:
    0 14px 30px rgba(37,99,235,.29);
}

.navcta-icon{
  width:32px;
  height:32px;

  flex:0 0 32px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:10px;

  background:rgba(255,255,255,.15);

  border:
    1px solid rgba(255,255,255,.16);
}

.navcta-icon svg{
  width:18px;
  height:18px;
}

.navcta-arrow{
  width:15px;
  height:15px;

  transition:transform .2s ease;
}

.navcta:hover .navcta-arrow{
  transform:translateX(3px);
}


/* =========================
   HERO
========================= */

.hero{
  position:relative;

  padding:76px 0 58px;

  overflow:hidden;
}

.hero::before,
.hero::after{
  content:"";

  position:absolute;

  border-radius:50%;

  filter:blur(8px);

  pointer-events:none;
}

.hero::before{
  width:520px;
  height:520px;

  top:-180px;
  left:-180px;

  background:
    radial-gradient(
      circle,
      rgba(34,211,238,.22),
      transparent 68%
    );
}

.hero::after{
  width:560px;
  height:560px;

  right:-180px;
  top:-120px;

  background:
    radial-gradient(
      circle,
      rgba(124,58,237,.16),
      transparent 68%
    );
}

.heroGrid{
  position:relative;
  z-index:2;

  display:grid;

  grid-template-columns:
    minmax(0,1.08fr)
    minmax(360px,.92fr);

  gap:58px;

  align-items:center;
}


/* HERO LABEL */

.kicker{
  display:inline-flex;
  align-items:center;

  gap:10px;

  padding:9px 13px;

  border-radius:999px;

  background:#fff;

  border:
    1px solid rgba(37,99,235,.12);

  box-shadow:
    0 10px 30px rgba(37,99,235,.08);

  color:#2453aa;

  font-size:12px;
  font-weight:800;

  text-transform:uppercase;

  letter-spacing:.09em;
}

.kicker i{
  width:8px;
  height:8px;

  border-radius:50%;

  background:#22c55e;

  box-shadow:
    0 0 0 6px rgba(34,197,94,.10);
}


/* HERO TITLE */

h1{
  max-width:720px;

  margin:22px 0 22px;

  color:#0b1730;

  font-family:"Playfair Display",serif;

  font-size:clamp(48px,6vw,76px);

  line-height:1;

  letter-spacing:-.045em;
}

h1 span{
  background:
    linear-gradient(
      100deg,
      #1d4ed8,
      #06b6d4 55%,
      #7c3aed
    );

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent;
}

.hero p{
  max-width:650px;

  margin:0;

  color:#52627a;

  font-size:18px;

  line-height:1.8;
}


/* HERO BUTTONS */

.heroActions{
  display:flex;
  flex-wrap:wrap;

  gap:14px;

  margin-top:30px;
}

.btnPrimary,
.btnSecondary{
  min-height:54px;

  padding:0 24px;

  border-radius:16px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-weight:800;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.btnPrimary{
  color:#fff;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #06b6d4 55%,
      #7c3aed
    );

  box-shadow:
    0 18px 38px rgba(37,99,235,.25);
}

.btnPrimary:hover{
  transform:translateY(-2px);

  box-shadow:
    0 24px 46px rgba(37,99,235,.30);
}

.btnSecondary{
  color:#20304d;

  background:#fff;

  border:1px solid var(--line);

  box-shadow:
    0 10px 28px rgba(15,23,42,.06);
}

.btnSecondary:hover{
  transform:translateY(-2px);

  box-shadow:
    0 15px 32px rgba(15,23,42,.09);
}


/* HERO META */

.heroMeta{
  display:flex;
  flex-wrap:wrap;

  gap:24px;

  margin-top:24px;

  color:#6b7a90;

  font-size:12px;
  font-weight:700;
}

.heroMeta span{
  display:flex;
  align-items:center;

  gap:8px;
}

.check{
  width:18px;
  height:18px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:#e8fff2;

  color:#16a34a;

  font-size:11px;
}


/* =========================
   HERO — PREMIUM / CLEAN
========================= */

.hero{
  position:relative;
  padding:96px 0 78px;
  background:#f8fafc;
  overflow:hidden;
}

.heroGrid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
  align-items:center;
  gap:72px;
}


/* LEFT SIDE */

.heroCopy{
  max-width:680px;
}

.heroBadge{
  display:inline-flex;
  align-items:center;
  gap:9px;

  padding:9px 13px;

  border:1px solid #dbe4ef;
  border-radius:999px;

  background:#ffffff;

  color:#34506f;

  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;

  box-shadow:0 6px 20px rgba(15,23,42,.04);
}

.heroBadgeDot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#16a34a;
  box-shadow:0 0 0 4px rgba(22,163,74,.10);
}


/* MAIN TITLE */

.hero h1{
  margin:24px 0 22px;
  max-width:700px;

  font-family:
    Manrope,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size:clamp(50px,5.8vw,76px);
  font-weight:800;

  line-height:.98;
  letter-spacing:-.055em;

  color:#0f172a;
}

.hero h1 span{
  display:block;
  margin-top:4px;

  color:#2856d8;

  font-weight:800;
}


/* DESCRIPTION */

.heroLead{
  max-width:625px;
  margin:0;

  color:#5f6f82;

  font-size:18px;
  font-weight:500;

  line-height:1.72;
  letter-spacing:-.01em;
}


/* ACTIONS */

.heroActions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;

  gap:14px;

  margin-top:32px;
}


/* PRIMARY BUTTON */

.btnPrimary{
  min-height:56px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:10px;

  padding:6px 18px 6px 7px;

  border-radius:15px;

  background:#2457d6;

  color:#fff;

  font-size:14px;
  font-weight:800;

  box-shadow:
    0 12px 24px rgba(37,87,214,.18);

  transition:
    transform .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.btnPrimary:hover{
  background:#1f4fc7;

  transform:translateY(-2px);

  box-shadow:
    0 16px 30px rgba(37,87,214,.24);
}

.heroBtnIcon{
  width:42px;
  height:42px;
  flex:0 0 42px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:11px;

  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.16);
}

.heroBtnIcon svg{
  width:20px;
  height:20px;
}

.heroBtnArrow{
  width:16px;
  height:16px;

  margin-left:1px;

  transition:transform .2s ease;
}

.btnPrimary:hover .heroBtnArrow{
  transform:translateX(3px);
}


/* SECONDARY BUTTON */

.btnSecondary{
  min-height:56px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:0 23px;

  border-radius:15px;

  background:#fff;
  border:1px solid #dce5ef;

  color:#24364c;

  font-size:14px;
  font-weight:800;

  box-shadow:
    0 8px 20px rgba(15,23,42,.04);

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.btnSecondary:hover{
  transform:translateY(-2px);
  border-color:#b8c8da;

  box-shadow:
    0 12px 26px rgba(15,23,42,.07);
}


/* META */

.heroMeta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;

  gap:18px;

  margin-top:25px;
}

.heroMeta span{
  display:flex;
  align-items:center;

  gap:7px;

  color:#708094;

  font-size:12px;
  font-weight:700;
}

.check{
  width:19px;
  height:19px;
  flex:0 0 19px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:#ecfdf3;
  color:#15803d;

  font-size:11px;

  border:1px solid #d7f2df;
}


/* =========================
   RIGHT VISUAL
========================= */

.visual{
  position:relative;
  width:100%;
  min-height:380px;

  display:flex;
  align-items:center;
  justify-content:center;
}


/* MAIN WHITE CARD */

.glowCard{
  position:relative;

  width:340px;
  height:340px;
  max-width:100%;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:30px;

  background:#ffffff;
  border:1px solid #dde6ef;

  box-shadow:
    0 26px 65px rgba(15,23,42,.10);

  overflow:hidden;
}


/* SOFT CENTER BACKGROUND */

.visualGlow{
  position:absolute;
  left:50%;
  top:45%;

  width:205px;
  height:205px;

  transform:translate(-50%,-50%);

  border-radius:50%;

  background:#f1f5fb;
  border:1px solid #e2e8f0;

  z-index:1;
}


/* =========================
   MAIN TRUST AWE LOGO
========================= */

.logoCard{
  position:absolute;
  z-index:5;

  left:50%;
  top:45%;

  transform:translate(-50%,-50%);

  width:178px !important;
  height:178px !important;
  max-width:178px !important;

  object-fit:contain;

  filter:
    drop-shadow(
      0 13px 20px rgba(15,23,42,.12)
    );
}


/* =========================
   PERFECT CIRCULAR ORBIT
========================= */

.orbit{
  position:absolute;
  z-index:4;

  /*
    Keep orbit slightly above center
    so bottom token does not touch status.
  */
  left:50%;
  top:45%;

  width:230px;
  height:230px;

  margin-left:-115px;
  margin-top:-115px;

  border:1px dashed #cad6e4;
  border-radius:50%;

  animation:
    aweOrbitRotate 30s linear infinite;
}


/* =========================
   TOKEN CARDS
========================= */

.token{
  position:absolute;

  width:48px;
  height:48px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:9px;

  border-radius:14px;

  background:#ffffff;
  border:1px solid #dce5ef;

  box-shadow:
    0 8px 18px rgba(15,23,42,.10);

  /*
    This rotates opposite to the orbit.
    Therefore the WHOLE white token card
    always stays perfectly upright.
  */
  animation:
    aweTokenStayStraight 30s linear infinite;

  transform-origin:center;
}

.token img{
  display:block;

  width:100%;
  height:100%;

  object-fit:contain;

  /*
    IMPORTANT:
    NO animation here.
  */
  animation:none !important;
  transform:none !important;
}


/* =========================
   5 EQUAL POSITIONS
   72 DEGREES APART
========================= */


/* 1 — TOP */

.t1{
  left:91px;
  top:-24px;
}


/* 2 — UPPER RIGHT */

.t2{
  right:-23px;
  top:45px;
}


/* 3 — LOWER RIGHT */

.t3{
  right:20px;
  bottom:-19px;
}


/* 4 — LOWER LEFT */

.t4{
  left:20px;
  bottom:-19px;
}


/* 5 — UPPER LEFT */

.t5{
  left:-23px;
  top:45px;
}


/* =========================
   STATUS LABEL
========================= */

.visualLabel{
  position:absolute;

  z-index:10;

  left:50%;
  bottom:12px;

  transform:translateX(-50%);

  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:8px;

  min-height:30px;

  padding:6px 12px;

  border-radius:999px;

  background:#ffffff;

  border:1px solid #dce5ef;

  box-shadow:
    0 7px 16px rgba(15,23,42,.06);

  color:#526176;

  font-size:11px;
  font-weight:800;

  white-space:nowrap;
}

.visualStatus{
  width:7px;
  height:7px;

  flex:0 0 7px;

  border-radius:50%;

  background:#16a34a;
}


/* =========================
   PERFECT ROTATION
========================= */

@keyframes aweOrbitRotate{

  from{
    transform:rotate(0deg);
  }

  to{
    transform:rotate(360deg);
  }
}


@keyframes aweTokenStayStraight{

  from{
    transform:rotate(0deg);
  }

  to{
    transform:rotate(-360deg);
  }
}


/* =========================
   TABLET
========================= */

@media(max-width:980px){

  .visual{
    min-height:350px;
  }

  .glowCard{
    width:315px;
    height:315px;
  }

  .visualGlow{
    width:190px;
    height:190px;
  }

  .logoCard{
    width:162px !important;
    height:162px !important;
    max-width:162px !important;
  }

  .orbit{
    width:214px;
    height:214px;

    margin-left:-107px;
    margin-top:-107px;
  }

  .token{
    width:46px;
    height:46px;

    padding:8px;
  }


  /* TOP */

  .t1{
    left:84px;
    top:-23px;
  }


  /* RIGHT */

  .t2{
    right:-22px;
    top:41px;
  }


  /* BOTTOM RIGHT */

  .t3{
    right:18px;
    bottom:-18px;
  }


  /* BOTTOM LEFT */

  .t4{
    left:18px;
    bottom:-18px;
  }


  /* LEFT */

  .t5{
    left:-22px;
    top:41px;
  }
}


/* =========================
   MOBILE
========================= */

@media(max-width:640px){

  .visual{
    min-height:300px;
  }

  .glowCard{
    width:270px;
    height:270px;

    border-radius:25px;
  }

  .visualGlow{
    width:158px;
    height:158px;
  }

  .logoCard{
    width:137px !important;
    height:137px !important;
    max-width:137px !important;
  }


  /* MOBILE ORBIT */

  .orbit{
    width:180px;
    height:180px;

    margin-left:-90px;
    margin-top:-90px;
  }

  .token{
    width:40px;
    height:40px;

    padding:7px;

    border-radius:12px;
  }


  /* TOP */

  .t1{
    left:70px;
    top:-20px;
  }


  /* RIGHT */

  .t2{
    right:-19px;
    top:34px;
  }


  /* BOTTOM RIGHT */

  .t3{
    right:15px;
    bottom:-16px;
  }


  /* BOTTOM LEFT */

  .t4{
    left:15px;
    bottom:-16px;
  }


  /* LEFT */

  .t5{
    left:-19px;
    top:34px;
  }

  .visualLabel{
    bottom:10px;

    min-height:27px;

    padding:5px 10px;

    font-size:10px;
  }
}


/* =========================
   SMALL MOBILE
========================= */

@media(max-width:400px){

  .visual{
    min-height:270px;
  }

  .glowCard{
    width:240px;
    height:240px;

    border-radius:23px;
  }

  .visualGlow{
    width:145px;
    height:145px;
  }

  .logoCard{
    width:122px !important;
    height:122px !important;
    max-width:122px !important;
  }


  /* SMALL ORBIT */

  .orbit{
    width:158px;
    height:158px;

    margin-left:-79px;
    margin-top:-79px;
  }

  .token{
    width:36px;
    height:36px;

    padding:6px;

    border-radius:11px;
  }


  /* TOP */

  .t1{
    left:61px;
    top:-18px;
  }


  /* RIGHT */

  .t2{
    right:-17px;
    top:30px;
  }


  /* BOTTOM RIGHT */

  .t3{
    right:13px;
    bottom:-14px;
  }


  /* BOTTOM LEFT */

  .t4{
    left:13px;
    bottom:-14px;
  }


  /* LEFT */

  .t5{
    left:-17px;
    top:30px;
  }

  .visualLabel{
    bottom:8px;
  }
}

/* =========================
   SUPPORTED NETWORKS RAIL
========================= */

.chainRail{
  position:relative;
  padding:18px 0 62px;
  overflow:hidden;
  background:#f8fafc;
}


/* soft separator above rail */

.chainRail::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:min(1180px,calc(100% - 36px));
  height:1px;
  transform:translateX(-50%);
  background:#e6edf5;
}


/* fade left/right edges */

.railMask{
  overflow:hidden;

  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      #000 7%,
      #000 93%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      #000 7%,
      #000 93%,
      transparent 100%
    );
}


/* moving row */

.rail{
  display:flex;
  align-items:center;

  width:max-content;

  gap:14px;

  padding:8px 0;

  animation:
    networkRailMove 30s linear infinite;

  will-change:transform;
}


/* pause on hover */

.railMask:hover .rail{
  animation-play-state:paused;
}


/* individual network card */

.chain{
  min-width:190px;
  height:72px;

  display:flex;
  align-items:center;

  gap:13px;

  padding:0 17px;

  border-radius:18px;

  background:#ffffff;

  border:1px solid #dfe7ef;

  box-shadow:
    0 8px 22px rgba(15,23,42,.055);

  color:#17263a;

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}


/* card hover */

.chain:hover{
  transform:translateY(-3px);

  border-color:#c7d4e2;

  box-shadow:
    0 13px 28px rgba(15,23,42,.085);
}


/* network icon container */

.chain img{
  width:40px;
  height:40px;

  flex:0 0 40px;

  object-fit:contain;

  border-radius:12px;

  background:#f8fafc;

  padding:5px;

  border:1px solid #edf1f5;
}


/* network text */

.chain span{
  display:block;

  min-width:0;

  font-size:14px;

  font-weight:800;

  line-height:1.15;

  letter-spacing:-.015em;

  white-space:nowrap;
}


/* network symbol */

.chain small{
  display:block;

  margin-top:5px;

  color:#8a98aa;

  font-size:10px;

  font-weight:800;

  letter-spacing:.10em;

  text-transform:uppercase;
}


/* =========================
   MOVEMENT
========================= */

@keyframes networkRailMove{

  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-50%);
  }
}


/* =========================
   TABLET
========================= */

@media(max-width:980px){

  .chainRail{
    padding:
      16px 0 52px;
  }

  .rail{
    gap:12px;

    animation-duration:27s;
  }

  .chain{
    min-width:178px;
    height:68px;

    padding:0 15px;

    border-radius:17px;
  }

  .chain img{
    width:37px;
    height:37px;

    flex-basis:37px;
  }
}


/* =========================
   MOBILE
========================= */

@media(max-width:640px){

  .chainRail{
    padding:
      12px 0 44px;
  }

  .chainRail::before{
    width:calc(100% - 24px);
  }

  .railMask{
    -webkit-mask-image:
      linear-gradient(
        to right,
        transparent 0%,
        #000 4%,
        #000 96%,
        transparent 100%
      );

    mask-image:
      linear-gradient(
        to right,
        transparent 0%,
        #000 4%,
        #000 96%,
        transparent 100%
      );
  }

  .rail{
    gap:10px;

    padding:6px 0;

    animation-duration:24s;
  }

  .chain{
    min-width:158px;
    height:62px;

    gap:10px;

    padding:0 13px;

    border-radius:15px;
  }

  .chain img{
    width:34px;
    height:34px;

    flex-basis:34px;

    border-radius:10px;

    padding:4px;
  }

  .chain span{
    font-size:13px;
  }

  .chain small{
    margin-top:4px;

    font-size:9px;
  }
}


/* =========================
   SMALL MOBILE
========================= */

@media(max-width:400px){

  .chain{
    min-width:148px;
    height:58px;

    padding:0 12px;
  }

  .chain img{
    width:32px;
    height:32px;

    flex-basis:32px;
  }

  .chain span{
    font-size:12px;
  }
}


/* =========================
   FEATURES SECTION
========================= */

#features{
  position:relative;

  padding:96px 0;

  background:#ffffff;

  border-top:1px solid #edf1f5;
}


/* =========================
   SECTION HEADING
========================= */

.sectionHead{
  max-width:780px;

  margin:0 auto 48px;

  text-align:center;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:28px;

  padding:0 11px;

  border-radius:999px;

  background:#f8fafc;

  border:1px solid #e2e8f0;

  color:#31527a;

  font-size:10px;
  font-weight:800;

  text-transform:uppercase;

  letter-spacing:.14em;
}

.sectionHead h2{
  max-width:760px;

  margin:18px auto 16px;

  color:#0f172a;

  font-family:
    Manrope,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size:clamp(38px,4.8vw,58px);

  font-weight:800;

  line-height:1.04;

  letter-spacing:-.045em;
}

.sectionHead p{
  max-width:700px;

  margin:0 auto;

  color:#66768a;

  font-size:16px;
  font-weight:500;

  line-height:1.78;

  letter-spacing:-.01em;
}


/* =========================
   FEATURES GRID
========================= */

.features{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:18px;
}


/* =========================
   FEATURE CARD
========================= */

.feature{
  position:relative;

  min-height:245px;

  padding:26px;

  border-radius:22px;

  background:#ffffff;

  border:1px solid #e1e8f0;

  box-shadow:
    0 10px 28px rgba(15,23,42,.045);

  overflow:hidden;

  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.feature:hover{
  transform:translateY(-4px);

  border-color:#cbd6e2;

  box-shadow:
    0 18px 38px rgba(15,23,42,.075);
}


/* subtle top accent */

.feature::before{
  content:"";

  position:absolute;

  left:26px;
  top:0;

  width:48px;
  height:3px;

  border-radius:0 0 6px 6px;

  background:#2457d6;
}


/* =========================
   ICON
========================= */

.feature .icon{
  width:48px;
  height:48px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-bottom:22px;

  border-radius:14px;

  background:#f4f7fb;

  border:1px solid #e1e8f0;

  color:#2457d6;

  font-size:22px;
  font-weight:800;

  box-shadow:
    0 6px 16px rgba(15,23,42,.035);
}


/* =========================
   FEATURE TITLE
========================= */

.feature h3{
  margin:0 0 11px;

  color:#142238;

  font-size:19px;
  font-weight:800;

  line-height:1.25;

  letter-spacing:-.025em;
}


/* =========================
   FEATURE TEXT
========================= */

.feature p{
  margin:0;

  color:#68788c;

  font-size:14px;
  font-weight:500;

  line-height:1.75;
}


/* =========================
   DIFFERENT ICON TONES
   subtle only, no gradients
========================= */

.feature:nth-child(1) .icon{
  color:#2457d6;
  background:#f3f6ff;
}

.feature:nth-child(2) .icon{
  color:#0f766e;
  background:#f0fdfa;
}

.feature:nth-child(3) .icon{
  color:#7c3aed;
  background:#f7f3ff;
}

.feature:nth-child(4) .icon{
  color:#0369a1;
  background:#f0f9ff;
}

.feature:nth-child(5) .icon{
  color:#b45309;
  background:#fffaf0;
}

.feature:nth-child(6) .icon{
  color:#15803d;
  background:#f0fdf4;
}


/* =========================
   TABLET
========================= */

@media(max-width:980px){

  #features{
    padding:78px 0;
  }

  .sectionHead{
    margin-bottom:40px;
  }

  .features{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }
}


/* =========================
   MOBILE
========================= */

@media(max-width:640px){

  #features{
    padding:64px 0;
  }

  .sectionHead{
    margin-bottom:32px;
  }

  .eyebrow{
    font-size:9px;
    letter-spacing:.12em;
  }

  .sectionHead h2{
    margin-top:15px;

    font-size:36px;

    line-height:1.05;
  }

  .sectionHead p{
    font-size:15px;

    line-height:1.7;
  }

  .features{
    grid-template-columns:1fr;

    gap:14px;
  }

  .feature{
    min-height:auto;

    padding:23px;

    border-radius:19px;
  }

  .feature::before{
    left:23px;
  }

  .feature .icon{
    width:44px;
    height:44px;

    margin-bottom:18px;

    border-radius:13px;

    font-size:20px;
  }

  .feature h3{
    font-size:18px;
  }

  .feature p{
    font-size:13px;
  }
}


/* =========================
   SMALL MOBILE
========================= */

@media(max-width:400px){

  .sectionHead h2{
    font-size:32px;
  }

  .feature{
    padding:21px;
  }
}


/* =========================
   NETWORKS SECTION
========================= */

.networkSection{
  position:relative;
  padding:96px 0;
  background:#f8fafc;
  border-top:1px solid #edf1f5;
  border-bottom:1px solid #edf1f5;
}


/* =========================
   SECTION HEADING
========================= */

.networkSection .sectionHead{
  max-width:790px;
  margin:0 auto 48px;
  text-align:center;
}

.networkSection .eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:28px;

  padding:0 11px;

  border-radius:999px;

  background:#ffffff;
  border:1px solid #dfe7ef;

  color:#31527a;

  font-size:10px;
  font-weight:800;

  text-transform:uppercase;
  letter-spacing:.14em;

  box-shadow:
    0 5px 16px rgba(15,23,42,.035);
}

.networkSection .sectionHead h2{
  max-width:760px;

  margin:18px auto 16px;

  color:#0f172a;

  font-family:
    Manrope,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size:clamp(38px,4.8vw,58px);

  font-weight:800;

  line-height:1.04;

  letter-spacing:-.045em;
}

.networkSection .sectionHead p{
  max-width:700px;

  margin:0 auto;

  color:#66768a;

  font-size:16px;
  font-weight:500;

  line-height:1.78;

  letter-spacing:-.01em;
}


/* =========================
   NETWORK GRID
========================= */

.networkGrid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:16px;
}


/* =========================
   NETWORK CARD
========================= */

.networkCard{
  position:relative;

  min-height:118px;

  display:flex;
  align-items:center;

  gap:15px;

  padding:20px;

  border-radius:20px;

  background:#ffffff;

  border:1px solid #e0e7ef;

  box-shadow:
    0 9px 24px rgba(15,23,42,.045);

  overflow:hidden;

  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.networkCard:hover{
  transform:translateY(-4px);

  border-color:#c7d4e2;

  box-shadow:
    0 17px 36px rgba(15,23,42,.08);
}


/* subtle top line */

.networkCard::before{
  content:"";

  position:absolute;

  left:20px;
  top:0;

  width:40px;
  height:3px;

  border-radius:0 0 5px 5px;

  background:#2457d6;
}


/* =========================
   NETWORK ICON
========================= */

.networkCard img{
  width:46px;
  height:46px;

  flex:0 0 46px;

  object-fit:contain;

  padding:7px;

  border-radius:14px;

  background:#f6f8fb;

  border:1px solid #e4eaf1;

  box-shadow:
    0 5px 14px rgba(15,23,42,.035);
}


/* =========================
   NETWORK TEXT
========================= */

.networkCard > div{
  min-width:0;
}

.networkCard strong{
  display:block;

  color:#152238;

  font-size:15px;
  font-weight:800;

  line-height:1.2;

  letter-spacing:-.02em;
}

.networkCard span{
  display:block;

  margin-top:6px;

  color:#7a899b;

  font-size:11px;
  font-weight:600;

  line-height:1.45;
}


/* =========================
   INDIVIDUAL NETWORK ACCENTS
========================= */

.networkCard:nth-child(1)::before{
  background:#627eea;
}

.networkCard:nth-child(2)::before{
  background:#f0b90b;
}

.networkCard:nth-child(3)::before{
  background:#7c3aed;
}

.networkCard:nth-child(4)::before{
  background:#2563eb;
}

.networkCard:nth-child(5)::before{
  background:#8247e5;
}

.networkCard:nth-child(6)::before{
  background:#28a0f0;
}

.networkCard:nth-child(7)::before{
  background:#ff0420;
}

.networkCard:nth-child(8)::before{
  background:#e84142;
}


/* =========================
   TABLET
========================= */

@media(max-width:980px){

  .networkSection{
    padding:78px 0;
  }

  .networkSection .sectionHead{
    margin-bottom:40px;
  }

  .networkGrid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .networkCard{
    min-height:110px;
  }
}


/* =========================
   MOBILE
========================= */

@media(max-width:640px){

  .networkSection{
    padding:64px 0;
  }

  .networkSection .sectionHead{
    margin-bottom:32px;
  }

  .networkSection .eyebrow{
    font-size:9px;
    letter-spacing:.12em;
  }

  .networkSection .sectionHead h2{
    margin-top:15px;

    font-size:36px;
    line-height:1.05;
  }

  .networkSection .sectionHead p{
    font-size:15px;
    line-height:1.7;
  }

  .networkGrid{
    grid-template-columns:1fr;
    gap:12px;
  }

  .networkCard{
    min-height:auto;

    padding:18px;

    border-radius:18px;
  }

  .networkCard::before{
    left:18px;
  }

  .networkCard img{
    width:43px;
    height:43px;

    flex-basis:43px;

    padding:6px;

    border-radius:13px;
  }

  .networkCard strong{
    font-size:14px;
  }

  .networkCard span{
    font-size:10px;
  }
}


/* =========================
   SMALL MOBILE
========================= */

@media(max-width:400px){

  .networkSection .sectionHead h2{
    font-size:32px;
  }

  .networkCard{
    padding:16px;
  }

  .networkCard img{
    width:40px;
    height:40px;

    flex-basis:40px;
  }
}


/* =========================
   CREATE WALLET CTA
========================= */

.ctaWrap{
  position:relative;
  padding:96px 0;
  background:#ffffff;
}


/* =========================
   MAIN CTA PANEL
========================= */

.cta{
  position:relative;

  max-width:1120px;
  margin:0 auto;

  padding:76px 40px;

  overflow:hidden;

  border-radius:32px;

  background:#0f1f38;

  border:1px solid #1d3150;

  box-shadow:
    0 28px 70px rgba(15,31,56,.16);
}


/* subtle decorative circles */

.cta::before{
  content:"";

  position:absolute;

  width:280px;
  height:280px;

  left:-150px;
  top:-150px;

  border-radius:50%;

  border:1px solid rgba(255,255,255,.07);
}

.cta::after{
  content:"";

  position:absolute;

  width:340px;
  height:340px;

  right:-180px;
  bottom:-210px;

  border-radius:50%;

  border:1px solid rgba(255,255,255,.07);
}


/* =========================
   CONTENT
========================= */

.ctaInner{
  position:relative;
  z-index:2;

  max-width:790px;

  margin:0 auto;

  text-align:center;
}


/* SMALL LABEL */

.cta .eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:30px;

  padding:0 12px;

  border-radius:999px;

  background:#172b49;

  border:1px solid rgba(255,255,255,.10);

  color:#a9c8ff;

  font-size:10px;
  font-weight:800;

  letter-spacing:.14em;
  text-transform:uppercase;
}


/* =========================
   CTA HEADING
========================= */

.cta h2{
  max-width:780px;

  margin:20px auto 18px;

  color:#ffffff;

  font-family:
    Manrope,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size:clamp(40px,5vw,60px);

  font-weight:800;

  line-height:1.04;

  letter-spacing:-.045em;
}


/* =========================
   CTA DESCRIPTION
========================= */

.cta p{
  max-width:650px;

  margin:0 auto;

  color:#aebbd0;

  font-size:16px;
  font-weight:500;

  line-height:1.75;

  letter-spacing:-.01em;
}


/* =========================
   CREATE WALLET BUTTON
========================= */

.cta .btnPrimary{
  min-height:56px;

  margin-top:30px;

  padding:0 25px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius:15px;

  background:#ffffff;

  color:#163f9e;

  font-size:14px;
  font-weight:800;

  border:1px solid #ffffff;

  box-shadow:
    0 12px 28px rgba(0,0,0,.16);

  transition:
    transform .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.cta .btnPrimary:hover{
  transform:translateY(-2px);

  background:#f3f7ff;

  box-shadow:
    0 17px 34px rgba(0,0,0,.21);
}


/* small arrow after text */

.cta .btnPrimary::after{
  content:"→";

  margin-left:10px;

  font-size:17px;
  font-weight:700;

  transition:transform .2s ease;
}

.cta .btnPrimary:hover::after{
  transform:translateX(3px);
}


/* =========================
   TABLET
========================= */

@media(max-width:980px){

  .ctaWrap{
    padding:78px 0;
  }

  .cta{
    padding:64px 34px;

    border-radius:28px;
  }

  .cta h2{
    font-size:48px;
  }
}


/* =========================
   MOBILE
========================= */

@media(max-width:640px){

  .ctaWrap{
    padding:64px 0;
  }

  .cta{
    padding:48px 22px;

    border-radius:24px;
  }

  .cta .eyebrow{
    min-height:27px;

    font-size:9px;

    letter-spacing:.12em;
  }

  .cta h2{
    margin-top:17px;

    font-size:35px;

    line-height:1.06;
  }

  .cta p{
    font-size:15px;

    line-height:1.7;
  }

  .cta .btnPrimary{
    width:100%;

    min-height:54px;

    margin-top:26px;
  }
}


/* =========================
   SMALL MOBILE
========================= */

@media(max-width:400px){

  .cta{
    padding:
      42px 18px;

    border-radius:21px;
  }

  .cta h2{
    font-size:31px;
  }

  .cta p{
    font-size:14px;
  }
}


/* =========================
   ABOUT SECTION
========================= */

#about{
  position:relative;
  padding:96px 0;
  background:#ffffff;
}


/* =========================
   SECTION HEADING
========================= */

#about .sectionHead{
  max-width:800px;
  margin:0 auto 46px;
  text-align:center;
}

#about .eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:28px;

  padding:0 11px;

  border-radius:999px;

  background:#f8fafc;
  border:1px solid #e2e8f0;

  color:#31527a;

  font-size:10px;
  font-weight:800;

  text-transform:uppercase;
  letter-spacing:.14em;
}

#about .sectionHead h2{
  max-width:720px;

  margin:18px auto 16px;

  color:#0f172a;

  font-family:
    Manrope,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size:clamp(40px,4.8vw,58px);

  font-weight:800;

  line-height:1.04;

  letter-spacing:-.045em;
}

#about .sectionHead p{
  max-width:690px;

  margin:0 auto;

  color:#66768a;

  font-size:16px;
  font-weight:500;

  line-height:1.78;

  letter-spacing:-.01em;
}


/* =========================
   CONTENT GRID
========================= */

.contentGrid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:20px;

  max-width:1000px;
  margin:0 auto;
}


/* =========================
   CONTENT CARD
========================= */

.contentCard{
  position:relative;

  min-height:250px;

  padding:30px;

  border-radius:22px;

  background:#ffffff;

  border:1px solid #e1e8f0;

  box-shadow:
    0 10px 28px rgba(15,23,42,.045);

  overflow:hidden;

  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.contentCard:hover{
  transform:translateY(-4px);

  border-color:#cbd6e2;

  box-shadow:
    0 18px 38px rgba(15,23,42,.075);
}


/* subtle accent */

.contentCard::before{
  content:"";

  position:absolute;

  left:30px;
  top:0;

  width:48px;
  height:3px;

  border-radius:0 0 6px 6px;

  background:#2457d6;
}


/* small number */

.contentCard::after{
  position:absolute;

  right:24px;
  top:20px;

  color:#d9e1ea;

  font-size:42px;
  font-weight:800;

  line-height:1;
}

.contentCard:nth-child(1)::after{
  content:"01";
}

.contentCard:nth-child(2)::after{
  content:"02";
}


/* =========================
   CARD TITLE
========================= */

.contentCard h3{
  position:relative;
  z-index:2;

  max-width:320px;

  margin:8px 0 15px;

  color:#152238;

  font-size:22px;
  font-weight:800;

  line-height:1.2;

  letter-spacing:-.03em;
}


/* =========================
   CARD TEXT
========================= */

.contentCard p{
  position:relative;
  z-index:2;

  max-width:430px;

  margin:0;

  color:#68788c;

  font-size:14px;
  font-weight:500;

  line-height:1.8;
}


/* =========================
   TABLET
========================= */

@media(max-width:980px){

  #about{
    padding:78px 0;
  }

  #about .sectionHead{
    margin-bottom:40px;
  }

  .contentGrid{
    max-width:900px;
  }
}


/* =========================
   MOBILE
========================= */

@media(max-width:640px){

  #about{
    padding:64px 0;
  }

  #about .sectionHead{
    margin-bottom:32px;
  }

  #about .eyebrow{
    font-size:9px;
    letter-spacing:.12em;
  }

  #about .sectionHead h2{
    margin-top:15px;

    font-size:36px;
    line-height:1.05;
  }

  #about .sectionHead p{
    font-size:15px;
    line-height:1.7;
  }

  .contentGrid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .contentCard{
    min-height:auto;

    padding:24px;

    border-radius:19px;
  }

  .contentCard::before{
    left:24px;
  }

  .contentCard::after{
    right:20px;
    top:18px;

    font-size:34px;
  }

  .contentCard h3{
    margin-top:6px;

    font-size:20px;
  }

  .contentCard p{
    font-size:13px;
    line-height:1.75;
  }
}


/* =========================
   SMALL MOBILE
========================= */

@media(max-width:400px){

  #about .sectionHead h2{
    font-size:32px;
  }

  .contentCard{
    padding:21px;
  }

  .contentCard::before{
    left:21px;
  }

  .contentCard h3{
    font-size:19px;
  }
}

/* =====================================================
   TRUST AWE FOOTER — CLEAN LIGHT PROFESSIONAL STYLE
===================================================== */

footer{
  position:relative;
  background:#f5f8fc;
  color:#172033;
  border-top:1px solid #dfe7f0;
}


/* =====================================================
   MAIN FOOTER LAYOUT
===================================================== */

.footer{
  display:grid;

  grid-template-columns:
    minmax(0,1.55fr)
    minmax(180px,.55fr)
    minmax(180px,.55fr);

  gap:56px;

  padding:52px 0 44px;

  /* IMPORTANT */
  align-items:start;
}


/* =====================================================
   BRAND AREA
===================================================== */

.footer > div:first-child{
  padding-right:40px;

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
}

.footer .brand{
  display:inline-flex;
  align-items:center;
  gap:14px;

  margin:0;

  text-decoration:none;
}

.footer .brand img{
  display:block;

  width:64px;
  height:64px;

  flex:0 0 64px;

  object-fit:contain;
}

.footer .brand span{
  display:block;
}

.footer .brand strong{
  display:block;

  color:#111c31;

  font-family:
    Manrope,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size:20px;
  font-weight:800;

  line-height:1.1;

  letter-spacing:-.025em;
}

.footer .brand small{
  display:block;

  margin-top:6px;

  color:#64748b;

  font-size:9px;
  font-weight:800;

  line-height:1.2;

  letter-spacing:.13em;

  text-transform:uppercase;
}


/* =====================================================
   BRAND DESCRIPTION
===================================================== */

.footer > div:first-child > p{
  max-width:570px;

  margin:18px 0 0;

  color:#5f6f83;

  font-size:13px;
  font-weight:500;

  line-height:1.75;
}


/* =====================================================
   EXPLORE / WALLET COLUMNS
===================================================== */

.footer > div:nth-child(2),
.footer > div:nth-child(3){
  position:relative;

  padding-left:28px;

  border-left:1px solid #dce5ee;
}


/* COLUMN HEADINGS */

.footer h4{
  margin:3px 0 20px;

  color:#172033;

  font-size:12px;
  font-weight:800;

  line-height:1;

  letter-spacing:.08em;

  text-transform:uppercase;
}


/* small line below title */

.footer h4::after{
  content:"";

  display:block;

  width:28px;
  height:2px;

  margin-top:11px;

  border-radius:10px;

  background:#2563eb;
}


/* =====================================================
   FOOTER LINKS
===================================================== */

.footer > div:nth-child(2) > a,
.footer > div:nth-child(3) > a{
  position:relative;

  display:flex;
  align-items:center;

  width:100%;

  min-height:39px;

  padding:0;

  margin:0;

  color:#53657a;

  background:transparent;

  border:0;

  font-size:13px;
  font-weight:700;

  text-decoration:none;

  transition:
    color .18s ease,
    transform .18s ease;
}


/* NO DOTS */

.footer > div:nth-child(2) > a::before,
.footer > div:nth-child(3) > a::before{
  display:none !important;
  content:none !important;
}


/* ARROW */

.footer > div:nth-child(2) > a::after,
.footer > div:nth-child(3) > a::after{
  content:"→";

  margin-left:auto;
  padding-left:14px;

  color:#a0aec0;

  font-size:13px;
  font-weight:700;

  opacity:0;

  transform:translateX(-5px);

  transition:
    opacity .18s ease,
    transform .18s ease,
    color .18s ease;
}


/* HOVER */

.footer > div:nth-child(2) > a:hover,
.footer > div:nth-child(3) > a:hover{
  color:#1d4ed8;

  transform:translateX(3px);
}

.footer > div:nth-child(2) > a:hover::after,
.footer > div:nth-child(3) > a:hover::after{
  opacity:1;

  color:#2563eb;

  transform:translateX(0);
}


/* =====================================================
   CREATE WALLET
   SAME STYLE AS OTHER LINKS
===================================================== */

.footer > div:nth-child(3) > a:first-of-type{
  color:#53657a;
  background:transparent;
  border:0;
  box-shadow:none;
  border-radius:0;
}

.footer > div:nth-child(3) > a:first-of-type:hover{
  color:#1d4ed8;
  background:transparent;
}


/* =====================================================
   COPYRIGHT
===================================================== */

.copyright{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:24px;

  min-height:70px;

  padding:20px 0;

  border-top:1px solid #dce5ee;

  color:#77869a;

  font-size:11px;
  font-weight:600;
}

.copyright span:first-child{
  color:#718096;
}

.copyright span:last-child{
  color:#52657b;

  font-size:10px;
  font-weight:800;

  letter-spacing:.10em;

  text-transform:uppercase;
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:900px){

  .footer{
    grid-template-columns:
      minmax(0,1.3fr)
      minmax(150px,.55fr)
      minmax(150px,.55fr);

    gap:32px;

    padding:54px 0 42px;
  }

  .footer > div:first-child{
    padding-right:10px;
  }

  .footer > div:nth-child(2),
  .footer > div:nth-child(3){
    padding-left:22px;
  }

  .footer .brand img{
    width:56px;
    height:56px;

    flex-basis:56px;
  }
}


/* =====================================================
   SMALL TABLET
===================================================== */

@media(max-width:720px){

  .footer{
    grid-template-columns:1fr 1fr;

    gap:38px 28px;
  }

  .footer > div:first-child{
    grid-column:1 / -1;

    padding-right:0;
  }

  .footer > div:first-child > p{
    max-width:650px;
  }

  .footer > div:nth-child(2){
    padding-left:0;

    border-left:0;
  }

  .footer > div:nth-child(3){
    padding-left:28px;
  }
}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:540px){

  .footer{
    grid-template-columns:1fr;

    gap:32px;

    padding:46px 0 34px;
  }

  .footer > div:first-child{
    grid-column:auto;
  }

  .footer .brand{
    gap:12px;

    margin-bottom:17px;
  }

  .footer .brand img{
    width:52px;
    height:52px;

    flex-basis:52px;
  }

  .footer .brand strong{
    font-size:18px;
  }

  .footer .brand small{
    margin-top:5px;

    font-size:8px;
  }

  .footer > div:first-child > p{
    font-size:12px;

    line-height:1.8;
  }


  /* columns */

  .footer > div:nth-child(2),
  .footer > div:nth-child(3){
    padding:0;

    border-left:0;
  }

  .footer h4{
    margin-bottom:14px;
  }

  .footer h4::after{
    margin-top:9px;
  }


  /* mobile links become clean rows */

  .footer > div:nth-child(2) > a,
  .footer > div:nth-child(3) > a{
    min-height:44px;

    border-bottom:1px solid #e1e8f0;

    font-size:13px;
  }

  .footer > div:nth-child(2) > a::after,
  .footer > div:nth-child(3) > a::after{
    opacity:1;

    transform:none;

    color:#94a3b8;
  }


  /* copyright */

  .copyright{
    flex-direction:column;
    align-items:flex-start;

    gap:7px;

    min-height:auto;

    padding:20px 0 26px;
  }
}


/* =====================================================
   VERY SMALL MOBILE
===================================================== */

@media(max-width:380px){

  .footer{
    padding-top:40px;
  }

  .footer .brand img{
    width:48px;
    height:48px;

    flex-basis:48px;
  }

  .footer .brand strong{
    font-size:17px;
  }

  .footer > div:first-child > p{
    font-size:11.5px;
  }
}