/* ==========================================================
   ANATYTIXCHAMP — Digital Marketing Course Landing Page
   DESIGN TOKENS — change colours / fonts here only
   Palette pulled from the AnatytixChamp logo: deep navy,
   electric blue and a cyan-teal sweep.
   ========================================================== */
:root{
  --ink:#0A1230;        /* logo navy */
  --ink-2:#101B45;
  --ink-3:#1B2C68;
  --blue:#2F6FED;       /* logo blue — primary CTA colour */
  --blue-d:#1E52C2;
  --blue-l:#6E9AFF;
  --cyan:#17C9CE;        /* logo teal sweep — highlight colour */
  --cyan-d:#0FA6AA;
  --paper:#F3F6FC;
  --line:#DCE3F2;
  --muted:#5A6484;

  --grad-brand:linear-gradient(135deg,var(--blue) 0%,var(--cyan) 100%);

  --font-display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --font-body:'Instrument Sans','Segoe UI',system-ui,sans-serif;

  --bs-body-font-family:var(--font-body);
  --bs-body-color:var(--ink);
  --bs-body-bg:#fff;
  --bs-body-font-size:1.0625rem;
  --bs-body-line-height:1.6;
  --bs-link-color:var(--blue-d);
}

html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.display-font{font-family:var(--font-display);letter-spacing:-.025em;color:inherit}
section[id]{scroll-margin-top:72px}
:focus-visible{outline:3px solid var(--blue-l);outline-offset:3px}
img{max-width:100%}

/* ---------- Buttons ---------- */
.btn{border-radius:12px;font-weight:700;padding:.5rem 1.4rem;border-width:2px;transition:background-color .2s,color .2s,border-color .2s,transform .2s}
.btn-lg{padding:.45rem 1.7rem;font-size:1.05rem}
.btn-brand{background:var(--blue);border-color:var(--blue);color:#fff}
.btn-brand:hover,.btn-brand:focus{background:var(--blue-l);border-color:var(--blue-l);color:#fff}
.btn-ink{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-ink:hover,.btn-ink:focus{background:var(--ink-2);border-color:var(--ink-2);color:#fff}
.btn-line-ink{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-line-ink:hover{background:var(--ink);color:#fff}
.btn-line-light{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.btn-line-light:hover{background:#fff;border-color:#fff;color:var(--ink)}

/* CTA rows — always centred, per section, under the content */
.cta-row{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;text-align:center}

/* ---------- Header ---------- */
.site-header{background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-header img{height:65px;width:auto}

/* ==========================================================
   HERO
   ========================================================== */
.hero{
  position:relative;overflow:hidden;color:#fff;
  padding:4.5rem 0 4.5rem;
  background:
    linear-gradient(
86deg, rgb(0 0 0 / 60%) 0%, rgb(10 18 48 / 67%) 45%, rgb(16 27 69 / 0%) 100%), url(banner.webp) center / cover no-repeat
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 75%);
          mask-image:linear-gradient(180deg,#000 0%,transparent 75%);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(700px 480px at 92% 0%,rgba(23,201,206,.30),transparent 60%),
             radial-gradient(650px 480px at -5% 105%,rgba(47,111,237,.35),transparent 60%);
}
.hero .container{position:relative}
.hero-badge{
  display:inline-flex;align-items:center;gap:.55rem;
  background:rgba(23,201,206,.14);border:1px solid rgba(23,201,206,.5);color:var(--cyan);
  padding:.45rem 1rem;border-radius:999px;font-weight:600;font-size:.95rem;margin-bottom:1.5rem;
}
.hero h1{
  font-size:clamp(2rem,4.2vw,3.125rem);font-weight:800;line-height:1.05;letter-spacing:-.04em;
  margin-bottom:1.4rem;
}
.hero .lead{color:rgba(255,255,255,.82);font-size:1.15rem;max-width:56ch;margin-bottom:2rem}
.hero-points{list-style:none;padding:0;margin:2rem 0 0;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;color:rgba(255,255,255,.88);font-weight:500}
.hero-points i{color:var(--cyan);margin-right:.4rem}

/* Hero highlight panel — replaces a plain lead form so the photo stays visible */
.hero-panel{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  border-radius:26px;padding:2rem;backdrop-filter:blur(14px);
  box-shadow:0 30px 60px -25px rgba(0,0,0,.6);
}
.hero-panel-head{display:flex;align-items:flex-start;gap:.9rem;margin-bottom:1.5rem}
.hero-panel-ico{flex:none;width:48px;height:48px;border-radius:14px;background:rgba(23,201,206,.16);border:1px solid rgba(23,201,206,.4);display:grid;place-items:center;font-size:1.25rem;color:var(--cyan)}
.hero-panel-title{font-size:1.35rem;font-weight:700;margin:0 0 .2rem;color:#fff}
.hero-panel-sub{margin:0;color:rgba(255,255,255,.72);font-size:.92rem}
.hero-panel .form-label{color:rgba(255,255,255,.88)}
.hero-panel .invalid-feedback{color:#FFC2C2}
.hero-panel .avatars{display:flex;align-items:center;gap:.85rem;margin-top:1.5rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.16)}
.hero-panel .avatars .stack{display:flex}
.hero-panel .avatars .stack span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:.78rem;font-weight:700;font-family:var(--font-display);color:#fff;border:2px solid var(--ink);margin-left:-10px}
.hero-panel .avatars .stack span:first-child{margin-left:0}
.hero-panel .avatars p{margin:0;color:rgba(255,255,255,.75);font-size:.87rem}

@media (max-width:991.98px){
  .hero{padding-top:3rem;padding-bottom:3rem}
}

/* ==========================================================
   SECTIONS (generic)
   ========================================================== */
.section{padding:clamp(3.5rem,8vw,6.5rem) 0}
.section-paper{background:var(--paper)}
.section-ink{background:var(--ink);color:#fff}
.section h2{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:700;line-height:1.1;margin-bottom:1rem}
.section .intro{color:var(--muted);font-size:1.12rem;max-width:56ch;     margin: auto;}
.section-ink .intro{color:rgba(255,255,255,.78)}
.section-head{margin-bottom:3rem; text-align: center;}

/* Why — bento */
.tile{position:relative;overflow:hidden;border-radius:28px;padding:2.4rem;min-height:290px}
.tile h3{font-size:1.85rem;font-weight:700;margin:1.4rem 0 .6rem}
.tile p{max-width:40ch;margin:0;font-size:1.05rem}
.tile-ico{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:16px;font-size:1.8rem}
.tile-mark{position:absolute;right:-.5rem;bottom:-2.2rem;font-size:11rem;line-height:1;opacity:.09;pointer-events:none}
.tile-ink{background:var(--ink);color:#fff}
.tile-ink p{color:rgba(255,255,255,.8)}
.tile-ink .tile-ico{background:rgba(255,255,255,.1);color:var(--cyan)}
.tile-brand{background:var(--grad-brand);color:#fff}
.tile-brand p{color:rgba(255,255,255,.92)}
.tile-brand .tile-ico{background:rgba(10,18,48,.28);color:#fff}

/* Why — redesigned feature cards (the 6 points) */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.feature-card{
  position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);
  border-radius:22px;padding:2.1rem 1.8rem 1.9rem;height:100%;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.feature-card::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--grad-brand);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.feature-card:hover{transform:translateY(-6px);box-shadow:0 26px 46px -24px rgba(10,18,48,.28);border-color:transparent}
.feature-card:hover::before{transform:scaleX(1)}
.f-ico{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-size:1.5rem;background:var(--grad-brand);color:#fff;margin-bottom:1.15rem}
.feature-card h3{font-size:1.25rem;font-weight:700;margin:0 0 .5rem}
.feature-card p{color:var(--muted);margin:0}
.f-ghost{position:absolute;right:-1rem;bottom:-1.4rem;font-size:6.5rem;color:var(--ink);opacity:.05;pointer-events:none}
@media (max-width:991.98px){.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:575.98px){.feature-grid{grid-template-columns:1fr}}

/* Tools */
.big-count{font-family:var(--font-display);font-weight:800;font-size:100px;line-height:.9;letter-spacing:-.05em;color:var(--blue)}
.tool{display:inline-flex;align-items:center;gap:.6rem;background:#fff;border:1px solid var(--line);border-radius:14px;padding:.5rem .95rem .5rem .55rem;font-weight:600;font-size:.95rem;white-space:nowrap}
.tool img{width:28px;height:28px;border-radius:7px;object-fit:contain;background:#fff}

/* Tools — marquee, 4 rows */
.tools-marquee{display:flex;flex-direction:column;gap:.85rem;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.marquee-row{display:flex;gap:.85rem;width:max-content;animation:marquee-left 38s linear infinite}
.marquee-row.reverse{animation-name:marquee-right}
.marquee-row:nth-child(2){animation-duration:46s}
.marquee-row:nth-child(3){animation-duration:34s}
.marquee-row:nth-child(4){animation-duration:44s}
.tools-marquee:hover .marquee-row{animation-play-state:paused}
@keyframes marquee-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marquee-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* Curriculum — flight path */
.flight-wrap{position:relative}
.flight-wrap::before{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:3px;background:var(--line);border-radius:2px}
.flight-fill{position:absolute;left:23px;top:24px;width:3px;height:0;background:linear-gradient(var(--blue),var(--cyan));border-radius:2px;transition:height .15s linear}
.flight{list-style:none;margin:0;padding:0;position:relative}
.stage{position:relative;padding:0 0 2.6rem 78px}
.stage:last-child{padding-bottom:0}
.stage-dot{position:absolute;left:0;top:0;width:48px;height:48px;border-radius:50%;background:#fff;border:3px solid var(--line);display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:1.1rem;z-index:1;transition:background-color .3s,border-color .3s,color .3s}
.stage.is-reached .stage-dot{background:var(--grad-brand);border-color:transparent;color:#fff}
.stage h3{font-size:1.55rem;font-weight:700;margin:.6rem 0 .8rem}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.chips li{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.3rem .85rem;font-size:.93rem;font-weight:500}

/* CTA band — mid-page, image background */
.cta-band{position:relative;overflow:hidden;padding:clamp(3.5rem,8vw,5.5rem) 0;color:#fff;text-align:center;background-size:cover;background-position:center}
.cta-band::before{content:"";position:absolute;inset:0;    background: linear-gradient(160deg, rgb(10 18 48 / 75%), rgb(10 18 48 / 75%) 55%, rgba(23, 201, 206, .45));}
.cta-band .container{position:relative}
.cta-band .eyebrow{display:inline-flex;align-items:center;gap:.5rem;color:var(--cyan);font-weight:700;margin-bottom:1rem}
.cta-band h2{font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:800;max-width:26ch;margin:0 auto 1rem}
.cta-band p{color:rgba(255,255,255,.82);max-width:52ch;margin:0 auto 1.8rem;font-size:1.08rem}
.cta-band-1{background-image:url('CTA-bg.webp')}
.cta-band-2{background-image:url('CTA-bg-2.webp')}

/* Reviews */
.rating-box{display:flex;align-items:center;gap:1rem}
.rating-box .num{font-family:var(--font-display);font-weight:800;font-size:3.6rem;letter-spacing:-.04em;line-height:1}
.stars{color:var(--cyan-d);letter-spacing:.1em;white-space:nowrap}
.reviews-slider{position:relative}
.reviews-track{display:flex;gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.25rem .25rem 1rem;scrollbar-width:none;-ms-overflow-style:none}
.reviews-track::-webkit-scrollbar{display:none}
.review-slide{flex:0 0 auto;width:min(380px,84vw);scroll-snap-align:start}
@media (min-width:992px){.review-slide{width:calc(50% - .625rem)}}
.review{height:100%;background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.6rem}
.review p{margin:.8rem 0 1.1rem;font-size:1rem}
.review footer{display:flex;align-items:center;gap:.75rem}
.avatar{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-family:var(--font-display);background:var(--ink);color:#fff}
.review-slide:nth-child(3n+2) .avatar{background:var(--blue)}
.review-slide:nth-child(3n) .avatar{background:var(--cyan);color:var(--ink)}
.review .who{font-weight:700;line-height:1.2;display:block}
.review .meta{font-size:.85rem;color:var(--muted)}
.slider-controls{display:flex;align-items:center;justify-content:center;gap:1.25rem;margin-top:.5rem}
.slider-arrow{width:46px;height:46px;flex:none;border-radius:50%;border:1.5px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.slider-arrow:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.slider-dots{display:flex;align-items:center;gap:.45rem}
.slider-dot{width:8px;height:8px;border-radius:50%;background:var(--line);border:0;padding:0;cursor:pointer;transition:width .2s,background-color .2s}
.slider-dot.active{width:24px;border-radius:5px;background:var(--blue)}

/* Booking — reimagined section */
.book-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.check-list{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:.7rem}
.check-list li{display:flex;gap:.7rem;align-items:flex-start;color:rgba(255,255,255,.92)}
.check-list i{color:var(--cyan);font-size:1.15rem;margin-top:.1rem}
.section-ink h3.sub-h{font-size:1.25rem;font-weight:700;margin-bottom:.4rem}
.book-visual{position:relative;border-radius:28px;overflow:hidden;min-height:360px;
  background:linear-gradient(155deg,rgba(47,111,237,.35),rgba(23,201,206,.28)),
             url('Reserve-your-free.webp') center/cover;
  border:1px solid rgba(255,255,255,.14);display:flex;align-items:flex-end;padding:1.75rem}
.book-visual-card{background:rgba(10,18,48,.72);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:1.5rem;width:100%}
.book-visual-card .num{font-family:var(--font-display);font-weight:800;font-size:2.4rem;color:#fff;letter-spacing:-.03em;line-height:1}
.book-visual-card p{margin:.25rem 0 0;color:rgba(255,255,255,.78);font-size:.95rem}
@media (max-width:991.98px){.book-grid{grid-template-columns:1fr}.book-visual{min-height:220px}}

/* Final CTA */
.final-cta{background:var(--grad-brand);color:#fff;padding:clamp(3rem,7vw,5rem) 0;text-align:center}
.final-cta h2{font-size:clamp(1.9rem,4vw,3.1rem);font-weight:800;line-height:1.08;max-width:22ch;margin:0 auto 1rem}
.final-cta p{font-size:1.15rem;max-width:56ch;margin:0 auto 1.8rem;color:rgba(255,255,255,.92)}

/* ---------- Footer ---------- */
.site-footer{background:#060B22;color:rgba(255,255,255,.68)}
.foot-accent{height:3px;background:var(--grad-brand)}
.site-footer .container{padding-top:3.5rem;padding-bottom:2rem}

.foot-brand-center{text-align:center}
.foot-logo{    height: 85px;
    margin-bottom: .8rem;
    /* filter: brightness(0) invert(1); */
    background: #fff;
    padding: 2px;
    border-radius: 5px;
}
.foot-tagline-center{color:var(--cyan);font-weight:700;font-size:.82rem;letter-spacing:.08em;margin:0; display: none;}

.foot-divider{height:1px;background:rgba(255,255,255,.1);margin:2.25rem 0}

.foot-quickrow{display:flex;align-items:center;justify-content:center;gap:2rem;flex-wrap:wrap;margin-bottom:2.5rem}
.foot-quick-sep{width:1px;height:34px;background:rgba(255,255,255,.14)}
.foot-quick-item{display:flex;align-items:center;gap:.85rem}
.foot-quick-item .ic{flex:none;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:var(--cyan)}
.foot-quick-item .lbl{font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.5);margin-bottom:.15rem}
.foot-quick-item .val{color:#fff;font-weight:600;font-size:.95rem}

.foot-info-card{display:flex;flex-wrap:wrap;gap:2rem 3rem;justify-content:space-between;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:2rem 2.25rem;margin-bottom:2rem}
.foot-info-col{display:flex;align-items:flex-start;gap:.85rem;flex:1 1 220px}
.foot-info-col .ic{flex:none;width:44px;height:44px;border-radius:50%;background:rgba(47,111,237,.18);display:grid;place-items:center;color:var(--blue-l);font-size:1.05rem}
.foot-info-col .lbl{font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.5);margin-bottom:.2rem}
.foot-info-col .val{color:#fff;font-weight:600;font-size:.98rem;text-decoration:none;display:block}
.foot-info-col a.val:hover{color:var(--cyan)}

.foot-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);font-size:.9rem}
.foot-bottom a{color:#fff}
.foot-social{display:flex;gap:.6rem}
.foot-social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;text-decoration:none;transition:background-color .2s}
.foot-social a:hover{background:var(--grad-brand)}

@media (max-width:767.98px){
  .foot-quickrow{flex-direction:column;gap:1.25rem}
  .foot-quick-sep{display:none}
  .foot-info-card{flex-direction:column;padding:1.6rem}
  .site-header img {
    height: 45px;
    width: auto;
}
.hero-badge{
      font-size: .75rem;
      display: flex;
      width: fit-content;
      margin-left: auto;
      margin-right: auto;
      justify-content: center;
}
.hero .cta-row{
      justify-content: center !important;
}
.hero-points{
  justify-content: center;
}
#why .tile{
      padding: 1.4rem;
}
#why .tile h3{
      font-size: 20px;
}
.foot-info-col{
  flex: inherit;
}
.foot-bottom{
  justify-content: center;
  text-align: center;
}
.hero h1{
  font-size: 30px;
  text-align: center;
}
.hero .lead{
  text-align: center;
}
.hero{
      background: linear-gradient(86deg, rgb(0 0 0 / 87%) 0%, rgb(10 18 48 / 91%) 45%, rgb(16 27 69 / 47%) 100%), url(banner.webp) center / cover no-repeat;
}
.hero .col-lg-5, .hero .col-lg-7{
  padding: 0px;
}
.row{
  margin-left: inherit;
  margin-right: inherit;
}
.hero-panel{
  padding: 1rem;
}
.hero-panel .w-50{
  padding-left: 2px;
  padding-right: 2px;
}
}

/* ---------- Modals ---------- */
.brand-modal .modal-content{border-radius:26px;border:0;overflow:hidden}
.modal-banner{background:linear-gradient(135deg,var(--ink) 0%,var(--ink-3) 55%,var(--blue) 130%);color:#fff;padding:2rem 2rem 1.6rem;position:relative}
.modal-banner .m-ico{width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.14);display:grid;place-items:center;font-size:1.4rem;color:var(--cyan);margin-bottom:.9rem}
.modal-banner h2{font-size:1.5rem;font-weight:700;margin-bottom:.3rem}
.modal-banner p{color:rgba(255,255,255,.78);margin:0;font-size:.95rem}
.modal-banner .btn-close{filter:invert(1);position:absolute;right:1.4rem;top:1.4rem}
.brand-modal .modal-body{padding:1.75rem 2rem 2rem}
.form-label{font-weight:600;font-size:.92rem;margin-bottom:.3rem}
.form-control,.form-select{border:1.5px solid var(--line);border-radius:12px;padding:.65rem .95rem;background-color:#fff}
.form-control:focus,.form-select:focus{border-color:var(--blue);box-shadow:0 0 0 .2rem rgba(47,111,237,.15)}
.input-group-text{border:1.5px solid var(--line);border-right:0;border-radius:12px 0 0 12px;background:var(--paper);color:var(--muted);font-weight:600}
.input-group .form-control{border-radius:0 12px 12px 0}
.form-note{font-size:.85rem;color:var(--muted);text-align:center;margin:.85rem 0 0}
.form-success{text-align:center;padding:1.5rem .5rem}
.form-success i{font-size:3rem;color:var(--blue)}
.form-success h3{margin:.6rem 0 .4rem}

/* Footer + mobile bar */
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:1030;display:flex;gap:.6rem;padding:.6rem .75rem;background:#fff;border-top:1px solid var(--line)}
.mobile-bar .btn{flex:1;padding:.4rem .5rem}
@media (max-width:991.98px){body{padding-bottom:55px}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reviews-track{scroll-behavior:auto}
}

/* Footer: free tools */
.foot-tools{margin:0 0 2rem}
.foot-tools-head{display:flex;align-items:center;gap:1rem;margin:0 0 1rem;font-family:var(--font-body);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--cyan)}
.foot-tools-head::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.12)}
.foot-tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}
.foot-tool{display:flex;align-items:center;gap:.9rem;padding:1.1rem 1.2rem;border-radius:18px;text-decoration:none;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);transition:transform .25s,border-color .25s}
.foot-tool:hover{transform:translateY(-3px);border-color:rgba(23,201,206,.55)}
.ft-ico{flex:none;width:46px;height:46px;border-radius:14px;background:var(--grad-brand);color:#fff;display:grid;place-items:center;font-size:1.2rem}
.ft-txt{flex:1;min-width:0}
.ft-title{display:block;color:#fff;font-weight:700;font-size:1rem;line-height:1.25}
.ft-sub{display:block;margin-top:.15rem;color:rgba(255,255,255,.58);font-size:.85rem;line-height:1.35}
.ft-go{color:rgba(255,255,255,.4);transition:transform .25s,color .25s}
.foot-tool:hover .ft-go{color:var(--cyan);transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.foot-tool,.ft-go{transition:none}.foot-tool:hover,.foot-tool:hover .ft-go{transform:none}}