/* Techloyce 2026 design tokens */
:root{
  /* Brand */
  --crimson:#F0234C;
  --crimson-deep:#C21038;
  --crimson-soft:#FF5C7A;
  --amber:#FFB81C;
  --amber-soft:#FFD166;

  /* Neutrals — dark */
  --void:#07090F;
  --ink:#0B0E17;
  --ink-2:#11151F;
  --ink-3:#171C29;
  --line-dark:rgba(255,255,255,.09);
  --line-dark-2:rgba(255,255,255,.16);

  /* Neutrals — light */
  --paper:#FAFAFB;
  --paper-2:#F2F3F7;
  --white:#FFFFFF;
  --line:#E6E8EF;
  --slate:#5B6478;
  --slate-2:#8A92A6;

  /* Type */
  --f-display:'Sora',system-ui,sans-serif;
  --f-body:'Inter',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;

  /* Space */
  --max:1240px;
  --r-sm:12px;
  --r:18px;
  --r-lg:28px;
  --r-xl:36px;

  /* Gradients */
  --g-brand:linear-gradient(120deg,var(--crimson) 0%,var(--crimson-deep) 100%);
  --g-fire:linear-gradient(100deg,var(--crimson) 0%,#FF6B4A 48%,var(--amber) 100%);
  --g-text:linear-gradient(100deg,var(--crimson-soft) 0%,#FF8A5B 45%,var(--amber) 100%);
}

/* ------------------------------------------------------------------
   Cascade guard.

   The theme stylesheet sets properties directly on bare elements, e.g.
       h1,h2,h3,h4,h5,h6 { color:#343434 }
       .home h3          { color:#707377 }
       a                 { color:#f82249 }
   A direct rule on an element always beats an inherited value, so
   ".tl-shell{color:#fff}" alone never reaches the headings and they render grey.

   These rules restore the template's own baseline inside .tl-shell. The class is
   doubled so the guard outranks body-class-prefixed theme rules; the real
   template rules below are more specific still, so they continue to win.
   ------------------------------------------------------------------ */
.tl-shell.tl-shell h1,.tl-shell.tl-shell h2,.tl-shell.tl-shell h3,.tl-shell.tl-shell h4,.tl-shell.tl-shell h5,.tl-shell.tl-shell h6{color:inherit;font-family:var(--f-display);text-transform:none;text-shadow:none}
.tl-shell.tl-shell p,.tl-shell.tl-shell li,.tl-shell.tl-shell span,.tl-shell.tl-shell em,.tl-shell.tl-shell strong,.tl-shell.tl-shell blockquote,.tl-shell.tl-shell figure,.tl-shell.tl-shell td,.tl-shell.tl-shell th,.tl-shell.tl-shell label{color:inherit}
.tl-shell.tl-shell a{color:inherit;background-color:transparent;text-decoration:none}
.tl-shell.tl-shell button,.tl-shell.tl-shell input,.tl-shell.tl-shell select,.tl-shell.tl-shell textarea{color:inherit;font-family:inherit;text-transform:none}
.tl-shell.tl-shell table{background-color:transparent}
.tl-shell.tl-shell blockquote,.tl-shell.tl-shell figure{margin:0;padding:0;border:0}
.tl-shell.tl-shell img{box-shadow:none}

/* ------------------------------------------------------------------
   Class-name collisions.

   Bootstrap defines .btn, .badge and .mark; the theme defines .nav-menu.
   Our markup reuses those names, so the foreign rules bleed in - Bootstrap's
   .badge{background-color:#777;border-radius:10px} was rendering the
   "Zoho Premium Partner" label as a grey pill, and .mark{background:#fcf8e3}
   puts a yellow highlight behind the quote marks.

   These reset only what the foreign rules inject. They sit above the real
   rules and share their specificity, so the design's own styling still wins.
   ------------------------------------------------------------------ */
.tl-shell .btn{background-image:none;border:0;box-shadow:none;text-shadow:none;
  text-transform:none;letter-spacing:normal;margin-bottom:0;white-space:normal;
  line-height:inherit;text-align:center;vertical-align:middle}
.tl-shell .badge{background:none;background-color:transparent;border-radius:0;padding:0;
  min-width:0;line-height:inherit;text-align:inherit;vertical-align:baseline;
  white-space:normal;font-size:inherit;font-weight:inherit;color:inherit}
.tl-shell .mark{background:none;background-color:transparent;padding:0;color:inherit}
.tl-shell .nav-menu{margin:0;padding:0;list-style:none}
.tl-shell .nav{margin:0;padding:0;list-style:none}




.tl-shell,.tl-shell *{margin:0;padding:0;box-sizing:border-box}
.tl-shell{scroll-behavior:smooth}
.tl-shell{
  font-family:var(--f-body);
  background:var(--void);
  color:#fff;
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
.tl-shell img{max-width:100%;display:block}
.tl-shell a{color:inherit;text-decoration:none}
.tl-shell button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
.tl-shell ul{list-style:none}
.tl-shell .wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.tl-shell h1,.tl-shell h2,.tl-shell h3,.tl-shell h4{font-family:var(--f-display);line-height:1.1;letter-spacing:-.028em;font-weight:700}
.tl-shell h1{font-size:clamp(38px,5.6vw,68px);font-weight:800;letter-spacing:-.035em}
.tl-shell h2{font-size:clamp(30px,4vw,50px)}
.tl-shell h3{font-size:clamp(19px,2vw,24px)}
.tl-shell .lede-dark{color:var(--slate)}
.tl-shell .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f-display);font-weight:600;font-size:15px;
  padding:14px 26px;border-radius:999px;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s,color .25s;
  white-space:nowrap;
}
.tl-shell .btn svg{width:16px;height:16px;transition:transform .25s}
.tl-shell .btn:hover svg{transform:translateX(3px)}
.tl-shell .btn-primary{background:var(--g-brand);color:#fff;box-shadow:0 10px 30px -8px rgba(240,35,76,.55)}
.tl-shell .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -8px rgba(240,35,76,.7)}
.tl-shell .btn-light{background:#fff;color:var(--ink)}
.tl-shell .btn-light:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(0,0,0,.35)}
.tl-shell .btn-sm{padding:10px 20px;font-size:13.5px}
.tl-shell .utility{
  background:var(--ink);border-bottom:1px solid var(--line-dark);
  font-size:13px;position:relative;z-index:60;
}
.tl-shell .utility .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:44px}
.tl-shell .utility-left{display:flex;align-items:center;gap:22px;color:#8A92A6}
.tl-shell .utility-left a{display:inline-flex;align-items:center;gap:7px;transition:color .2s}
.tl-shell .utility-left a:hover{color:#fff}
.tl-shell .utility-left svg{width:14px;height:14px;color:var(--crimson-soft)}
.tl-shell .utility-right{display:flex;align-items:center;gap:10px}
.tl-shell .u-pill{
  display:inline-flex;align-items:center;gap:7px;padding:6px 15px;border-radius:999px;
  border:1px solid var(--line-dark-2);font-size:12.5px;font-weight:500;transition:.2s;
}
.tl-shell .u-pill:hover{background:rgba(255,255,255,.08)}
.tl-shell .utility-flags{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#6B7280}
@media(max-width:900px){.tl-shell .utility-left{display:none}}
.tl-shell .nav{position:sticky;top:0;z-index:50;background:#0B0E17;border-bottom:1px solid var(--line-dark);}
.tl-shell .nav .wrap{display:flex;align-items:center;gap:26px;height:74px}
.tl-shell .brand{display:flex;align-items:center;gap:12px;flex:none}
.tl-shell .brand .bmark{height:34px;width:auto;display:block}
.tl-shell .brand .bword{height:24px;width:auto;display:block;filter:brightness(0) invert(1)}
.tl-shell .nav-menu{display:flex;align-items:center;gap:2px;margin-left:auto}
.tl-shell .nav-item{position:relative}
.tl-shell .nav-link{
  display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:10px;
  font-size:14.5px;font-weight:500;color:#C3C9D8;transition:.2s;white-space:nowrap;
}
.tl-shell .nav-link:hover,.tl-shell .nav-item:hover .nav-link{color:#fff;background:rgba(255,255,255,.06)}
.tl-shell .nav-link .chev{width:11px;height:11px;opacity:.6;transition:transform .25s}
.tl-shell .nav-item:hover .chev{transform:rotate(180deg)}
.tl-shell .mega{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(8px);
  background:rgba(17,21,31,.97);backdrop-filter:blur(24px);
  border:1px solid var(--line-dark-2);border-radius:var(--r-lg);
  padding:26px;box-shadow:0 30px 70px -20px rgba(0,0,0,.85);
  opacity:0;visibility:hidden;transition:.25s cubic-bezier(.2,.8,.2,1);
}
.tl-shell .nav-item:hover .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.tl-shell .mega::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.tl-shell .mega-wide{width:min(880px,90vw)}
.tl-shell .mega-narrow{width:min(560px,90vw)}
.tl-shell .mega-slim{width:250px;left:0;transform:translateX(0) translateY(8px)}
.tl-shell .nav-item:hover .mega-slim{transform:translateX(0) translateY(0)}
.tl-shell .mega-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 24px}
.tl-shell .mega-cols-3{grid-template-columns:repeat(3,1fr)}
.tl-shell .mega-cols-2{grid-template-columns:repeat(2,1fr)}
.tl-shell .mega-cols-1{grid-template-columns:1fr}
.tl-shell .mega-group{margin-bottom:14px}
.tl-shell .mega-group h5{
  font-family:var(--f-display);font-size:13px;font-weight:600;
  color:var(--amber);margin-bottom:9px;padding-left:10px;
}
.tl-shell .mega-link{
  display:block;padding:7px 10px;border-radius:8px;font-size:13.5px;
  color:#B4BBCC;transition:.16s;
}
.tl-shell .mega-link:hover{background:rgba(240,35,76,.14);color:#fff;transform:translateX(3px)}
.tl-shell .mega-foot{
  margin-top:18px;padding-top:18px;border-top:1px solid var(--line-dark);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.tl-shell .mega-foot span{font-size:13px;color:var(--slate-2)}
.tl-shell .mega-cta{
  display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;
  color:var(--crimson-soft);font-family:var(--f-display);
}
.tl-shell .mega-cta:hover{color:#fff}
.tl-shell .nav-actions{display:flex;align-items:center;gap:10px;flex:none}
@media(max-width:1180px){.tl-shell .nav-menu{display:none}
.tl-shell .burger{display:flex}}
@media(max-width:600px){.tl-shell .nav-actions .btn{display:none}}
@media(min-width:1181px){.tl-shell .mnav{display:none}}
.tl-shell .hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes ping2{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes grow{to{transform:scaleY(1)}}
@keyframes blink{50%{opacity:0}}
@media(max-width:1020px){.tl-shell .hero .wrap{grid-template-columns:1fr;gap:56px}}
@keyframes slide{to{transform:translateX(-50%)}}
.tl-shell .plogo{
  flex:0 0 auto;box-sizing:border-box;
  width:186px;height:82px;padding:14px 18px;border-radius:16px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  background:rgba(255,255,255,.03);border:1px solid var(--line-dark);
  transition:background .25s,border-color .25s;
}
.tl-shell .plogo:hover{background:rgba(255,255,255,.07);border-color:rgba(240,35,76,.35)}
.tl-shell .plogo .pimg{display:flex;align-items:center;justify-content:center;gap:9px}
.tl-shell .plogo .pimg img{
  width:21px;height:21px;flex:none;object-fit:contain;
  /* renders every mark as a clean white glyph on the dark tile.
     Delete this line to show the logos in their own brand colours. */
  filter:brightness(0) invert(1);
  opacity:.92;transition:opacity .25s;
}
.tl-shell .plogo:hover .pimg img{opacity:1}
.tl-shell .plogo .pn{font-family:var(--f-display);font-weight:600;font-size:15.5px;color:#fff;white-space:nowrap}
.tl-shell .plogo .pt{font-size:11.5px;color:var(--amber);text-align:center;line-height:1.25}
.tl-shell .ilink{color:var(--crimson-soft);font-weight:600;border-bottom:1px solid rgba(255,92,122,.4);transition:.2s}
.tl-shell .ilink:hover{color:#fff;border-color:#fff}
.tl-shell .ai-sec .wrap{position:relative;z-index:2}
@keyframes nudge{0%,100%{transform:translateX(0);opacity:.55}50%{transform:translateX(7px);opacity:1}}
@media(max-width:1020px){@keyframes nudge{0%,100%{transform:rotate(90deg) translateX(0);opacity:.55}50%{transform:rotate(90deg) translateX(7px);opacity:1}}}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tl-shell .bx-num{font-family:var(--f-display);font-size:44px;font-weight:800;letter-spacing:-.04em;line-height:1;margin-bottom:8px}
.tl-shell .bx-num em{font-style:normal;background:var(--g-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.tl-shell .orbit-sec .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
@media(max-width:960px){.tl-shell .orbit-sec .wrap{grid-template-columns:1fr;gap:48px}}
.tl-shell .foot{background:var(--ink);border-top:1px solid var(--line-dark);padding:76px 0 0;position:relative;overflow:hidden}
.tl-shell .foot-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:44px 32px;padding-bottom:56px}
.tl-shell .foot-brand .brand{margin-bottom:20px}
.tl-shell .foot-brand p{font-size:14px;color:#8A92A6;line-height:1.7;max-width:290px;margin-bottom:22px}
.tl-shell .socials{display:flex;gap:9px}
.tl-shell .socials a{
  width:38px;height:38px;border-radius:11px;border:1px solid var(--line-dark-2);
  display:flex;align-items:center;justify-content:center;color:#8A92A6;transition:.25s;
}
.tl-shell .socials a:hover{background:var(--g-brand);border-color:transparent;color:#fff;transform:translateY(-3px)}
.tl-shell .socials svg{width:16px;height:16px}
.tl-shell .fcol h5{
  font-family:var(--f-display);font-size:14.5px;font-weight:600;
  color:var(--amber);margin-bottom:18px;
}
.tl-shell .fcol li{margin-bottom:11px}
.tl-shell .fcol a{font-size:13.8px;color:#9AA2B6;transition:.2s}
.tl-shell .fcol a:hover{color:#fff;padding-left:4px}
.tl-shell .foot-bar{
  border-top:1px solid var(--line-dark);padding:24px 0;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:13px;color:var(--slate-2);
}
.tl-shell .foot-bar .legal{display:flex;gap:22px}
.tl-shell .foot-bar .legal a:hover{color:#fff}
.tl-shell .wordmark{
  font-family:var(--f-display);font-weight:800;letter-spacing:-.04em;
  font-size:clamp(40px,12.2vw,176px);line-height:.9;text-align:center;white-space:nowrap;
  background:linear-gradient(180deg,rgba(255,255,255,.055),transparent 78%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:6px;user-select:none;
}
@media(max-width:1020px){.tl-shell .foot-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:640px){.tl-shell .foot-grid{grid-template-columns:1fr 1fr;gap:32px 20px}}
@media(prefers-reduced-motion:reduce){.tl-shell,.tl-shell *,.tl-shell *::before,.tl-shell *::after{animation:none!important;transition-duration:.01ms!important}}
/* Bootstrap/theme .btn leaks into our scopes; reset what we don't set. */


/* Cart button carried over from the previous theme header. */
.tl-shell .nav-cart{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:999px;color:#fff;
  border:1px solid var(--line-dark-2);background:rgba(255,255,255,.04);
  transition:background .2s ease,border-color .2s ease;
}
.tl-shell .nav-cart:hover{background:rgba(255,255,255,.09);border-color:var(--crimson-soft)}
.tl-shell .nav-cart .cart-count{
  position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:var(--crimson);color:#fff;
  font:600 11px/18px var(--f-body);text-align:center;
}
@media (max-width:1180px){ .tl-shell .nav-cart{width:36px;height:36px} }

/* The mobile drawer's .tl-shell wrapper is a zero-height positioning host,
   not a surface - it must not paint the scoped background over the page. */
.tl-shell-overlay{background:none;overflow:visible;font-size:inherit;line-height:inherit}

/* The theme sets body{background:#fff}. On the redesigned front page that
   shows as white bands around the dark sections, so match the shell. */
/* The header is opaque, but the shell wrapper no longer paints a
   backdrop (display:contents). The home page is dark end to end;
   inner pages keep the theme background. */
body.tl-2026.home{background:#07090F}

/* The template had overflow-x:hidden on <body>. Scoping it to .tl-shell made
   that wrapper a clipping box, which cut off the mega panels and broke the
   sticky nav. It belongs on the document body. */
body.tl-2026{overflow-x:hidden}
/* clip does not create a scroll container, so the sticky nav keeps working.
   hidden stays above as the fallback for browsers without clip. */
@supports (overflow-x:clip){body.tl-2026{overflow-x:clip}}


/* ------------------------------------------------------------------
   Mobile drawer.

   The drawer is built by tl-shell.js at runtime, so its classes never
   appear in the static markup. The original stylesheet split therefore
   misfiled these rules into tl-home.css as ".tl-home .mnav..." - which
   matches nothing, because the drawer lives inside .tl-shell. The panel
   stayed invisible while the burger still toggled to its close icon.

   Rebuilt here from the source template and scoped to .tl-shell.
   body.mnav-lock stays a body selector: the JS sets it on <body>.
   ------------------------------------------------------------------ */
.tl-shell .burger{display:none;width:42px;height:42px;border-radius:11px;border:1px solid var(--line-dark-2);align-items:center;justify-content:center}
.tl-shell .burger svg{width:19px;height:19px}
@media(max-width:1180px){
  .tl-shell .burger{display:flex}
}
.tl-shell .burger{background:transparent;color:#fff;cursor:pointer}
.tl-shell .burger.is-open .ico-open{display:none}
.tl-shell .burger .ico-close{display:none}
.tl-shell .burger.is-open .ico-close{display:block}
.tl-shell .mnav{position:fixed;inset:0;z-index:120; visibility:hidden;opacity:0;transition:opacity .28s ease,visibility .28s ease;}
.tl-shell .mnav.open{visibility:visible;opacity:1}
.tl-shell .mnav-scrim{position:absolute;inset:0;background:rgba(5,7,12,.66);backdrop-filter:blur(4px)}
.tl-shell .mnav-panel{position:absolute;top:0;right:0;bottom:0; width:min(420px,88vw); background:var(--ink-2);border-left:1px solid var(--line-dark-2); display:flex;flex-direction:column; transform:translateX(102%);transition:transform .32s cubic-bezier(.2,.8,.2,1); box-shadow:-24px 0 60px -20px rgba(0,0,0,.9);}
.tl-shell .mnav.open .mnav-panel{transform:translateX(0)}
.tl-shell .mnav-head{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:16px 18px;border-bottom:1px solid var(--line-dark);flex:none;}
.tl-shell .mnav-head img{height:30px;width:auto}  /* the TL mark is already coloured - no invert */
.tl-shell .mnav-close{width:40px;height:40px;border-radius:11px;border:1px solid var(--line-dark-2); background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.tl-shell .mnav-close svg{width:18px;height:18px}
.tl-shell .mnav-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:10px 12px 26px}
.tl-shell .mnav-sec{border-bottom:1px solid var(--line-dark)}
.tl-shell .mnav-row{display:flex;align-items:center}
.tl-shell .mnav-top{flex:1;display:block;padding:15px 10px; font-family:var(--f-display);font-size:16px;font-weight:600;color:#E8EBF2; background:transparent;border:0;text-align:left;cursor:pointer;}
.tl-shell .mnav-tog{width:44px;height:44px;flex:none;border:0;background:transparent;color:#8A92A6; display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:10px;}
.tl-shell .mnav-tog svg{width:15px;height:15px;transition:transform .26s}
.tl-shell .mnav-sec.open .mnav-tog{color:var(--crimson-soft)}
.tl-shell .mnav-sec.open .mnav-tog svg{transform:rotate(180deg)}
.tl-shell .mnav-sub{max-height:0;overflow:hidden;transition:max-height .32s cubic-bezier(.2,.8,.2,1)}
.tl-shell .mnav-sub-in{padding:2px 0 14px}
.tl-shell .mnav-h5{font-family:var(--f-display);font-size:12px;font-weight:600;letter-spacing:.04em; text-transform:uppercase;color:var(--amber);margin:12px 0 5px;padding-left:14px;}
.tl-shell .mnav-link{display:block;padding:10px 14px;border-radius:9px; font-size:14.5px;color:#AFB7C9;}
.tl-shell .mnav-link:active,.tl-shell .mnav-link:hover{background:rgba(240,35,76,.14);color:#fff}
.tl-shell .mnav-foot{flex:none;padding:16px 18px;border-top:1px solid var(--line-dark)}
.tl-shell .mnav-foot .btn{width:100%;justify-content:center}
body.mnav-lock{overflow:hidden}
@media(min-width:1181px){
  .tl-shell .mnav{display:none}
}

/* Below the breakpoint .nav-menu is display:none, and it was the only element
   carrying margin-left:auto - so the burger ended up beside the logo instead
   of at the right edge. Hand that job to .nav-actions on mobile. */
@media(max-width:1180px){
  .tl-shell .nav-actions{margin-left:auto}
}

/* ------------------------------------------------------------------
   Sticky nav.

   .nav is position:sticky, but a sticky element only sticks while its
   containing block is on screen - and the .tl-shell wrapper around the
   header is only as tall as the utility bar plus the nav, so it scrolled
   away instantly. display:contents removes the wrapper's box (the element
   stays in the DOM, so every .tl-shell scoped rule still matches), which
   hands the nav's containing block to <body> and lets it stick properly.
   Only the header shell is affected; the footer wrapper keeps its box.
   ------------------------------------------------------------------ */
.tl-shell-head{display:contents}

/* The template had scroll-behavior on <html>; scoping moved it onto .tl-shell
   and .tl-home, where it does nothing - the scroll container is <html>. Put it
   back, and reserve room so the sticky nav does not cover an anchor target. */
html{scroll-behavior:smooth;scroll-padding-top:86px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}