/*
Theme Name: Twitch Overlay Design Pro
Theme URI: https://twitchoverlaydesign.com/
Author: Twitch Overlay Design
Author URI: https://twitchoverlaydesign.com/
Description: A premium responsive WordPress theme for custom Twitch overlays, animated emotes, stream alerts, creator logos and complete stream branding services.
Version: 2.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twitch-overlay-design-pro
Tags: custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, blog, portfolio, e-commerce, full-width-template
*/

:root {
  --tod-bg: #070712;
  --tod-bg-soft: #0d0d1d;
  --tod-surface: rgba(17, 18, 38, .82);
  --tod-surface-strong: #111226;
  --tod-text: #f6f4ff;
  --tod-muted: #aaa8be;
  --tod-purple: #8b3dff;
  --tod-violet: #b45cff;
  --tod-cyan: #35d4ff;
  --tod-pink: #ff4fd8;
  --tod-green: #31d27c;
  --tod-border: rgba(171, 128, 255, .22);
  --tod-shadow: 0 24px 70px rgba(0, 0, 0, .35);
  --tod-radius: 22px;
  --tod-container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--tod-text);
  background:
    radial-gradient(circle at 80% 6%, rgba(122, 44, 255, .20), transparent 30%),
    radial-gradient(circle at 10% 18%, rgba(24, 150, 255, .11), transparent 28%),
    linear-gradient(180deg, #060611 0%, #080816 50%, #05050e 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
  min-height: 100vh;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .35;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--tod-cyan); text-decoration: none; }
a:hover { color: white; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
::selection { background: rgba(139, 61, 255, .55); color: white; }

.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
}
.screen-reader-text:focus, .skip-link:focus {
  clip: auto !important; clip-path: none; height: auto; width: auto;
  top: 12px; left: 12px; z-index: 99999; padding: 12px 16px;
  background: white; color: #111; border-radius: 8px;
}

.tod-container { width: min(calc(100% - 40px), var(--tod-container)); margin-inline: auto; }
.tod-section { padding: 96px 0; position: relative; }
.tod-section-sm { padding: 64px 0; }
.tod-section-title { max-width: 760px; margin: 0 auto 46px; text-align: center; }
.tod-kicker {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px;
  color: #d2b9ff; text-transform: uppercase; letter-spacing: .16em; font-size: .77rem; font-weight: 800;
}
.tod-kicker::before { content: ""; width: 30px; height: 2px; background: linear-gradient(90deg, var(--tod-purple), var(--tod-cyan)); }
h1, h2, h3, h4 { line-height: 1.12; margin: 0 0 .65em; letter-spacing: -.035em; }
h1 { font-size: clamp(2.8rem, 7vw, 5.7rem); }
h2 { font-size: clamp(2rem, 4.8vw, 3.7rem); }
h3 { font-size: clamp(1.18rem, 2vw, 1.55rem); }
p { margin: 0 0 1.25em; color: var(--tod-muted); }
.tod-gradient-text {
  background: linear-gradient(110deg, #ffffff 0%, #c79cff 42%, #5ddcff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tod-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
  background: linear-gradient(135deg, var(--tod-purple), #5b2ee8); color: white; font-weight: 800;
  box-shadow: 0 13px 35px rgba(107, 46, 232, .28); transition: transform .2s, box-shadow .2s, border-color .2s;
}
.tod-button:hover { color: white; transform: translateY(-2px); box-shadow: 0 18px 44px rgba(107, 46, 232, .36); }
.tod-button--ghost { background: rgba(255,255,255,.035); box-shadow: none; border-color: var(--tod-border); }
.tod-button--ghost:hover { border-color: rgba(180,92,255,.65); background: rgba(139,61,255,.09); }
.tod-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Header */
.tod-site-header {
  position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(18px);
  background: rgba(6, 6, 17, .78); border-bottom: 1px solid rgba(255,255,255,.06);
}
.tod-header-inner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.tod-brand { display: inline-flex; align-items: center; gap: 12px; color: white; font-weight: 900; letter-spacing: -.02em; }
.tod-brand:hover { color: white; }
.tod-brand-mark {
  width: 43px; height: 43px; display: grid; place-items: center; border-radius: 12px;
  background: linear-gradient(145deg, #a34dff, #5a23e5 58%, #1bc8ff); box-shadow: 0 10px 26px rgba(121, 49, 255, .35);
}
.tod-brand-mark svg { width: 28px; height: 28px; }
.tod-brand-text small { display: block; font-size: .65rem; letter-spacing: .18em; color: #bf91ff; text-transform: uppercase; }
.custom-logo { max-height: 52px; width: auto; }
.tod-nav-wrap { display: flex; align-items: center; gap: 28px; }
.tod-primary-menu { display: flex; gap: 26px; list-style: none; padding: 0; margin: 0; align-items: center; }
.tod-primary-menu a { color: #d8d6e4; font-size: .94rem; font-weight: 650; }
.tod-primary-menu a:hover, .tod-primary-menu .current-menu-item > a { color: white; }
.tod-menu-toggle { display: none; width: 46px; height: 46px; border: 1px solid var(--tod-border); background: var(--tod-surface); color: white; border-radius: 12px; }

/* Hero */
.tod-hero { min-height: 720px; display: grid; align-items: center; padding: 92px 0 76px; overflow: hidden; position: relative; }
.tod-hero::after {
  content: ""; position: absolute; width: 620px; height: 620px; right: -220px; top: -150px;
  background: radial-gradient(circle, rgba(148, 69, 255, .22), transparent 66%); filter: blur(3px); z-index: -1;
}
.tod-hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 64px; align-items: center; }
.tod-hero-copy p { max-width: 650px; font-size: 1.1rem; }
.tod-hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 32px; }
.tod-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.035); border-radius: 999px; color: #dcd8e9; font-size: .82rem; font-weight: 700;
}
.tod-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--tod-cyan); box-shadow: 0 0 12px var(--tod-cyan); }
.tod-hero-visual { position: relative; }
.tod-hero-visual::before { content:""; position:absolute; inset: 9% 5%; background: #722cff; filter: blur(90px); opacity:.24; }
.tod-hero-visual img { position: relative; width: 100%; filter: drop-shadow(0 30px 55px rgba(0,0,0,.6)); }
.tod-trustbar { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 62px; }
.tod-trustitem { padding: 17px 14px; text-align:center; border:1px solid rgba(255,255,255,.06); border-radius: 14px; background: rgba(255,255,255,.028); }
.tod-trustitem strong { display:block; color:white; font-size:.92rem; }
.tod-trustitem span { color:var(--tod-muted); font-size:.76rem; }

/* Cards */
.tod-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.tod-card {
  position: relative; overflow: hidden; padding: 18px; border: 1px solid var(--tod-border); border-radius: var(--tod-radius);
  background: linear-gradient(160deg, rgba(22,23,48,.96), rgba(10,10,23,.94)); box-shadow: var(--tod-shadow);
  transition: transform .25s, border-color .25s;
}
.tod-card:hover { transform: translateY(-7px); border-color: rgba(168,104,255,.55); }
.tod-card-media { height: 190px; border-radius: 15px; overflow: hidden; background: #0b0a19; margin-bottom: 20px; }
.tod-card-media img { width: 100%; height: 100%; object-fit: cover; }
.tod-card h3 { margin-bottom: 9px; }
.tod-card p { font-size: .91rem; }
.tod-card-link { display: inline-flex; align-items:center; gap:8px; font-weight:800; color:#c9a8ff; font-size:.88rem; }

/* Feature split */
.tod-split { display:grid; grid-template-columns: .95fr 1.05fr; align-items:center; gap:70px; }
.tod-split--reverse { grid-template-columns: 1.05fr .95fr; }
.tod-panel {
  border: 1px solid var(--tod-border); border-radius: 28px; padding: 26px;
  background: linear-gradient(150deg, rgba(21,22,46,.94), rgba(8,8,19,.95)); box-shadow: var(--tod-shadow);
}
.tod-panel img { border-radius: 20px; }
.tod-check-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin: 28px 0; }
.tod-check { display:flex; align-items:flex-start; gap:11px; padding:14px; border:1px solid rgba(255,255,255,.07); border-radius:13px; background:rgba(255,255,255,.025); color:#dedbea; font-size:.91rem; }
.tod-check::before { content:"✓"; flex:0 0 auto; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:rgba(49,210,124,.15); color:#6cf1a6; font-weight:900; }
.tod-tag-list { display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.tod-tag { padding:8px 11px; border-radius:9px; background:rgba(139,61,255,.10); border:1px solid rgba(167,99,255,.22); color:#d9c6ff; font-size:.8rem; font-weight:700; }

/* Process */
.tod-process { display:grid; grid-template-columns: repeat(4,1fr); gap:18px; counter-reset: process; }
.tod-step { counter-increment: process; padding:26px; border:1px solid rgba(255,255,255,.08); border-radius:18px; background:rgba(255,255,255,.025); }
.tod-step::before { content:"0" counter(process); display:block; margin-bottom:24px; color:#b77dff; font-size:1.7rem; font-weight:900; }
.tod-step p { font-size:.9rem; margin:0; }

/* CTA */
.tod-cta {
  padding: 44px; border-radius: 28px; border:1px solid rgba(182,112,255,.35);
  background:
    radial-gradient(circle at 83% 20%, rgba(46,207,255,.18), transparent 30%),
    linear-gradient(135deg, rgba(104,35,228,.72), rgba(20,12,50,.95));
  display:grid; grid-template-columns: 1fr auto; gap:30px; align-items:center; box-shadow:var(--tod-shadow);
}
.tod-cta h2 { font-size:clamp(1.8rem,4vw,3.1rem); margin-bottom:10px; }
.tod-cta p { margin:0; max-width:700px; color:#d7cfee; }

/* Inner hero */
.tod-page-hero { padding: 90px 0 62px; text-align:center; position:relative; }
.tod-page-hero p { max-width:720px; margin-inline:auto; font-size:1.05rem; }
.tod-breadcrumbs { display:flex; justify-content:center; gap:8px; margin-bottom:20px; color:#9b98ae; font-size:.84rem; }

/* Blog */
.tod-post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.tod-post-card { overflow:hidden; border:1px solid var(--tod-border); border-radius:20px; background:var(--tod-surface); }
.tod-post-thumb { height:220px; overflow:hidden; background:#111; }
.tod-post-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.tod-post-card:hover .tod-post-thumb img { transform:scale(1.04); }
.tod-post-body { padding:23px; }
.tod-post-meta { color:#a999bd; font-size:.78rem; margin-bottom:11px; }
.tod-post-body h2, .tod-post-body h3 { font-size:1.35rem; }
.tod-post-body h2 a, .tod-post-body h3 a { color:white; }
.tod-pagination { margin-top:42px; }
.nav-links { display:flex; flex-wrap:wrap; gap:8px; }
.page-numbers { display:grid; place-items:center; min-width:42px; height:42px; padding:0 12px; border-radius:10px; border:1px solid var(--tod-border); background:var(--tod-surface); }
.page-numbers.current { background:var(--tod-purple); color:white; }

/* Article */
.tod-content-wrap { width:min(calc(100% - 40px), 860px); margin:0 auto; }
.tod-entry { padding:55px; border:1px solid rgba(255,255,255,.08); border-radius:24px; background:rgba(12,12,27,.78); }
.tod-entry h1 { font-size:clamp(2.3rem,5vw,4.2rem); }
.tod-entry h2 { font-size:2rem; margin-top:1.6em; }
.tod-entry h3 { margin-top:1.5em; }
.tod-entry p, .tod-entry li { color:#c3c0ce; }
.tod-entry blockquote { margin:28px 0; padding:20px 24px; border-left:4px solid var(--tod-purple); background:rgba(139,61,255,.08); }
.tod-entry table { width:100%; border-collapse:collapse; }
.tod-entry td, .tod-entry th { padding:12px; border:1px solid rgba(255,255,255,.12); }

/* Contact */
.tod-contact-grid { display:grid; grid-template-columns:.82fr 1.18fr; gap:32px; align-items:start; }
.tod-contact-card { padding:30px; border:1px solid var(--tod-border); border-radius:22px; background:var(--tod-surface); }
.tod-contact-list { display:grid; gap:14px; margin:25px 0; }
.tod-contact-item { display:flex; gap:13px; padding:14px; background:rgba(255,255,255,.025); border-radius:13px; color:#d9d6e4; }
.tod-contact-item strong { display:block; color:white; }
.tod-form { display:grid; grid-template-columns:1fr 1fr; gap:17px; }
.tod-field--full { grid-column:1/-1; }
.tod-field label { display:block; margin-bottom:7px; color:#e7e4ef; font-weight:700; font-size:.88rem; }
.tod-field input, .tod-field textarea, .tod-field select,
.search-form input[type="search"] {
  width:100%; border:1px solid rgba(255,255,255,.11); border-radius:12px; padding:14px 15px;
  background:#090a18; color:white; outline:none;
}
.tod-field input:focus, .tod-field textarea:focus, .tod-field select:focus { border-color:#8e4fff; box-shadow:0 0 0 3px rgba(142,79,255,.12); }
.tod-field textarea { min-height:150px; resize:vertical; }
.tod-notice { padding:14px 16px; margin-bottom:18px; border-radius:12px; }
.tod-notice--success { background:rgba(49,210,124,.12); color:#8af5b7; border:1px solid rgba(49,210,124,.25); }
.tod-notice--error { background:rgba(255,79,110,.10); color:#ff9daf; border:1px solid rgba(255,79,110,.25); }
.tod-honeypot { position:absolute !important; left:-9999px !important; opacity:0 !important; }

/* Footer */
.tod-site-footer { margin-top:90px; border-top:1px solid rgba(255,255,255,.07); background:#05050d; }
.tod-footer-main { padding:70px 0 44px; display:grid; grid-template-columns:1.4fr .8fr .9fr 1fr; gap:42px; }
.tod-footer-title { font-size:.9rem; letter-spacing:.05em; text-transform:uppercase; color:white; margin-bottom:18px; }
.tod-footer-links { list-style:none; padding:0; margin:0; display:grid; gap:9px; }
.tod-footer-links a { color:#aaa7b8; font-size:.9rem; }
.tod-footer-links a:hover { color:white; }
.tod-footer-bottom { padding:22px 0; border-top:1px solid rgba(255,255,255,.06); display:flex; justify-content:space-between; gap:20px; color:#858296; font-size:.82rem; }

/* WhatsApp assistant */
.tod-wa { position:fixed; right:22px; bottom:22px; z-index:1200; }
.tod-wa-button { width:58px; height:58px; border:0; border-radius:50%; display:grid; place-items:center; background:#20c66b; color:white; box-shadow:0 18px 40px rgba(22,184,91,.35); }
.tod-wa-button svg { width:30px; height:30px; }
.tod-wa-panel { position:absolute; right:0; bottom:72px; width:min(350px, calc(100vw - 34px)); border:1px solid rgba(255,255,255,.12); border-radius:20px; background:#0b0c19; box-shadow:0 25px 80px rgba(0,0,0,.55); overflow:hidden; opacity:0; visibility:hidden; transform:translateY(12px) scale(.97); transition:.2s; }
.tod-wa.is-open .tod-wa-panel { opacity:1; visibility:visible; transform:none; }
.tod-wa-head { padding:18px; display:flex; align-items:center; gap:12px; background:linear-gradient(135deg,#1b9f58,#20c66b); }
.tod-wa-avatar { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:white; color:#16934f; font-weight:900; }
.tod-wa-head strong { display:block; }
.tod-wa-head span { display:block; font-size:.78rem; opacity:.88; }
.tod-wa-body { padding:18px; }
.tod-wa-message { padding:12px 14px; background:#151729; border-radius:13px 13px 13px 3px; color:#dcd9e8; font-size:.88rem; }
.tod-wa-quick { display:flex; flex-wrap:wrap; gap:7px; margin:13px 0; }
.tod-wa-quick button { padding:8px 10px; border:1px solid rgba(255,255,255,.1); background:#111328; color:#d9d6e4; border-radius:999px; font-size:.77rem; }
.tod-wa-send { display:flex; gap:8px; }
.tod-wa-send input { flex:1; min-width:0; border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:10px 11px; background:#080914; color:white; }
.tod-wa-send button { border:0; border-radius:10px; padding:0 14px; background:#20c66b; color:white; font-weight:800; }

/* WordPress */
.alignwide { width:min(1200px, calc(100vw - 40px)); margin-left:50%; transform:translateX(-50%); }
.alignfull { width:100vw; margin-left:50%; transform:translateX(-50%); }
.wp-caption { max-width:100%; }
.wp-caption-text { color:var(--tod-muted); font-size:.84rem; }
.gallery { display:grid; gap:14px; }
.sticky { border-color:rgba(180,92,255,.55); }
.bypostauthor { outline:1px solid rgba(53,212,255,.3); }
.tod-empty { text-align:center; padding:70px 25px; border:1px solid var(--tod-border); border-radius:20px; }

@media (max-width: 1020px) {
  .tod-hero-grid, .tod-split, .tod-split--reverse, .tod-contact-grid { grid-template-columns:1fr; }
  .tod-hero-copy { text-align:center; }
  .tod-hero-copy p, .tod-actions, .tod-hero-badges { justify-content:center; margin-inline:auto; }
  .tod-hero-visual { max-width:720px; margin-inline:auto; }
  .tod-card-grid { grid-template-columns:repeat(2,1fr); }
  .tod-post-grid { grid-template-columns:repeat(2,1fr); }
  .tod-process { grid-template-columns:repeat(2,1fr); }
  .tod-footer-main { grid-template-columns:repeat(2,1fr); }
  .tod-header-cta { display:none; }
  .tod-menu-toggle { display:grid; place-items:center; }
  .tod-nav-wrap { position:absolute; top:78px; left:20px; right:20px; display:none; padding:18px; border:1px solid var(--tod-border); border-radius:16px; background:#0b0c18; box-shadow:var(--tod-shadow); }
  .tod-nav-wrap.is-open { display:block; }
  .tod-primary-menu { display:grid; gap:12px; }
  .tod-primary-menu a { display:block; padding:9px; }
}
@media (max-width: 700px) {
  .tod-container { width:min(calc(100% - 26px), var(--tod-container)); }
  .tod-section { padding:70px 0; }
  .tod-hero { padding-top:62px; min-height:auto; }
  .tod-hero-grid { gap:38px; }
  .tod-trustbar { grid-template-columns:repeat(2,1fr); margin-top:42px; }
  .tod-card-grid, .tod-post-grid, .tod-process, .tod-footer-main, .tod-check-grid { grid-template-columns:1fr; }
  .tod-card-media { height:230px; }
  .tod-cta { padding:30px; grid-template-columns:1fr; }
  .tod-form { grid-template-columns:1fr; }
  .tod-field--full { grid-column:auto; }
  .tod-entry { padding:27px; }
  .tod-footer-bottom { flex-direction:column; }
  .tod-wa { right:14px; bottom:14px; }
}


/* Version 2 professional homepage and service navigation */
.tod-site-header{background:rgba(5,5,14,.90);box-shadow:0 12px 38px rgba(0,0,0,.22)}
.tod-header-inner{min-height:84px}.tod-brand-mark{border-radius:9px;background:linear-gradient(155deg,#c84dff,#7234ff 55%,#36d6ff)}
.tod-primary-menu{gap:12px}.tod-primary-menu>li{position:relative}.tod-primary-menu>li>a{display:flex;align-items:center;min-height:44px;padding:0 13px;border-radius:10px;font-size:.86rem;text-transform:uppercase;letter-spacing:.035em;font-weight:800}.tod-primary-menu>li>a:hover,.tod-primary-menu>.current-menu-item>a,.tod-primary-menu>.current-menu-ancestor>a{background:rgba(139,61,255,.10);color:#fff}
.tod-primary-menu .menu-item-has-children>a::after{content:"⌄";margin-left:7px;color:#b96dff;font-size:1rem;transform:translateY(-2px)}
.tod-primary-menu .sub-menu{position:absolute;left:0;top:calc(100% + 10px);width:300px;padding:10px;list-style:none;margin:0;border:1px solid rgba(181,104,255,.28);border-radius:16px;background:rgba(8,8,22,.98);box-shadow:0 28px 70px rgba(0,0,0,.52);opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s;z-index:100}
.tod-primary-menu li:hover>.sub-menu,.tod-primary-menu li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.tod-primary-menu .sub-menu li+li{margin-top:3px}.tod-primary-menu .sub-menu a{display:block;padding:12px 13px;border-radius:10px;color:#cbc7d9;font-size:.87rem;font-weight:750}.tod-primary-menu .sub-menu a:hover{background:linear-gradient(135deg,rgba(139,61,255,.18),rgba(35,207,255,.08));color:#fff}
.tod-header-cta{min-height:44px;padding:0 20px;font-size:.86rem;text-transform:uppercase;letter-spacing:.04em}
.tod-hero-v2{padding:74px 0 68px;min-height:720px;background:radial-gradient(circle at 83% 28%,rgba(130,45,255,.20),transparent 30%)}
.tod-hero-grid-v2{grid-template-columns:.82fr 1.18fr;gap:54px}.tod-hero-v2 h1{font-size:clamp(2.65rem,4.1vw,3.85rem);letter-spacing:-.045em}.tod-hero-v2 .tod-hero-copy p{font-size:1.12rem;max-width:610px}
.tod-hero-showcase{position:relative;min-width:0}.tod-browser-frame{position:relative;padding:3px;border-radius:25px;background:linear-gradient(145deg,#8150ff,#2430a0 52%,#25bfff);box-shadow:0 40px 110px rgba(0,0,0,.65),0 0 70px rgba(118,48,255,.18);overflow:hidden}.tod-browser-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);pointer-events:none}.tod-browser-frame img{width:100%;aspect-ratio:1.48/1;object-fit:cover;object-position:center;border-radius:22px;background:#070814}.tod-browser-bar{position:absolute;left:3px;right:3px;top:3px;height:46px;z-index:3;display:flex;align-items:center;gap:8px;padding:0 18px;border-radius:22px 22px 0 0;background:rgba(15,18,38,.96);border-bottom:1px solid rgba(255,255,255,.08)}.tod-browser-bar span{width:10px;height:10px;border-radius:50%;background:#ff5f56}.tod-browser-bar span:nth-child(2){background:#ffbd2e}.tod-browser-bar span:nth-child(3){background:#27c93f}.tod-browser-bar strong{margin-left:12px;color:#c4c2cf;font-size:.75rem;font-weight:700}.tod-floating-badge{position:absolute;right:-22px;width:205px;padding:14px 17px;border:1px solid rgba(170,80,255,.62);border-radius:15px;background:rgba(10,10,26,.94);box-shadow:0 18px 50px rgba(0,0,0,.5);animation:todFloat 5s ease-in-out infinite}.tod-floating-badge small{display:block;color:#a9a5b7;text-transform:uppercase;letter-spacing:.08em;font-size:.62rem}.tod-floating-badge strong{display:block;margin-top:4px;color:#fff;font-size:.88rem}.tod-floating-badge--one{top:33%}.tod-floating-badge--two{top:53%;right:-36px;animation-delay:-2.5s}@keyframes todFloat{50%{transform:translateY(-8px)}}
.tod-services-section{background:linear-gradient(180deg,transparent,rgba(105,34,218,.055),transparent)}.tod-service-card-grid{grid-template-columns:repeat(4,1fr)}.tod-service-card{padding:0;overflow:hidden}.tod-service-card .tod-card-media{display:block;height:215px;margin:0;border-radius:0;border-bottom:1px solid rgba(255,255,255,.07)}.tod-service-card .tod-card-content{padding:22px}.tod-mini-label{display:block;margin-bottom:9px;color:#b976ff;text-transform:uppercase;letter-spacing:.11em;font-size:.68rem;font-weight:850}.tod-service-card h3{font-size:1.2rem}.tod-service-card p{min-height:94px}.tod-service-card:hover img{transform:scale(1.025)}.tod-service-card img{transition:transform .35s}
.tod-panel-showcase{padding:16px;background:linear-gradient(150deg,rgba(17,18,42,.96),rgba(7,7,18,.98))}.tod-panel-showcase img{width:100%}
.tod-service-hero{padding:82px 0 72px;position:relative;overflow:hidden}.tod-service-hero::before{content:"";position:absolute;width:620px;height:620px;right:-120px;top:-120px;background:radial-gradient(circle,rgba(133,48,255,.25),transparent 68%);pointer-events:none}.tod-service-hero-grid{display:grid;grid-template-columns:.92fr 1.08fr;align-items:center;gap:60px}.tod-service-hero h1{font-size:clamp(2.7rem,5.8vw,5.15rem)}.tod-service-hero p{font-size:1.08rem;max-width:680px}.tod-service-hero-art{padding:14px;border:1px solid rgba(167,92,255,.28);border-radius:28px;background:linear-gradient(150deg,rgba(20,21,45,.96),rgba(7,7,18,.98));box-shadow:var(--tod-shadow)}.tod-service-hero-art img{width:100%;border-radius:20px}.tod-breadcrumbs--left{justify-content:flex-start}
.tod-feature-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.tod-feature-item{display:flex;align-items:center;gap:12px;min-height:92px;padding:20px;border:1px solid rgba(255,255,255,.08);border-radius:17px;background:linear-gradient(145deg,rgba(20,21,44,.9),rgba(9,9,22,.92));color:#e7e4ef}.tod-feature-item span{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,#8f3fff,#3e68ef);font-weight:900}.tod-feature-item strong{font-size:.94rem}
@media(max-width:1180px){.tod-floating-badge{display:none}.tod-service-card-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1020px){.tod-hero-grid-v2,.tod-service-hero-grid{grid-template-columns:1fr}.tod-hero-showcase{max-width:860px;margin-inline:auto}.tod-primary-menu .sub-menu{position:static;width:auto;margin:3px 0 0 12px;padding:4px 0 4px 12px;border:0;border-left:1px solid rgba(180,92,255,.25);border-radius:0;background:transparent;box-shadow:none;opacity:1;visibility:visible;transform:none}.tod-primary-menu .sub-menu a{padding:8px 10px}.tod-feature-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.tod-service-card-grid,.tod-feature-list{grid-template-columns:1fr}.tod-service-card .tod-card-media{height:260px}.tod-service-card p{min-height:0}.tod-hero-v2{padding-top:48px}.tod-browser-bar{height:38px}.tod-browser-bar strong{font-size:.62rem}.tod-service-hero{padding-top:55px}.tod-service-hero-grid{gap:34px}}