/* eachcanteach — homepage
   Visual system pinned to sitebychinmay.com's computed styles:
   display: Jost (Futuru substitute, geometric, light weight, capitalize)
   body/labels: Manrope (Blauer Nue substitute, light 300 body copy)
   base: #f5f5f5 light grey · ink #222 · headings #000
   contrast bands: #181818/#202020 near-black
   accent: slate blue rgb(75,106,136)
*/

:root{
  --paper:#f5f5f5;
  --paper-2:#efefef;
  --paper-3:#f7f8f9;
  --surface:#ffffff;
  --ink:#222222;
  --ink-strong:#0c0e12;
  --ink-soft:#45474c;
  --ink-faint:#6c6f74;
  --line:#dcdcdc;

  --dark:#12151b;
  --dark-2:#191d24;
  --dark-line:#2b303a;
  --cream-on-dark:#f5f5f5;
  --cream-on-dark-soft:#a9abaf;

  --accent:#0e8a8f;
  --accent-bright:#1cb2b8;
  --accent-deep:#0a6367;
  --accent-line:#d98a3d;

  --radius:0px;
  --container:1440px;
  --gutter:60px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#141414;
    --paper-2:#1b1b1b;
    --paper-3:#1b1b1b;
    --surface:#1e1e1e;
    --ink:#e9e9e7;
    --ink-strong:#ffffff;
    --ink-soft:#b3b3b0;
    --ink-faint:#8c8c88;
    --line:#333333;
    --dark:#0a0c10;
    --dark-2:#12151a;
    --dark-line:#262a33;
  }
}
:root[data-theme="dark"]{
  --paper:#141414;
  --paper-2:#1b1b1b;
  --paper-3:#1b1b1b;
  --surface:#1e1e1e;
  --ink:#e9e9e7;
  --ink-strong:#ffffff;
  --ink-soft:#b3b3b0;
  --ink-faint:#8c8c88;
  --line:#333333;
  --dark:#0a0c10;
  --dark-2:#12151a;
  --dark-line:#262a33;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Manrope', -apple-system, system-ui, sans-serif;
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,.font-display{
  font-family:'Jost', -apple-system, sans-serif;
  font-weight:400;
  text-transform:capitalize;
  text-wrap:balance;
  letter-spacing:0;
  color:var(--ink-strong);
}
h1{font-size:clamp(2.6rem,5vw,4.2rem); line-height:1.04;}
h2{font-size:clamp(1.9rem,3.2vw,2.7rem); line-height:1.1;}
h3{font-size:1.3rem; line-height:1.25;}

.container-ect{max-width:var(--container); margin:0 auto; padding:0 var(--gutter);}
@media (max-width:1100px){:root{--gutter:40px;}}
@media (max-width:640px){:root{--gutter:20px;}}
a{color:inherit; text-decoration:none;}

.eyebrow{
  font-family:'Manrope', sans-serif;
  font-size:.8rem;
  font-weight:400;
  letter-spacing:.04em;
  color:var(--ink-faint);
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--accent-line);display:inline-block;}

/* ---------- NAV: transparent over hero, solid once scrolled ---------- */
.ect-nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background-color:transparent; backdrop-filter:none;
  border-bottom:1px solid transparent;
  transition:background-color .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.ect-nav.scrolled{
  background-color:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--line);
}
.ect-nav .container-ect{display:flex; align-items:center; justify-content:space-between; height:78px;}
.ect-brand{
  display:inline-flex; align-items:center;
  font-family:'Jost', sans-serif; font-weight:500; font-size:1.3rem; letter-spacing:.01em;
  color:#fff; text-transform:none; transition:color .25s ease;
}
.ect-brand img{display:block;}
.ect-brand .brand-mark-onlight{display:none;}
.ect-nav.scrolled .ect-brand .brand-mark-onhero{display:none;}
.ect-nav.scrolled .ect-brand .brand-mark-onlight{display:inline-flex;}
.ect-nav.scrolled .ect-brand{color:var(--ink-strong);}
.ect-brand .dot{color:var(--accent-bright);}
.ect-nav.scrolled .ect-brand .dot{color:var(--accent);}

/* Logo + small "eachcanteach" caption, shown as one unit wherever brand_mark() is used.
   Left-aligned so the caption's left edge lines up with the logo's left edge; the caption
   is allowed to run a little past the logo's right edge, which buys room for the word gaps. */
.brand-lockup{display:inline-flex; flex-direction:column; align-items:flex-start; gap:2px;}
.brand-caption{
  display:block; font-family:'Manrope', sans-serif; font-weight:700;
  font-size:calc(var(--logo-h, 34px) * 0.2); line-height:1;
  letter-spacing:.04em; word-spacing:.22em; text-transform:uppercase; white-space:nowrap;
}
.brand-caption-on-light{color:var(--ink-strong);}
.brand-caption-on-dark{color:#fff;}
.ect-links{display:flex; gap:38px; align-items:center;}
.ect-links a{color:rgba(255,255,255,.82); font-size:.95rem; font-weight:400; transition:color .15s ease;}
.ect-links a:hover{color:#fff;}
.ect-nav.scrolled .ect-links a{color:var(--ink-soft);}
.ect-nav.scrolled .ect-links a:hover{color:var(--ink-strong);}

.btn{
  font-family:'Manrope',sans-serif; font-weight:500; font-size:.9rem;
  padding:13px 26px; border-radius:var(--radius); display:inline-block;
  border:1px solid transparent; transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-solid{background:var(--accent); color:#fff; border-color:var(--accent);}
.btn-solid:hover{background:var(--accent); color:#fff; border-color:var(--ink-strong);}
.on-dark .btn-solid:hover, .hero .btn-solid:hover, .final-cta .btn-solid:hover,
.img-panel .btn-solid:hover, .wt-modal .btn-solid:hover{border-color:#fff; color:#fff;}
.btn-outline{background:transparent; color:var(--ink-strong); border-color:var(--line);}
.btn-outline:hover{border-color:var(--ink-strong);}
.nav-cta-desktop{padding:11px 22px; font-size:.85rem;}
.nav-toggle{display:none; background:none; border:none; color:#fff; font-size:1.5rem; transition:color .25s ease;}
.ect-nav.scrolled .nav-toggle{color:var(--ink-strong);}

@media (max-width:860px){
  .ect-links{
    display:none; position:absolute; top:78px; left:0; right:0;
    background:var(--paper); flex-direction:column; align-items:flex-start; gap:0;
    border-bottom:1px solid var(--line); padding:8px 24px 16px;
  }
  .ect-links.open{display:flex;}
  .ect-links a{padding:12px 0; width:100%; border-bottom:1px solid var(--line); color:var(--ink-soft);}
  .nav-toggle{display:block;}
  .nav-cta-desktop{display:none;}
}

/* ---------- HERO (fixed-dark band with textured photo, regardless of page theme) ---------- */
.hero, .inner-hero{
  padding:140px 0 96px; position:relative; overflow:hidden;
  background-color:#0a0c10; background-size:cover; background-position:center;
}
.hero::before, .inner-hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(160deg, rgba(10,12,16,.75), rgba(10,12,16,.68) 55%, rgba(10,12,16,.78));
}
.inner-hero{padding:150px 0 64px;}
.inner-hero .container-ect{position:relative; z-index:1;}
.inner-hero .eyebrow{color:var(--cream-on-dark-soft);}
.hero-dash{
  position:absolute; top:64px; left:-4%; width:108%; height:120px; z-index:0; opacity:.9;
}
.hero .container-ect{position:relative; z-index:1;}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center;}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr;}}
.hero-chat-wrap{position:relative; display:flex; justify-content:center; min-height:440px;}
@media (max-width:960px){.hero-chat-wrap{margin-top:12px; min-height:420px;}}

.hero-eyebrow{margin-bottom:26px; color:var(--cream-on-dark-soft);}
.hero h1{max-width:15ch; margin-bottom:26px; color:#fff;}
.hero h1 em{font-style:normal; color:var(--accent-bright);}
.hero .lede{font-size:1.15rem; font-weight:400; color:var(--cream-on-dark-soft); max-width:52ch; margin-bottom:38px;}
.hero-cta-row{display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
.hero-fine{font-size:.85rem; font-weight:400; color:var(--ink-faint); display:flex; align-items:center; gap:8px;}
.hero .btn-outline{color:#fff; border-color:rgba(255,255,255,.35);}
.hero .btn-outline:hover{border-color:#fff;}

/* ---------- AMBIENT BUBBLE FIELD ---------- */
.bubble-field{
  position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 14%, #000 78%, transparent),
                      linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg, transparent, #000 14%, #000 78%, transparent),
              linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-composite:intersect;
}
.bg-bubble{
  position:absolute; border-radius:50%;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.9), rgba(255,255,255,0) 55%),
    radial-gradient(circle at 68% 74%, color-mix(in srgb, var(--accent-bright) 65%, transparent), transparent 66%);
  background-color:color-mix(in srgb, var(--accent) 14%, transparent);
  border:1.4px solid color-mix(in srgb, var(--accent-bright) 75%, transparent);
  box-shadow:
    0 0 34px color-mix(in srgb, var(--accent-bright) 45%, transparent),
    inset -5px -7px 12px color-mix(in srgb, var(--accent) 35%, transparent),
    inset 4px 5px 10px rgba(255,255,255,.4);
  animation:bubbleRise linear infinite;
  opacity:0;
}
@keyframes bubbleRise{
  0%{transform:translateY(0) translateX(0) scale(.85); opacity:0;}
  10%{opacity:.85;}
  50%{transform:translateY(-160px) translateX(14px) scale(1.05); opacity:.65;}
  85%{opacity:.3;}
  100%{transform:translateY(-340px) translateX(-10px) scale(.92); opacity:0;}
}
@media (max-width:960px){.bg-bubble{display:none;}}
@media (prefers-reduced-motion:reduce){.bg-bubble{animation:none; opacity:.25;}}

/* ---------- HERO CHAT (bubbles carry the conversation) ---------- */
.chat-body{
  position:relative; z-index:1; width:100%; max-width:380px;
  padding:8px 4px; display:flex; flex-direction:column; gap:12px;
  height:420px; overflow-y:auto; overflow-x:hidden; scrollbar-width:none;
  justify-content:flex-end;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 6%, #000 100%);
  mask-image:linear-gradient(180deg, transparent, #000 6%, #000 100%);
}
.chat-body::-webkit-scrollbar{display:none;}

.chat-row{display:flex; width:100%;}
.chat-row.bot{justify-content:flex-start;}
.chat-row.user{justify-content:flex-end;}

.bubble{
  max-width:82%; padding:13px 18px; font-size:.88rem; font-weight:400; line-height:1.45;
  border-radius:20px; position:relative;
  opacity:0; transform:translateY(16px) scale(.72);
  animation:bubblePop .55s cubic-bezier(.34,1.56,.64,1) forwards;
  box-shadow:0 14px 28px -18px rgba(0,0,0,.28);
}
@keyframes bubblePop{
  0%{opacity:0; transform:translateY(16px) scale(.72);}
  55%{opacity:1; transform:translateY(-5px) scale(1.04);}
  80%{opacity:1; transform:translateY(2px) scale(.99);}
  100%{opacity:1; transform:translateY(0) scale(1);}
}
.bubble.bot{background:var(--surface); color:var(--ink); border:1px solid var(--line); border-bottom-left-radius:6px;}
.bubble.user{background:var(--ink-strong); color:var(--paper); border-bottom-right-radius:6px;}
.bubble .bubble-cta{
  display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-weight:600; font-size:.84rem;
  color:var(--accent-deep); text-decoration:underline; text-underline-offset:2px;
  background:none; border:none; padding:0; font-family:'Manrope',sans-serif; cursor:pointer;
}

.chat-typing{
  display:flex; align-items:center; gap:4px; padding:15px 18px; background:var(--surface);
  border:1px solid var(--line); border-bottom-left-radius:6px; border-radius:20px; width:fit-content;
  opacity:0; transform:scale(.7); animation:bubblePop .4s cubic-bezier(.34,1.56,.64,1) forwards;
  box-shadow:0 14px 28px -18px rgba(0,0,0,.28);
}
.chat-typing span{width:6px; height:6px; border-radius:50%; background:var(--ink-faint); animation:typingDot 1.1s infinite ease-in-out;}
.chat-typing span:nth-child(2){animation-delay:.15s;}
.chat-typing span:nth-child(3){animation-delay:.3s;}
@keyframes typingDot{0%,60%,100%{transform:translateY(0); opacity:.5;} 30%{transform:translateY(-4px); opacity:1;}}

.chat-options{display:flex; flex-direction:column; gap:9px; margin-top:2px; align-items:flex-start;}
.chat-opt{
  text-align:left; background:var(--surface); border:1px solid var(--line); padding:11px 18px;
  border-radius:20px; border-bottom-left-radius:6px;
  font-family:'Manrope',sans-serif; font-size:.85rem; font-weight:500; color:var(--ink);
  cursor:pointer; opacity:0; transform:translateY(14px) scale(.75);
  animation:bubblePop .5s cubic-bezier(.34,1.56,.64,1) forwards;
  box-shadow:0 14px 28px -18px rgba(0,0,0,.24);
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.chat-opt:hover{border-color:var(--accent); background:var(--paper-2); transform:translateY(-2px);}
.chat-opt:disabled{opacity:.4; cursor:default; pointer-events:none; transform:none;}

.chat-restart{
  align-self:center; margin-top:6px; font-size:.78rem; font-weight:500; color:var(--ink-faint);
  background:none; border:none; text-decoration:underline; text-underline-offset:2px; cursor:pointer;
  opacity:0; animation:bubbleIn .3s ease forwards;
}
.chat-restart:hover{color:var(--accent-deep);}
@keyframes bubbleIn{to{opacity:1;}}

@media (prefers-reduced-motion:reduce){
  .bubble, .chat-typing, .chat-opt, .chat-restart{animation:none; opacity:1; transform:none;}
}

/* ---------- PARTNER STRIP (marquee) ---------- */
.partner-strip{
  overflow:hidden; border-bottom:1px solid var(--line);
  padding:28px 0; background:var(--paper-2);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.partner-track{
  display:flex; align-items:center; gap:64px; width:max-content;
  animation:marquee 38s linear infinite;
}
.partner-strip:hover .partner-track{animation-play-state:paused;}
.partner-item{
  font-family:'Jost',sans-serif; font-weight:400; font-size:1.05rem; letter-spacing:.02em;
  color:var(--ink-faint); white-space:nowrap; text-transform:none;
}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.partner-track{animation:none;}}

/* ---------- SECTION SCAFFOLD ---------- */
section{padding:110px 0;}
.section-head{max-width:660px; margin-bottom:60px;}
.section-head .eyebrow{margin-bottom:18px;}
.section-head p{color:var(--ink-soft); font-weight:400; font-size:1.05rem; max-width:58ch;}
.on-dark{background:var(--dark); color:var(--cream-on-dark);}
.on-dark h2, .on-dark h3, .on-dark h1{color:#fff;}
.on-dark .section-head p{color:var(--cream-on-dark-soft);}
.on-dark .eyebrow{color:var(--cream-on-dark-soft);}

/* ---------- PLANS: two cards, white + vibrant teal ---------- */
.plan-pair{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:56px; align-items:stretch;}
@media (max-width:760px){.plan-pair{grid-template-columns:1fr;}}
.plan-card{
  position:relative; background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--accent);
  padding:clamp(28px,4vw,44px); display:flex; flex-direction:column;
}
.plan-featured{border-top-color:#fff;}
.plan-icon{
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border:1px solid var(--line); margin-bottom:18px;
}
.plan-icon-light{border-color:rgba(255,255,255,.35);}
.plan-name{font-family:'Jost',sans-serif; font-size:1.5rem; color:var(--ink-strong); margin-bottom:8px;}
.plan-tagline{font-size:.94rem; color:var(--ink-soft); margin-bottom:26px; max-width:36ch;}
.plan-price{display:flex; align-items:baseline; gap:10px; margin-bottom:30px; padding-bottom:28px; border-bottom:1px solid var(--line);}
.plan-price .amt{font-family:'Jost',sans-serif; font-size:2.4rem; color:var(--ink-strong); font-weight:500;}
.plan-price .per{font-size:.82rem; color:var(--ink-faint);}
.plan-features{list-style:none; margin:0 0 32px; padding:0; display:flex; flex-direction:column; gap:14px; flex:1;}
.plan-features li{display:flex; align-items:flex-start; gap:10px; font-size:.94rem; color:var(--ink);}
.plan-features svg{flex:none; margin-top:2px;}
.plan-cta{text-align:center; width:100%;}

.plan-featured{
  background:var(--accent); border-color:var(--accent); color:#fff;
  box-shadow:0 30px 50px -28px color-mix(in srgb, var(--accent) 60%, transparent);
}
.plan-featured .plan-name, .plan-featured .plan-price .amt{color:#fff;}
.plan-featured .plan-tagline{color:rgba(255,255,255,.82);}
.plan-featured .plan-price{border-bottom-color:rgba(255,255,255,.25);}
.plan-featured .plan-price .per{color:rgba(255,255,255,.7);}
.plan-featured .plan-features li{color:#fff;}
.plan-tag{
  position:absolute; top:-13px; left:32px; background:#fff; color:var(--accent-deep);
  font-size:.68rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; padding:5px 12px;
}
.plan-cta-featured{background:#fff; color:var(--accent-deep); border-color:#fff;}
.plan-cta-featured:hover{background:var(--dark); color:#fff; border-color:var(--dark);}


/* ---------- SERVICES / VAS GRID: image cards (Capgemini pattern: opaque scrim, no blur) ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); border:1px solid var(--line);}
@media (max-width:860px){.svc-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.svc-grid{grid-template-columns:1fr;}}
.svc-cell{position:relative; min-height:260px; display:flex; align-items:flex-end; overflow:hidden;}
.svc-cell::before{
  content:""; position:absolute; inset:0; background-image:var(--img); background-size:cover; background-position:center;
  transform:scale(1); transition:transform 1.1s cubic-bezier(.16,.9,.24,1); will-change:transform;
}
.svc-cell:hover::before{transform:scale(1.05);}
.svc-cell::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(8,10,14,.9) 0%, rgba(8,10,14,.45) 50%, rgba(8,10,14,.1) 75%);
}
.svc-cell-inner{position:relative; z-index:1; padding:24px 26px;}
.svc-cell h3{font-size:1.1rem; margin-bottom:8px; color:#fff;}
.svc-cell p{font-size:.88rem; font-weight:400; color:var(--cream-on-dark-soft); margin:0;}

.vas-row{display:flex; flex-wrap:wrap; gap:2px; background:var(--line);}
.vas-cell{position:relative; flex:1 1 260px; min-height:220px; display:flex; align-items:flex-end; overflow:hidden;}
.vas-cell::before{
  content:""; position:absolute; inset:0; background-image:var(--img); background-size:cover; background-position:center;
  transform:scale(1); transition:transform 1.1s cubic-bezier(.16,.9,.24,1); will-change:transform;
}
.vas-cell:hover::before{transform:scale(1.05);}
.vas-cell::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(8,10,14,.92) 0%, rgba(8,10,14,.5) 50%, rgba(8,10,14,.15) 78%);
}
.vas-cell-inner{position:relative; z-index:1; padding:24px 24px;}
.vas-cell h4{color:#fff; font-family:'Jost',sans-serif; font-weight:400; font-size:1.06rem; margin-bottom:4px;}
.vas-cell p{font-size:.86rem; font-weight:400; color:var(--cream-on-dark-soft); margin:0;}

/* ---------- PRODUCT CATEGORIES (journey) ---------- */
.journey-list{display:flex; flex-direction:column; border-top:1px solid var(--line);}
.journey-item{
  border-bottom:1px solid var(--line); padding:36px 0;
  display:grid; grid-template-columns:72px 1.1fr 1.3fr 150px; gap:28px; align-items:center;
  transition:background .18s ease;
}
.journey-item:hover{background:var(--paper-3);}
@media (max-width:860px){
  .journey-item{grid-template-columns:48px 1fr; grid-template-areas:"num title" "num desc" "num cta"; row-gap:10px;}
  .journey-num{grid-area:num;} .journey-title{grid-area:title;} .journey-desc{grid-area:desc;} .journey-cta{grid-area:cta;}
}
.journey-num{font-family:'Jost',monospace; color:var(--accent); font-size:1rem; font-weight:500;}
.journey-title{display:flex; flex-direction:column; gap:6px;}
.journey-title .tag{font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); font-weight:400;}
.journey-title h3{font-size:1.3rem; margin:0; text-transform:none;}
.journey-desc{color:var(--ink-soft); font-size:.94rem; font-weight:400; max-width:48ch;}
.journey-cta{justify-self:end; font-weight:500; font-size:.86rem; color:var(--accent-deep); display:flex; align-items:center; gap:6px; white-space:nowrap;}
@media (max-width:860px){.journey-cta{justify-self:start;}}
.journey-item:hover .journey-cta{text-decoration:underline;}

/* ---------- VERTICALS: IMAGE CARDS (Capgemini-style: opaque label over photo, no blur) ---------- */
.verticals{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:64px 0;}
.vertical-img-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px;}
@media (max-width:760px){.vertical-img-grid{grid-template-columns:repeat(2,1fr);}}
.vertical-img-card{position:relative; aspect-ratio:4/5; overflow:hidden; cursor:default;}
.vertical-img-card::before{
  content:""; position:absolute; inset:0; background-image:var(--img); background-size:cover; background-position:center;
  transform:scale(1); transition:transform 1.4s cubic-bezier(.16,.9,.24,1); will-change:transform;
}
.vertical-img-card:hover::before{transform:scale(1.05);}
.vertical-img-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(10,12,16,.85) 0%, rgba(10,12,16,.15) 46%, transparent 62%);
}
.vic-body{position:absolute; left:16px; right:16px; bottom:16px; z-index:1;}
.vic-tag{
  display:block; color:#fff; font-family:'Jost',sans-serif; font-size:1.05rem; text-transform:none;
}
.vic-more{
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .35s ease, opacity .3s ease, background-color .3s ease, backdrop-filter .3s ease, padding .3s ease, margin .3s ease;
}
.vertical-img-card:hover .vic-more{
  max-height:180px; opacity:1; margin-top:10px; padding:12px;
  background:rgba(10,12,16,.4); backdrop-filter:blur(4px);
}
.vic-desc{color:var(--cream-on-dark-soft); font-size:.85rem; line-height:1.5; margin:0 0 10px;}
.vic-cta{
  display:inline-block; font-size:.76rem; font-weight:600; color:#fff; padding:7px 14px;
  border:1px solid rgba(255,255,255,.4); white-space:nowrap; float:right;
  transition:border-color .2s ease, background-color .2s ease;
}
.vic-cta:hover{border-color:#fff; background:rgba(255,255,255,.14);}

/* ---------- HOW WE WORK (timeline) ---------- */
.ab-steps{background:var(--paper);}
.ab-timeline{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:28px; counter-reset:step; position:relative;}
.ab-timeline::before{content:""; position:absolute; left:0; right:0; top:19px; height:2px; background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 25%, var(--line)));}
.ab-timeline li{position:relative; padding-top:58px; counter-increment:step;}
.ab-timeline li::before{
  content:counter(step); position:absolute; top:0; left:0; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; background:var(--accent); color:#fff; font-family:'Jost',sans-serif; font-size:1rem;
  box-shadow:0 0 0 6px var(--paper);
}
.ab-when{display:block; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-deep); font-weight:600; margin-bottom:8px;}
.ab-timeline h3{font-size:1.3rem; text-transform:none; margin-bottom:8px;}
.ab-timeline p{font-size:.94rem; line-height:1.6; color:var(--ink-soft); margin:0; max-width:30ch;}
@media (max-width:1100px){
  .ab-timeline{grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:40px;}
  .ab-timeline::before{display:none;}
}
@media (max-width:760px){
  .ab-timeline{grid-template-columns:1fr; row-gap:0;}
  .ab-timeline li{padding:0 0 30px 58px;}
  .ab-timeline li:last-child{padding-bottom:0;}
  .ab-timeline li::after{content:""; position:absolute; left:19px; top:40px; bottom:0; width:2px; background:color-mix(in srgb, var(--accent) 35%, var(--line));}
  .ab-timeline li:last-child::after{display:none;}
  .ab-timeline p{max-width:none;}
}

/* ---------- FINAL CTA: hard split panel + image (Capgemini video-align-right pattern) ---------- */
.final-cta{
  background:var(--dark); color:#fff;
  display:grid; grid-template-columns:1fr 340px; align-items:stretch;
}
@media (max-width:760px){.final-cta{grid-template-columns:1fr;}}
.final-cta-copy{padding:88px clamp(24px,4vw,64px); text-align:left;}
.final-cta h2{color:#fff; margin-bottom:16px; max-width:14ch;}
.final-cta p{max-width:44ch; margin:0 0 32px; color:var(--cream-on-dark-soft); font-weight:400; font-size:1.05rem;}
.final-cta-img{background-size:cover; background-position:center; min-height:220px;}
@media (max-width:760px){.final-cta-img{order:-1;}}

/* ---------- FOOTER ---------- */
footer.ect-footer{background:var(--dark); color:var(--cream-on-dark-soft); padding:80px 0 32px; border-top:1px solid var(--dark-line);}
.footer-cta{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  padding-bottom:44px; margin-bottom:44px; border-bottom:1px solid var(--dark-line);
}
.footer-cta-mark{
  width:84px; height:84px; flex:none; display:flex; align-items:center; justify-content:center;
}
.footer-cta-mark img{width:100%; height:100%; object-fit:contain; border-radius:6px;}
.footer-cta-copy{flex:1 1 320px;}
.footer-cta h2{color:#fff; margin-bottom:10px; max-width:24ch;}
.footer-cta p{color:var(--cream-on-dark-soft); font-size:1rem; max-width:48ch; margin:0;}
@media (max-width:600px){.footer-cta-mark{display:none;}}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:36px; border-bottom:1px solid var(--dark-line);}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr;}}
.footer-grid h5{font-family:'Jost',sans-serif; font-weight:500; font-size:.82rem; letter-spacing:.04em; color:#fff; margin-bottom:16px; text-transform:none;}
.footer-grid ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; font-size:.88rem; font-weight:400;}
.footer-grid ul a:hover{color:#fff;}
.footer-brand{font-family:'Jost',sans-serif; font-weight:500; font-size:1.3rem; color:#fff; margin-bottom:12px;}
.footer-bottom{display:flex; justify-content:space-between; padding-top:22px; font-size:.78rem; font-weight:400; flex-wrap:wrap; gap:10px;}

/* ---------- PRODUCT EXPLORER (one-at-a-time detail) ---------- */
.explorer{display:grid; grid-template-columns:340px 1fr; gap:0; border:1px solid var(--line);}
@media (max-width:900px){.explorer{grid-template-columns:1fr;}}

.explorer-tabs{border-right:1px solid var(--line); background:var(--paper-3);}
@media (max-width:900px){.explorer-tabs{border-right:none; border-bottom:1px solid var(--line); max-height:280px; overflow-y:auto;}}
.explorer-tab{
  width:100%; text-align:left; background:none; border:none; border-bottom:1px solid var(--line);
  padding:20px 24px; display:flex; align-items:center; gap:16px; cursor:pointer;
  font-family:'Manrope',sans-serif; color:var(--ink-soft); transition:background .15s ease, color .15s ease;
}
.explorer-tab:last-child{border-bottom:none;}
.explorer-tab:hover{background:var(--surface); color:var(--ink-strong);}
.explorer-tab .tnum{font-family:'Jost',sans-serif; font-size:.85rem; color:var(--ink-faint); flex:none; width:22px;}
.explorer-tab .ttext{display:flex; flex-direction:column; gap:2px;}
.explorer-tab .ttag{font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; font-weight:400; color:var(--ink-faint);}
.explorer-tab .ttitle{font-size:.94rem; font-weight:500; color:inherit;}
.explorer-tab.active{background:var(--surface); border-left:3px solid var(--accent); padding-left:21px;}
.explorer-tab.active .tnum, .explorer-tab.active .ttitle{color:var(--ink-strong);}
.explorer-tab.active .ttag{color:var(--accent);}

.explorer-panels{position:relative; background:var(--surface); min-height:460px;}
.explorer-panel{
  display:none; padding:48px clamp(24px,4vw,56px); animation:panelIn .35s ease;
}
.explorer-panel.active{display:block;}
@keyframes panelIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
.explorer-panel .ptag{font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); font-weight:500; margin-bottom:12px; display:block;}
.explorer-panel h3{font-size:1.9rem; margin-bottom:16px; text-transform:none;}
.explorer-panel .pdesc{font-size:1.02rem; font-weight:400; color:var(--ink-soft); max-width:60ch; margin-bottom:32px;}
.pdetail-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 32px;}
@media (max-width:560px){.pdetail-grid{grid-template-columns:1fr;}}
.pdetail-grid li{
  list-style:none; display:flex; gap:10px; align-items:flex-start; font-size:.92rem; font-weight:400; color:var(--ink);
  padding-bottom:14px; border-bottom:1px dashed var(--line);
}
.pdetail-grid svg{flex:none; margin-top:2px; color:var(--accent);}
.panel-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:44px; align-items:start;}
@media (max-width:760px){.panel-grid{grid-template-columns:1fr;}}

/* Product scenes: a real photo of the product in use, with floating UI cards that show the feature.
   Each panel sets --tone; cards, blobs and bars all take their colour from it. */
.pscene{position:relative; aspect-ratio:4/4.4; margin:40px 14px 18px 18px; --tone:var(--accent);}
.pscene::before{
  content:""; position:absolute; inset:-14px -14px auto auto; width:62%; height:58%; border-radius:26px;
  background:color-mix(in srgb, var(--tone) 22%, transparent);
}
.pscene::after{
  content:""; position:absolute; left:-16px; bottom:-16px; width:92px; height:92px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--tone) 55%, transparent) 2px, transparent 2.5px) 0 0/14px 14px;
  opacity:.55;
}
.ps-photo{
  position:absolute; inset:0; border-radius:22px; overflow:hidden; z-index:1;
  background:linear-gradient(145deg, color-mix(in srgb, var(--tone) 55%, #fff), color-mix(in srgb, var(--tone) 85%, #000));
  box-shadow:0 30px 60px -34px rgba(0,0,0,.45);
}
.ps-illus{background:radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--tone) 70%, #fff) 0%, var(--tone) 55%, color-mix(in srgb, var(--tone) 70%, #000) 100%);}
.ps-illus svg{position:absolute; inset:0; width:100%; height:100%; display:block;}
.ps-card{
  position:absolute; z-index:2; background:var(--surface); color:var(--ink-strong); border-radius:14px;
  padding:12px 14px; box-shadow:0 18px 38px -16px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent);
  font-family:'Manrope',sans-serif; font-size:.74rem; line-height:1.35; min-width:150px;
  animation:psFloat 6s ease-in-out infinite;
}
.ps-card.ps-a{top:-30px; left:-18px; max-width:62%;}
.ps-card.ps-b{right:-14px; bottom:-22px; max-width:66%; animation-delay:-3s;}
@keyframes psFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);}}
@media (prefers-reduced-motion:reduce){.ps-card{animation:none;}}
.ps-label{display:flex; align-items:center; gap:6px; font-size:.6rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px;}
.ps-dot{width:8px; height:8px; border-radius:50%; background:var(--tone); flex:none;}
.ps-big{font-family:'Jost',sans-serif; font-size:1.45rem; line-height:1.1; color:var(--ink-strong);}
.ps-big small{font-family:'Manrope',sans-serif; font-size:.68rem; color:var(--ink-faint); margin-left:4px;}
.ps-sub{color:var(--ink-soft); font-size:.7rem;}
.ps-bar{height:6px; border-radius:6px; background:color-mix(in srgb, var(--tone) 16%, var(--line)); overflow:hidden; margin:6px 0 2px;}
.ps-bar i{display:block; height:100%; border-radius:6px; background:var(--tone);}
.ps-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:5px 0;}
.ps-row + .ps-row{border-top:1px solid color-mix(in srgb, var(--line) 70%, transparent);}
.ps-row b{font-weight:700; color:var(--ink-strong);}
.ps-rank{width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:.62rem; font-weight:700; color:#fff; background:var(--tone); flex:none; margin-right:8px;}
.ps-who{display:flex; align-items:center; flex:1; min-width:0;}
.ps-pill{display:inline-block; padding:3px 8px; border-radius:999px; font-size:.62rem; font-weight:700; color:var(--tone); background:color-mix(in srgb, var(--tone) 14%, transparent);}
.ps-note{display:flex; gap:9px; align-items:flex-start;}
.ps-note + .ps-note{margin-top:8px; padding-top:8px; border-top:1px solid color-mix(in srgb, var(--line) 70%, transparent);}
.ps-ico{width:26px; height:26px; border-radius:8px; flex:none; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--tone) 16%, transparent); color:var(--tone); font-size:.8rem;}
.ps-ring{
  --v:70; width:48px; height:48px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  background:conic-gradient(var(--tone) calc(var(--v) * 1%), color-mix(in srgb, var(--tone) 16%, var(--line)) 0);
  font-family:'Jost',sans-serif; font-size:.82rem; color:var(--ink-strong); position:relative;
}
.ps-ring::before{content:""; position:absolute; inset:5px; border-radius:50%; background:var(--surface);}
.ps-ring span{position:relative;}
@media (max-width:900px){
  .pscene{width:calc(100% - 32px); max-width:420px; margin:40px 16px 30px 16px;}
  .ps-card.ps-a{left:-10px;}
  .ps-card.ps-b{right:-8px;}
}

.pbest{
  margin-top:32px; padding:16px 20px; background:var(--paper-2); border-left:3px solid var(--accent);
  font-size:.88rem; font-weight:400; color:var(--ink-soft);
}
.pbest b{color:var(--ink-strong); font-weight:600;}

/* mobile: tabs become horizontal scroller */
@media (max-width:900px){
  .explorer-tabs{display:flex; overflow-x:auto;}
  .explorer-tab{width:auto; flex:none; border-bottom:none; border-right:1px solid var(--line); white-space:nowrap;}
  .explorer-tab.active{border-left:none; border-bottom:3px solid var(--accent); padding-left:24px;}
}

/* ---------- VIDEO WALKTHROUGH CTA ---------- */
.video-cta{
  color:#fff; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:stretch;
}
@media (max-width:860px){.video-cta{grid-template-columns:1fr; gap:32px;}}
.video-cta-copy{padding:0; display:flex; flex-direction:column; justify-content:center;}
.video-cta-copy h2{color:#fff; margin-bottom:16px;}
.video-cta-copy p{color:var(--cream-on-dark-soft); font-weight:400; font-size:1rem; margin-bottom:28px; max-width:44ch;}

.video-thumb{
  position:relative; min-height:280px; cursor:pointer; border:none; padding:0;
  background:
    linear-gradient(135deg, var(--dark-2), var(--dark)),
    repeating-linear-gradient(135deg, transparent, transparent 26px, color-mix(in srgb, var(--accent) 18%, transparent) 27px, transparent 28px);
  overflow:hidden;
}

.play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%; background:#fff; color:var(--dark);
  display:flex; align-items:center; justify-content:center; z-index:2;
  box-shadow:0 8px 26px rgba(0,0,0,.4); transition:transform .2s ease;
}
.video-thumb:hover .play-btn{transform:translate(-50%,-50%) scale(1.08);}
.play-btn svg{margin-left:3px;}

/* video-call style thumbnail: presenter camera + shared screen explaining a feature */
.video-thumb.vcall{
  min-height:340px; display:flex; flex-direction:column; gap:12px; padding:16px;
  text-align:left; color:#fff; font-family:'Manrope',sans-serif;
  background:#0b0e13; border:1px solid var(--dark-line);
}
.vcall-top, .vcall-bottom{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.vcall-live{display:flex; align-items:center; gap:8px; font-size:.76rem; font-weight:500;}
.vcall-live i{width:7px; height:7px; border-radius:50%; background:#ef4444; animation:vcallPulse 1.8s ease-out infinite;}
.vcall-live b{font-weight:500; color:rgba(255,255,255,.55); font-variant-numeric:tabular-nums;}
@keyframes vcallPulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.6);} 100%{box-shadow:0 0 0 8px rgba(239,68,68,0);}}
.vcall-sharing{font-size:.7rem; color:var(--accent-bright); padding:4px 9px; border:1px solid color-mix(in srgb, var(--accent-bright) 45%, transparent);}

.vcall-stage{flex:1; display:grid; grid-template-columns:38% 1fr; gap:10px; min-height:0;}
.vcall-cam{
  position:relative; overflow:hidden; background:var(--dark-2) var(--img) 44% 30%/cover no-repeat;
  outline:2px solid var(--accent-bright); outline-offset:-2px;
}
.vcall-cam::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 60%, rgba(0,0,0,.6));}
.vcall-name{position:absolute; left:10px; bottom:9px; z-index:1; font-size:.72rem; font-weight:500;}

.vcall-screen{display:flex; flex-direction:column; background:var(--dark-2); border:1px solid var(--dark-line); overflow:hidden;}
.vcall-screen-bar{display:flex; align-items:center; gap:4px; height:22px; padding:0 9px; border-bottom:1px solid var(--dark-line); flex:none;}
.vcall-screen-bar i{width:5px; height:5px; border-radius:50%; background:var(--dark-line);}
.vcall-screen-bar em{font-style:normal; font-size:.6rem; color:rgba(255,255,255,.4); margin-left:8px; white-space:nowrap;}
.vcall-screen-body{flex:1; display:grid; grid-template-columns:30% 1fr;}
.vcall-side{display:flex; flex-direction:column; gap:7px; padding:12px 8px; border-right:1px solid var(--dark-line); background:var(--dark);}
.vcall-side span{height:7px; background:var(--dark-line); width:80%;}
.vcall-side span.on{height:auto; width:auto; padding:4px 6px; font-size:.58rem; white-space:nowrap; overflow:hidden; background:color-mix(in srgb, var(--accent) 40%, var(--dark)); color:#fff;}
.vcall-main{position:relative; display:flex; flex-direction:column; gap:8px; padding:12px;}
.vcall-h{font-family:'Jost',sans-serif; font-size:.82rem; font-weight:500;}
.vcall-card{display:flex; flex-direction:column; gap:3px; padding:9px; border:1px solid var(--dark-line); background:var(--dark);}
.vcall-card-t{font-size:.66rem; font-weight:600;}
.vcall-card-s{font-size:.58rem; color:rgba(255,255,255,.5);}
.vcall-go{align-self:flex-start; margin-top:5px; padding:4px 9px; font-size:.6rem; font-weight:600; background:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-bright) 30%, transparent);}
.vcall-row{height:6px; width:85%; background:var(--dark-line);}
.vcall-row.short{width:55%;}
.vcall-pointer{position:absolute; left:104px; top:104px; width:16px; height:16px; fill:#fff; stroke:#0b0e13; stroke-width:1.2; filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)); animation:vcallPoint 3.2s ease-in-out infinite;}
@keyframes vcallPoint{0%,100%{transform:translate(0,0);} 45%,60%{transform:translate(-14px,-6px);} }

.vcall-caption{font-size:.8rem; line-height:1.4; color:rgba(255,255,255,.85); max-width:44ch;}
.vcall-controls{display:flex; gap:8px; flex:none;}
.vcall-controls i{width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.1);}
.vcall-controls i.end{background:#dc2626;}
.vcall-controls svg{width:15px; height:15px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.vcall-controls i.end svg{fill:#fff; stroke:none;}
.video-thumb.vcall .play-btn{top:calc(50% - 4px);}
@media (max-width:560px){
  .vcall-stage{grid-template-columns:1fr;}
  .vcall-screen, .vcall-sharing{display:none;}
  .vcall-cam{min-height:220px;}
}
@media (prefers-reduced-motion:reduce){.vcall-live i, .vcall-pointer{animation:none;}}

/* ---------- PRODUCT VIDEO MODAL ---------- */
.wt-modal .modal-content{
  background:var(--dark); border:1px solid var(--dark-line); border-radius:0; color:#fff;
}
.wt-modal .btn-close{filter:invert(1); opacity:.7;}
.wt-video{position:relative; aspect-ratio:16/9; background:#000;}
.wt-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

/* ---------- TESTIMONIALS ---------- */
.testimonial-section{position:relative; overflow:hidden;}
.testimonial-wrap{max-width:820px; margin:0 auto; text-align:center; position:relative;}
.tslide-stack{display:grid;}
.tquote-mark{
  font-family:'Jost',sans-serif; font-size:5rem; line-height:1; color:var(--accent); opacity:.5; margin-bottom:6px;
}
.tslide{
  grid-area:1/1; width:100%; visibility:hidden; opacity:0; pointer-events:none;
  transition:opacity .5s ease, visibility 0s linear .5s;
}
.tslide.active{visibility:visible; opacity:1; pointer-events:auto; transition:opacity .5s ease;}
.tslide blockquote{
  font-family:'Jost',sans-serif; font-weight:400; font-size:clamp(1.3rem,2.6vw,1.9rem); line-height:1.4;
  color:var(--ink-strong); margin:0 0 32px; text-transform:none;
}
.tperson{display:flex; align-items:center; justify-content:center; gap:14px;}
.tavatar{
  width:48px; height:48px; border-radius:50%; background:var(--dark); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:'Jost',sans-serif; font-size:1rem;
}
.tmeta{text-align:left;}
.tname{font-weight:600; font-size:.94rem; color:var(--ink-strong);}
.trole{font-weight:400; font-size:.82rem; color:var(--ink-faint);}

.tstats{display:flex; align-items:center; justify-content:center; gap:16px; margin-top:20px; flex-wrap:wrap;}
.trating{display:inline-flex; align-items:center; gap:8px;}
.tstars-wrap{position:relative; display:inline-block; line-height:1; font-size:.95rem; letter-spacing:2px;}
.tstars-bg{color:var(--line);}
.tstars-fg{position:absolute; top:0; left:0; overflow:hidden; white-space:nowrap; color:var(--accent);}
.trating-num{font-family:'Jost',sans-serif; font-size:.85rem; color:var(--ink-soft);}
.tgrowth{
  font-size:.78rem; font-weight:500; color:var(--accent-deep);
  border:1px solid var(--line); padding:5px 12px; text-transform:none;
}

.tdots{display:flex; gap:10px; justify-content:center; margin-top:32px;}
.tdot{width:8px; height:8px; border-radius:50%; background:var(--line); border:none; cursor:pointer; padding:0; transition:background .15s ease, transform .15s ease;}
.tdot.active{background:var(--accent); transform:scale(1.3);}

.tarrow{
  position:absolute; top:50%; transform:translateY(-50%); background:none; border:1px solid var(--line);
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer;
  color:var(--ink-soft); transition:border-color .15s ease, color .15s ease;
}
.tarrow:hover{border-color:var(--ink-strong); color:var(--ink-strong);}
.tarrow.prev{left:-4px;}
.tarrow.next{right:-4px;}
@media (max-width:760px){.tarrow{display:none;}}

.tnote{text-align:center; font-size:.78rem; color:var(--ink-faint); font-weight:400; margin-top:20px;}

/* ---------- TESTIMONIALS: image-panel variant (Capgemini pattern: opaque scrim + solid content card, no blur) ---------- */
.testimonial-section.img-panel{background-size:cover; background-position:center;}
.testimonial-section.img-panel::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(8,10,14,.55), rgba(8,10,14,.85));
}
.testimonial-section.img-panel .container-ect{position:relative; z-index:1;}
.testimonial-section.img-panel .section-head .eyebrow{color:var(--cream-on-dark-soft);}
.testimonial-section.img-panel .section-head h2{color:#fff;}
.testimonial-section.img-panel .section-head p{color:var(--cream-on-dark-soft);}
.testimonial-section.img-panel .testimonial-wrap{
  background:rgba(10,12,16,.72); border:1px solid rgba(255,255,255,.14);
  padding:clamp(28px,4vw,52px); max-width:780px;
}
.testimonial-section.img-panel .tslide blockquote{color:#fff;}
.testimonial-section.img-panel .tname{color:#fff;}
.testimonial-section.img-panel .trole{color:var(--cream-on-dark-soft);}
.testimonial-section.img-panel .tgrowth{color:#fff; border-color:rgba(255,255,255,.28);}
.testimonial-section.img-panel .trating-num{color:var(--cream-on-dark-soft);}
.testimonial-section.img-panel .tstars-bg{color:rgba(255,255,255,.25);}
.testimonial-section.img-panel .tarrow{border-color:rgba(255,255,255,.3); color:#fff;}
.testimonial-section.img-panel .tarrow:hover{border-color:#fff; color:#fff;}
.testimonial-section.img-panel .tdot{background:rgba(255,255,255,.3);}
.testimonial-section.img-panel .tdot.active{background:var(--accent-bright);}

/* reveal on scroll */
.reveal{opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease;}
.reveal.pre{opacity:0; transform:translateY(16px);}
@media (prefers-reduced-motion:reduce){.reveal.pre{opacity:1; transform:none;}}

/* ---------- CUSTOM CURSOR (fine-pointer devices only) ---------- */
body.has-custom-cursor, body.has-custom-cursor a, body.has-custom-cursor button,
body.has-custom-cursor input, body.has-custom-cursor textarea, body.has-custom-cursor select{cursor:none;}
.custom-cursor{
  position:fixed; top:0; left:0; width:14px; height:14px; border-radius:50%;
  border:1.4px solid #fff; background:transparent;
  pointer-events:none; z-index:99999; transform:translate3d(-50%,-50%,0);
  transition:width .3s cubic-bezier(.16,.9,.24,1), height .3s cubic-bezier(.16,.9,.24,1),
             background-color .3s ease, opacity .2s ease, backdrop-filter .3s ease, border-width .3s ease;
  opacity:0; mix-blend-mode:difference;
}
.custom-cursor::after{
  content:""; position:absolute; top:50%; left:50%; width:4px; height:4px; border-radius:50%;
  background:#fff; transform:translate(-50%,-50%); transition:opacity .2s ease;
}
.custom-cursor.is-visible{opacity:1;}
.custom-cursor.is-hover{
  width:30px; height:30px; border-width:1.4px;
  background:transparent;
  backdrop-filter:blur(5px);
}
@media (hover:none), (pointer:coarse){
  .custom-cursor{display:none;}
}

/* ---------- MAGNETIC PULL (buttons, cards) ---------- */
.magnetic{transition:transform .25s cubic-bezier(.16,.9,.24,1);}

/* ---------- PRICING TEASER (homepage) ---------- */
.pricing-teaser{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  border:1px solid var(--line); background:var(--surface); padding:clamp(28px,4vw,44px);
}

/* ---------- PLAN CARD: ingrained abstract illustration ---------- */
.plan-card{overflow:hidden;}
.plan-card .plan-deco{
  position:absolute; top:0; right:0; width:190px; height:190px; pointer-events:none;
  opacity:.14; z-index:0;
}
.plan-featured .plan-deco{opacity:.22;}
.plan-card > *:not(.plan-deco){position:relative; z-index:1;}

/* =====================================================================
   PHONES & SMALL TABLETS
   Layouts are re-thought for touch rather than squeezed: every card is
   whole on screen, long lists fold behind a "show more", nothing depends
   on hover, and every tap target is at least 44px.
   ===================================================================== */
.nw{white-space:nowrap;}
.nav-cta-mobile{display:none;}

/* hamburger → close icon */
.nav-toggle{width:44px; height:44px; padding:0; position:relative; margin-right:-10px;}
.nav-toggle span{
  position:absolute; left:11px; right:11px; height:1.6px; background:currentColor; border-radius:2px;
  transition:transform .28s cubic-bezier(.16,.9,.24,1), opacity .2s ease;
}
.nav-toggle span:nth-child(1){top:15px;}
.nav-toggle span:nth-child(2){top:21px;}
.nav-toggle span:nth-child(3){top:27px;}
.ect-nav.menu-open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.ect-nav.menu-open .nav-toggle span:nth-child(2){opacity:0;}
.ect-nav.menu-open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

@media (max-width:860px){
  .ect-nav .container-ect{height:64px;}
  .ect-nav .nav-cta-mobile{display:inline-flex; align-items:center; min-height:40px; padding:8px 14px; font-size:.8rem;}
  .ect-nav .d-flex.gap-3{gap:6px !important;}
  /* open menu: solid sheet under the bar, big rows to tap */
  .ect-nav.menu-open{background-color:var(--paper); border-bottom-color:var(--line); backdrop-filter:none;}
  .ect-nav.menu-open .ect-brand{color:var(--ink-strong);}
  .ect-nav.menu-open .ect-brand .dot{color:var(--accent);}
  .ect-nav.menu-open .nav-toggle{color:var(--ink-strong);}
  .ect-links{top:64px; padding:6px var(--gutter) 18px; box-shadow:0 24px 40px -24px rgba(0,0,0,.35);}
  .ect-links.open{animation:menuIn .25s ease;}
  .ect-links a{padding:15px 0; font-size:1.02rem; color:var(--ink-strong) !important;}
  .ect-links a:last-child{border-bottom:0;}
}
@keyframes menuIn{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;}}

@media (max-width:760px){
  section{padding:64px 0;}
  .section-head{margin-bottom:32px;}
  .section-head p{font-size:.98rem;}
  h1{font-size:clamp(2.1rem,9.2vw,2.6rem); line-height:1.08;}
  h2{font-size:clamp(1.6rem,7vw,1.95rem); line-height:1.15;}
  .btn{min-height:46px;}

  /* HERO: copy, two equal buttons, then the chat sized to its content */
  .hero{padding:100px 0 44px;}
  .inner-hero{padding:104px 0 40px;}
  .hero-eyebrow{margin-bottom:18px;}
  .hero h1{margin-bottom:18px;}
  .hero .lede{font-size:1rem; margin-bottom:26px;}
  .hero-cta-row{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .hero-cta-row .btn{display:flex; align-items:center; justify-content:center; text-align:center; padding:12px 10px;}
  .hero-chat-wrap{min-height:0; margin-top:36px; justify-content:stretch;}
  .chat-body{max-width:none; height:auto; overflow:visible; justify-content:flex-start; -webkit-mask-image:none; mask-image:none; padding:0;}
  .chat-opt{padding:12px 18px; min-height:44px;}
  .partner-strip{padding:20px 0;}
  .partner-item{font-size:.95rem;}

  /* SERVICES: photo rows instead of nine full-height tiles */
  .svc-section{padding-top:64px !important;}
  .svc-grid{grid-template-columns:1fr; gap:0; background:var(--surface);}
  .svc-cell{min-height:0; display:block; padding:14px 14px 14px 110px; border-bottom:1px solid var(--line);}
  .svc-cell:last-child{border-bottom:0;}
  .svc-cell::before{inset:14px auto 14px 14px; width:84px; height:auto; min-height:84px; transform:none !important;}
  .svc-cell::after{display:none;}
  .svc-cell-inner{padding:0; min-height:84px; display:flex; flex-direction:column; justify-content:center;}
  .svc-cell h3{color:var(--ink-strong); font-size:1.02rem; margin-bottom:4px;}
  .svc-cell p{color:var(--ink-soft); font-size:.86rem; line-height:1.45;}

  /* VIDEO: the call card is the play button, so the extra button goes */
  .video-section{padding:64px 0 !important;}
  .video-cta-copy p{margin-bottom:0;}
  .video-cta-btn{display:none;}
  .video-cta{gap:26px;}

  /* VERTICALS: tap a card to read it (no hover on phones) */
  .verticals{padding:56px 0;}
  .vertical-img-grid{gap:6px;}
  .vertical-img-card{aspect-ratio:auto; min-height:240px; cursor:pointer;}
  .vertical-img-card::after{background:linear-gradient(0deg, rgba(10,12,16,.9) 0%, rgba(10,12,16,.25) 55%, transparent 75%); transition:background .3s ease;}
  .vertical-img-card.is-open::after{background:rgba(10,12,16,.86);}
  .vic-body{left:12px; right:12px; bottom:12px;}
  .vic-tag{font-size:1rem; line-height:1.25; padding-right:26px;}
  .vertical-img-card:hover .vic-more{max-height:0; opacity:0; margin-top:0; padding:0; background:none; backdrop-filter:none;}
  .vertical-img-card.is-open .vic-more{max-height:260px; opacity:1; margin-top:8px; padding:0; background:none; backdrop-filter:none;}
  .vic-desc{font-size:.8rem; margin-bottom:10px;}
  .vic-cta{float:none; display:flex; align-items:center; justify-content:center; min-height:38px; background:var(--accent); border-color:var(--accent);}

  /* TESTIMONIALS */
  .testimonial-section.img-panel .testimonial-wrap{padding:26px 18px 20px;}
  .tquote-mark{font-size:3.4rem; margin-bottom:0;}
  .tslide blockquote{font-size:1.12rem; line-height:1.45; margin-bottom:22px;}
  .tdots{gap:0; margin-top:18px;}
  .tdot{width:32px; height:32px; background:transparent !important; position:relative; transform:none !important;}
  .tdot::before{content:""; position:absolute; top:50%; left:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:rgba(255,255,255,.3); transition:transform .15s ease, background .15s ease;}
  .tdot.active::before{background:var(--accent-bright); transform:scale(1.35);}

  /* PRICING TEASER, FOOTER */
  .teaser-section{padding:56px 0 !important;}
  .pricing-teaser .btn, .footer-cta .btn{width:100%; display:flex; align-items:center; justify-content:center;}
  footer.ect-footer{padding:56px 0 28px;}
  .footer-cta{padding-bottom:32px; margin-bottom:32px;}
  .footer-grid{gap:28px 20px;}
  .footer-grid > div:first-child{grid-column:1 / -1;}
  .footer-grid ul a{display:inline-block; padding:4px 0;}
  .footer-bottom{flex-direction:column;}

  /* PLANS (pricing page) */
  .plan-pair{gap:22px; margin-top:28px;}
  .plan-card{padding:26px 22px;}
  .plan-price .amt{font-size:2.1rem;}
  .plan-price{margin-bottom:22px; padding-bottom:20px;}
  .plan-features{margin-bottom:24px;}
}

/* "Show more" under folded lists */
.show-more{display:none;}
@media (max-width:760px){
  .show-more{
    display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:50px; margin-top:12px;
    background:var(--surface); border:1px solid var(--line); color:var(--ink-strong);
    font-family:'Manrope',sans-serif; font-size:.9rem; font-weight:600;
  }
  .show-more svg{transition:transform .25s ease;}
  .show-more[aria-expanded="true"] svg{transform:rotate(180deg);}
}

/* tap indicator on "Built for" cards (added by main.js) */
.vic-plus{display:none;}
@media (max-width:760px){
  .vic-plus{
    position:absolute; top:10px; right:10px; z-index:2; width:32px; height:32px; border-radius:50%;
    display:grid; place-items:center; background:rgba(10,12,16,.5); border:1px solid rgba(255,255,255,.35); color:#fff;
    transition:transform .25s ease, background .25s ease;
  }
  .vertical-img-card.is-open .vic-plus{transform:rotate(45deg); background:var(--accent); border-color:var(--accent);}
}

/* PRODUCT EXPLORER on phones: an accordion — each product opens in place */
@media (max-width:900px){
  .explorer{border:1px solid var(--line); background:var(--surface);}
  .explorer-tabs{display:block; overflow:visible; max-height:none; border:0; background:var(--surface);}
  .explorer-tab{
    width:100%; white-space:normal; border:0; border-bottom:1px solid var(--line);
    padding:16px 16px 16px 14px; min-height:64px; gap:12px; position:relative; background:var(--surface);
  }
  .explorer-tab::after{
    content:""; margin-left:auto; flex:none; width:9px; height:9px;
    border-right:1.6px solid var(--ink-faint); border-bottom:1.6px solid var(--ink-faint);
    transform:rotate(45deg) translate(-2px,-2px); transition:transform .25s ease;
  }
  .explorer-tab.active{border-left:0; border-bottom:1px solid transparent; padding-left:14px; background:var(--surface);}
  .explorer-tab.active::after{transform:rotate(-135deg) translate(-2px,-2px); border-color:var(--accent);}
  .explorer-tab.active .tnum{color:var(--accent);}
  .explorer-tab .ttitle{font-size:.96rem; line-height:1.3;}
  .explorer-tabs > :last-child{border-bottom:0;}
  .explorer-tabs .explorer-panel{padding:0 16px 24px; border-bottom:1px solid var(--line); animation:panelIn .3s ease;}
  .explorer-tabs .explorer-panel .ptag, .explorer-tabs .explorer-panel h3{display:none;}
  .explorer-tabs .explorer-panel .pdesc{font-size:.95rem; margin-bottom:18px;}
  .explorer-panels{display:none;}
  .panel-grid{gap:22px;}
  .pbest{margin-top:18px;}
}
.pdetail-grid{padding:0; margin:0;}

/* The video-call card on phones: shared screen fills, presenter becomes the corner tile */
@media (max-width:560px){
  .video-thumb.vcall{min-height:0; padding:12px; gap:10px;}
  .vcall-sharing{display:inline-block; font-size:.66rem;}
  .vcall-stage{display:block; position:relative; grid-template-columns:none;}
  .vcall-screen{display:flex; height:230px;}
  .vcall-screen-body{grid-template-columns:34% 1fr;}
  .vcall-cam{position:absolute; right:8px; bottom:8px; width:92px; height:118px; min-height:0; z-index:2; box-shadow:0 8px 20px rgba(0,0,0,.45);}
  .vcall-name{display:none;}
  .vcall-pointer{left:92px; top:98px;}
  .vcall-caption{font-size:.78rem;}
  .vcall-controls i{width:30px; height:30px;}
  .video-thumb.vcall .play-btn{top:50%; width:58px; height:58px;}
}

/* Video modal on phones */
@media (max-width:575.98px){
  .wt-modal .modal-dialog{margin:12px;}
}
}

/* Very small phones (320–360px) */
@media (max-width:360px){
  :root{--gutter:16px;}
  .nav-cta-mobile{padding:8px 11px;}
  .ect-brand{font-size:1.18rem;}
  .hero-cta-row{grid-template-columns:1fr;}
  .svc-cell{padding-left:96px;}
  .svc-cell::before{width:70px; min-height:70px;}
  .vertical-img-card{min-height:284px;}
}

/* "Most popular" badge: a corner label inside the card (the card clips anything outside it) */
.plan-card > .plan-tag{position:absolute; top:24px; right:24px; left:auto; z-index:2;}
@media (max-width:760px){.plan-card > .plan-tag{top:20px; right:18px;}}

/* Touch screens of any size (tablets included) can't hover: "Built for" cards open on tap */
@media (hover:none){
  .vertical-img-card{cursor:pointer;}
  .vertical-img-card:hover::before{transform:none;}
  .vertical-img-card:hover .vic-more{max-height:0; opacity:0; margin-top:0; padding:0; background:none; backdrop-filter:none;}
  .vertical-img-card.is-open::after{background:rgba(10,12,16,.86);}
  .vertical-img-card.is-open .vic-more{max-height:260px; opacity:1; margin-top:8px; padding:0; background:none; backdrop-filter:none;}
  .vic-tag{padding-right:30px;}
  .vic-cta{float:none; display:flex; align-items:center; justify-content:center; min-height:40px; background:var(--accent); border-color:var(--accent);}
  .vic-plus{
    display:grid; place-items:center; position:absolute; top:10px; right:10px; z-index:2; width:32px; height:32px; border-radius:50%;
    background:rgba(10,12,16,.5); border:1px solid rgba(255,255,255,.35); color:#fff; transition:transform .25s ease, background .25s ease;
  }
  .vertical-img-card.is-open .vic-plus{transform:rotate(45deg); background:var(--accent); border-color:var(--accent);}
}

/* Footer call-to-action: the mark spans exactly the height of the heading + paragraph beside it */
.footer-cta{display:grid; grid-template-columns:clamp(120px,16vw,160px) minmax(0,1fr) auto; align-items:stretch; gap:32px;}
.footer-cta-mark{width:auto; height:auto; min-height:0; align-self:stretch;}
.footer-cta-copy{align-self:center; display:flex; flex-direction:column; justify-content:center;}
.footer-cta-copy p{margin:0;}
.footer-cta > .btn{align-self:center;}
@media (max-width:860px){
  .footer-cta{grid-template-columns:clamp(100px,20vw,130px) minmax(0,1fr); gap:24px;}
  .footer-cta > .btn{grid-column:1 / -1; justify-self:start;}
}
@media (max-width:600px){
  .footer-cta{grid-template-columns:1fr; gap:18px;}
  .footer-cta-mark{display:flex; height:120px;}
  .footer-cta > .btn{justify-self:stretch;}
}

/* ---------- HERO: full-colour photo under a deep-teal wash (hopeful, not grim) ----------
   The photo keeps its colour; a teal gradient carries the text side and fades
   toward the photo, with a soft warm glow up top. */
.hero, .inner-hero{background-color:#0b3b3e; background-position:70% 30%;}
.hero::before, .inner-hero::before{
  background:
    radial-gradient(ellipse 60% 55% at 88% 0%, rgba(255,186,102,.28), transparent 70%),
    linear-gradient(100deg, rgba(3,34,38,.94) 0%, rgba(4,44,48,.84) 36%, rgba(6,58,62,.52) 66%, rgba(8,70,74,.30) 100%);
}
.hero::after, .inner-hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:120px; z-index:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(3,30,34,.55), transparent);
}
.hero h1 em{color:#74e4e8;}
.hero-eyebrow, .inner-hero .eyebrow{color:#bfe9ea;}
.hero .lede, .inner-hero .section-head p{color:#d9eeee !important;}
.hero .btn-outline{border-color:rgba(255,255,255,.55);}
@media (max-width:960px){
  .hero, .inner-hero{background-position:60% 20%;}
  .hero::before, .inner-hero::before{
    background:
      radial-gradient(ellipse 80% 40% at 90% 0%, rgba(255,186,102,.22), transparent 70%),
      linear-gradient(180deg, rgba(3,34,38,.58) 0%, rgba(4,44,48,.76) 38%, rgba(3,34,38,.92) 100%);
  }
}

/* ---------- Photo cards: a teal-ink layer so the words lead and the photo supports ----------
   Slightly quieter photos plus a scrim that is darkest where the text sits. */
.svc-cell::before, .vertical-img-card::before{filter:saturate(.92) brightness(.92);}
.svc-cell::after{
  background:
    linear-gradient(0deg, rgba(3,30,34,.80) 0%, rgba(3,30,34,.65) 38%, rgba(3,30,34,.34) 72%, rgba(3,30,34,.20) 100%);
}
.svc-cell:hover::after{background:linear-gradient(0deg, rgba(3,30,34,.80) 0%, rgba(3,30,34,.60) 40%, rgba(3,30,34,.26) 100%);}
@media (min-width:761px){
  /* only on the photo cards, where text sits on a dark scrim */
  .svc-cell h3{text-shadow:0 1px 12px rgba(0,0,0,.35);}
  .svc-cell p{color:#d3e4e4;}
}
.vertical-img-card::after{
  background:linear-gradient(0deg, rgba(3,30,34,.75) 0%, rgba(3,30,34,.40) 40%, rgba(3,30,34,.16) 70%, rgba(3,30,34,.08) 100%);
}
.vertical-img-card:hover::after{background:linear-gradient(0deg, rgba(3,30,34,.78) 0%, rgba(3,30,34,.55) 50%, rgba(3,30,34,.28) 100%);}
.vic-tag{text-shadow:0 1px 12px rgba(0,0,0,.4);}
@media (max-width:760px){
  .svc-cell::before{filter:none;}   /* phones: photos are small thumbnails beside the text */
}
/* hero chat reads as a friendly chat on top of the photo, in both themes */
.hero .bubble.bot, .hero .chat-typing, .hero .chat-opt{background:#fff; color:#15181d; border-color:rgba(255,255,255,.9); box-shadow:0 14px 30px -16px rgba(0,0,0,.45);}
.hero .chat-opt:hover{background:#eefafa; border-color:#fff;}
.hero .bubble.user{background:var(--accent); color:#fff;}
.hero .bubble .bubble-cta{color:#0a6367;}
.hero .chat-typing span{background:#8a8f96;}
.hero .chat-restart{color:#d9eeee;}
/* homepage hero photo: keep the hall's ceiling fans and rows of students in view */
.hero{background-position:center 35%;}
@media (max-width:960px){.hero{background-position:58% 30%;}}

/* Homepage services: two rows of six, then the way into the full list */
.svc-more{display:flex; align-items:center; justify-content:space-between; gap:18px 28px; flex-wrap:wrap; margin-top:22px; padding:22px 26px; background:var(--surface); border:1px solid var(--line);}
.svc-more p{margin:0; color:var(--ink-soft); font-size:.98rem;}
.svc-more .btn span{display:inline-block; margin-left:6px; transition:transform .2s ease;}
.svc-more .btn:hover span{transform:translateX(4px);}
@media (max-width:760px){
  .svc-more{padding:18px; margin-top:12px;}
  .svc-more .btn{width:100%; display:flex; align-items:center; justify-content:center;}
}

/* Pricing hero: the educator sits on the right, clear of the headline; the teal wash fills the left */
@media (min-width:961px){
  .page-pricing .inner-hero{background-size:auto 150%; background-position:right 28%; background-repeat:no-repeat;}
}
@media (min-width:961px){
  .page-pricing .inner-hero{background-color:#032226;}
  .page-pricing .inner-hero::before{background:
    radial-gradient(ellipse 60% 55% at 88% 0%, rgba(255,186,102,.22), transparent 70%),
    linear-gradient(90deg, #032226 0%, #032226 18%, rgba(3,34,38,.9) 34%, rgba(6,58,62,.5) 62%, rgba(8,70,74,.25) 100%);}
}

/* ---------- Plan pricing: original price, launch offer, wallet credit ---------- */
.plan-was{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; font-size:.85rem; color:var(--ink-faint);}
.plan-was s{text-decoration-color:currentColor;}
.plan-off{font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-deep); padding:3px 8px; border:1px solid currentColor; white-space:nowrap;}
.plan-featured .plan-was{color:rgba(255,255,255,.7);}
.plan-featured .plan-off{color:#fff; border-color:rgba(255,255,255,.5);}
.plan-price{padding-bottom:0; border-bottom:0; margin-bottom:16px;}
.plan-credit{
  display:flex; align-items:flex-start; gap:10px; margin-bottom:26px; padding:14px 16px;
  background:color-mix(in srgb, var(--accent) 8%, var(--surface)); border-left:3px solid var(--accent);
  font-size:.86rem; line-height:1.5; color:var(--ink-soft);
}
.plan-credit svg{flex:none; margin-top:2px; color:var(--accent);}
.plan-credit strong{color:var(--ink-strong); font-weight:700;}
.plan-featured .plan-credit{background:rgba(255,255,255,.14); border-left-color:#fff; color:rgba(255,255,255,.9);}
.plan-featured .plan-credit svg{color:#fff;}
.plan-featured .plan-credit strong{color:#fff;}
@media (max-width:760px){
  .plan-credit{padding:12px 14px; margin-bottom:20px; font-size:.83rem;}
}