/* ============================================================
   ClickSambo — Custom Solutions page (/custom-solutions, /tr/ozel-cozumler, /pt-br/solucoes-personalizadas)
   Scoped to <main class="csolPage">: header, footer and other pages are untouched.
   Every rule is prefixed with .csolPage and every class carries the csol prefix, so the
   site-wide classes in layout.css (.btn, .hero, section .inner, ...) cannot collide and the
   relative specificity of element vs. class rules matches the approved design.
   The three language designs share the same markup and styles.
   ============================================================ */
.csolPage{--font-brand:"Nunito",-apple-system,"Segoe UI",Roboto,sans-serif; --navy:#1C2841;--ink:#0F1420;--orange:#F94C10;--orange-d:#D93D08;--orange-soft:rgba(249,76,16,.1); --green:#22B573;--green-d:#17835A;--green-soft:#E9F7F0; --cream:#FFF1E9;--cream-2:#FDF6F1;--cream-d:#EFDCD1;--white:#fff;--line:#ECECF3;--line-2:#F0E2D8; --muted:#51607A;--muted-2:#7C8AA3;--wrap:1120px;--r:20px;--r-sm:12px; --shadow:0 12px 40px rgba(28,40,65,.06);--shadow-lg:0 18px 50px rgba(28,40,65,.09);}
.csolPage *{box-sizing:border-box}
.csolPage{margin:0;background:var(--cream);color:var(--navy);font-family:var(--font-brand);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
/* layout.css sets `*{font-family:Mulish}` and `b,strong{font-weight:700}`;
   restore the browser defaults the design relies on. */
.csolPage *{font-family:inherit}
.csolPage b,.csolPage strong{font-weight:bolder}
.csolPage .csolWrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.csolPage h1,.csolPage h2,.csolPage h3{margin:0;font-weight:800;letter-spacing:-.015em;color:var(--navy)}
.csolPage h1{font-size:clamp(32px,4.4vw,48px);line-height:1.12}
.csolPage h2{font-size:clamp(25px,3vw,34px);line-height:1.2}
.csolPage h3{font-size:clamp(18px,1.6vw,20px);line-height:1.3}
.csolPage p{margin:0 0 1rem}
.csolPage a{color:inherit}
.csolPage .csolCrumbs{background:var(--cream);border-top:1px solid var(--line-2)}
.csolPage .csolCrumbs .csolWrap{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 24px;flex-wrap:wrap}
.csolPage .csolCrumbs ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;font-size:.84rem;font-weight:700;color:var(--muted-2)}
.csolPage .csolCrumbs li+li::before{content:"/";margin-right:8px;color:var(--muted-2);font-weight:600}
.csolPage .csolCrumbs a{text-decoration:none}
.csolPage .csolCrumbs a:hover{color:var(--orange)}
.csolPage .csolCrumbs [aria-current]{color:var(--navy)}
.csolPage .csolCrumbs .csolUpdated{margin:0;font-size:.82rem;color:var(--muted-2);font-weight:600}
.csolPage .csolCrumbs .csolUpdated time{color:var(--navy)}
.csolPage .csolBtn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--orange);color:#fff;text-decoration:none;font-weight:700;padding:14px 26px;border-radius:10px;font-size:1rem;border:0;cursor:pointer;font-family:inherit;transition:background .15s ease,transform .15s ease}
.csolPage .csolBtn:hover{background:var(--orange-d);transform:translateY(-1px)}
.csolPage .csolBtn.csolGhost{background:transparent;border:1.6px solid var(--navy);color:var(--navy)}
.csolPage .csolBtn.csolGhost:hover{background:var(--navy);color:#fff}
.csolPage .csolHero{position:relative;overflow:hidden;padding:74px 0 78px;background:radial-gradient(760px 420px at 88% 0%,rgba(249,76,16,.10),transparent 62%),radial-gradient(620px 380px at 0% 100%,rgba(34,181,115,.08),transparent 60%),var(--cream)}
.csolPage .csolHeroGrid{display:grid;grid-template-columns:1.04fr .96fr;gap:52px;align-items:center}
@media(max-width:940px){
  .csolPage .csolHeroGrid{grid-template-columns:1fr;gap:44px}
}
.csolPage .csolLede{color:var(--muted);font-size:16px;line-height:1.7;margin-top:20px;max-width:54ch}
.csolPage .csolHeroCta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.csolPage .csolTrustline{display:flex;gap:20px;margin-top:26px;flex-wrap:wrap;color:var(--muted);font-size:.9rem;font-weight:700}
.csolPage .csolTrustline span{display:inline-flex;align-items:center;gap:8px}
.csolPage .csolTrustline svg{width:17px;height:17px;color:var(--green)}
.csolPage .csolPanel{background:#0E1626;border:10px solid #05090f;border-radius:24px;box-shadow:0 30px 64px rgba(28,40,65,.24);overflow:hidden;color:#E7ECF5}
.csolPage .csolPanel .csolPhd{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.07);background:#0B1220}
.csolPage .csolPanel .csolPhd .csolDots{display:flex;gap:6px}
.csolPage .csolPanel .csolPhd .csolDots i{width:10px;height:10px;border-radius:50%;background:#2a3757;display:block}
.csolPage .csolPanel .csolPhd .csolTtl{margin-left:6px;font-weight:800;font-size:12.5px;color:#c8d3e6}
.csolPage .csolPanel .csolPhd .csolTtl em{color:var(--orange);font-style:normal}
.csolPage .csolPanel .csolPbd{padding:16px 16px 18px}
.csolPage .csolPanel .csolProw{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;background:#141f37;border:1px solid rgba(255,255,255,.06);margin-bottom:9px}
.csolPage .csolPanel .csolProw:last-child{margin-bottom:0}
.csolPage .csolPanel .csolProw .csolPi{flex:none;width:32px;height:32px;border-radius:9px;background:rgba(249,76,16,.14);color:#ff7a45;display:grid;place-items:center}
.csolPage .csolPanel .csolProw .csolPi svg{width:16px;height:16px}
.csolPage .csolPanel .csolProw .csolPc{flex:1;min-width:0}
.csolPage .csolPanel .csolProw .csolPn{display:block;font-weight:800;color:#fff;font-size:12.5px;line-height:1.25}
.csolPage .csolPanel .csolProw .csolPd{display:block;color:#93a1ba;font-size:10.5px;margin-top:2px;line-height:1.2}
.csolPage .csolPanel .csolProw .csolPt{flex:none;font-size:9px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:3px 8px;border-radius:999px}
.csolPage .csolPanel .csolProw .csolPt.csolLive{background:rgba(34,181,115,.16);color:#4fd39a}
.csolPage .csolPanel .csolProw .csolPt.csolDone{background:rgba(255,255,255,.08);color:#9fb0c9}
@media (prefers-reduced-motion:no-preference){
  .csolPage .csolHero .csolPanel{animation:csolFloatin .7s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes csolFloatin{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.csolPage .csolFeatures{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.csolPage .csolFeatures .csolWrap{padding:34px 24px}
.csolPage .csolFeatGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
@media(max-width:900px){
  .csolPage .csolFeatGrid{grid-template-columns:repeat(2,1fr);gap:24px}
}
@media(max-width:520px){
  .csolPage .csolFeatGrid{grid-template-columns:1fr}
}
.csolPage .csolFeat{display:flex;gap:12px;align-items:flex-start}
.csolPage .csolFeat .csolFi{flex:none;width:38px;height:38px;border-radius:11px;background:var(--orange-soft);color:var(--orange);display:grid;place-items:center}
.csolPage .csolFeat .csolFi svg{width:19px;height:19px}
.csolPage .csolFeat p{margin:0;font-weight:700;font-size:.93rem;color:var(--navy);line-height:1.4}
.csolPage section{padding:82px 0}
.csolPage section[id]{scroll-margin-top:86px}
.csolPage section.csolAlt{background:var(--white)}
.csolPage .csolSechead{max-width:62ch;margin:0 auto 46px;text-align:center}
.csolPage .csolSechead p{color:var(--muted);margin-top:12px}
.csolPage .csolSolGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:940px){
  .csolPage .csolSolGrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .csolPage .csolSolGrid{grid-template-columns:1fr}
}
.csolPage .csolSol{background:var(--cream-2);border:1px solid var(--line-2);border-radius:var(--r);padding:24px 22px;position:relative}
.csolPage .csolSol .csolSi{width:42px;height:42px;border-radius:12px;background:var(--orange-soft);color:var(--orange);display:grid;place-items:center;margin-bottom:15px}
.csolPage .csolSol .csolSi svg{width:21px;height:21px}
.csolPage .csolSol h3{font-size:1.02rem;margin-bottom:7px}
.csolPage .csolSol p{margin:0;color:var(--muted);font-size:16px;line-height:1.7}
.csolPage .csolSteps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s}
@media(max-width:820px){
  .csolPage .csolSteps{grid-template-columns:1fr 1fr;gap:26px}
}
@media(max-width:480px){
  .csolPage .csolSteps{grid-template-columns:1fr}
}
.csolPage .csolStep{counter-increment:s}
.csolPage .csolStep .csolN{width:38px;height:38px;border-radius:11px;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800;margin-bottom:14px}
.csolPage .csolStep .csolN::before{content:"0" counter(s)}
.csolPage .csolStep h3{font-size:1.02rem;margin-bottom:6px}
.csolPage .csolStep p{margin:0;color:var(--muted);font-size:16px;line-height:1.7}
.csolPage .csolWhyGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:820px){
  .csolPage .csolWhyGrid{grid-template-columns:1fr}
}
.csolPage .csolCard{background:var(--cream-2);border:1px solid var(--line-2);border-radius:var(--r);padding:28px 26px}
.csolPage .csolCard .csolCi{width:44px;height:44px;border-radius:13px;background:var(--orange-soft);color:var(--orange);display:grid;place-items:center;margin-bottom:16px}
.csolPage .csolCard .csolCi svg{width:22px;height:22px}
.csolPage .csolCard h3{margin-bottom:8px}
.csolPage .csolCard p{margin:0;color:var(--muted)}
.csolPage .csolStats{background:var(--navy)}
.csolPage .csolStats .csolWrap{padding:52px 24px}
.csolPage .csolStatGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;text-align:center}
@media(max-width:640px){
  .csolPage .csolStatGrid{grid-template-columns:1fr;gap:22px}
}
.csolPage .csolStat b{display:block;font-size:clamp(34px,5vw,48px);font-weight:800;color:var(--orange);letter-spacing:-.02em;line-height:1}
.csolPage .csolStat span{display:block;color:#B9C2D2;font-weight:700;margin-top:8px;font-size:.98rem}
.csolPage .csolStats .csolSectors{text-align:center;color:#8896b0;margin-top:36px;font-size:.9rem;font-weight:600}
.csolPage .csolFaqGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px 40px;max-width:960px;margin:0 auto}
@media(max-width:760px){
  .csolPage .csolFaqGrid{grid-template-columns:1fr;gap:6px}
}
.csolPage .csolFaqItem{border-bottom:1px solid var(--line-2);padding:18px 0}
.csolPage .csolFaqItem h3{font-size:1.02rem;margin-bottom:8px;color:var(--navy)}
.csolPage .csolFaqItem p{margin:0;color:var(--muted);font-size:16px;line-height:1.7}
/* Same 4/3/2 columns and 14px gap as the design's grid; a flex row so an incomplete last row
   is centred instead of leaving empty cells. */
.csolPage .csolRefGrid{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.csolPage .csolRefGrid>.csolRef{flex:0 0 calc((100% - 3 * 14px) / 4)}
@media(max-width:820px){
  .csolPage .csolRefGrid>.csolRef{flex-basis:calc((100% - 2 * 14px) / 3)}
}
@media(max-width:520px){
  .csolPage .csolRefGrid>.csolRef{flex-basis:calc((100% - 14px) / 2)}
}
.csolPage .csolRef{display:flex;align-items:center;justify-content:center;text-align:center;background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:20px 14px;font-weight:800;color:var(--navy);font-size:.98rem;letter-spacing:-.01em;min-height:74px}
/* Reference cards show real brand logos (the design shows the names as text): the logo keeps
   its aspect ratio inside the 74px card of the design (2 x 20px padding + 2 x 1px border + 32px). */
.csolPage .csolRef img{display:block; width:auto; height:auto; max-width:100%; max-height:32px}
.csolPage .csolCtaBand{background:var(--navy)}
.csolPage .csolCtaBand .csolWrap{padding:64px 24px}
.csolPage .csolCtaBand .csolInner{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.csolPage .csolCtaBand .csolCtext{max-width:56ch}
.csolPage .csolCtaBand h2{color:#fff}
.csolPage .csolCtaBand p{color:#B9C2D2;margin-top:12px;margin-bottom:0}
.csolPage .csolCtaBand .csolBtn{flex:none}
.csolPage :focus-visible{outline:2px solid var(--orange);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .csolPage *{transition:none !important;animation:none !important}
}