@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700;800;900&family=Golos+Text:wght@400;500;600;700;800&display=swap');

:root{
  --bg:        oklch(0.975 0.012 95);
  --bg-soft:   oklch(0.950 0.014 95);
  --surface:   oklch(0.995 0.006 95);
  --ink:       oklch(0.205 0.020 260);
  --ink-soft:  oklch(0.205 0.020 260 / 72%);
  --muted:     oklch(0.460 0.020 260);
  --muted-2:   oklch(0.590 0.018 260);
  --line:      oklch(0.205 0.020 260 / 10%);
  --line-2:    oklch(0.205 0.020 260 / 17%);
  --lime:      oklch(0.760 0.190 140);
  --lime-deep: oklch(0.520 0.150 142);
  --teal:      oklch(0.720 0.130 195);
  --violet:    oklch(0.620 0.170 300);
  --dark:      oklch(0.165 0.020 145);
  --dark-2:    oklch(0.220 0.022 145);
  --dark-line: oklch(1 0 0 / 12%);
  --on-dark:   oklch(0.965 0.010 95);
  --on-dark-dim: oklch(0.965 0.010 95 / 68%);
}

*{box-sizing:border-box;}
html{background:var(--bg);}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Golos Text', 'Segoe UI', sans-serif;
  -webkit-font-smoothing:antialiased;
  padding:0 24px;
  overflow-x:hidden;
}
h1,h2,h3{font-family:'Unbounded','Golos Text',sans-serif; margin:0; text-wrap:balance;}
p{text-wrap:pretty;}
a:not(.btn){color:inherit;}
img{max-width:100%;}
::selection{background:var(--lime); color:var(--dark);}
:focus-visible{outline:2px solid var(--lime-deep); outline-offset:3px;}

.wrap{max-width:1220px; margin:0 auto;}
.wrap-narrow{max-width:820px; margin:0 auto;}
.eyebrow{
  font-family:'Golos Text',sans-serif; font-weight:800; font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--lime-deep); display:flex; align-items:center; gap:10px; margin-bottom:20px;
}
.eyebrow::before{content:''; width:18px; height:2px; background:var(--lime-deep); display:block;}
.on-dark .eyebrow, .on-dark .eyebrow::before{color:var(--lime);}

.btn{
  display:inline-flex; align-items:center; gap:9px; font-family:'Golos Text',sans-serif; font-weight:800;
  font-size:14.5px; padding:16px 28px; border-radius:100px; border:1.5px solid transparent; cursor:pointer;
  text-decoration:none; transition:transform .2s cubic-bezier(.2,.8,.2,1), filter .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn:hover{transform:translateY(-3px) scale(1.02);}
.btn-primary{background:#387954; color:rgba(255, 255, 255, 1)!important;}
.btn-primary:hover{box-shadow:0 16px 34px -10px oklch(0.760 0.190 140 / 55%);}
.btn-ghost{border-color:var(--line-2); color:var(--ink);}
.btn-ghost:hover{background:oklch(0.205 0.020 260 / 5%); border-color:var(--ink);}
.btn-surface{background:var(--surface); color:var(--dark);}
.btn-surface:hover{background:var(--on-dark);}

/* Header contact button: number always visible + a toggle that reveals WhatsApp,
   so nobody has to click through a menu just to see the phone number. */
.hybrid-cta{position:relative; display:inline-flex; align-items:stretch;}
.hybrid-call{display:inline-flex; align-items:center; gap:9px; font-family:'Golos Text',sans-serif; font-weight:800; font-size:14px; color:var(--ink); background:transparent; border:1.5px solid var(--line-2); border-right:none; border-radius:100px 0 0 100px; padding:14px 16px 14px 20px; text-decoration:none; transition:background .25s ease, color .25s ease, border-color .25s ease;}
.hybrid-call svg{color:var(--lime-deep); flex-shrink:0; transition:color .25s ease;}
.hybrid-call:hover{background:var(--dark); color:var(--on-dark); border-color:var(--dark);}
.hybrid-call:hover svg{color:var(--lime);}
.hybrid-toggle{display:inline-flex; align-items:center; justify-content:center; width:46px; border:1.5px solid var(--line-2); border-radius:0 100px 100px 0; background:transparent; color:var(--muted-2); cursor:pointer; padding:0; transition:background .2s ease, color .2s ease, border-color .2s ease;}
.hybrid-toggle:hover, .hybrid-cta.open .hybrid-toggle{background:var(--dark); color:var(--lime); border-color:var(--dark);}
.hybrid-toggle svg{transition:transform .2s ease;}
.hybrid-cta.open .hybrid-toggle svg{transform:rotate(180deg);}
.hybrid-menu{position:absolute; top:calc(100% + 8px); right:0; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:0 20px 40px -12px oklch(0.205 0.02 260 / 20%); padding:6px; min-width:210px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .2s ease, transform .2s ease, visibility .2s; z-index:50;}
.hybrid-cta.open .hybrid-menu{opacity:1; visibility:visible; transform:translateY(0);}
.hybrid-menu a{display:flex; align-items:center; gap:10px; padding:10px 11px; border-radius:9px; text-decoration:none; color:var(--ink); font-size:13.5px; font-weight:700;}
.hybrid-menu a:hover{background:var(--bg-soft);}
.hybrid-menu .ic{width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:oklch(0.62 0.14 155 / 15%); color:oklch(0.5 0.13 155);}

/* Mobile floating contact button (replaces the old full-width fixed bar) */
.mobile-fab{display:none;}
.mobile-fab-menu{display:flex; flex-direction:column; gap:9px; align-items:flex-end; margin-bottom:10px; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .22s cubic-bezier(.2,.8,.2,1), transform .22s cubic-bezier(.2,.8,.2,1), visibility .22s;}
.mobile-fab.open .mobile-fab-menu{opacity:1; visibility:visible; transform:translateY(0);}
.mobile-fab-item{display:flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--line); border-radius:100px; padding:9px 18px 9px 9px; box-shadow:0 10px 24px -8px oklch(0.205 0.02 260 / 24%); text-decoration:none; color:var(--ink); font-size:13px; font-weight:800; font-family:'Golos Text',sans-serif;}
.mobile-fab-item .ic{width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff;}
.mobile-fab-item.call .ic{background:var(--lime-deep);}
.mobile-fab-item.wa .ic{background:oklch(0.62 0.14 155);}
.mobile-fab-btn{width:58px; height:58px; border-radius:50%; background:var(--lime); color:var(--dark); border:none; box-shadow:0 14px 30px -8px oklch(0.760 0.190 140 / 50%); display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative;}
.mobile-fab-btn::after{content:''; position:absolute; inset:0; border-radius:50%; background:var(--lime); opacity:.5; animation:fab-pulse 2.4s ease-out infinite;}
.mobile-fab-btn svg{position:relative; z-index:1; transition:transform .25s ease;}
.mobile-fab.open .mobile-fab-btn{background:var(--dark); color:var(--lime);}
.mobile-fab.open .mobile-fab-btn svg{transform:rotate(135deg);}
.mobile-fab.open .mobile-fab-btn::after{display:none;}
@keyframes fab-pulse{0%{transform:scale(1); opacity:.5;}100%{transform:scale(1.5); opacity:0;}}

.marquee-bar{position:sticky; top:0; z-index:41; background:var(--dark); overflow:hidden; height:34px; display:flex; align-items:center;}
.marquee-track{display:flex; white-space:nowrap; animation:scrollX 26s linear infinite;}
.marquee-track span{font-family:'Unbounded',sans-serif; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--lime); padding:0 22px; display:inline-flex; align-items:center; gap:22px;}
.marquee-track span::after{content:'\2726'; color:var(--on-dark-dim); font-size:9px;}
@keyframes scrollX{from{transform:translateX(0);}to{transform:translateX(-50%);}}

header{
  position:sticky; top:34px; z-index:40; display:flex; align-items:center; justify-content:space-between;
  padding:18px 0; background:oklch(0.975 0.012 95 / 86%); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.logo{display:flex; align-items:center; gap:11px; text-decoration:none;}
.logo-mark{width:36px; height:36px; background:var(--dark); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.logo-word{font-family:'Unbounded',sans-serif; font-weight:800; font-size:18px; letter-spacing:.01em; color:var(--ink);}
.logo-sub{font-size:9px; letter-spacing:.2em; color:var(--muted-2); text-transform:uppercase; margin-top:1px;}
nav.links{display:flex; gap:26px; list-style:none; margin:0; padding:0; position:relative;}
nav.links a{font-size:13.5px; font-weight:700; color:var(--ink-soft); text-decoration:none; transition:color .2s ease;}
nav.links a:hover{color:var(--lime-deep);}
nav.links a.active{color:var(--ink);}
.nav-drop{position:relative;}
.nav-drop-panel{position:absolute; top:100%; left:-16px; margin-top:14px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:10px; min-width:240px; box-shadow:0 26px 50px -20px oklch(0.205 0.02 260/28%); opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .2s ease, transform .2s ease, visibility .2s;}
.nav-drop:hover .nav-drop-panel, .nav-drop:focus-within .nav-drop-panel{opacity:1; visibility:visible; transform:translateY(0);}
.nav-drop-panel a{display:block; padding:10px 12px; border-radius:8px; font-size:13px; font-weight:600; color:var(--ink-soft);}
.nav-drop-panel a:hover{background:var(--bg-soft); color:var(--lime-deep);}
.nav-drop-panel a.active{color:var(--lime-deep);}

/* Mobile hamburger + slide-down menu panel (Joomla template only) */
.mobile-menu-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; border:none; background:none; cursor:pointer;
  position:fixed; top:50px; right:22px; z-index:70; padding:0;
}
.mobile-menu-toggle span{display:block; width:100%; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .25s ease;}
.mobile-menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.mobile-menu-toggle.open span:nth-child(2){opacity:0;}
.mobile-menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:980px){
  .mobile-menu-toggle{display:flex;}
  nav.links{
    display:none; position:fixed; top:86px; left:16px; right:16px; z-index:65;
    background:var(--surface); border:1px solid var(--line); border-radius:16px;
    padding:14px; flex-direction:column; gap:2px;
    box-shadow:0 30px 60px -20px oklch(0.205 0.02 260 / 30%);
    max-height:calc(100vh - 120px); overflow-y:auto;
  }
  nav.links.open{display:flex;}
  nav.links a{padding:12px 10px; border-radius:10px;}
  nav.links a:hover, nav.links a.active{background:var(--bg-soft);}
  .nav-drop-panel{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; margin:0 0 0 14px; padding:0; min-width:0; display:none;}
  .nav-drop.open .nav-drop-panel{display:block;}
}

section{padding:130px 0;}
section.tight{padding:70px 0;}

/* Page hero (inner pages) */
.page-hero{position:relative; padding-top:84px; padding-bottom:70px; overflow:hidden;}
.page-hero .aurora{position:absolute; top:0; right:0; width:1100px; height:900px; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle 320px at 26% 30%, oklch(0.760 0.190 140 / 42%), transparent 100%),
    radial-gradient(circle 360px at 60% 42%, oklch(0.720 0.130 195 / 32%), transparent 100%),
    radial-gradient(circle 320px at 40% 68%, oklch(0.620 0.170 300 / 24%), transparent 100%);}
.page-hero-inner{position:relative; z-index:1; max-width:760px;}
.page-hero h1{font-size:clamp(32px,4.6vw,58px); line-height:1.05; font-weight:800; letter-spacing:-.02em; margin-bottom:22px; text-transform:uppercase; color:var(--ink);}
.page-hero p.lede{font-size:17px; line-height:1.65; color:var(--ink-soft); max-width:560px; margin:0 0 30px;}
.breadcrumb{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted-2); margin-bottom:22px; position:relative; z-index:1;}
.breadcrumb a{color:var(--muted-2); text-decoration:none;}
.breadcrumb a:hover{color:var(--lime-deep);}

/* Home hero */
.hero{position:relative; padding-top:84px; padding-bottom:44px;}
.hero-bg-clip{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;}
.hero-spotlight{position:absolute; inset:-10% -10%; background:radial-gradient(460px circle at var(--mx,50%) var(--my,20%), oklch(0.760 0.190 140 / 10%), transparent 60%); pointer-events:none; transition:background .1s ease;}
.aurora{position:absolute; top:0; right:0; width:1100px; height:900px; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle 320px at 26% 30%, oklch(0.760 0.190 140 / 46%), transparent 100%),
    radial-gradient(circle 360px at 60% 42%, oklch(0.720 0.130 195 / 36%), transparent 100%),
    radial-gradient(circle 320px at 40% 68%, oklch(0.620 0.170 300 / 28%), transparent 100%);}
@keyframes hero-rise-in{from{opacity:0; transform:translateY(20px);}to{opacity:1; transform:translateY(0);}}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:center; animation:hero-rise-in .75s cubic-bezier(.2,.8,.2,1) both;}
.hero h1{font-size:clamp(32px,4.4vw,62px); line-height:1.05; font-weight:800; letter-spacing:-.02em; margin-bottom:26px; text-transform:uppercase; color:var(--ink); overflow-wrap:break-word; word-break:break-word;}
.hero h1 span{display:block;}
.hero h1 .fill-lime{color:#387954}
.hero p.lede{font-size:17px; line-height:1.65; color:var(--ink-soft); max-width:480px; margin:0 0 32px;}
.cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:24px; align-items:center;}
.trust{font-size:12.5px; color:var(--muted-2);}

.hero-visual{position:relative; height:520px; display:flex; align-items:center; justify-content:center; transform-style:preserve-3d; transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.orb{position:absolute; width:390px; height:390px; border-radius:50%; z-index:0;
  background:radial-gradient(circle at 32% 28%, oklch(0.760 0.190 140 / 75%), oklch(0.720 0.130 195 / 45%) 46%, transparent 72%);
  filter:blur(6px); animation:orb-float 7s ease-in-out infinite;}
@keyframes orb-float{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-16px) scale(1.035);}}
.hero-photo{position:relative; width:360px; z-index:2; animation:orb-float 8s ease-in-out infinite; animation-delay:-2.4s; filter:drop-shadow(0 30px 50px oklch(0.205 0.02 260 / 22%));}
.hero-photo img{width:100%; display:block;}

.float-card{position:absolute; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:16px; padding:16px 18px; box-shadow:0 26px 50px -20px oklch(0.205 0.02 260 / 28%); z-index:3; animation:card-float 6s ease-in-out infinite;}
@keyframes card-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-11px);}}
.float-list{top:2%; left:-8%; width:186px; animation-delay:-1s;}
.float-list-item{display:flex; gap:10px; align-items:baseline; font-size:12.5px; font-weight:700; padding:6px 0;}
.float-list-item b{font-family:'Unbounded',sans-serif; color:var(--lime-deep); font-size:10.5px; flex-shrink:0;}
.float-stat{top:6%; right:-10%; width:164px; animation-delay:-3.2s;}
.float-stat.accent{background:#387954; border-color:transparent; top:auto; bottom:0%; left:-12%; right:auto; animation-delay:-4.6s;color: #fff;}
.float-stat .num{font-family:'Unbounded',sans-serif; font-weight:800; font-size:25px; line-height:1;}
.float-stat .lbl{font-size:11.5px; font-weight:700; margin-top:6px;}
.float-stat .desc{font-size:11px; opacity:.62; margin-top:6px; line-height:1.4; font-weight:500;}

.scroll-cue{display:flex; align-items:center; justify-content:center; gap:9px; margin-top:8px; font-size:12.5px; color:var(--muted-2); font-weight:700; letter-spacing:.02em;}
.scroll-cue svg{animation:bounce 1.8s ease-in-out infinite;}
@keyframes bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}}

h2.section-title{font-family:'Unbounded',sans-serif; font-size:clamp(30px,4vw,52px); font-weight:700; line-height:1.05; max-width:680px; text-transform:uppercase; letter-spacing:-.01em; color:var(--ink);}
.on-dark h2.section-title{color:var(--on-dark);}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:60px;}
.section-note{font-size:14.5px; color:var(--muted); max-width:300px; margin:0;}

.svc-list{position:relative; padding-left:56px; display:block; text-decoration:none; color:inherit;}
.svc-list::before{content:''; position:absolute; left:19px; top:8px; bottom:8px; width:1px; background:var(--line-2);}
.svc-item{position:relative; padding:28px 0; display:block; text-decoration:none; color:inherit;}
.svc-num{position:absolute; left:-56px; top:28px; width:38px; height:38px; border-radius:50%; background:var(--surface); border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; font-family:'Unbounded',sans-serif; font-weight:700; font-size:13px; color:var(--lime-deep);}
.svc-title{font-size:20px; font-weight:700; font-family:'Unbounded',sans-serif; text-transform:uppercase; margin-bottom:8px; color:var(--ink);}
.svc-desc{font-size:14.5px; line-height:1.6; color:var(--ink-soft); max-width:520px; margin-bottom:10px;}
.svc-tags{display:flex; flex-wrap:wrap; gap:8px;}
.svc-tag{font-size:11.5px; font-weight:700; color:var(--lime-deep); border:1px solid var(--line-2); border-radius:100px; padding:4px 12px;}

.portfolio-nav{display:flex; gap:10px; flex-shrink:0; align-items:center;}
.portfolio-nav-btn{width:46px; height:46px; border-radius:50%; border:1.5px solid var(--line-2); background:var(--surface); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;}
.portfolio-nav-btn:hover{background:var(--dark); border-color:var(--dark); color:var(--on-dark); transform:translateY(-2px);}
.portfolio-nav-btn:active{transform:translateY(0);}
.portfolio-track{display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -ms-overflow-style:none; scrollbar-width:none; padding-bottom:2px;}
.portfolio-track::-webkit-scrollbar{display:none;}
.portfolio-track.portfolio-grid{display:grid; grid-template-rows:repeat(2,1fr); grid-auto-flow:column; grid-auto-columns:calc(50% - 11px);}
.portfolio-card{flex:0 0 calc(50% - 11px); scroll-snap-align:start; position:relative; display:flex; flex-direction:column; overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:0 1px 2px oklch(0.205 0.02 260 / 6%); transition:box-shadow .35s ease;}
.portfolio-card:hover{box-shadow:0 30px 55px -22px oklch(0.205 0.02 260 / 26%);}
.portfolio-img{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--bg-soft);}
.portfolio-img img{width:100%; height:100%; object-fit:cover; object-position:top; display:block; transition:transform .6s cubic-bezier(.2,.8,.2,1); filter:saturate(.95);}
.portfolio-card:hover .portfolio-img img{transform:scale(1.06);}
.portfolio-caption{flex-shrink:0; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 18px; background:var(--surface); border-top:1px solid var(--line);}
.portfolio-name{font-family:'Unbounded',sans-serif; font-size:12.5px; font-weight:700; color:var(--ink); text-transform:uppercase; letter-spacing:.01em;}
.portfolio-arrow{color:var(--muted-2); transition:transform .3s ease, color .3s ease; flex-shrink:0;}
.portfolio-card:hover .portfolio-arrow{transform:translate(3px,-3px); color:var(--lime-deep);}

/* Channel / benefit cards (3-col) */
.channel-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.channel-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:30px 26px; box-shadow:0 1px 2px oklch(0.205 0.02 260 / 6%); transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;}
.channel-card:hover{transform:translateY(-5px); box-shadow:0 24px 44px -20px oklch(0.205 0.02 260 / 20%);}
.channel-card h3{font-size:17px; font-weight:700; font-family:'Unbounded',sans-serif; text-transform:uppercase; margin-bottom:16px;}
.channel-card ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.channel-card li{font-size:13.5px; line-height:1.5; color:var(--ink-soft); display:flex; gap:9px;}
.channel-card li::before{content:'\2014'; color:var(--lime-deep); flex-shrink:0;}

.process-track{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:12px;}
.process-track.cols-4{grid-template-columns:repeat(4,1fr);}
.process-step{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:36px 30px; position:relative; overflow:hidden; box-shadow:0 1px 2px oklch(0.205 0.02 260 / 6%); transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;}
.process-step:hover{transform:translateY(-6px); box-shadow:0 26px 48px -20px oklch(0.205 0.02 260 / 22%);}
.process-num{font-family:'Unbounded',sans-serif; font-weight:900; font-size:52px; color:var(--line-2); line-height:1; position:absolute; top:18px; right:22px;}
.process-title{font-size:18px; font-weight:700; font-family:'Unbounded',sans-serif; margin:44px 0 10px; position:relative; text-transform:uppercase; color:var(--ink);}
.process-desc{font-size:13px; line-height:1.55; color:var(--muted); position:relative;}

.checklist{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:24px;}
.check-item{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:0 1px 2px oklch(0.205 0.02 260 / 6%); display:flex; gap:12px; align-items:flex-start; font-size:13.5px; line-height:1.55; color:var(--ink-soft); padding:22px; transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;}
.check-item:hover{transform:translateY(-4px); box-shadow:0 20px 38px -18px oklch(0.205 0.02 260 / 20%);}
.check-item svg{flex-shrink:0; margin-top:3px; color:var(--lime-deep);}

.pricing-band{background:var(--dark); color:var(--on-dark); clip-path:polygon(0 3.5%, 100% 0, 100% 96.5%, 0 100%); width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:0 24px; position:relative; overflow:hidden;}
.pricing-band::before{content:''; position:absolute; top:-160px; left:50%; transform:translateX(-50%); width:1000px; height:640px; pointer-events:none;
  background:
    radial-gradient(circle 300px at 35% 35%, oklch(0.760 0.190 140 / 26%), transparent 100%),
    radial-gradient(circle 300px at 65% 55%, oklch(0.620 0.170 300 / 20%), transparent 100%);}
.pricing-inner{max-width:1220px; margin:0 auto; padding:150px 0; position:relative;}
.pricing-band .section-note{color:var(--on-dark-dim);}
.pricing-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.price-card{background:var(--dark-2); color:var(--on-dark); padding:32px 24px; display:flex; flex-direction:column; position:relative; transition:transform .3s cubic-bezier(.2,.8,.2,1); border:1px solid var(--dark-line);}
.price-card:hover{transform:translateY(-8px);}
.price-card.featured{background:var(--surface); color:var(--dark);}
.price-badge{font-family:'Unbounded',sans-serif; font-size:10px; font-weight:700; letter-spacing:.1em; color:rgba(255, 255, 255, 1); background:#387954; display:inline-block; padding:6px 12px; position:absolute; top:0; left:0;}
.price-name{font-size:14px; font-weight:800; margin-top:8px; text-transform:uppercase; letter-spacing:.02em;}
.price-amount{font-family:'Unbounded',sans-serif; font-weight:800; font-size:27px; margin:14px 0 2px;}
.price-unit{font-size:12px; opacity:.6; margin-bottom:24px;}
.price-list{display:flex; flex-direction:column; gap:11px; margin-bottom:28px; flex:1;}
.price-list div{font-size:13px; display:flex; gap:8px; opacity:.85;}
.price-list div::before{content:'\2014'; color:var(--lime); flex-shrink:0;}
.price-card.featured .price-list div::before{color:var(--lime-deep);}
.price-card .btn{width:100%; justify-content:center;}
.price-card .btn-surface{background:var(--surface); color:var(--dark);}
.price-card.featured .btn-surface{background:var(--dark); color:var(--on-dark);}

.faq-item{border-top:2px solid var(--line);}
.faq-item:last-child{border-bottom:2px solid var(--line);}
.faq-q{width:100%; text-align:left; background:none; border:none; color:var(--ink); font-family:'Unbounded',sans-serif; font-size:17px; font-weight:600; padding:26px 4px; display:flex; justify-content:space-between; align-items:center; gap:20px; cursor:pointer; transition:color .2s ease;}
.faq-q:hover{color:var(--lime-deep);}
.faq-q svg{transition:transform .3s ease; flex-shrink:0; color:var(--lime-deep);}
.faq-item.open .faq-q svg{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s ease;}
.faq-a p{font-size:14.5px; line-height:1.7; color:var(--muted); margin:0 4px 28px; max-width:640px;}
.faq-item.open .faq-a{max-height:400px;}

.news-list{display:flex; flex-direction:column;}
.news-tag{font-family:'Unbounded',sans-serif; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--lime-deep); border:1px solid var(--line-2); border-radius:100px; padding:6px 13px; flex-shrink:0;}
.news-row{display:flex; justify-content:space-between; align-items:center; gap:20px; padding:28px 4px; border-top:2px solid var(--line); text-decoration:none; color:inherit; transition:padding-left .25s ease, color .25s ease;}
.news-row:last-child{border-bottom:2px solid var(--line);}
.news-row:hover{padding-left:14px; color:var(--lime-deep);}
.news-date{font-size:12.5px; color:var(--muted-2); font-variant-numeric:tabular-nums; flex-shrink:0;}
.news-title{font-size:17px; font-weight:700; font-family:'Unbounded',sans-serif;}
.news-arrow{flex-shrink:0; color:var(--muted-2); transition:transform .25s ease, color .25s ease;}
.news-row:hover .news-arrow{transform:translateX(6px); color:var(--lime-deep);}

/* Long-form editorial content (article-style service pages).
   .article itself is NOT width-capped any more — pages are built by
   pasting the same full-width block markup (hero/.wrap/.pricing-band/etc.)
   straight into the Article body, so it must size like the rest of the
   site. The generic p/ul/li typography below only targets PLAIN tags
   without a class (:not([class])), so it never fights our own component
   classes (.lede, .section-note, .svc-desc, ...) when they're pasted in. */
.article{max-width:none;}
.article h2.section-title{margin-bottom:20px;}
.article > p:not([class]){font-size:15.5px; line-height:1.75; color:var(--ink-soft); margin:0 0 18px; max-width:760px;}
.article > ul:not([class]){margin:0 0 18px; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:10px; max-width:760px;}
.article > ul:not([class]) > li{font-size:15px; line-height:1.6; color:var(--ink-soft); display:flex; gap:10px;}
.article > ul:not([class]) > li::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--lime-deep); flex-shrink:0; margin-top:8px;}
.article h3{font-size:20px; font-weight:700; font-family:'Unbounded',sans-serif; text-transform:uppercase; margin:44px 0 16px; color:var(--ink);}
.article h2{font-size:26px; font-weight:700; font-family:'Unbounded',sans-serif; text-transform:uppercase; margin:48px 0 18px; /*! color:var(--ink); */ line-height:1.15;}
.article h2:first-child, .article h3:first-child{margin-top:0;}
.article ol{margin:0 0 18px; padding-left:22px; color:var(--ink-soft); font-size:15px; line-height:1.6;}
.article ol li{display:list-item; padding-left:4px;}
.article ol li::before{content:none;}
.article a{ text-decoration:none; text-underline-offset:2px;}
.article img{max-width:100%; height:auto; border-radius:14px; margin:22px 0;}
.article blockquote{border-left:3px solid var(--lime-deep); padding:2px 0 2px 20px; margin:26px 0; color:var(--ink); font-style:italic; font-size:16px;}
.article table{width:100%; border-collapse:collapse; margin:22px 0; font-size:14px;}
.article th, .article td{border:1px solid var(--line); padding:10px 12px; text-align:left;}
.article figure{margin:22px 0;}
.article figcaption{font-size:12.5px; color:var(--muted-2); margin-top:8px;}

/* Portfolio card grid (used by the com_content "Portfolio" category layout) */
.pf-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.pf-card{position:relative; display:flex; flex-direction:column; overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:0 1px 2px oklch(0.205 0.02 260 / 6%); transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; text-decoration:none; color:inherit;}
.pf-card:hover{transform:translateY(-7px); box-shadow:0 30px 55px -22px oklch(0.205 0.02 260 / 26%);}
.pf-img{aspect-ratio:16/10; overflow:hidden; background:var(--bg-soft);}
.pf-img img{width:100%; height:100%; object-fit:cover; object-position:top; display:block; transition:transform .6s cubic-bezier(.2,.8,.2,1);}
.pf-card:hover .pf-img img{transform:scale(1.06);}
.pf-body{padding:18px;}
.pf-cat{font-family:'Unbounded',sans-serif; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--lime-deep); border:1px solid var(--line-2); border-radius:100px; padding:5px 12px; display:inline-block; margin-bottom:12px;}
.pf-name{font-family:'Unbounded',sans-serif; font-size:15px; font-weight:700; text-transform:uppercase;}
@media (max-width:980px){.pf-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.pf-grid{grid-template-columns:1fr;}}

/* Joomla pagination / breadcrumbs minimal styling */
.pagination{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0;}
.pagination li{display:inline-flex;}
.pagination a, .pagination span{display:flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 12px; border-radius:100px; border:1px solid var(--line-2); font-size:13px; font-weight:700; color:var(--ink-soft); text-decoration:none;}
.pagination a:hover{border-color:var(--lime-deep); color:var(--lime-deep);}
.pagination .active span, .pagination .active a{background:var(--dark); color:var(--on-dark); border-color:var(--dark);}
#altbizai-breadcrumbs{padding:14px 0;}
#altbizai-breadcrumbs ul{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; font-size:12.5px; color:var(--muted-2);}
#altbizai-breadcrumbs a{color:var(--muted-2); text-decoration:none;}
#altbizai-breadcrumbs a:hover{color:var(--lime-deep);}

.cta-band{background:var(--dark); color:var(--on-dark); padding:90px 60px; text-align:center; position:relative; overflow:hidden;}
.cta-band::before{content:''; position:absolute; top:-180px; left:10%; width:640px; height:640px; pointer-events:none;
  background:
    radial-gradient(circle 260px at 40% 35%, oklch(0.760 0.190 140 / 30%), transparent 100%),
    radial-gradient(circle 260px at 60% 55%, oklch(0.720 0.130 195 / 22%), transparent 100%);}
.cta-band > *{position:relative;}
.cta-band h2{font-size:clamp(30px,5vw,60px); margin-bottom:20px; text-transform:uppercase; color:var(--on-dark);}
.cta-band p{font-size:16px; color:var(--on-dark-dim); max-width:480px; margin:0 auto 36px;}

/* Contact page */
.contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:2px; background:var(--line); border:2px solid var(--line);}
.contact-info{background:var(--surface); padding:40px 34px;}
.contact-info-item{display:flex; gap:14px; align-items:flex-start; padding:18px 0; border-top:1px solid var(--line);}
.contact-info-item:first-child{border-top:none; padding-top:0;}
.contact-info-item svg{color:var(--lime-deep); flex-shrink:0; margin-top:2px;}
.contact-info-item a, .contact-info-item span{font-size:14.5px; color:var(--ink); text-decoration:none; font-weight:600; line-height:1.5;}
.contact-info-item a:hover{color:var(--lime-deep);}
.contact-form{background:var(--bg-soft); padding:40px 34px; display:flex; flex-direction:column; gap:16px;}
.form-field{display:flex; flex-direction:column; gap:8px;}
.form-field label{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-2);}
.form-field input, .form-field textarea{
  font-family:'Golos Text',sans-serif; font-size:15px; padding:14px 16px; border-radius:10px; border:1.5px solid var(--line-2);
  background:var(--surface); color:var(--ink); outline:none; transition:border-color .2s ease;
}
.form-field input:focus, .form-field textarea:focus{border-color:var(--lime-deep);}
.form-note{font-size:12px; color:var(--muted-2); margin:0;}
.form-success{display:none; align-items:center; gap:10px; background:oklch(0.760 0.190 140/14%); border:1px solid var(--lime-deep); border-radius:10px; padding:14px 16px; font-size:14px; font-weight:600; color:var(--lime-deep); margin-bottom:16px;}
.form-success.show{display:flex;}
.form-error{display:none; background:oklch(0.62 0.19 25/12%); border:1px solid oklch(0.55 0.19 25); border-radius:10px; padding:14px 16px; font-size:14px; font-weight:600; color:oklch(0.5 0.19 25); margin-bottom:16px;}
.form-error.show{display:block;}
.btn[disabled]{opacity:.6; cursor:not-allowed; transform:none !important;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;}}

footer{padding:80px 0 44px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:36px; border-bottom:2px solid var(--line);}
.foot-desc{font-size:13.5px; color:var(--muted); line-height:1.6; max-width:280px; margin-top:16px;}
.foot-label{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); margin-bottom:18px; font-weight:700;}
.foot-links{display:flex; flex-direction:column; gap:12px;}
.foot-links a{font-size:13.5px; color:var(--ink-soft); text-decoration:none; transition:color .2s ease;}
.foot-links a:hover{color:var(--lime-deep);}
.foot-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:24px; font-size:12.5px; color:var(--muted-2);}

canvas#grain{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; opacity:.025; mix-blend-mode:multiply; z-index:1;}

@media (max-width:980px){
  .mobile-fab{display:flex; flex-direction:column; align-items:flex-end; position:fixed; right:16px; bottom:16px; z-index:60;}
  .hybrid-cta{display:none;}
}

@media (prefers-reduced-motion: reduce){
  .marquee-track, .orb, .hero-photo, .float-card, .scroll-cue svg, .hero-grid{animation:none;}
  .hero-visual{transition:none;}
  .mobile-fab-btn::after{animation:none; display:none;}
}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{height:440px; margin-top:20px;}
  .hero-photo{width:300px;}
  .orb{width:330px; height:330px;}
  .float-list{left:0;}
  .float-stat{right:0;}
  .float-stat.accent{left:0;}
  .svc-list{padding-left:44px;}
  .svc-list::before{left:15px;}
  .svc-num{left:-44px; width:32px; height:32px; font-size:12px;}
  .svc-title{font-size:18px;}
  .process-track{grid-template-columns:1fr 1fr;}
  .process-track.cols-4{grid-template-columns:1fr 1fr;}
  .channel-grid{grid-template-columns:1fr 1fr;}
  .checklist{grid-template-columns:repeat(2,1fr);}
  .pricing-grid{grid-template-columns:repeat(2,1fr);}
  .portfolio-card{flex:0 0 78%;}
  .portfolio-track.portfolio-grid{grid-auto-columns:78%;}
  nav.links{display:none;}
  .foot-grid{grid-template-columns:1fr;}
}
@media (max-width: 560px){
  body{padding:0 16px;}
  section{padding:90px 0;}
  .pricing-inner{padding:100px 0;}
  .hero h1, .page-hero h1{font-size:clamp(30px,10vw,44px);}
  .hero-visual{height:380px;}
  .hero-photo{width:250px;}
  .orb{width:280px; height:280px;}
  .float-list{width:150px; padding:12px 14px;}
  .float-stat{width:130px; padding:12px 14px;}
  .process-track{grid-template-columns:1fr;}
  .process-track.cols-4{grid-template-columns:1fr;}
  .channel-grid{grid-template-columns:1fr;}
  .checklist{grid-template-columns:1fr;}
  .pricing-grid{grid-template-columns:1fr;}
  .portfolio-card{flex:0 0 86%;}
  .portfolio-track.portfolio-grid{grid-auto-columns:86%;}
  .cta-band{padding:56px 24px;}
}