/* =========================================================
   SUN SKILL TECH — Premium Agency Design System v2.0
   ========================================================= */

/* ── TOKENS ──────────────────────────────────────────── */
:root {
  --black:    #0c0c0c;
  --white:    #ffffff;
  --green:    #059669;
  --green-dk: #047857;
  --green-lt: #ecfdf5;
  --green-bd: #a7f3d0;
  --n50:  #fafafa;
  --n100: #f5f5f5;
  --n200: #e5e5e5;
  --n300: #d4d4d4;
  --n400: #a3a3a3;
  --n500: #737373;
  --n600: #525252;
  --n700: #404040;
  --n800: #262626;
  --n900: #171717;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --max-w: 1200px;
  --px: clamp(1.25rem, 5vw, 3rem);
  --py: clamp(4rem, 8vw, 6.5rem);
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --shadow: 0 4px 16px rgba(0,0,0,.07), 0 2px 6px rgba(0,0,0,.04);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.05);
  --shadow-xl: 0 24px 60px rgba(0,0,0,.14), 0 8px 24px rgba(0,0,0,.06);
  --ease: cubic-bezier(.4,0,.2,1);
  --dur: .22s;
}

/* ── RESET ───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border:0}
html{line-height:1.5;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font);font-size:1rem;line-height:1.6;color:var(--n900);background:var(--white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;line-height:inherit}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%;height:auto}
button{cursor:pointer;background:none;font:inherit;color:inherit}
ul,ol{list-style:none}
::selection{background:var(--green-lt);color:#064e3b}
input,select,textarea{font:inherit}

/* ── LAYOUT ──────────────────────────────────────────── */
.container{width:100%;max-width:var(--max-w);margin-inline:auto;padding-inline:var(--px)}
.section{padding-block:var(--py)}
.section--sm{padding-block:clamp(2.5rem,5vw,4rem)}
.section--lg{padding-block:clamp(5rem,10vw,8rem)}

/* ── HEADER ──────────────────────────────────────────── */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),padding var(--dur) var(--ease);padding-block:1.625rem}
.site-header.scrolled{background:rgba(255,255,255,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--n200);padding-block:1.125rem}
.site-header--dark{color:var(--white)}
.site-header--dark.scrolled{color:var(--n900)}
/* homepage: white logo before scroll, normal after */
.site-header--dark:not(.scrolled) .nav__logo img{filter:brightness(0) invert(1)}
/* header CTA: desktop only */
.nav__cta{display:inline-flex}
/* hide Book a Call from mobile menu on all pages */
.mobile-menu .btn--green{display:none}
.nav{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.nav__logo img{height:2.5rem;width:auto;display:block}
.nav__links{display:none;align-items:center;gap:2rem;font-size:.9375rem;font-weight:500}
.nav__links a{color:var(--n600);transition:color var(--dur)}
.nav__links a:hover,.nav__links a.active{color:var(--n900)}
/* desktop nav links white before scroll (all pages with --dark header, mainly homepage) */
.site-header--dark:not(.scrolled) .nav__links a{color:rgba(255,255,255,.85)}
.site-header--dark:not(.scrolled) .nav__links a:hover{color:var(--white)}
.site-header:not(.scrolled){background:transparent}
.nav__burger{display:flex;flex-direction:column;gap:5px;width:28px;cursor:pointer;padding:4px;border:none;background:none}
.nav__burger span{display:block;height:1.5px;background:currentColor;border-radius:2px;transition:transform .3s,opacity .3s}
.mobile-menu{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:99;background:var(--white);padding:6rem var(--px) 3rem;flex-direction:column;overflow-y:auto}
.mobile-menu.open{display:flex}
.mobile-menu a{font-size:1.375rem;font-weight:700;color:var(--n900);padding:.875rem 0;border-bottom:1px solid var(--n100);display:block;transition:color var(--dur)}
.mobile-menu a:hover{color:var(--green)}
.mobile-menu .btn{margin-top:2rem}
@media(max-width:767.98px){
  .nav__cta{display:none !important}
}
@media(min-width:768px){
  .nav__links{display:flex}
  .nav__cta{display:inline-flex}
  .nav__burger{display:none} 
}

/* ── BUTTONS ─────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-size:.9375rem;font-weight:600;white-space:nowrap;border-radius:100px;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform .15s var(--ease),box-shadow var(--dur) var(--ease);cursor:pointer;border:none}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--black);color:var(--white);padding:.875rem 2rem}
.btn--primary:hover{background:var(--n800)}
.btn--green{background:var(--green);color:var(--white);padding:.875rem 2rem;box-shadow:0 4px 20px rgba(5,150,105,.25)}
.btn--green:hover{background:var(--green-dk)}
.btn--outline{background:transparent;color:var(--n700);padding:.875rem 2rem;border:1.5px solid var(--n200)}
.btn--outline:hover{border-color:var(--n400);color:var(--n900)}
.btn--outline-white{background:transparent;color:rgba(255,255,255,.75);padding:.875rem 2rem;border:1.5px solid rgba(255,255,255,.2)}
.btn--outline-white:hover{border-color:rgba(255,255,255,.5);color:var(--white)}
.btn--lg{padding:1.125rem 2.5rem;font-size:1rem}
.btn--full{width:100%}
.btn-link{display:inline-flex;align-items:center;gap:.375rem;font-size:.9375rem;font-weight:600;color:var(--green);transition:gap var(--dur) var(--ease)}
.btn-link:hover{gap:.625rem}

/* ── TYPOGRAPHY ──────────────────────────────────────── */
.display{font-size:clamp(3rem,7vw,5.5rem);font-weight:900;letter-spacing:-.045em;line-height:1.04}
.h1{font-size:clamp(2.25rem,5vw,3.75rem);font-weight:800;letter-spacing:-.035em;line-height:1.1}
.h2{font-size:clamp(1.75rem,3.5vw,2.75rem);font-weight:800;letter-spacing:-.03em;line-height:1.15}
.h3{font-size:clamp(1.25rem,2vw,1.625rem);font-weight:700;letter-spacing:-.02em;line-height:1.25}
.h4{font-size:1.125rem;font-weight:700;letter-spacing:-.015em}
.body-lg{font-size:1.125rem;line-height:1.75;color:var(--n600)}
.body{font-size:1rem;line-height:1.7;color:var(--n600)}
.body-sm{font-size:.875rem;line-height:1.6;color:var(--n500)}
.label{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--n400)}
.label--green{color:var(--green)}
.text-green{color:var(--green)}
.text-white{color:var(--white)}
.text-muted{color:var(--n500)}
.text-center{text-align:center}

/* eyebrow */
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.8125rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--n500);margin-bottom:1.25rem}
.eyebrow--green{color:var(--green)}
.eyebrow__dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.85)}}

/* ── BADGE ───────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:.375rem;font-size:.75rem;font-weight:600;padding:.375rem .875rem;border-radius:100px;background:var(--n100);color:var(--n700)}
.badge--green{background:var(--green-lt);color:#065f46;border:1px solid var(--green-bd)}

/* ── TAG ─────────────────────────────────────────────── */
.tag{display:inline-flex;align-items:center;font-size:.75rem;font-weight:600;padding:.25rem .75rem;border-radius:100px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.15)}
.tag--light{background:var(--n100);color:var(--n600);border-color:var(--n200)}
.tag--green{background:rgba(5,150,105,.1);color:var(--green);border-color:rgba(5,150,105,.2)}

/* ── GRID ────────────────────────────────────────────── */
.grid-2{display:grid;grid-template-columns:1fr;gap:1.5rem}
.grid-3{display:grid;grid-template-columns:1fr;gap:1.5rem}
.grid-4{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media(min-width:640px){.grid-2{grid-template-columns:repeat(2,1fr)}.grid-4{grid-template-columns:repeat(2,1fr);gap:1.5rem}}
@media(min-width:768px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}

/* ── REVEAL ──────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.reveal.visible{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}

/* ── BREADCRUMB ──────────────────────────────────────── */
.breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--n400);margin-bottom:2rem}
.breadcrumb a{color:var(--n500);transition:color var(--dur)}
.breadcrumb a:hover{color:var(--n900)}
.breadcrumb__sep{color:var(--n300)}

/* ── DIVIDER ─────────────────────────────────────────── */
hr{border:none;border-top:1px solid var(--n200)}
hr.dark{border-color:var(--n800)}

/* ── FOOTER ──────────────────────────────────────────── */
.site-footer{background:var(--n900);color:var(--white);padding-top:5rem;padding-bottom:2.5rem}
.footer__top{display:grid;grid-template-columns:1fr;gap:3rem;margin-bottom:4rem;padding-bottom:4rem;border-bottom:1px solid var(--n800)}
.footer__logo img{height:2rem;width:auto;filter:brightness(0) invert(1);opacity:1}
.footer__brand p{font-size:.9rem;line-height:1.7;color:var(--white);max-width:260px;margin-top:.875rem}
.footer__social{display:flex;gap:1rem;margin-top:1.5rem}
.footer__social a{font-size:.875rem;color:var(--white);font-weight:600;transition:opacity var(--dur)}
.footer__social a:hover{opacity:.7}
.footer__col h3{font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--white);margin-bottom:1.25rem}
.footer__col ul{display:flex;flex-direction:column;gap:.75rem}
.footer__col a{font-size:.9rem;color:var(--white);transition:opacity var(--dur)}
.footer__col a:hover{opacity:.7}
.footer__bottom{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center}
.footer__bottom p{font-size:.875rem;color:var(--white)}
.footer__legal{display:flex;gap:1.5rem}
.footer__legal a{font-size:.875rem;color:var(--white);transition:opacity var(--dur)}
.footer__legal a:hover{opacity:.7}
@media(min-width:640px){.footer__top{grid-template-columns:1.75fr 1fr 1fr 1fr}}

/* ── HOMEPAGE HERO ───────────────────────────────────── */
.hero{background:var(--black);min-height:100svh;display:flex;align-items:center;padding-top:7rem;padding-bottom:5rem;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:0;right:0;width:60%;height:100%;background:radial-gradient(ellipse at top right,rgba(5,150,105,.07) 0%,transparent 60%);pointer-events:none}
.hero__grid{display:grid;grid-template-columns:1fr;gap:4rem;align-items:center}
.hero__eyebrow{display:inline-flex;align-items:center;gap:.625rem;font-size:.8125rem;font-weight:600;color:rgba(255,255,255,.45);letter-spacing:.05em;margin-bottom:2rem}
.hero__eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0;animation:pulse 2s ease-in-out infinite}
.hero h1{font-size:clamp(2.75rem,7vw,5.25rem);font-weight:900;letter-spacing:-.045em;line-height:1.04;color:var(--white);margin-bottom:1.75rem}
.hero h1 em{font-style:normal;color:var(--green)}
.hero__sub{font-size:1.125rem;line-height:1.75;color:rgba(255,255,255,.5);max-width:460px;margin-bottom:2.5rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:3rem}
.hero__proof{display:flex;align-items:center;gap:.875rem;font-size:.875rem;color:rgba(255,255,255,.4)}
.hero__avatars{display:flex}
.hero__avatars img{width:30px;height:30px;border-radius:50%;border:2px solid var(--n900);margin-right:-8px;object-fit:cover}
.hero__visual{position:relative}
.hero__img-wrap{border-radius:var(--radius-lg);overflow:hidden;border:1px solid rgba(255,255,255,.07);box-shadow:0 40px 80px rgba(0,0,0,.7);background:var(--n900)}
.hero__img-wrap img{width:100%;height:460px;object-fit:cover;display:block}
.hero__float{position:absolute;background:rgba(23,23,23,.95);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:1rem 1.25rem;backdrop-filter:blur(12px);box-shadow:0 20px 40px rgba(0,0,0,.5)}
.hero__float--a{top:-1.25rem;left:-1.25rem}
.hero__float--b{bottom:-1.25rem;right:-1.25rem}
.hero__float-num{font-size:1.5rem;font-weight:900;letter-spacing:-.04em;color:var(--white);line-height:1}
.hero__float-label{font-size:.75rem;color:var(--n500);margin-top:.25rem}
@media(min-width:900px){.hero__grid{grid-template-columns:1fr 1fr;gap:5rem}}

/* ── LOGOS STRIP ─────────────────────────────────────── */
.logos-strip{background:var(--n50);border-block:1px solid var(--n200);padding-block:2.5rem}
.logos-strip__label{font-size:.875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--n400);text-align:center;margin-bottom:2rem}

/* continuous marquee */
.logos-strip__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2rem 3rem}
.logos-strip__row img{height:1.625rem;width:auto;opacity:.3;filter:grayscale(1);transition:opacity var(--dur)}
.logos-strip__row img:hover{opacity:.6}
.logos-marquee{overflow:hidden;position:relative;mask-image:linear-gradient(to right,transparent 0%,black 10%,black 90%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,black 10%,black 90%,transparent 100%)}
.logos-marquee__track{display:flex;align-items:center;gap:3.5rem;width:max-content;animation:marquee 28s linear infinite}
.logos-marquee__track:hover{animation-play-state:paused}
.logos-marquee__track img{height:4rem;width:auto;flex-shrink:0;opacity:.5;filter:grayscale(1);transition:opacity .2s}
.logos-marquee__track img:hover{opacity:.8}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── SERVICES GRID ───────────────────────────────────── */
.service-card{padding:2rem;border:1px solid var(--n200);border-radius:var(--radius-lg);background:var(--white);transition:border-color var(--dur),box-shadow var(--dur),transform var(--dur)}
.service-card:hover{border-color:rgba(5,150,105,.4);box-shadow:0 8px 32px rgba(5,150,105,.07);transform:translateY(-2px)}
.service-card__icon{width:46px;height:46px;border-radius:var(--radius-sm);background:var(--n100);display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem;color:var(--n600);transition:background var(--dur),color var(--dur)}
.service-card:hover .service-card__icon{background:var(--green-lt);color:var(--green)}
.service-card__name{font-size:1.0625rem;font-weight:700;color:var(--n900);margin-bottom:.5rem;letter-spacing:-.02em}
.service-card__desc{font-size:.9rem;line-height:1.7;color:var(--n500);margin-bottom:1.25rem;flex-grow:1}
.service-card__footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.service-card__from{font-size:.8125rem;color:var(--n400)}
.service-card__from strong{color:var(--n800);font-weight:700}
.service-card__arr{color:var(--n300);transition:color var(--dur),transform var(--dur)}
.service-card:hover .service-card__arr{color:var(--green);transform:translateX(3px)}
.services-grid{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:640px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.services-grid{grid-template-columns:repeat(3,1fr)}}

/* ── STATS BAR ───────────────────────────────────────── */
.stats-bar{background:var(--black);padding-block:clamp(2.5rem,5vw,4rem)}
.stats-bar__inner{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;text-align:center}
@media(min-width:640px){.stats-bar__inner{grid-template-columns:repeat(4,1fr)}}
.stat__num{font-size:clamp(2rem,5vw,3rem);font-weight:900;letter-spacing:-.04em;line-height:1;color:var(--white)}
.stat__label{font-size:.75rem;font-weight:500;color:var(--n500);margin-top:.5rem;text-transform:uppercase;letter-spacing:.06em}

/* ── CASE STUDY CARDS ────────────────────────────────── */
.work-grid{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:640px){.work-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.work-grid{grid-template-columns:repeat(3,1fr)}}
.work-card{display:block;border-radius:var(--radius-xl);overflow:hidden;background:var(--n900);position:relative;cursor:pointer}
.work-card__img{width:100%;height:320px;object-fit:cover;transition:transform .55s var(--ease);display:block}
.work-card:hover .work-card__img{transform:scale(1.04)}
.work-card__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.25) 55%,transparent 100%)}
.work-card__logo{position:absolute;top:1.5rem;left:1.5rem;max-height:32px;width:auto;filter:brightness(0) invert(1);opacity:.85;object-fit:contain}
.work-card__body{position:absolute;bottom:0;left:0;right:0;padding:1.75rem}
.work-card__tags{display:flex;flex-wrap:wrap;gap:.375rem;margin-bottom:.875rem}
.work-card__name{font-size:1.25rem;font-weight:800;color:var(--white);letter-spacing:-.025em;margin-bottom:.25rem}
.work-card__metric{font-size:.875rem;color:rgba(255,255,255,.55);font-weight:500}
.work-card__arrow-btn{position:absolute;top:1.25rem;right:1.25rem;width:36px;height:36px;background:rgba(255,255,255,.12);border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(4px);transition:opacity var(--dur),transform var(--dur);backdrop-filter:blur(8px)}
.work-card:hover .work-card__arrow-btn{opacity:1;transform:none}
.work-cta{border-radius:var(--radius-xl);background:var(--black);border:1px solid var(--n800);display:flex;flex-direction:column;justify-content:flex-end;padding:2rem;height:320px}
.work-cta h3{font-size:1.5rem;font-weight:900;color:var(--white);letter-spacing:-.03em;margin-bottom:.75rem;line-height:1.25}
.work-cta p{font-size:.9rem;color:var(--n500);margin-bottom:1.75rem;line-height:1.6}

/* ── TESTIMONIALS ────────────────────────────────────── */
.testimonial-card{background:var(--white);border:1px solid var(--n200);border-radius:var(--radius-lg);padding:2rem;display:flex;flex-direction:column}
.testimonial-card .stars{display:flex;gap:2px;color:#f59e0b;margin-bottom:1.125rem}
.testimonial-card .stars svg{width:15px;height:15px}
.testimonial-card__quote{font-size:.9375rem;line-height:1.75;color:var(--n700);margin-bottom:1.5rem;flex-grow:1}
.testimonial-card__author{display:flex;align-items:center;gap:.875rem;margin-top:auto}
.testimonial-card__avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;background:var(--n200);flex-shrink:0;overflow:hidden}
.testimonial-card__name{font-size:.875rem;font-weight:700;color:var(--n900)}
.testimonial-card__role{font-size:.8rem;color:var(--n500);margin-top:.125rem}

/* ── VIDEO SLIDER ────────────────────────────────────── */
.video-wrap{position:relative;overflow:hidden}
.video-track{display:flex;gap:1.25rem;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.video-slide{flex:0 0 calc(100% - 1.25rem);border-radius:var(--radius-lg);overflow:hidden;background:var(--n900);position:relative}
.video-slide video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block}
.video-slide__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:pointer;background:rgba(0,0,0,.2);transition:background var(--dur)}
.video-slide__play:hover{background:rgba(0,0,0,.05)}
.video-slide__play-btn{width:52px;height:52px;background:rgba(255,255,255,.95);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 32px rgba(0,0,0,.3);transition:transform var(--dur)}
.video-slide__play:hover .video-slide__play-btn{transform:scale(1.08)}
/* reviewer name overlay — two lines */
.video-slide__name{position:absolute;bottom:.75rem;left:.875rem;display:flex;flex-direction:column;gap:.1rem;pointer-events:none;z-index:2}
.video-slide__name-person{font-size:.75rem;font-weight:700;color:rgba(255,255,255,.95);text-shadow:0 1px 4px rgba(0,0,0,.6);letter-spacing:.01em}
.video-slide__name-site{font-size:.6875rem;font-weight:500;color:rgba(255,255,255,.7);text-shadow:0 1px 4px rgba(0,0,0,.5)}
.slider-nav{display:flex;gap:.625rem;margin-top:1.5rem;justify-content:center}
.slider-btn{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--n200);background:var(--white);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color var(--dur),background var(--dur);color:var(--n700)}
.slider-btn:hover{border-color:var(--n400);background:var(--n50)}
.slider-btn:disabled{opacity:.3;cursor:not-allowed}
@media(min-width:768px){.video-slide{flex:0 0 calc(33.333% - 0.833rem)}}
@media(min-width:1024px){.video-slide{flex:0 0 calc(33.333% - 0.833rem)}}

/* ── PROCESS ─────────────────────────────────────────── */
.process-list{display:flex;flex-direction:column;gap:0}
.process-step{display:flex;gap:1.5rem;align-items:flex-start;padding-block:2rem;border-bottom:1px solid var(--n100)}
.process-step:last-child{border:none}
.process-step__num{width:44px;height:44px;border-radius:50%;background:var(--n100);display:flex;align-items:center;justify-content:center;font-size:.9375rem;font-weight:800;color:var(--n700);flex-shrink:0;letter-spacing:-.02em;transition:background var(--dur),color var(--dur)}
.process-step:hover .process-step__num{background:var(--green);color:var(--white)}
.process-step h3{font-size:1.0625rem;font-weight:700;color:var(--n900);margin-bottom:.375rem;letter-spacing:-.02em}
.process-step p{font-size:.9375rem;line-height:1.7;color:var(--n500)}

/* ── PLATFORM CARDS ──────────────────────────────────── */
.platform-card{background:var(--white);border:1px solid var(--n200);border-radius:var(--radius-lg);padding:1.75rem 2rem;display:flex;align-items:center;gap:1.25rem;transition:border-color var(--dur),box-shadow var(--dur);text-decoration:none;color:inherit}
.platform-card:hover{border-color:rgba(5,150,105,.4);box-shadow:0 4px 20px rgba(5,150,105,.08)}
.platform-card__icon{width:48px;height:48px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.platform-card__name{font-size:1rem;font-weight:700;color:var(--n900)}
.platform-card__sub{font-size:.8125rem;color:var(--n500);margin-top:.125rem}
.platform-card__rating{margin-left:auto;font-size:.875rem;font-weight:800;color:var(--n900)}

/* ── CTA SECTION ─────────────────────────────────────── */
.cta-section{background:var(--black);text-align:center;padding-block:clamp(4rem,8vw,7rem);position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:700px;height:700px;background:radial-gradient(circle,rgba(5,150,105,.1) 0%,transparent 70%);pointer-events:none}
.cta-section h2{font-size:clamp(2.25rem,5vw,4rem);font-weight:900;color:var(--white);letter-spacing:-.04em;line-height:1.08;margin-bottom:1.25rem;position:relative}
.cta-section h2 em{font-style:normal;color:var(--green)}
.cta-section p{font-size:1.125rem;color:rgba(255,255,255,.5);margin-bottom:2.5rem;max-width:520px;margin-inline:auto;position:relative;line-height:1.7}
.cta-section .actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;position:relative}

/* ── FAQ / ACCORDION ─────────────────────────────────── */
.accordion{border-top:1px solid var(--n200)}
.accordion-item{border-bottom:1px solid var(--n200)}
.accordion-btn{width:100%;display:flex;align-items:center;justify-content:space-between;padding:1.375rem 0;font-size:1rem;font-weight:600;color:var(--n900);text-align:left;gap:1rem;cursor:pointer;transition:color var(--dur);background:none;border:none}
.accordion-btn:hover{color:var(--green)}
.accordion-icon{width:20px;height:20px;flex-shrink:0;color:var(--n400);transition:transform .3s var(--ease)}
.accordion-panel{overflow:hidden;max-height:0;transition:max-height .35s var(--ease)}
.accordion-panel p{padding-bottom:1.5rem;font-size:.9375rem;line-height:1.75;color:var(--n600)}

/* ── FORM ────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:.375rem}
.field__label{font-size:.875rem;font-weight:600;color:var(--n700)}
.field__req{color:#dc2626}
.field__input{width:100%;padding:.875rem 1.125rem;border:1.5px solid var(--n200);border-radius:var(--radius-sm);background:var(--n50);font-size:.9375rem;font-family:inherit;color:var(--n900);outline:none;transition:border-color var(--dur),background var(--dur),box-shadow var(--dur);-webkit-appearance:none;appearance:none;resize:vertical}
.field__input::placeholder{color:var(--n400)}
.field__input:focus{border-color:var(--green);background:var(--white);box-shadow:0 0 0 3px rgba(5,150,105,.1)}
select.field__input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='%23737373' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .875rem center;background-size:1rem;padding-right:2.5rem}

/* ── ALERTS ──────────────────────────────────────────── */
.alert{display:flex;align-items:flex-start;gap:.75rem;padding:1rem 1.25rem;border-radius:var(--radius-sm);font-size:.9375rem}
.alert--success{background:#f0fdf4;border:1px solid #bbf7d0;color:#14532d}
.alert--error{background:#fef2f2;border:1px solid #fecaca;color:#7f1d1d}
.alert[hidden]{display:none}

/* ── ABOUT / TEAM ────────────────────────────────────── */
.team-card{background:var(--white);border:1px solid var(--n200);border-radius:var(--radius-lg);padding:1.75rem;transition:border-color var(--dur),box-shadow var(--dur),transform var(--dur)}
.team-card:hover{border-color:var(--n300);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.team-card__avatar{width:68px;height:68px;border-radius:var(--radius-sm);object-fit:cover;margin-bottom:1.25rem;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:900;color:var(--white)}
.team-card__name{font-size:1.0625rem;font-weight:800;color:var(--n900);margin-bottom:.25rem;letter-spacing:-.02em}
.team-card__role{font-size:.75rem;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:.07em;margin-bottom:.875rem}
.team-card__bio{font-size:.875rem;line-height:1.65;color:var(--n500)}

/* ── CHECK LIST ──────────────────────────────────────── */
.check-list{display:flex;flex-direction:column;gap:.875rem}
.check-item{display:flex;align-items:flex-start;gap:.875rem;font-size:.9375rem;color:var(--n700);line-height:1.6}
.check-item__icon{width:20px;height:20px;background:var(--green-lt);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:.1rem;color:var(--green)}

/* ── METRIC BARS ─────────────────────────────────────── */
.metric-bar{margin-bottom:1.125rem}
.metric-bar__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.metric-bar__name{font-size:.875rem;color:var(--n600)}
.metric-bar__val{font-size:.875rem;font-weight:700;color:var(--green)}
.metric-bar__track{height:6px;background:var(--n200);border-radius:100px;overflow:hidden}
.metric-bar__track.dark-track{background:var(--n800)}
.metric-bar__fill{height:100%;background:var(--green);border-radius:100px}

/* ── SERVICES PAGE DETAIL ────────────────────────────── */
.service-detail{display:grid;grid-template-columns:1fr;gap:4rem;padding-block:5rem;border-bottom:1px solid var(--n100)}
@media(min-width:900px){.service-detail{grid-template-columns:1fr 1fr;gap:6rem;align-items:center}}
.service-num{font-size:3rem;font-weight:900;color:var(--n100);letter-spacing:-.04em;line-height:1;margin-bottom:1rem}
.service-cta-row{display:flex;align-items:center;gap:2rem;flex-wrap:wrap;margin-top:2rem}
.service-price-label{font-size:.75rem;color:var(--n400);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.25rem}
.service-price-val{font-size:1.625rem;font-weight:900;color:var(--n900);letter-spacing:-.04em}
.visual-box{background:var(--n50);border:1px solid var(--n200);border-radius:var(--radius-xl);padding:2rem}
.visual-box--dark{background:var(--n900);border-color:var(--n800)}

/* ── CASE STUDY PAGE ─────────────────────────────────── */
.cs-hero{background:var(--black);padding-top:8rem;padding-bottom:0;overflow:hidden}
.cs-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:2.5rem}
@media(min-width:640px){.cs-stats{grid-template-columns:repeat(4,1fr)}}
.cs-stat{background:var(--n900);border:1px solid var(--n800);border-radius:var(--radius);padding:1.25rem}
.cs-stat__num{font-size:1.75rem;font-weight:900;color:var(--white);letter-spacing:-.04em;line-height:1}
.cs-stat__label{font-size:.75rem;color:var(--n500);margin-top:.375rem}
.cs-image{width:100%;max-width:var(--max-w);margin-inline:auto;margin-top:3rem;border-radius:var(--radius-xl) var(--radius-xl) 0 0;overflow:hidden;border:1px solid var(--n800);border-bottom:none}
.cs-image img{width:100%;aspect-ratio:16/7;object-fit:cover;display:block}

/* ── CONTACT ─────────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:1fr;gap:3rem}
@media(min-width:1024px){.contact-grid{grid-template-columns:1fr;gap:5rem;align-items:start}}
.contact-link{display:flex;align-items:center;gap:1rem;padding:1.125rem 1.25rem;border:1px solid var(--n200);border-radius:var(--radius);background:var(--white);transition:border-color var(--dur),box-shadow var(--dur);text-decoration:none;color:inherit}
.contact-link:hover{border-color:rgba(5,150,105,.4);box-shadow:0 4px 16px rgba(5,150,105,.07)}
.contact-link__icon{width:42px;height:42px;border-radius:var(--radius-sm);background:var(--n100);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--n600);transition:background var(--dur),color var(--dur)}
.contact-link:hover .contact-link__icon{background:var(--green-lt);color:var(--green)}
.contact-link__label{font-size:.8125rem;color:var(--n400);margin-bottom:.125rem}
.contact-link__val{font-size:.9375rem;font-weight:600;color:var(--n900)}
.zcal-wrap{background:var(--n50);border:1px solid var(--n200);border-radius:var(--radius-lg);overflow:hidden;min-height:540px}
.zcal-wrap iframe{width:100%;height:560px;border:none;display:block}
.next-steps{background:var(--white);border:1px solid var(--n200);border-radius:var(--radius-lg);padding:2rem}
.next-step{display:flex;gap:1rem;align-items:flex-start}
.next-step__num{width:32px;height:32px;border-radius:50%;background:var(--green);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:.875rem;font-weight:800;flex-shrink:0}
.next-step h3{font-size:.9375rem;font-weight:700;color:var(--n900);margin-bottom:.25rem}
.next-step p{font-size:.875rem;color:var(--n500);line-height:1.6}

/* ── TRUST PILLS ─────────────────────────────────────── */
.trust-pill{display:inline-flex;align-items:center;gap:.5rem;font-size:.8125rem;font-weight:600;padding:.5rem 1rem;border-radius:100px;background:var(--white);color:var(--n700);border:1px solid var(--n200)}

/* ── PROSE (legal) ───────────────────────────────────── */
.prose h2{font-size:1.375rem;font-weight:800;color:var(--n900);margin-top:2.5rem;margin-bottom:.875rem;letter-spacing:-.025em}
.prose h3{font-size:1.0625rem;font-weight:700;color:var(--n800);margin-top:1.75rem;margin-bottom:.5rem}
.prose p{font-size:.9375rem;line-height:1.8;color:var(--n600);margin-bottom:1rem}
.prose ul,.prose ol{padding-left:1.5rem;margin-bottom:1rem}
.prose ul{list-style:disc}.prose ol{list-style:decimal}
.prose li{font-size:.9375rem;line-height:1.8;color:var(--n600);margin-bottom:.375rem}
.prose a{color:var(--green);text-decoration:underline}
.prose strong{color:var(--n800);font-weight:600}

/* ── FLOATING CONTACT WIDGET ─────────────────────────── */
.fcw{position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:.75rem}

/* WhatsApp button */
.fcw__btn{display:flex;align-items:center;gap:.625rem;padding:.75rem 1.25rem;border-radius:100px;font-size:.9375rem;font-weight:700;text-decoration:none;white-space:nowrap;box-shadow:0 4px 20px rgba(0,0,0,.18);transition:transform .2s ease,box-shadow .2s ease;cursor:pointer;border:none;font-family:inherit}
.fcw__btn:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.22)}
.fcw__btn:active{transform:translateY(-1px)}

.fcw__btn--wa{background:#25D366;color:#fff}
.fcw__btn--wa:hover{background:#20c15b}

/* icon inside button */
.fcw__icon{width:22px;height:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.fcw__icon svg{width:100%;height:100%;display:block}

/* mobile: slightly smaller */
@media(max-width:640px){
  .fcw{bottom:1rem;right:1rem;gap:.5rem}
  .fcw__btn{padding:.625rem 1rem;font-size:.875rem}
  .fcw__icon{width:20px;height:20px}
}

/* ── MISC ────────────────────────────────────────────── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
.relative{position:relative}
.overflow-hidden{overflow:hidden}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:currentColor;border-radius:50%;animation:spin .7s linear infinite;display:none}
.gap-row{display:flex;flex-direction:column;gap:1rem}
@media(min-width:640px){.gap-row{flex-direction:row;flex-wrap:wrap}}