/*
Theme Name: Orbitek Hub
Theme URI: https://orbitekhub.com
Author: Orbitek Hub
Author URI: https://orbitekhub.com
Description: Custom WordPress theme for Orbitek Hub — India's blogging & digital independence ecosystem. Includes homepage sections for courses, digital growth services, AI tools, testimonials, creator spotlight, videos and more.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: orbitek-hub
Tags: e-commerce, education, one-column, custom-menu, featured-images, full-width-template, threaded-comments
*/

/* =========================================================
   0. CSS VARIABLES / RESET
   ========================================================= */
:root{
  --red:#E12626;
  --red-dark:#B31414;
  --black:#111111;
  --ink:#1a1a1a;
  --gray-900:#222222;
  --gray-700:#4a4a4a;
  --gray-500:#767676;
  --gray-300:#e2e2e2;
  --gray-100:#f6f6f7;
  --off-white:#fbfbfb;
  --white:#ffffff;
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:24px;
  --shadow-sm:0 2px 8px rgba(17,17,17,.06);
  --shadow-md:0 10px 30px rgba(17,17,17,.10);
  --maxw:1240px;
  --header-h:72px;
  --font-display: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
.ic-sm{display:inline-flex;width:14px;height:14px;flex-shrink:0;color:var(--red);}
.ic-sm svg{width:100%;height:100%;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4,h5{font-family:var(--font-display);margin:0;line-height:1.15;}
p{margin:0;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
:focus-visible{outline:3px solid var(--red);outline-offset:2px;}
[id]{scroll-margin-top:88px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}
}

/* Section spacing rhythm */
.section{padding:64px 0;}
.section-tight{padding:40px 0;}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:12px;}
.section-head h2{font-size:clamp(22px,3vw,30px);font-weight:700;color:var(--black);}
.section-head h2 .accent{color:var(--red);}
.view-all{color:var(--red);font-weight:600;font-size:14px;white-space:nowrap;}
.view-all:hover{text-decoration:underline;}
.eyebrow{display:inline-flex;align-items:center;gap:6px;color:var(--red);font-weight:600;font-size:13px;letter-spacing:.03em;margin-bottom:10px;}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:8px;font-weight:600;font-size:14px;
  border:1px solid transparent;transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--red);color:var(--white);box-shadow:0 6px 16px rgba(225,38,38,.28);}
.btn-primary:hover{background:var(--red-dark);}
.btn-outline{background:var(--white);color:var(--ink);border-color:var(--gray-300);}
.btn-outline:hover{border-color:var(--red);color:var(--red);}
.btn-ghost{background:var(--gray-100);color:var(--ink);}
.btn-ghost:hover{background:var(--gray-300);}
.btn-sm{padding:9px 16px;font-size:13px;border-radius:6px;}
.btn-block{width:100%;}

/* =========================================================
   1. HEADER
   ========================================================= */
.site-header{
  position:sticky;top:0;z-index:200;background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--gray-300);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:var(--header-h,72px);gap:24px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px;color:var(--black);flex-shrink:0;}
.brand-mark{
  position:relative;height:44px;border-radius:10px;background:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  padding:5px 8px;box-shadow:0 2px 10px rgba(17,17,17,.14);
}
.brand-logo-img{height:100%;width:auto;display:block;}
.orbit-ring{
  position:absolute;inset:-7px;border-radius:50%;pointer-events:none;
  animation:orbitekRingSpin 5s linear infinite;
  transform-origin:50% 50%;will-change:transform;backface-visibility:hidden;
}
.orbit-dot{
  position:absolute;top:-2px;left:50%;width:6px;height:6px;margin-left:-3px;
  border-radius:50%;background:var(--red);box-shadow:0 0 6px 1px rgba(225,38,38,.7);
}
.brand:hover .orbit-ring{animation-duration:1.6s;}
@keyframes orbitekRingSpin{
  from{transform:rotate(0deg) translateZ(0);}
  to{transform:rotate(360deg) translateZ(0);}
}
@media (prefers-reduced-motion:reduce){
  .orbit-ring{animation:none;}
}
.screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.main-nav > ul{display:flex;gap:28px;}
.main-nav li{position:relative;}
.main-nav a{font-size:14.5px;font-weight:500;color:var(--gray-700);position:relative;padding:6px 0;}
.main-nav a:hover,.main-nav a.is-active,
.main-nav .current-menu-item > a,.main-nav .current_page_item > a,
.main-nav .current-menu-ancestor > a,.main-nav .current_page_ancestor > a{color:var(--red);}
.main-nav a.is-active::after,
.main-nav .current-menu-item > a::after,.main-nav .current_page_item > a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);border-radius:2px;}

/* Dropdown submenus */
.main-nav li.menu-item-has-children > a{display:inline-flex;align-items:center;gap:5px;}
.main-nav .submenu-toggle{
  background:none;border:none;padding:4px;margin-left:-4px;display:inline-flex;
  align-items:center;justify-content:center;color:inherit;
}
.main-nav .submenu-toggle::after{
  content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .2s ease;
}
.main-nav li.is-sub-open > .submenu-toggle::after{transform:rotate(-135deg);}
.main-nav ul.sub-menu{list-style:none;margin:0;padding:0;}

@media (min-width:861px){
  .main-nav li.menu-item-has-children:hover > ul.sub-menu,
  .main-nav li.menu-item-has-children:focus-within > ul.sub-menu,
  .main-nav li.menu-item-has-children.is-sub-open > ul.sub-menu{
    opacity:1;visibility:visible;transform:translateY(0);
  }
  .main-nav ul.sub-menu{
    position:absolute;top:100%;left:0;min-width:190px;background:#fff;
    border:1px solid var(--gray-300);border-radius:10px;box-shadow:var(--shadow-md);
    padding:8px;display:flex;flex-direction:column;gap:2px;
    opacity:0;visibility:hidden;transform:translateY(6px);pointer-events:none;
    transition:opacity .18s ease, transform .18s ease, visibility .18s;z-index:210;
  }
  .main-nav li.menu-item-has-children:hover > ul.sub-menu,
  .main-nav li.menu-item-has-children:focus-within > ul.sub-menu,
  .main-nav li.menu-item-has-children.is-sub-open > ul.sub-menu{pointer-events:auto;}
  .main-nav ul.sub-menu a{padding:9px 10px;border-radius:6px;font-size:13.5px;white-space:nowrap;display:block;}
  .main-nav ul.sub-menu a:hover{background:var(--gray-100);color:var(--red);}
  /* nested (3rd-level) submenus open to the side */
  .main-nav ul.sub-menu ul.sub-menu{top:-8px;left:100%;}
}

.header-actions{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.icon-btn{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--gray-100);color:var(--gray-700);border:none;}
.icon-btn:hover{background:var(--gray-300);}
.nav-toggle{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:none;border:none;width:40px;height:40px;position:relative;z-index:220;cursor:pointer;padding:0;}
.nav-toggle-line{display:block;width:22px;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s ease, opacity .2s ease;}
/* hamburger -> X when the mobile menu is open (nav and header-actions are siblings in the header markup) */
.main-nav.is-open ~ .header-actions .nav-toggle-line:nth-child(1){transform:translateY(7px) rotate(45deg);}
.main-nav.is-open ~ .header-actions .nav-toggle-line:nth-child(2){opacity:0;}
.main-nav.is-open ~ .header-actions .nav-toggle-line:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* =========================================================
   2. HERO
   ========================================================= */
.hero{padding:56px 0 40px;background:
  radial-gradient(600px 300px at 85% 10%, rgba(225,38,38,.06), transparent 60%),
  var(--white);
}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr .82fr;gap:28px;align-items:center;}
.hero-copy h1{font-size:clamp(32px,4.4vw,48px);font-weight:800;color:var(--black);letter-spacing:-.01em;}
.hero-copy h1 .accent{color:var(--red);}
.hero-copy p{margin-top:14px;color:var(--gray-700);font-size:16px;max-width:46ch;}
.hero-cta{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap;}
.tag-ai{
  display:inline-flex;align-items:center;gap:6px;margin-top:16px;
  background:var(--gray-900);color:#fff;font-size:12.5px;font-weight:700;
  padding:7px 14px;border-radius:20px;transition:background .2s ease;
}
.tag-ai:hover{background:var(--red);}
.hero-stats{display:flex;gap:30px;margin-top:32px;flex-wrap:wrap;}
.hero-stat{display:flex;align-items:center;gap:10px;}
.avatar-stack{display:flex;}
.avatar-stack .dot{
  width:32px;height:32px;border-radius:50%;border:2px solid #fff;margin-left:-10px;
  background:linear-gradient(135deg,#f3b8b8,#e17c7c);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#7a1414;
}
.avatar-stack .dot:first-child{margin-left:0;}
.hero-stat strong{display:block;font-size:16px;color:var(--black);font-variant-numeric:tabular-nums;transition:color .3s ease;}
.hero-stat strong.is-counting{color:var(--red);}
.hero-stat span{font-size:12.5px;color:var(--gray-500);}

/* Hero orbit graphic — animated, continuously revolving, responsive */
.hero-orbit{
  position:relative;width:100%;aspect-ratio:1/1;max-width:340px;margin:0 auto;
  animation:orbit-intro .9s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes orbit-intro{
  from{opacity:0;transform:scale(.82) translateY(10px);}
  to{opacity:1;transform:scale(1) translateY(0);}
}

/* soft glowing halo breathing behind everything */
.orbit-halo{
  position:absolute;inset:8%;border-radius:50%;
  background:radial-gradient(circle, rgba(225,38,38,.16), rgba(225,38,38,0) 68%);
  animation:orbit-halo-pulse 4.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes orbit-halo-pulse{
  0%,100%{transform:scale(.92);opacity:.65;}
  50%{transform:scale(1.08);opacity:1;}
}

/* dashed ring: slow independent spin so the dashes visibly drift */
.orbit-ring{
  position:absolute;inset:0;border-radius:50%;
  border:2px dashed rgba(225,38,38,.28);
  animation:orbit-spin 26s linear infinite;
  will-change:transform;
}

/* rotating "carrier" tracks — full-size, centered, invisible themselves */
.orbit-track{
  position:absolute;inset:0;transform-origin:50% 50%;will-change:transform;
  backface-visibility:hidden;perspective:1000px;
}
.orbit-track-nodes{animation:orbit-spin 13s linear infinite;}
.orbit-track-dots{animation:orbit-spin-reverse 8s linear infinite;}

/* pausing on hover/focus lets users inspect it — also fully respects
   the theme's global prefers-reduced-motion rule above */
.hero-orbit:hover .orbit-track,
.hero-orbit:hover .orbit-ring,
.hero-orbit:hover .orbit-node,
.hero-orbit:focus-within .orbit-track,
.hero-orbit:focus-within .orbit-ring,
.hero-orbit:focus-within .orbit-node{
  animation-play-state:paused;
}

.orbit-core{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:62%;height:62%;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffffff, #f1f1f1 60%);
  box-shadow:0 20px 50px rgba(0,0,0,.15), inset 0 0 0 6px #fff;
  display:flex;align-items:center;justify-content:center;
  animation:orbit-core-breathe 4.5s ease-in-out infinite;
}
@keyframes orbit-core-breathe{
  0%,100%{box-shadow:0 20px 50px rgba(0,0,0,.15), inset 0 0 0 6px #fff, 0 0 0 0 rgba(225,38,38,.18);}
  50%{box-shadow:0 20px 50px rgba(0,0,0,.15), inset 0 0 0 6px #fff, 0 0 0 14px rgba(225,38,38,0);}
}
.orbit-core .core-mark{
  width:78%;height:78%;border-radius:50%;background:#fff;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:8%;
}
.orbit-core .core-mark .core-logo{width:100%;height:100%;object-fit:contain;}

/* each node counter-rotates at the exact same speed as its track so it
   travels around the circle while staying perfectly upright/readable.
   The rotation + intro scale are combined into ONE transform animation
   (rather than mixing the standalone `rotate`/`scale` properties with
   the parent's `transform`) so the browser only has to composite a
   single transform per frame — this is what removes the stutter. */
.orbit-node{
  position:absolute;width:52px;height:52px;border-radius:14px;background:#fff;
  box-shadow:var(--shadow-md);display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:700;color:var(--gray-700);gap:2px;
  animation:orbit-node-counter-spin 13s linear infinite, orbit-node-in .6s ease-out both;
  will-change:transform;backface-visibility:hidden;transform-origin:50% 50%;
  transition:box-shadow .25s ease, background .25s ease, color .25s ease;
}
.orbit-node:hover{
  box-shadow:0 14px 30px rgba(225,38,38,.28);
  background:var(--red);
  color:#fff;
}
.orbit-node.n1{top:2%;left:38%;animation-delay:0s, .05s;}
.orbit-node.n2{top:36%;right:-4%;animation-delay:0s, .15s;}
.orbit-node.n3{bottom:2%;left:38%;animation-delay:0s, .25s;}
.orbit-node.n4{top:36%;left:-4%;animation-delay:0s, .35s;}
@keyframes orbit-node-in{
  from{opacity:0;}
  to{opacity:1;}
}
@keyframes orbit-node-counter-spin{
  from{transform:rotate(0deg) scale(.4);}
  6%{transform:rotate(-21.6deg) scale(1);}
  to{transform:rotate(-360deg) scale(1);}
}

.orbit-dot{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--red);box-shadow:0 0 0 5px rgba(225,38,38,.15);}
.orbit-dot.d1{top:10%;left:8%;}
.orbit-dot.d2{bottom:6%;right:10%;}

@keyframes orbit-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes orbit-spin-reverse{from{transform:rotate(0deg);}to{transform:rotate(-360deg);}}

/* Hero side cards */
.hero-side{display:flex;flex-direction:column;gap:16px;}
.side-card{background:var(--white);border:1px solid var(--gray-300);border-radius:var(--radius-md);padding:16px;box-shadow:var(--shadow-sm);}
.side-card-head{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;margin-bottom:8px;}
.tag-live{display:inline-flex;align-items:center;gap:4px;background:#ffe6e6;color:var(--red);font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:5px;}
.side-card p{font-size:12.5px;color:var(--gray-700);margin-bottom:10px;}
.mini-avatars{display:flex;margin-bottom:10px;}
.mini-avatars .dot{width:26px;height:26px;font-size:10px;}

/* =========================================================
   3. TRUST STRIP
   ========================================================= */
.trust-strip{border-top:1px solid var(--gray-300);border-bottom:1px solid var(--gray-300);background:var(--off-white);}
.trust-grid{display:grid;grid-template-columns:repeat(5,1fr);padding:26px 0;}
.trust-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:0 10px;border-right:1px solid var(--gray-300);}
.trust-item:last-child{border-right:none;}
.trust-item .ic{width:34px;height:34px;color:var(--red);}
.trust-item span{font-size:12.5px;font-weight:600;color:var(--gray-700);}

/* =========================================================
   4. STATS BAND
   ========================================================= */
.stats-band{background:var(--black);}
.stats-grid{display:grid;grid-template-columns:repeat(7,1fr);padding:34px 0;}
.stat-item{text-align:center;padding:0 8px;border-right:1px solid rgba(255,255,255,.12);}
.stat-item:last-child{border-right:none;}
.stat-item strong{display:block;font-size:clamp(18px,2.2vw,26px);font-weight:800;color:var(--red);font-variant-numeric:tabular-nums;transition:color .3s ease, text-shadow .3s ease;}
.stat-item strong.is-counting{color:#ff5252;text-shadow:0 0 18px rgba(255,82,82,.55);}
.stat-item span{font-size:11.5px;color:rgba(255,255,255,.72);}

/* =========================================================
   5. CARD GRIDS (courses, services, tools)
   ========================================================= */
.grid{display:grid;gap:20px;}
.grid-6{grid-template-columns:repeat(6,1fr);}
.grid-7{grid-template-columns:repeat(7,1fr);}
.grid-8{grid-template-columns:repeat(8,1fr);}
.grid-5{grid-template-columns:repeat(5,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}

.course-card{border:1px solid var(--gray-300);border-radius:var(--radius-md);overflow:hidden;background:#fff;transition:box-shadow .2s ease, transform .2s ease;}
.course-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.course-thumb{aspect-ratio:16/10;background:linear-gradient(135deg,var(--gray-900),var(--black));position:relative;display:flex;align-items:center;justify-content:center;}
.course-thumb .glyph{width:34px;height:34px;color:rgba(255,255,255,.85);}
.course-badge{position:absolute;top:8px;left:8px;background:var(--red);color:#fff;font-size:9.5px;font-weight:700;padding:3px 8px;border-radius:5px;}
.course-body{padding:14px;}
.course-body h3{font-size:14px;font-weight:700;margin-bottom:6px;color:var(--black);}
.course-price{color:var(--red);font-weight:800;font-size:15px;margin-bottom:10px;}

.service-card{border:1px solid var(--gray-300);border-radius:var(--radius-md);background:#fff;overflow:hidden;transition:box-shadow .2s ease, transform .2s ease;}
.service-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.service-thumb{aspect-ratio:16/11;background:linear-gradient(160deg,#f6d9d9,#f0efe9);display:flex;align-items:center;justify-content:center;}
.service-thumb .glyph{width:30px;height:30px;color:var(--red-dark);opacity:.75;}
.service-body{padding:14px;}
.service-body h3{font-size:13.5px;font-weight:700;margin-bottom:4px;}
.service-body p{font-size:11.5px;color:var(--gray-500);margin-bottom:10px;}

.tool-card{border:1px solid var(--gray-300);border-radius:var(--radius-md);background:#fff;padding:16px;text-align:left;transition:box-shadow .2s ease, transform .2s ease;}
.tool-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.tool-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.tool-icon svg{width:20px;height:20px;}
.tool-card h3{font-size:13.5px;font-weight:700;margin-bottom:6px;}
.tool-card p{font-size:11.5px;color:var(--gray-500);margin-bottom:14px;min-height:32px;}

/* icon palette variety for tool icons */
.tool-icon.c1{background:#e7f0ff;color:#2563eb;}
.tool-icon.c2{background:#ffe8e8;color:var(--red);}
.tool-icon.c3{background:#e8f9ee;color:#16a34a;}
.tool-icon.c4{background:#fff1db;color:#d97706;}
.tool-icon.c5{background:#ffe6f2;color:#db2777;}
.tool-icon.c6{background:#e9f8f4;color:#0d9488;}
.tool-icon.c7{background:#eee7ff;color:#7c3aed;}
.tool-icon.c8{background:#e6f4ff;color:#0284c7;}

/* =========================================================
   6. TESTIMONIALS
   ========================================================= */
.testi-card{border:1px solid var(--gray-300);border-radius:var(--radius-md);background:#fff;padding:18px;display:flex;flex-direction:column;gap:12px;}
.stars{color:#f5a623;font-size:13px;letter-spacing:2px;}
.testi-card p{font-size:12.5px;color:var(--gray-700);line-height:1.55;flex:1;}
.testi-person{display:flex;align-items:center;gap:10px;}
.testi-person .dot{width:34px;height:34px;font-size:12px;}
.testi-person strong{display:block;font-size:12.5px;}
.testi-person span{font-size:11px;color:var(--gray-500);}

/* =========================================================
   7. CREATOR SPOTLIGHT (carousel)
   ========================================================= */
.spotlight{background:linear-gradient(180deg,#fdeeee,#fff5f5);padding:56px 0;}
.spotlight-head{text-align:center;margin-bottom:28px;}
.spotlight-head h2{font-size:clamp(20px,3vw,26px);font-weight:800;}
.spotlight-head p{color:var(--gray-600);font-size:13.5px;margin-top:6px;}
.carousel-wrap{position:relative;}
.carousel-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 14px;scrollbar-width:none;}
.carousel-track::-webkit-scrollbar{display:none;}
.reel-card{flex:0 0 150px;scroll-snap-align:start;border-radius:var(--radius-md);overflow:hidden;position:relative;aspect-ratio:9/14;
  background:linear-gradient(160deg,var(--gray-900),var(--black));box-shadow:var(--shadow-sm);}
.reel-card.is-active{outline:3px solid var(--red);outline-offset:2px;}
.reel-card.has-link{cursor:pointer;}
.reel-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;color:var(--red);}
.reel-badge{position:absolute;top:8px;left:8px;background:var(--red);color:#fff;font-size:9px;font-weight:700;padding:3px 6px;border-radius:5px;}
.reel-views{position:absolute;bottom:8px;left:8px;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;gap:4px;}
.carousel-nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:#fff;box-shadow:var(--shadow-md);border:none;display:flex;align-items:center;justify-content:center;color:var(--red);z-index:5;}
.carousel-nav.prev{left:-14px;}
.carousel-nav.next{right:-14px;}

/* =========================================================
   8. VIDEOS
   ========================================================= */
.video-card{border-radius:var(--radius-md);overflow:hidden;background:#fff;border:1px solid var(--gray-300);}
.video-thumb{aspect-ratio:16/9;position:relative;display:flex;align-items:flex-end;padding:10px;background:linear-gradient(160deg,var(--gray-900),var(--black));}
.video-thumb.has-video{cursor:pointer;}
.video-thumb .kicker{color:#fff;font-family:var(--font-display);font-weight:800;font-size:16px;line-height:1.05;text-transform:uppercase;}
.video-thumb .kicker em{color:var(--red);font-style:normal;}
.video-time{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.7);color:#fff;font-size:10px;padding:2px 6px;border-radius:4px;}
.video-play{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;color:var(--red);}
.video-body{padding:12px 14px;}
.video-body h4{font-size:13px;font-weight:700;margin-bottom:6px;}
.video-body span{font-size:11px;color:var(--gray-500);}

/* =========================================================
   9. CLIENT QUOTES ROW / BRAND LOGOS
   ========================================================= */
.quote-card{border:1px solid var(--gray-300);border-radius:var(--radius-md);padding:16px;background:#fff;}
.quote-card p{font-size:12px;color:var(--gray-700);line-height:1.55;margin-bottom:12px;}
.quote-person{display:flex;align-items:center;gap:10px;}
.quote-person .dot{width:32px;height:32px;font-size:11px;}
.quote-person strong{display:block;font-size:12px;}
.quote-person span{font-size:10.5px;color:var(--gray-500);}

.brand-strip{display:flex;flex-wrap:wrap;align-items:center;gap:28px;}
.brand-chip{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--gray-700);opacity:.85;}
.brand-chip .sq{width:22px;height:22px;border-radius:5px;background:var(--red);}
.logo-row{display:flex;flex-wrap:wrap;gap:22px;align-items:center;}
.logo-chip{display:flex;align-items:center;gap:6px;font-weight:600;font-size:13px;color:var(--gray-500);}
.logo-chip .dot-ic{width:16px;height:16px;border-radius:50%;background:var(--gray-300);}

/* =========================================================
   10. GLOBAL MAP
   ========================================================= */
.map-region .section-head{align-items:flex-start;}
.map-region .section-head h2{font-size:clamp(20px,2.6vw,28px);margin-top:2px;}
.locate-btn{
  display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:30px;border:1px solid var(--gray-300);
  background:#fff;color:var(--ink);font-size:12.5px;font-weight:600;flex-shrink:0;transition:border-color .15s ease, color .15s ease, background .15s ease, box-shadow .15s ease;
}
.locate-btn svg{width:15px;height:15px;}
.locate-btn:hover{border-color:var(--red);color:var(--red);box-shadow:0 6px 16px rgba(225,38,38,.15);}
.locate-btn.is-loading{opacity:.65;pointer-events:none;}
.locate-btn.is-loading svg{animation:orbit-spin 1s linear infinite;}
.locate-result{font-size:12.5px;font-weight:600;border-radius:8px;padding:10px 14px;margin-bottom:18px;display:inline-block;}
.locate-result.is-error{color:var(--red-dark);background:#fdeaea;border:1px solid #f5c2c2;}
.locate-result:not(.is-error){color:#0f7a3d;background:#e8f9ee;border:1px solid #bfe8cd;}

.map-section{display:grid;grid-template-columns:.85fr 1.15fr;gap:28px;align-items:stretch;}

/* --- region list --- */
.map-list{display:flex;flex-direction:column;gap:8px;}
.map-region-item{
  display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:var(--radius-md);
  border:1px solid var(--gray-300);background:#fff;cursor:pointer;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.map-region-item:hover,.map-region-item:focus-visible,.map-region-item.is-active{
  border-color:var(--red);box-shadow:0 8px 22px rgba(225,38,38,.12);transform:translateX(3px);
}
.map-region-item .flag{font-size:22px;line-height:1;flex-shrink:0;margin-top:1px;}
.map-region-item h4{font-size:13.5px;font-weight:700;margin-bottom:3px;color:var(--black);}
.map-region-item p{font-size:11.5px;color:var(--gray-500);line-height:1.5;}

/* --- the illustrated map canvas --- */
.map-canvas{
  position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:var(--radius-lg);
  background:
    radial-gradient(120% 140% at 15% 0%, rgba(225,38,38,.35), transparent 55%),
    linear-gradient(160deg,#15181f,#0a0b0f 70%);
  border:1px solid #1f232c;box-shadow:inset 0 0 60px rgba(0,0,0,.35);
}
.map-glow{position:absolute;inset:-20%;background:radial-gradient(circle at 30% 25%, rgba(225,38,38,.18), transparent 60%);pointer-events:none;}
.map-world{position:absolute;inset:0;width:100%;height:100%;}
.map-world .land{fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.14);stroke-width:1.5;transition:fill .3s ease;}
.map-canvas:hover .map-world .land{fill:rgba(255,255,255,.1);}
.map-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);background-size:16px 16px;opacity:.5;}

.pin{position:absolute;width:20px;height:20px;border-radius:50% 50% 50% 0;background:var(--red);transform:rotate(-45deg);box-shadow:0 0 0 4px rgba(225,38,38,.2),0 4px 10px rgba(0,0,0,.4);cursor:pointer;transition:transform .15s ease, box-shadow .15s ease;}
.pin::after{content:"";position:absolute;inset:4px;background:#fff;border-radius:50%;}
.pin:hover,.pin:focus-visible,.pin.is-highlighted{transform:rotate(-45deg) scale(1.3);z-index:2;box-shadow:0 0 0 7px rgba(225,38,38,.28),0 4px 14px rgba(0,0,0,.5);}
.pin-tip{
  position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) rotate(45deg);
  background:#fff;color:var(--ink);font-size:10.5px;font-weight:700;padding:5px 10px;border-radius:6px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s ease, transform .15s ease;box-shadow:0 6px 16px rgba(0,0,0,.35);
}
.pin:hover .pin-tip,.pin:focus-visible .pin-tip,.pin.is-highlighted .pin-tip{opacity:1;transform:translateX(-50%) rotate(45deg) translateY(-2px);}
.pin-you{background:#25D366;box-shadow:0 0 0 4px rgba(37,211,102,.25),0 4px 10px rgba(0,0,0,.4);animation:pin-you-pulse 1.8s ease-out infinite;z-index:3;}
.pin-you .pin-tip{opacity:1;background:#25D366;color:#fff;}
@keyframes pin-you-pulse{
  0%{box-shadow:0 0 0 4px rgba(37,211,102,.25),0 0 0 0 rgba(37,211,102,.45);}
  100%{box-shadow:0 0 0 4px rgba(37,211,102,.25),0 0 0 16px rgba(37,211,102,0);}
}

.map-stats{position:absolute;left:16px;bottom:16px;display:flex;gap:8px;flex-wrap:wrap;}
.map-stats span{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:8px 12px;border-radius:10px;
  background:rgba(255,255,255,.08);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14);
  font-size:10px;color:rgba(255,255,255,.7);font-weight:600;
}
.map-stats strong{font-family:var(--font-display);font-size:15px;font-weight:800;color:#fff;}

/* =========================================================
   11. FOOTER
   ========================================================= */
.site-footer{background:var(--black);color:rgba(255,255,255,.78);padding-top:56px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr;gap:28px;padding-bottom:36px;}
.footer-brand .brand{color:#fff;}
.footer-brand p{font-size:12.5px;margin-top:12px;line-height:1.6;color:rgba(255,255,255,.55);}
.footer-social{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;}
.footer-social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#fff;transition:background .18s ease, transform .18s ease;}
.footer-social a svg{width:16px;height:16px;}
.footer-social a:hover{background:var(--red);transform:translateY(-2px);}
.footer-col h5{color:#fff;font-size:13.5px;font-weight:700;margin-bottom:14px;}
.footer-col li{margin-bottom:9px;}
.footer-col a{font-size:12.5px;color:rgba(255,255,255,.62);}
.footer-col a:hover{color:var(--red);}
.footer-form{display:flex;margin-top:12px;border-radius:7px;overflow:hidden;border:1px solid rgba(255,255,255,.18);}
.footer-form input{flex:1;border:none;background:transparent;padding:10px 12px;color:#fff;font-size:12.5px;}
.footer-form input::placeholder{color:rgba(255,255,255,.4);}
.footer-form button{background:var(--red);color:#fff;border:none;padding:0 16px;font-size:12.5px;font-weight:600;}
.footer-contact{font-size:12.5px;margin-top:14px;display:flex;flex-direction:column;gap:8px;color:rgba(255,255,255,.62);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:18px 0;display:flex;justify-content:space-between;font-size:11.5px;color:rgba(255,255,255,.45);flex-wrap:wrap;gap:10px;}
.footer-bottom a{color:rgba(255,255,255,.55);}
.footer-bottom a:hover{color:var(--red);}

/* =========================================================
   12. FLOATING WIDGETS (chat + whatsapp)
   ========================================================= */
.whatsapp-fab{
  position:fixed;left:22px;bottom:calc(22px + env(safe-area-inset-bottom));z-index:300;background:#25D366;color:#fff;
  display:flex;align-items:center;gap:8px;padding:11px 16px;border-radius:30px;font-weight:700;font-size:13px;
  box-shadow:0 10px 24px rgba(37,211,102,.4);transition:transform .2s ease, box-shadow .2s ease;
}
.whatsapp-fab:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 14px 28px rgba(37,211,102,.5);}
.chat-fab{
  position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom));z-index:300;width:56px;height:56px;border-radius:50%;
  background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;border:none;
  box-shadow:0 10px 24px rgba(225,38,38,.4);transition:transform .2s ease, box-shadow .2s ease;flex-shrink:0;
}
.chat-fab svg{width:24px;height:24px;}
.chat-fab:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 14px 28px rgba(225,38,38,.5);}
.chat-fab-badge{
  position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;
  background:#25D366;color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;animation:chat-badge-pop .3s ease;
}
@keyframes chat-badge-pop{from{transform:scale(0);}to{transform:scale(1);}}

.chat-popup{
  position:fixed;right:22px;bottom:calc(88px + env(safe-area-inset-bottom));z-index:299;width:320px;max-width:calc(100vw - 32px);
  background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-md);border:1px solid var(--gray-300);
  overflow:hidden;display:flex;flex-direction:column;height:min(460px, 70vh);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.98);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
  transform-origin:bottom right;
}
.chat-popup.is-open{opacity:1;visibility:visible;transform:translateY(0) scale(1);}
.chat-popup-head{background:var(--red);color:#fff;padding:14px 16px;font-size:13.5px;font-weight:700;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;}
.chat-popup-head button{background:none;border:none;color:#fff;display:flex;padding:2px;border-radius:6px;}
.chat-popup-head button:hover{background:rgba(255,255,255,.2);}
.chat-popup-head svg{width:16px;height:16px;}
.chat-popup-body{padding:12px 14px;display:flex;flex-direction:column;flex:1;min-height:0;gap:10px;}
.chat-messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-right:2px;-webkit-overflow-scrolling:touch;}
.chat-msg{max-width:86%;font-size:12.5px;line-height:1.5;}
.chat-msg p{background:var(--gray-100);color:var(--gray-700);padding:9px 12px;border-radius:12px 12px 12px 3px;margin:0;}
.chat-msg-user{align-self:flex-end;}
.chat-msg-user p{background:var(--red);color:#fff;border-radius:12px 12px 3px 12px;}
.chat-msg-typing{display:flex;gap:4px;padding:9px 12px;background:var(--gray-100);border-radius:12px 12px 12px 3px;width:fit-content;}
.chat-msg-typing span{width:6px;height:6px;border-radius:50%;background:var(--gray-500);animation:chat-typing 1.1s infinite ease-in-out;}
.chat-msg-typing span:nth-child(2){animation-delay:.15s;}
.chat-msg-typing span:nth-child(3){animation-delay:.3s;}
@keyframes chat-typing{0%,60%,100%{opacity:.3;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}
.chat-quick-replies{display:flex;flex-wrap:wrap;gap:6px;flex-shrink:0;}
.chat-opt{flex:1 1 calc(50% - 6px);text-align:center;padding:8px 6px;border:1px solid var(--gray-300);border-radius:7px;background:#fff;font-size:11.5px;transition:border-color .15s ease, color .15s ease;}
.chat-opt:hover{border-color:var(--red);color:var(--red);}
.chat-input-row{display:flex;gap:8px;flex-shrink:0;}
.chat-input-row input{flex:1;border:1px solid var(--gray-300);border-radius:7px;padding:9px 10px;font-size:13px;min-width:0;}
.chat-input-row input:focus{outline:none;border-color:var(--red);}
.chat-input-row button{background:var(--red);color:#fff;border:none;border-radius:7px;width:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:background .15s ease;}
.chat-input-row button:hover{background:var(--red-dark);}
.chat-input-row svg{width:16px;height:16px;}

/* =========================================================
   13. RESPONSIVE
   Mobile-first-friendly granular breakpoints so every section
   reflows smoothly instead of jumping — laptop, tablet & phone.
   ========================================================= */

/* Smooth, GPU-friendly transitions on anything that reflows */
.grid,.hero-grid,.trust-grid,.stats-grid,.footer-grid,.map-section{transition:gap .2s ease;}
.course-card,.service-card,.tool-card,.testi-card,.quote-card,.video-card{transition:box-shadow .2s ease, transform .2s ease;}
.carousel-track{scroll-padding-left:4px;-webkit-overflow-scrolling:touch;}

/* Laptop / small desktop */
@media (max-width:1240px){
  .container{padding:0 20px;}
}
@media (max-width:1080px){
  .grid-8{grid-template-columns:repeat(4,1fr);}
  .grid-7{grid-template-columns:repeat(4,1fr);}
  .grid-6{grid-template-columns:repeat(3,1fr);}
  .grid-5{grid-template-columns:repeat(3,1fr);}
  .stats-grid{grid-template-columns:repeat(4,1fr);}
  .stat-item{border-right:none;padding:10px 8px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .hero-grid{grid-template-columns:1fr 1fr;}
  .hero-side{grid-column:1/-1;flex-direction:row;}
  .side-card{flex:1;}
  .map-section{gap:24px;}
}

/* Tablet landscape */
@media (max-width:900px){
  .section{padding:52px 0;}
  .grid-4{grid-template-columns:repeat(3,1fr);}
  .map-section{grid-template-columns:1fr;}
  .map-canvas{order:-1;aspect-ratio:16/10;}
  .brand-strip{gap:18px;}
}

/* Tablet portrait / mobile nav kicks in */
@media (max-width:860px){
  .main-nav{position:fixed;top:var(--header-h);left:0;right:0;bottom:0;background:#fff;border-bottom:1px solid var(--gray-300);
    max-height:0;overflow-y:auto;overflow-x:hidden;transition:max-height .3s ease;z-index:199;}
  .main-nav.is-open{max-height:calc(100vh - var(--header-h));}
  .main-nav > ul{flex-direction:column;padding:14px 24px 24px;gap:2px;}
  .main-nav a{display:block;padding:12px 0;font-size:15px;}
  .main-nav li.menu-item-has-children > a{display:flex;justify-content:space-between;}
  .main-nav .submenu-toggle{margin-left:0;padding:8px;}
  .main-nav ul.sub-menu{
    max-height:0;overflow:hidden;padding-left:16px;
    transition:max-height .25s ease;
  }
  .main-nav li.is-sub-open > ul.sub-menu{max-height:600px;}
  .main-nav ul.sub-menu a{font-size:14px;padding:10px 0;color:var(--gray-500);}
  .nav-toggle{display:flex;}
  .header-actions .btn-outline{display:none;}
  .hero{padding:36px 0 32px;}
  .hero-grid{grid-template-columns:1fr;gap:32px;}
  .hero-copy{text-align:center;}
  .hero-copy p{margin-left:auto;margin-right:auto;}
  .hero-cta{justify-content:center;}
  .hero-stats{justify-content:center;}
  .hero-orbit{max-width:260px;}
  .hero-side{flex-direction:column;}
  .trust-grid{grid-template-columns:repeat(3,1fr);row-gap:18px;}
  .trust-item{border-right:none;}
  .grid-6,.grid-7,.grid-8,.grid-5,.grid-4{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .stat-item{padding:10px 6px;}
  .section-head{gap:8px;}
  .carousel-nav{display:none;}
  .locate-btn span{display:inline;}
}

/* Large phones */
@media (max-width:640px){
  .section{padding:44px 0;}
  .section-tight{padding:32px 0;}
  .container{padding:0 16px;}
  .grid{gap:14px;}
  .grid-6,.grid-7,.grid-8,.grid-5,.grid-4,.grid-3{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr;gap:32px;}
  .footer-grid .footer-col{border-top:1px solid rgba(255,255,255,.08);padding-top:18px;}
  .footer-brand{border-top:none;padding-top:0;}
  .hero-cta{flex-direction:column;align-items:stretch;}
  .hero-cta .btn{width:100%;}
  .hero-stats{gap:16px;justify-content:space-between;}
  .trust-grid{grid-template-columns:repeat(2,1fr);}
  .reel-card{flex:0 0 130px;}
  .map-region .section-head{flex-direction:column;align-items:stretch;}
  .locate-btn{justify-content:center;}
  .whatsapp-fab span{display:none;}
  .whatsapp-fab{padding:13px;border-radius:50%;}
  .whatsapp-fab,.chat-fab{width:52px;height:52px;}
  .chat-fab{padding:0;}

  /* Support chat becomes a smooth full-width bottom sheet on mobile */
  .chat-popup{
    left:12px;right:12px;bottom:calc(80px + env(safe-area-inset-bottom));
    width:auto;max-width:none;height:min(72vh,520px);
  }
}

/* Single post / page template padding — scale down on phones */
@media (max-width:640px){
  #main-content{padding:36px 16px !important;}
}

/* Small phones */
@media (max-width:480px){
  .grid-6,.grid-7,.grid-8,.grid-5,.grid-4,.grid-3{grid-template-columns:1fr 1fr;}
  .trust-grid{grid-template-columns:repeat(2,1fr);}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .header-inner{height:64px;}
  :root{--header-h:64px;}
  [id]{scroll-margin-top:76px;}
  .brand-mark{height:36px;padding:4px 6px;}
  .hero-copy h1{font-size:clamp(26px,7vw,34px);}
  .oh-modal{max-height:92vh;}
  .chat-popup{left:8px;right:8px;bottom:calc(76px + env(safe-area-inset-bottom));}
  .whatsapp-fab{left:16px;bottom:calc(16px + env(safe-area-inset-bottom));}
  .chat-fab{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));}
}

/* Very small / older phones */
@media (max-width:360px){
  .grid-6,.grid-7,.grid-8,.grid-5,.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}
  .hero-stats{flex-direction:column;align-items:flex-start;gap:10px;}
}

/* =========================================================
   14. MODALS (Login / Join / Creator Application / Video Lightbox)
   ========================================================= */
body.oh-modal-lock{overflow:hidden;}
body.oh-nav-lock{overflow:hidden;}
.oh-modal-overlay{
  position:fixed;inset:0;z-index:600;background:rgba(17,17,17,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;visibility:hidden;transition:opacity .2s ease;
}
.oh-modal-overlay.is-open{opacity:1;visibility:visible;}
.oh-modal{
  position:relative;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
  width:100%;max-width:420px;max-height:88vh;overflow-y:auto;padding:32px 28px 28px;
  transform:translateY(12px);transition:transform .2s ease;
}
.oh-modal-overlay.is-open .oh-modal{transform:translateY(0);}
.oh-modal h3{font-family:var(--font-display);font-size:20px;font-weight:800;margin-bottom:4px;}
.oh-modal-sub{font-size:12.5px;color:var(--gray-500);margin-bottom:16px;}
.oh-modal-close{
  position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;border:none;
  background:var(--gray-100);color:var(--ink);display:flex;align-items:center;justify-content:center;
}
.oh-modal-close:hover{background:var(--gray-300);}
.oh-modal-close svg{width:16px;height:16px;}
.oh-modal-error{
  background:#fdeaea;border:1px solid #f5c2c2;color:var(--red-dark);font-size:12px;
  border-radius:8px;padding:10px 12px;margin-bottom:14px;
}
.oh-modal-error[hidden]{display:none;}
.oh-modal-form{display:flex;flex-direction:column;gap:14px;}
.oh-modal-form label{font-size:12.5px;font-weight:600;color:var(--gray-700);display:flex;flex-direction:column;gap:6px;}
.oh-modal-form input[type="text"],
.oh-modal-form input[type="email"],
.oh-modal-form input[type="tel"],
.oh-modal-form input[type="url"],
.oh-modal-form input[type="password"],
.oh-modal-form input[type="date"],
.oh-modal-form input[type="time"],
.oh-modal-form select,
.oh-modal-form textarea{
  border:1px solid var(--gray-300);border-radius:8px;padding:10px 12px;font-size:13px;
  font-family:var(--font-body);color:var(--ink);background:#fff;
}
.oh-modal-form select{appearance:auto;}
.oh-modal-form input:focus,
.oh-modal-form select:focus,
.oh-modal-form textarea:focus{outline:none;border-color:var(--red);}
.oh-modal-form textarea{resize:vertical;}
.oh-otp-input{
  font-size:26px !important;font-weight:700;letter-spacing:14px;text-align:center;
  padding:12px 10px 12px 22px !important;
}
.oh-modal-check{flex-direction:row !important;align-items:center;gap:8px !important;font-weight:500 !important;}
.oh-modal-check input{width:auto;}
.oh-modal-form .btn{margin-top:4px;}
.oh-modal-link{font-size:12px;color:var(--gray-500);text-align:center;}
.oh-modal-link:hover{color:var(--red);}
.oh-modal-switch{font-size:12.5px;color:var(--gray-500);text-align:center;margin-top:16px;}
.oh-modal-switch a{color:var(--red);font-weight:700;}

.oh-modal-video{max-width:820px;padding:0;background:#000;}
.oh-modal-video .oh-modal-close{background:rgba(255,255,255,.15);color:#fff;top:-44px;right:0;}
.oh-modal-video .oh-modal-close:hover{background:rgba(255,255,255,.3);}
.oh-video-embed{position:relative;width:100%;aspect-ratio:16/9;}
.oh-video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

.oh-toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);z-index:700;
  background:var(--ink);color:#fff;font-size:13px;font-weight:600;padding:12px 20px;
  border-radius:10px;box-shadow:var(--shadow-md);opacity:0;visibility:hidden;
  transition:opacity .2s ease,transform .2s ease;max-width:90vw;text-align:center;
}
.oh-toast.is-open{opacity:1;visibility:visible;transform:translate(-50%,0);}
.oh-toast.is-error{background:var(--red);}

@media (max-width:520px){
  .oh-modal{padding:26px 20px 22px;}
}