/* =====================================================================
   PANEL - GUEST PAGES (home, sign up, terms, FAQ, welcome)       v1
   Every rule starts with body.afg - header.twig puts that class on <body>
   only for visitors who are NOT logged in, so the customer panel and the
   admin are not touched. Colour: #036CB6, lighter towards the bottom.
   The 3D pieces are our own SVGs in /public/img/af3d/.
   ===================================================================== */
body.afg{
  --g-brand:#036CB6; --g-brand-2:#2A83C2; --g-light:#3589C5; --g-ink:#0B1F3A; --g-text:#2B3A4F;
  --g-muted:#5B6B82; --g-field:#E8F0FB; --g-soft:#F3F7FC; --g-card:0 18px 40px rgba(6,40,92,.16);
  background:#ffffff !important; color:var(--g-text);
}
body.afg .wrapper, body.afg .wrapper-navbar, body.afg .block-wrapper{ background:transparent !important; }

/* ---------- header: blue, logo centred, menu under it ---------- */
body.afg div.component_navbar,
body.afg .component-navbar__wrapper,
body.afg .component-navbar__navbar-public{ background:var(--g-brand) !important; border:0 !important; box-shadow:none !important; }
body.afg li.component_navbar{ background:transparent !important; }
body.afg .component-navbar__navbar-public .navbar{ background:transparent !important; box-shadow:none !important; }
body.afg .component-navbar__navbar-public .navbar{ padding:18px 0 6px; }
body.afg .af-brand-logo{ background:#fff; border-radius:16px; padding:8px 16px; box-sizing:content-box; box-shadow:0 10px 24px rgba(0,0,0,.18); }
body.afg .navbar-toggler{ border-color:rgba(255,255,255,.6) !important; }
body.afg .navbar-burger-line{ background:#ffffff !important; }
body.afg .afg-nav{
  display:inline-flex !important; align-items:center; gap:8px; color:#ffffff !important;
  font-size:17px !important; font-weight:600 !important; padding:10px 16px !important; border-radius:12px;
  background:transparent !important; text-decoration:none !important;
}
body.afg .afg-nav:hover{ background:rgba(255,255,255,.14) !important; }
body.afg .afg-nav--on{ background:rgba(255,255,255,.22) !important; }
body.afg .afg-nav::before{ display:none; }
body.afg .afg-nav[class*="afg-nav--"]::before{
  display:block; content:""; width:18px; height:18px; flex:0 0 18px; background:#ffffff;
  -webkit-mask:var(--ic) center/contain no-repeat; mask:var(--ic) center/contain no-repeat;
}
body.afg .afg-nav--services{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='4' height='4' rx='1'/%3E%3Crect x='9' y='5' width='12' height='2' rx='1'/%3E%3Crect x='3' y='10' width='4' height='4' rx='1'/%3E%3Crect x='9' y='11' width='12' height='2' rx='1'/%3E%3Crect x='3' y='16' width='4' height='4' rx='1'/%3E%3Crect x='9' y='17' width='12' height='2' rx='1'/%3E%3C/svg%3E"); }
body.afg .afg-nav--faq{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 16h-2v-2h2v2zm1.6-6.9-.9.9c-.6.6-.7 1-.7 2h-2v-.5c0-1 .3-1.7 1-2.4l1.2-1.2c.4-.4.6-.8.6-1.3a1.8 1.8 0 0 0-3.6 0H8a4 4 0 0 1 8 0c0 .9-.4 1.8-1.4 2.5z'/%3E%3C/svg%3E"); }
body.afg .afg-nav--auth{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 17l1.4-1.4-2.6-2.6H20v-2H8.8l2.6-2.6L10 7l-5 5 5 5zM4 3h8v2H4v14h8v2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z' transform='matrix(-1 0 0 1 24 0)'/%3E%3C/svg%3E"); }
body.afg .afg-nav--signup{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M1 20c0-4 4-6 8-6s8 2 8 6v1H1v-1zM19 8h2v3h3v2h-3v3h-2v-3h-3v-2h3z'/%3E%3C/svg%3E"); }
body.afg .afg-nav--terms{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h9l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm8 1.5V8h4.5L14 3.5zM7 12h10v2H7v-2zm0 4h10v2H7v-2z'/%3E%3C/svg%3E"); }
body.afg .afg-nav--api{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.6 16.6 4 12l4.6-4.6L7.2 6 1.2 12l6 6 1.4-1.4zm6.8 0L20 12l-4.6-4.6L16.8 6l6 6-6 6-1.4-1.4zM13.5 4l1.9.6-5 15.4-1.9-.6L13.5 4z'/%3E%3C/svg%3E"); }
body.afg .afg-nav--blog{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='19' r='2.5'/%3E%3Cpath d='M3 10a11 11 0 0 1 11 11h-3a8 8 0 0 0-8-8v-3zm0-6a17 17 0 0 1 17 17h-3A14 14 0 0 0 3 7V4z'/%3E%3C/svg%3E"); }
body.afg .afg-nav--welcome{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.2-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 5.8-8 11-8 11z'/%3E%3C/svg%3E"); }

@media (min-width:992px){
  body.afg .component-navbar__navbar-public .navbar{ flex-direction:column; align-items:center; }
  body.afg .sidebar-block__top-brand{ margin:0 auto 14px; }
  body.afg .af-brand-logo{ height:70px !important; }
  body.afg .component-navbar-collapse{ justify-content:center; }
  body.afg .navbar-nav{ flex-wrap:wrap; justify-content:center; gap:4px; }
}
@media (max-width:991px){
  body.afg .navbar-collapse{ background:#ffffff; border-radius:16px; margin-top:12px; padding:8px; box-shadow:var(--g-card); }
  body.afg .navbar-collapse .afg-nav{ color:var(--g-ink) !important; width:100%; }
  body.afg .navbar-collapse .afg-nav::before{ background:var(--g-brand); }
  body.afg .navbar-collapse .afg-nav--on{ background:#E6F0F8 !important; color:var(--g-brand) !important; }
}

/* ---------- shared ---------- */
body.afg .afg-wrap{ max-width:1180px; margin:0 auto; padding:0 20px; position:relative; }
body.afg .afg-sec{ padding:84px 0; position:relative; }
body.afg .afg-sec--soft{ background:linear-gradient(180deg,#F7FAFE 0%,#EAF1FA 100%); }
body.afg .afg-h2{ font-size:44px; font-weight:800; color:var(--g-ink) !important; text-align:center; margin:0 0 12px; letter-spacing:-.5px; }
body.afg .afg-sub{ font-size:18px; color:var(--g-muted); text-align:center; max-width:720px; margin:0 auto 46px; line-height:1.6; }
body.afg .afg-deco{ position:absolute; pointer-events:none; user-select:none; z-index:0; animation:afgFloat 6s ease-in-out infinite; }
body.afg .afg-deco--slow{ animation-duration:8s; }
@keyframes afgFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }
@media (prefers-reduced-motion:reduce){ body.afg .afg-deco{ animation:none; } }

/* ---------- hero ---------- */
body.afg .afg-hero{
  background:linear-gradient(180deg,var(--g-brand) 0%,var(--g-brand-2) 70%,var(--g-light) 100%);
  color:#fff; text-align:center; padding:56px 0 170px; position:relative; overflow:hidden;
}
body.afg .afg-hero::after{
  content:""; position:absolute; left:-15%; right:-15%; bottom:-1px; height:130px; background:#ffffff;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
}
body.afg .afg-hero h1{ font-size:60px; line-height:1.08; font-weight:800; color:#fff !important; margin:10px auto 16px; max-width:980px; letter-spacing:-1px; position:relative; z-index:1; }
body.afg .afg-hero .afg-lead{ font-size:19px; color:rgba(255,255,255,.9); max-width:760px; margin:0 auto 38px; line-height:1.6; position:relative; z-index:1; }
body.afg .afg-card{
  background:#fff; color:var(--g-text); border-radius:24px; box-shadow:var(--g-card);
  padding:34px 36px; text-align:left; position:relative; z-index:2;
}
body.afg .afg-login{ max-width:1000px; margin:0 auto; }
body.afg .afg-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:18px 22px; }
body.afg .afg-field label{ display:block; font-size:15px; font-weight:700; color:var(--g-muted); margin:0 0 8px; }
body.afg .afg-field input[type=text],
body.afg .afg-field input[type=email],
body.afg .afg-field input[type=password],
body.afg .afg-field input[type=tel]{
  width:100% !important; height:54px !important; border:0 !important; border-radius:12px !important;
  background:var(--g-field) !important; padding:0 18px !important;
  font-size:16.5px !important; color:var(--g-ink) !important; outline:0; box-shadow:none !important;
}
body.afg .afg-field input:focus{ box-shadow:0 0 0 3px rgba(3,108,182,.25) !important; }
body.afg .afg-between{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin:18px 0 22px; flex-wrap:wrap; }
body.afg .afg-check{ display:flex; align-items:center; gap:10px; font-size:16px; color:var(--g-text); cursor:pointer; margin:0; }
body.afg .afg-check input{ width:18px; height:18px; accent-color:var(--g-brand); }
body.afg .afg-link{ color:var(--g-brand) !important; font-weight:600; text-decoration:none !important; }
body.afg .afg-btn{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:56px; border:0; border-radius:14px;
  background:var(--g-brand); color:#fff !important; font-size:18px; font-weight:800; cursor:pointer;
  box-shadow:0 12px 24px rgba(3,108,182,.28); text-decoration:none !important;
}
body.afg .afg-btn:hover{ background:#025A98; }
body.afg .afg-oauth{ margin-top:14px; }
body.afg .afg-oauth a, body.afg .afg-oauth button, body.afg .afg-btn--google{
  display:flex !important; align-items:center; justify-content:center; gap:10px; width:100% !important; height:56px; border:0 !important;
  border-radius:14px !important; background:#5B6B82 !important; color:#fff !important; font-size:18px; font-weight:800; text-decoration:none !important;
}
body.afg .afg-or{ text-align:center; color:var(--g-muted); font-weight:700; margin:12px 0; }
body.afg .afg-foot-line{ text-align:center; margin-top:18px; font-size:16px; color:var(--g-text); }
body.afg .afg-alert{ border-radius:12px; padding:12px 16px; margin:0 0 16px; font-size:15px; font-weight:600; }
body.afg .afg-alert--bad{ background:#FDECEC; color:#9B1C1C; }
body.afg .afg-alert--ok{ background:#E8F7EE; color:#14532D; }

/* ---------- advantages ---------- */
body.afg .afg-adv{ display:grid; grid-template-columns:1fr 1fr; gap:42px 60px; max-width:1000px; margin:0 auto; }
body.afg .afg-adv__it{ display:flex; gap:26px; align-items:flex-start; }
body.afg .afg-ic{
  flex:0 0 104px; width:104px; height:104px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 16px 34px rgba(6,40,92,.14);
}
body.afg .afg-ic img{ width:48px; height:48px; }
body.afg .afg-adv__it h3, body.afg .afg-step h3{ font-size:21px; font-weight:800; color:var(--g-ink); margin:6px 0 10px; }
body.afg .afg-adv__it p, body.afg .afg-step p{ font-size:17px; line-height:1.65; color:var(--g-text); margin:0; }

/* ---------- how it works (timeline) ---------- */
body.afg .afg-steps{ position:relative; max-width:1000px; margin:0 auto; }
body.afg .afg-steps::before{ content:""; position:absolute; left:50%; top:40px; bottom:40px; width:3px; background:var(--g-brand); transform:translateX(-50%); opacity:.85; }
body.afg .afg-step{ display:grid; grid-template-columns:1fr 120px 1fr; align-items:center; gap:30px; margin:0 0 70px; position:relative; }
body.afg .afg-step:last-child{ margin-bottom:0; }
body.afg .afg-num{
  width:104px; height:104px; border-radius:50%; background:var(--g-brand); color:#fff; font-size:40px; font-weight:800;
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 14px #DCEAF6; margin:0 auto; position:relative; z-index:1;
}
body.afg .afg-step__art{ display:flex; justify-content:center; }
body.afg .afg-step__art img{ width:92px; height:92px; }
body.afg .afg-step:nth-child(odd) .afg-step__txt{ order:3; }
body.afg .afg-step:nth-child(odd) .afg-step__art{ order:1; }
body.afg .afg-step:nth-child(even) .afg-step__txt{ order:1; text-align:right; }
body.afg .afg-step:nth-child(even) .afg-step__art{ order:3; }
body.afg .afg-step .afg-num{ order:2; }

/* ---------- reviews ---------- */
body.afg .afg-rev{ display:grid; grid-template-columns:.9fr 1.6fr; gap:48px; align-items:start; }
body.afg .afg-rev__head h2{ font-size:48px; font-weight:800; color:var(--g-ink); line-height:1.1; margin:0 0 18px; }
body.afg .afg-rev__head p{ font-size:18px; color:var(--g-muted); line-height:1.6; }
body.afg .afg-rev__art{ position:relative; height:280px; margin-top:20px; }
body.afg .afg-rev__cards{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
body.afg .afg-rcard{ background:#fff; border-radius:22px; padding:30px; box-shadow:0 14px 34px rgba(6,40,92,.10); }
body.afg .afg-rcard p{ font-size:17px; line-height:1.7; color:var(--g-text); margin:0 0 16px; }
body.afg .afg-rcard b.afg-rname{ font-size:18px; color:var(--g-ink); }
body.afg .afg-stars{ color:#F6B400; font-size:18px; letter-spacing:2px; margin:0 0 10px; }
body.afg .afg-rcard--cta{ text-align:center; grid-column:1 / -1; }
body.afg .afg-rcard--cta img{ width:150px; margin:0 auto 10px; display:block; }

/* ---------- FAQ (home + FAQ page) ---------- */
body.afg .afg-sec--blue{ background:linear-gradient(180deg,var(--g-brand) 0%,var(--g-light) 100%); color:#fff; overflow:hidden; }
body.afg .afg-sec--blue .afg-h2{ color:#fff !important; }
body.afg .afg-sec--blue .afg-sub{ color:rgba(255,255,255,.9); }
body.afg .afg-q{ position:absolute; font-size:120px; font-weight:800; color:rgba(255,255,255,.14); line-height:1; }
body.afg .afg-faq{ display:grid; grid-template-columns:1fr 1fr; gap:26px; max-width:1100px; margin:0 auto; align-items:start; position:relative; z-index:1; }
body.afg .afg-faq details{ background:#fff; color:var(--g-text); border-radius:22px; padding:26px 30px; box-shadow:0 16px 34px rgba(3,40,80,.18); }
body.afg .afg-faq summary{ list-style:none; cursor:pointer; font-size:19px; font-weight:800; color:var(--g-ink); display:flex; justify-content:space-between; gap:16px; }
body.afg .afg-faq summary::-webkit-details-marker{ display:none; }
body.afg .afg-faq summary::after{ content:""; width:12px; height:12px; flex:0 0 12px; margin-top:6px; border-right:3px solid var(--g-ink); border-bottom:3px solid var(--g-ink); transform:rotate(45deg); transition:transform .2s; }
body.afg .afg-faq details[open] summary::after{ transform:rotate(-135deg); margin-top:12px; }
body.afg .afg-faq .afg-a{ padding-top:12px; font-size:17px; line-height:1.7; }
body.afg .afg-faq .afg-a p{ margin:0 0 8px; }

/* ---------- SEO article ---------- */
body.afg .afg-seo{ max-width:920px; margin:0 auto; }
body.afg .afg-seo h2{ font-size:36px; font-weight:800; color:var(--g-ink); margin:0 0 20px; line-height:1.2; }
body.afg .afg-seo h3{ font-size:23px; font-weight:800; color:var(--g-ink); margin:28px 0 10px; }
body.afg .afg-seo p, body.afg .afg-seo li{ font-size:17px; line-height:1.8; color:var(--g-text); }
body.afg .afg-seo ul{ padding-left:22px; margin:0 0 12px; }

/* ---------- auth pages (sign up) and content pages ---------- */
body.afg .afg-auth{ background:linear-gradient(180deg,var(--g-brand) 0%,var(--g-brand-2) 60%,var(--g-light) 100%); padding:40px 0 90px; position:relative; overflow:hidden; }
body.afg .afg-auth h1, body.afg .afg-page h1{ color:#fff !important; text-align:center; font-size:52px; font-weight:800; margin:10px 0 28px; position:relative; z-index:1; }
body.afg .afg-auth .afg-card{ max-width:640px; margin:0 auto; }
body.afg .afg-auth .afg-field{ margin:0 0 18px; }
body.afg .afg-page{ background:linear-gradient(180deg,var(--g-brand) 0%,var(--g-brand-2) 100%); padding:30px 0 120px; position:relative; overflow:hidden; }
body.afg .afg-page__body{ max-width:960px; margin:-90px auto 70px; position:relative; z-index:2; }
body.afg .afg-page__body .afg-card{ padding:40px 44px; }
body.afg .afg-page__body h2{ font-size:32px; font-weight:800; color:var(--g-ink); margin:0 0 16px; }
body.afg .afg-page__body h3{ font-size:21px; font-weight:800; color:var(--g-ink); margin:26px 0 8px; }
body.afg .afg-page__body p, body.afg .afg-page__body li{ font-size:17px; line-height:1.8; color:var(--g-text); }

/* ---------- footer ---------- */
body.afg .afg-footer{ background:var(--g-light); color:#fff; text-align:center; padding:26px 16px; font-size:17px; font-weight:600; }

/* phones only: the 3D pieces as a small row above the heading (the big floating
   ones are hidden there so they never cover text) */
body.afg .afg-mdeco{ display:none; }
/* ---------- phones ---------- */
@media (max-width:991px){
  body.afg .afg-hero h1{ font-size:40px; }
  body.afg .afg-grid2, body.afg .afg-adv, body.afg .afg-faq, body.afg .afg-rev, body.afg .afg-rev__cards{ grid-template-columns:1fr; }
  body.afg .afg-rev__art{ display:none; }
  body.afg .afg-h2, body.afg .afg-rev__head h2{ font-size:34px; }
}
@media (max-width:767px){
  body.afg .afg-hero{ padding:30px 0 120px; }
  body.afg .afg-hero h1{ font-size:34px; }
  body.afg .afg-hero .afg-lead{ font-size:17px; }
  body.afg .afg-card{ padding:24px 20px; border-radius:20px; }
  body.afg .afg-sec{ padding:60px 0; }
  body.afg .afg-deco--hide-sm{ display:none; }
  body.afg .afg-mdeco{ display:flex; justify-content:center; align-items:center; gap:14px; margin:4px 0 6px; position:relative; z-index:1; }
  body.afg .afg-mdeco img{ height:auto; filter:drop-shadow(0 6px 10px rgba(0,0,0,.18)); }
  body.afg .afg-steps::before{ left:52px; }
  body.afg .afg-step{ grid-template-columns:104px 1fr; gap:18px; margin-bottom:44px; }
  body.afg .afg-step .afg-num{ order:1 !important; width:84px; height:84px; font-size:32px; }
  body.afg .afg-step .afg-step__txt{ order:2 !important; text-align:left !important; }
  body.afg .afg-step .afg-step__art{ display:none; }
  body.afg .afg-adv__it{ gap:18px; }
  body.afg .afg-ic{ flex-basis:80px; width:80px; height:80px; }
  body.afg .afg-ic img{ width:38px; height:38px; }
  body.afg .afg-auth h1, body.afg .afg-page h1{ font-size:36px; }
  body.afg .afg-page__body .afg-card{ padding:26px 22px; }
  body.afg .afg-q{ font-size:80px; }
}

/* the theme keeps the header inside a fixed-width box whose inner wrapper
   clips (overflow:hidden), so a pseudo-element band gets cut. Paint the
   full width on .wrapper-navbar instead: a spread shadow, clipped to the
   header's own height. */
body.afg{ overflow-x:hidden; }
body.afg .wrapper.wrapper-navbar{
  background:var(--g-brand) !important;
  box-shadow:0 0 0 100vmax var(--g-brand); clip-path:inset(0 -100vmax);
}