/* ===================================================================== World AI Technology Expo Dubai — Design System v3 "Executive" Modern corporate theme: ink-navy foundations, azure + cyan accents, Lexend display type, sharp geometry, dark corporate section bands. Light (default) + dark, switchable via [data-theme] on with prefers-color-scheme fallback. Mobile-first, accessible, fast. ===================================================================== */ :root { color-scheme: light; /* fixed brand navys (identical in both themes) */ --navy-950:#050D1F; --navy-900:#081226; --navy-850:#0B1B39; --navy-800:#10254C; --navy-750:#152E5C; --navy-700:#1A3768; /* surfaces */ --bg:#ffffff; --surface:#ffffff; --surface-2:#f4f6fa; --surface-3:#eaeef6; --line:#e2e7f0; --line-strong:#c9d3e4; /* accents — azure primary + cyan highlight (no purple/pink) */ --cyan:#0e7490; --cyan-soft:#0891b2; --blue:#1a56db; --blue-bright:#2563eb; --violet:#1e429f; --violet-soft:#1a56db; /* legacy names, remapped to deep azure */ /* text */ --text:#25324d; --text-dim:#46536f; --muted:#64748f; --muted-2:#8794ad; --white:#ffffff; --heading:#0a1a38; /* status */ --success:#0e7a55; --success-bg:#e7f6ef; --success-line:#a5d9c1; --success-tint:#daf1e6; --error:#c02626; --error-bg:#fdecec; --error-line:#f3b6b6; --warning:#b45309; --warn-bg:#fff8ea; --warn-line:#f0dcaf; --warn-badge-bg:#fdf1d8; --warn-badge-line:#eed9a5; --star:#d97706; /* tints (icon pills, badges, hovers) */ --tint-accent:#e9f0fd; --tint-accent-line:#d2e0f9; --tint-hover:#eef4ff; --badge-violet-bg:#e6f4f8; --badge-violet-line:#c3e3ee; --nav-hover:rgba(10,26,56,.06); /* gradients — restrained azure→cyan only */ --grad-accent:linear-gradient(100deg,#0891b2,#1a56db 60%,#1e429f); --grad-accent-2:linear-gradient(115deg,#2563eb,#1a56db 60%,#173dae); --grad-hero:radial-gradient(1100px 640px at 82% -10%,rgba(37,99,235,.09),transparent 60%),radial-gradient(800px 540px at 4% 16%,rgba(8,145,178,.06),transparent 55%),linear-gradient(180deg,#f5f7fb,#ffffff); --card-accent-bg:linear-gradient(180deg,#f3f7fe,#ffffff); --widget-facts-bg:radial-gradient(420px 260px at 100% 0,rgba(8,145,178,.08),transparent 60%),linear-gradient(165deg,#f3f7fe,#ffffff); /* chrome */ --header-bg:rgba(255,255,255,.85); --header-bg-solid:rgba(255,255,255,.97); --sticky-bg:rgba(255,255,255,.97); --sb-track:#e4e9f3; --selection:rgba(37,99,235,.18); /* geometry & type — sharper, corporate */ --radius:12px; --radius-lg:18px; --radius-sm:8px; --radius-btn:10px; --shadow:0 1px 2px rgba(8,18,38,.05),0 20px 48px -26px rgba(8,18,38,.18); --shadow-lg:0 2px 4px rgba(8,18,38,.06),0 36px 84px -34px rgba(8,18,38,.30); --ring:0 0 0 3px rgba(37,99,235,.28); --container:min(92%,1440px); --reading:74ch; --ff-display:"Lexend","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --ff-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --header-h:76px; --ease:cubic-bezier(.22,.61,.36,1); } /* ---- dark theme tokens (explicit choice) ---- */ :root[data-theme="dark"] { color-scheme: dark; --bg:#070d1c; --surface:#0c1425; --surface-2:#0f182c; --surface-3:#141f38; --line:rgba(148,166,205,.14); --line-strong:rgba(148,166,205,.28); --cyan:#38bdf8; --cyan-soft:#38bdf8; --blue:#60a5fa; --blue-bright:#3b82f6; --violet:#7fb0ff; --violet-soft:#60a5fa; --text:#c3cde1; --text-dim:#a3b0cc; --muted:#8290b2; --muted-2:#657399; --heading:#f2f6ff; --success:#34d399; --success-bg:rgba(52,211,153,.12); --success-line:rgba(52,211,153,.35); --success-tint:rgba(52,211,153,.16); --error:#f87171; --error-bg:rgba(248,113,113,.12); --error-line:rgba(248,113,113,.35); --warning:#fbbf24; --warn-bg:rgba(251,191,36,.10); --warn-line:rgba(251,191,36,.30); --warn-badge-bg:rgba(251,191,36,.15); --warn-badge-line:rgba(251,191,36,.35); --star:#fbbf24; --tint-accent:rgba(96,165,250,.12); --tint-accent-line:rgba(96,165,250,.26); --tint-hover:rgba(96,165,250,.10); --badge-violet-bg:rgba(56,189,248,.12); --badge-violet-line:rgba(56,189,248,.30); --nav-hover:rgba(148,166,205,.12); --grad-hero:radial-gradient(1100px 640px at 82% -10%,rgba(59,130,246,.14),transparent 60%),radial-gradient(800px 540px at 4% 16%,rgba(56,189,248,.08),transparent 55%),linear-gradient(180deg,#0a1123,#070d1c); --grad-accent:linear-gradient(100deg,#38bdf8,#7fb0ff 60%,#93c5fd); --card-accent-bg:linear-gradient(180deg,rgba(96,165,250,.10),var(--surface)); --widget-facts-bg:radial-gradient(420px 260px at 100% 0,rgba(56,189,248,.10),transparent 60%),linear-gradient(165deg,#101c36,#0c1425); --header-bg:rgba(7,13,28,.80); --header-bg-solid:rgba(9,16,32,.97); --sticky-bg:rgba(12,20,37,.97); --sb-track:rgba(148,166,205,.18); --selection:rgba(96,165,250,.30); --shadow:0 18px 45px -22px rgba(0,0,0,.55); --shadow-lg:0 30px 70px -30px rgba(0,0,0,.7); --ring:0 0 0 3px rgba(96,165,250,.35); } /* ---- dark theme tokens (OS preference, no explicit choice) ---- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg:#070d1c; --surface:#0c1425; --surface-2:#0f182c; --surface-3:#141f38; --line:rgba(148,166,205,.14); --line-strong:rgba(148,166,205,.28); --cyan:#38bdf8; --cyan-soft:#38bdf8; --blue:#60a5fa; --blue-bright:#3b82f6; --violet:#7fb0ff; --violet-soft:#60a5fa; --text:#c3cde1; --text-dim:#a3b0cc; --muted:#8290b2; --muted-2:#657399; --heading:#f2f6ff; --success:#34d399; --success-bg:rgba(52,211,153,.12); --success-line:rgba(52,211,153,.35); --success-tint:rgba(52,211,153,.16); --error:#f87171; --error-bg:rgba(248,113,113,.12); --error-line:rgba(248,113,113,.35); --warning:#fbbf24; --warn-bg:rgba(251,191,36,.10); --warn-line:rgba(251,191,36,.30); --warn-badge-bg:rgba(251,191,36,.15); --warn-badge-line:rgba(251,191,36,.35); --star:#fbbf24; --tint-accent:rgba(96,165,250,.12); --tint-accent-line:rgba(96,165,250,.26); --tint-hover:rgba(96,165,250,.10); --badge-violet-bg:rgba(56,189,248,.12); --badge-violet-line:rgba(56,189,248,.30); --nav-hover:rgba(148,166,205,.12); --grad-hero:radial-gradient(1100px 640px at 82% -10%,rgba(59,130,246,.14),transparent 60%),radial-gradient(800px 540px at 4% 16%,rgba(56,189,248,.08),transparent 55%),linear-gradient(180deg,#0a1123,#070d1c); --grad-accent:linear-gradient(100deg,#38bdf8,#7fb0ff 60%,#93c5fd); --card-accent-bg:linear-gradient(180deg,rgba(96,165,250,.10),var(--surface)); --widget-facts-bg:radial-gradient(420px 260px at 100% 0,rgba(56,189,248,.10),transparent 60%),linear-gradient(165deg,#101c36,#0c1425); --header-bg:rgba(7,13,28,.80); --header-bg-solid:rgba(9,16,32,.97); --sticky-bg:rgba(12,20,37,.97); --sb-track:rgba(148,166,205,.18); --selection:rgba(96,165,250,.30); --shadow:0 18px 45px -22px rgba(0,0,0,.55); --shadow-lg:0 30px 70px -30px rgba(0,0,0,.7); --ring:0 0 0 3px rgba(96,165,250,.35); } } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;background:var(--bg)} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}} body{margin:0;font-family:var(--ff-body);background:var(--bg);color:var(--text); font-size:clamp(16px,1rem + .1vw,17px);line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip; transition:background .25s,color .25s} img,picture,svg,video{max-width:100%;height:auto;display:block} a{color:var(--blue);text-decoration:none} a:hover{color:var(--heading)} h1,h2,h3,h4{font-family:var(--ff-display);line-height:1.1;font-weight:600;letter-spacing:-.025em;color:var(--heading);margin:0 0 .5em} h1{font-size:clamp(2.2rem,1.4rem + 3.4vw,4rem);font-weight:650;letter-spacing:-.032em} h2{font-size:clamp(1.65rem,1.1rem + 2.1vw,2.6rem);letter-spacing:-.028em} h3{font-size:clamp(1.15rem,1rem + .6vw,1.4rem)} p{margin:0 0 1.1em} ul,ol{margin:0 0 1.1em;padding-left:1.2em} strong{color:var(--heading)} hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0} :focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px} ::selection{background:var(--selection);color:var(--heading)} /* ---- skip link ---- */ .skip-link{position:absolute;left:14px;top:-60px;background:var(--blue-bright);color:#fff;padding:10px 16px;border-radius:8px;z-index:1000;font-weight:600;transition:top .2s} .skip-link:focus{top:14px} /* ---- layout ---- */ .container{width:var(--container);margin-inline:auto} .narrow{max-width:920px;margin-inline:auto} .section{padding:clamp(3.4rem,2.4rem + 5vw,6.5rem) 0} .section--tight{padding:clamp(2rem,1.5rem + 3vw,3.5rem) 0} .section--alt{background:var(--surface-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} /* corporate dark band — all tokens remapped locally so every component adapts */ .section--deep{ background:radial-gradient(900px 520px at 88% -12%,rgba(37,99,235,.22),transparent 58%), radial-gradient(700px 420px at 4% 110%,rgba(8,145,178,.16),transparent 55%), linear-gradient(160deg,var(--navy-900),var(--navy-850)); --bg:var(--navy-900); --surface:rgba(255,255,255,.045); --surface-2:rgba(255,255,255,.07); --surface-3:rgba(255,255,255,.09); --line:rgba(158,180,222,.16); --line-strong:rgba(158,180,222,.32); --heading:#ffffff; --text:#c7d3ea; --text-dim:#aebcda; --muted:#8fa1c6; --muted-2:#7386ad; --blue:#8ab5ff; --blue-bright:#3b82f6; --cyan:#67e8f9; --violet:#8ab5ff; --tint-accent:rgba(103,177,255,.14); --tint-accent-line:rgba(103,177,255,.30); --tint-hover:rgba(103,177,255,.10); --badge-violet-bg:rgba(103,232,249,.12); --badge-violet-line:rgba(103,232,249,.30); --card-accent-bg:linear-gradient(180deg,rgba(103,177,255,.08),rgba(255,255,255,.03)); --widget-facts-bg:radial-gradient(420px 260px at 100% 0,rgba(103,232,249,.10),transparent 60%),linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.03)); --sb-track:rgba(158,180,222,.22); --grad-accent:linear-gradient(100deg,#67e8f9,#8ab5ff 60%,#b3ccff); --shadow:0 18px 45px -22px rgba(0,0,0,.5); --shadow-lg:0 30px 70px -30px rgba(0,0,0,.6); position:relative;overflow:hidden} .section--deep::before{content:"";position:absolute;left:0;right:0;top:0;height:1px; background:linear-gradient(90deg,transparent,rgba(103,232,249,.5) 30%,rgba(103,177,255,.5) 70%,transparent)} .section--deep::after{content:"";position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:48px 48px;mask-image:radial-gradient(760px 460px at 82% 0%,#000,transparent 75%)} .section--deep>.container{position:relative;z-index:1} .eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--ff-display);font-weight:600;font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);margin-bottom:1rem} .eyebrow::before{content:"";width:8px;height:8px;background:var(--grad-accent-2);border-radius:2px;transform:rotate(45deg);flex:none} .section-head{max-width:860px;margin-bottom:2.8rem} .section-head.center{margin-inline:auto;text-align:center} .section-head p{color:var(--text-dim);font-size:1.07rem} .lede{font-size:1.16rem;color:var(--text-dim)} /* ---- buttons — squared, confident, corporate ---- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--ff-display); font-weight:600;font-size:.95rem;line-height:1;padding:.95rem 1.55rem;border-radius:var(--radius-btn);border:1px solid transparent; cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s,background .2s,color .2s,border-color .2s;white-space:nowrap;letter-spacing:.01em} .btn:hover{transform:translateY(-2px)} .btn--primary{background:var(--grad-accent-2);color:#fff;box-shadow:0 10px 24px -12px rgba(26,86,219,.55)} .btn--primary:hover{color:#fff;box-shadow:0 16px 34px -14px rgba(26,86,219,.65)} .btn--accent{background:var(--navy-850);color:#fff} .btn--accent:hover{color:#fff;background:var(--navy-800)} .btn--ghost{background:transparent;color:var(--heading);border-color:var(--line-strong)} .btn--ghost:hover{background:var(--nav-hover);color:var(--heading);border-color:var(--blue)} .btn--light{background:#fff;color:var(--navy-850)} .btn--light:hover{color:var(--navy-850)} .btn--block{width:100%} .btn--lg{padding:1.1rem 2rem;font-size:1.03rem} .btn--sm{padding:.6rem 1rem;font-size:.85rem} .btn svg{width:18px;height:18px;flex:none} .btn-row{display:flex;flex-wrap:wrap;gap:.85rem} .btn-row.center{justify-content:center} /* ---- badges / chips ---- */ .badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:600;letter-spacing:.08em; text-transform:uppercase;padding:.36rem .75rem;border-radius:6px;border:1px solid var(--tint-accent-line);color:var(--blue);background:var(--tint-accent)} .badge--violet{color:var(--cyan);background:var(--badge-violet-bg);border-color:var(--badge-violet-line)} .badge--past{color:var(--muted);background:var(--surface-2);border-color:var(--line-strong)} .tag{display:inline-block;font-size:.8rem;font-weight:500;padding:.32rem .7rem;border-radius:6px;background:var(--surface);color:var(--text-dim);border:1px solid var(--line-strong);margin:.2rem .25rem 0 0;transition:border-color .2s,color .2s} .tag:hover{border-color:var(--blue);color:var(--heading)} /* ---- header / nav ---- */ .site-header{position:sticky;top:0;z-index:100;background:var(--header-bg);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5); transition:background .3s,box-shadow .3s;position:sticky} .site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:linear-gradient(90deg,transparent,var(--line-strong) 15%,var(--line-strong) 85%,transparent)} .site-header.scrolled{background:var(--header-bg-solid);box-shadow:0 10px 28px -20px rgba(8,18,38,.28)} .site-header.scrolled::after{background:linear-gradient(90deg,transparent,rgba(8,145,178,.5) 30%,rgba(37,99,235,.5) 70%,transparent)} .nav{display:flex;align-items:center;gap:1.2rem;height:var(--header-h)} .brand{display:flex;align-items:center;gap:.65rem;font-family:var(--ff-display);font-weight:650;color:var(--heading);font-size:1.04rem;letter-spacing:-.01em} .brand:hover{color:var(--heading)} .brand-mark{width:40px;height:40px;flex:none} /* logo lockup: two-line wordmark + contrasting date block */ .brand-name{display:flex;flex-direction:column;line-height:1.1;font-size:1.06rem;letter-spacing:-.01em} .brand-name small{font-size:.6rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--heading);opacity:.85} .brand-date{display:flex;flex-direction:column;line-height:1.1;margin-left:.2rem;padding-left:.85rem;border-left:1px solid var(--line-strong)} .brand-date b{font-family:var(--ff-display);font-weight:700;font-size:.98rem;white-space:nowrap; background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent} .brand-date small{font-size:.58rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan-soft)} .site-footer .brand-name small{color:rgba(255,255,255,.85)} .site-footer .brand-date{border-left-color:rgba(255,255,255,.28)} @media(max-width:420px){.brand-date{display:none}} .nav-spacer{flex:1} .nav-menu{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0} .nav-menu>li{position:relative} .nav-link{display:inline-flex;align-items:center;gap:.35rem;padding:.6rem .85rem;border-radius:8px;color:#000; font-weight:500;font-size:.93rem;background:none;border:0;cursor:pointer;font-family:var(--ff-display);letter-spacing:.01em} .nav-link:hover,.nav-link[aria-expanded="true"]{color:#000;background:var(--nav-hover)} .nav-link.active{color:#000;font-weight:700} /* dark theme keeps readable light nav text */ :root[data-theme="dark"] .nav-link{color:var(--text)} :root[data-theme="dark"] .nav-link:hover,:root[data-theme="dark"] .nav-link[aria-expanded="true"],:root[data-theme="dark"] .nav-link.active{color:var(--heading)} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .nav-link{color:var(--text)} :root:not([data-theme="light"]) .nav-link:hover,:root:not([data-theme="light"]) .nav-link[aria-expanded="true"],:root:not([data-theme="light"]) .nav-link.active{color:var(--heading)} } .nav-link svg{width:14px;height:14px;transition:transform .2s} .nav-link[aria-expanded="true"] svg{transform:rotate(180deg)} .has-mega>.dropdown,.has-dd>.dropdown{position:absolute;top:calc(100% + 12px);left:0;min-width:250px; background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:.6rem; box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s var(--ease);list-style:none;margin:0;z-index:120} .has-mega>.dropdown{min-width:560px;display:grid;grid-template-columns:1fr 1fr;gap:.3rem} .dropdown.open{opacity:1;visibility:visible;transform:translateY(0)} .dropdown a{display:block;padding:.7rem .85rem;border-radius:8px;color:#000;font-size:.92rem;font-weight:500;border-left:2px solid transparent} .dropdown a:hover{background:var(--tint-hover);color:#000;border-left-color:var(--blue)} :root[data-theme="dark"] .dropdown a{color:var(--text)} :root[data-theme="dark"] .dropdown a:hover{color:var(--heading)} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .dropdown a{color:var(--text)} :root:not([data-theme="light"]) .dropdown a:hover{color:var(--heading)} } .dropdown a span{display:block;font-size:.78rem;color:var(--muted-2);font-weight:400;margin-top:.15rem} .nav-cta{display:flex;align-items:center;gap:.6rem} .nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px} .nav-toggle span{width:20px;height:2px;background:var(--heading);border-radius:2px;transition:.25s} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ---- theme toggle ---- */ .theme-toggle{width:44px;height:44px;flex:none;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface); color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .2s,border-color .2s,background .2s,transform .18s var(--ease)} .theme-toggle:hover{color:var(--heading);border-color:var(--blue);transform:translateY(-1px)} .theme-toggle svg{width:20px;height:20px} .theme-toggle .ic-sun{display:none} :root[data-theme="dark"] .theme-toggle .ic-sun{display:block} :root[data-theme="dark"] .theme-toggle .ic-moon{display:none} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .theme-toggle .ic-sun{display:block} :root:not([data-theme="light"]) .theme-toggle .ic-moon{display:none} } /* mobile nav panel */ .mobile-nav{position:fixed;inset:var(--header-h) 0 0;background:var(--bg);z-index:99;transform:translateX(100%); transition:transform .3s var(--ease);overflow-y:auto;padding:1.2rem var(--container-pad,5%);display:none} .mobile-nav.open{transform:translateX(0)} .mobile-nav ul{list-style:none;margin:0;padding:0} .mobile-nav>ul>li{border-bottom:1px solid var(--line)} .m-link,.m-sub-toggle{display:flex;justify-content:space-between;align-items:center;width:100%;padding:1rem .2rem; color:var(--heading);font-weight:600;font-size:1.05rem;background:none;border:0;font-family:var(--ff-display);cursor:pointer} .m-sub{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)} .m-sub.open{max-height:600px} .m-sub a{display:block;padding:.6rem .8rem;color:var(--text-dim);font-weight:500} .m-sub-toggle svg{width:16px;transition:transform .2s} .m-sub-toggle[aria-expanded="true"] svg{transform:rotate(180deg)} .mobile-nav .btn{margin-top:.4rem} /* ---- hero ---- */ .hero{position:relative;background:var(--grad-hero);overflow:hidden;border-bottom:1px solid var(--line)} .hero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;opacity:.45;mask-image:radial-gradient(900px 500px at 72% 0%,#000,transparent 75%);pointer-events:none} .hero-inner{position:relative;z-index:2;padding:clamp(3rem,2rem + 6vw,6.5rem) 0 clamp(3rem,2rem + 4vw,5rem)} .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center} .hero h1{margin-bottom:1rem} .hero h1 .grad{background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent} .hero-sub{font-size:1.18rem;color:var(--text-dim);max-width:48ch;margin-bottom:1.6rem} .date-ribbon{display:flex;flex-wrap:wrap;gap:0;margin:1.6rem 0 1.8rem;border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;width:fit-content;background:var(--surface)} .date-pill{display:flex;flex-direction:column;padding:.9rem 1.4rem;min-width:0;border-right:1px solid var(--line);position:relative} .date-pill:last-child{border-right:0} .date-pill::before{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:var(--grad-accent-2);opacity:0;transition:opacity .2s} .date-pill:hover::before{opacity:1} .date-pill .d{font-family:var(--ff-display);font-weight:650;color:var(--heading);font-size:1.02rem} .date-pill .l{font-size:.8rem;color:var(--muted)} .hero-visual{position:relative} .hero-visual img,.hero-visual svg{border-radius:var(--radius-lg);border:1px solid var(--line-strong);box-shadow:var(--shadow-lg)} .hero-trust{display:flex;flex-wrap:wrap;gap:1.3rem;margin-top:1.5rem;color:var(--muted);font-size:.9rem} .hero-trust span{display:inline-flex;align-items:center;gap:.45rem} .hero-trust svg{width:18px;color:var(--cyan-soft)} /* countdown (homepage hero) */ .countdown{display:flex;gap:.7rem;margin:1.4rem 0 .2rem} .cd-cell{min-width:76px;text-align:center;padding:.75rem .6rem;border-radius:var(--radius);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px)} .cd-v{display:block;font-family:var(--ff-display);font-weight:650;font-size:1.7rem;line-height:1.1;color:#fff;font-variant-numeric:tabular-nums} .cd-l{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.66);margin-top:.2rem} /* ---- slim page header (hero-less Get Involved pages) ---- */ .page-head{padding:clamp(1.8rem,1.2rem + 2vw,3rem) 0 0} .page-head h1{font-size:clamp(1.9rem,1.3rem + 2.2vw,2.9rem);margin-bottom:.4rem} .page-head .lede{max-width:64ch;margin-bottom:0} /* ---- breadcrumbs ---- */ .breadcrumbs{padding:1rem 0 0} .breadcrumbs ol{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:0;font-size:.85rem;color:var(--muted)} .breadcrumbs li::after{content:"/";margin-left:.5rem;color:var(--muted-2)} .breadcrumbs li:last-child::after{content:""} .breadcrumbs a{color:var(--text-dim)} /* ---- grids & cards ---- */ .grid{display:grid;gap:1.2rem} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} .grid-auto{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} .card{background:var(--surface);border:1px solid var(--line); border-radius:var(--radius-lg);padding:1.7rem;transition:transform .22s var(--ease),border-color .22s,box-shadow .22s;position:relative;overflow:hidden} .card:hover{transform:translateY(-4px);border-color:var(--tint-accent-line);box-shadow:var(--shadow)} .card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--grad-accent-2); opacity:0;transform:scaleX(.3);transform-origin:left;transition:opacity .3s,transform .45s var(--ease)} .card:hover::before{opacity:1;transform:scaleX(1)} .card h3{margin-bottom:.5rem} .card p{color:var(--text-dim);margin-bottom:0;font-size:.96rem} .card .ico{width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center; background:var(--tint-accent);border:1px solid var(--tint-accent-line);margin-bottom:1.1rem} .card .ico svg{width:25px;color:var(--blue)} .card--accent{border-color:var(--tint-accent-line);background:var(--card-accent-bg)} /* icon + heading on one line (audience cards) */ .card-inline-head{display:flex;align-items:center;gap:.85rem;margin-bottom:.55rem} .card-inline-head .ico{margin-bottom:0;width:44px;height:44px;flex:none} .card-inline-head .ico svg{width:22px} .card-inline-head h3{margin:0;font-size:1.04rem} /* blog index article cards */ .article-card{text-decoration:none;color:inherit} .article-card .card__body .eyebrow{margin-bottom:.4rem} .article-card h3{font-size:1.08rem;line-height:1.3} .card-more{display:inline-flex;align-items:center;gap:.35rem;margin-top:.9rem;color:var(--blue);font-weight:600;font-size:.9rem} .card-more svg{width:16px} /* image participation cards */ .card--media{padding:0;display:flex;flex-direction:column} .card--media .card__media{position:relative;aspect-ratio:16/10;overflow:hidden} .card--media .card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s var(--ease)} .card--media:hover .card__media img{transform:scale(1.05)} .card--media .card__badge{position:absolute;left:1.1rem;bottom:-22px;width:48px;height:48px;border-radius:12px; display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--line-strong);box-shadow:var(--shadow)} .card--media .card__badge svg{width:24px;color:var(--blue)} .card--media .card__body{padding:2rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1} .card--media .card__body h3{margin-bottom:.5rem} .card--media .card__body .btn{align-self:flex-start;margin-top:auto} .card--link::after{content:"→";position:absolute;right:1.4rem;bottom:1.4rem;color:var(--blue);opacity:0;transform:translateX(-6px);transition:.2s} .card--link:hover::after{opacity:1;transform:translateX(0)} .feature-list{list-style:none;padding:0;margin:0} .feature-list li{position:relative;padding:.45rem 0 .45rem 1.8rem;color:var(--text-dim)} .feature-list li::before{content:"";position:absolute;left:0;top:.95rem;width:10px;height:10px;border-radius:2px;background:var(--grad-accent-2);transform:rotate(45deg)} .check-list{list-style:none;padding:0;margin:0} .check-list li{position:relative;padding:.5rem 0 .5rem 2rem;color:var(--text-dim)} .check-list li::before{content:"✓";position:absolute;left:0;top:.5rem;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:var(--success-tint);color:var(--success);font-size:.8rem;font-weight:700} /* ---- activities gallery (click opens the registration popup) ---- All 10 posters in two complete rows of five */ .activity-grid{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:clamp(220px,23vw,320px);gap:1rem} .activity-card{position:relative;display:block;width:100%;height:100%;padding:0;border:1px solid var(--line);border-radius:var(--radius-lg); overflow:hidden;cursor:pointer;background:var(--surface-3); transition:transform .22s var(--ease),box-shadow .22s,border-color .22s} .activity-card img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:transform .3s var(--ease)} .activity-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--tint-accent-line)} .activity-card:hover img{transform:scale(1.04)} .activity-card:focus-visible{box-shadow:var(--ring)} /* content images act as popup triggers */ main img{cursor:pointer} @media(max-width:880px){ .activity-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(220px,34vw,300px)} } @media(max-width:560px){ .activity-grid{grid-template-columns:1fr;grid-auto-rows:auto} .activity-card img{height:auto} } /* ---- snapshot strip ---- */ .snapshot{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)} .snapshot .cell{background:var(--surface);padding:1.4rem 1.2rem} .snapshot .cell .v{font-family:var(--ff-display);font-weight:650;color:var(--heading);font-size:1.2rem;margin-bottom:.2rem} .snapshot .cell .k{font-size:.85rem;color:var(--muted)} /* ---- event day cards ---- */ .day-card{display:flex;flex-direction:column;gap:.7rem} /* portrait event posters shown in full (no crop) */ .day-card .card__media{aspect-ratio:4/5} .day-card .daynum{font-family:var(--ff-display);font-size:2.4rem;font-weight:650;background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1} .day-card .when{color:var(--blue);font-weight:600;font-size:.92rem} .day-card .when--lg{font-family:var(--ff-display);font-size:clamp(1.4rem,1.15rem + 1.1vw,1.9rem);font-weight:650;background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.15} /* ---- timeline ---- */ .timeline{position:relative;padding-left:2rem} .timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--grad-accent)} .timeline .step{position:relative;padding-bottom:1.6rem} .timeline .step::before{content:"";position:absolute;left:-1.93rem;top:.4rem;width:14px;height:14px;border-radius:4px;background:var(--bg);border:3px solid var(--blue);transform:rotate(45deg)} .timeline .step h4{margin-bottom:.2rem;color:var(--heading)} .timeline .step p{color:var(--muted);margin:0;font-size:.95rem} /* ---- tabs (agenda) ---- */ .tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.8rem} .tab{padding:.8rem 1.25rem;border-radius:var(--radius-btn);border:1px solid var(--line-strong);background:var(--surface); color:var(--text-dim);font-family:var(--ff-display);font-weight:600;cursor:pointer;font-size:.95rem;transition:.2s} .tab:hover{border-color:var(--blue);color:var(--heading)} .tab[aria-selected="true"]{background:var(--grad-accent-2);color:#fff;border-color:transparent} .tabpanel[hidden]{display:none} .agenda-item{display:grid;grid-template-columns:160px 1fr;gap:1.2rem;padding:1.3rem 0;border-bottom:1px solid var(--line)} .agenda-item .time{color:var(--blue);font-weight:600;font-family:var(--ff-display);font-variant-numeric:tabular-nums} .agenda-item .type{font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--cyan);margin-bottom:.3rem;font-weight:600} .agenda-item h4{margin:0 0 .3rem} .agenda-item p{color:var(--muted);margin:0;font-size:.95rem} .tba{color:var(--muted-2);font-style:italic} /* ---- speaker cards ---- */ .speaker-card{text-align:center;padding:1.2rem} .speaker-card .photo{aspect-ratio:1;border-radius:var(--radius);overflow:hidden;margin-bottom:1rem;border:1px solid var(--line);background:var(--surface-3)} .speaker-card .photo img{width:100%;height:100%;object-fit:cover} .speaker-card h3{font-size:1.12rem;margin-bottom:.2rem} .speaker-card .role{color:var(--muted);font-size:.9rem;min-height:1.2em} /* ---- announce panel ---- */ .announce{text-align:center;padding:clamp(2rem,1.5rem + 3vw,3.5rem);border:1px dashed var(--line-strong); border-radius:var(--radius-lg);background:radial-gradient(620px 300px at 50% 0%,var(--tint-accent),transparent)} .announce h3{font-size:clamp(1.3rem,1rem + 1.6vw,1.9rem)} .announce p{max-width:54ch;margin-inline:auto;color:var(--text-dim)} /* ---- gallery / video ---- */ .gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem} .gallery-grid figure{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);position:relative} .gallery-grid img{aspect-ratio:3/2;object-fit:cover;width:100%;transition:transform .4s var(--ease)} .gallery-grid figure:hover img{transform:scale(1.05)} .gallery-grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:.7rem .9rem;font-size:.82rem;background:linear-gradient(transparent,rgba(5,13,31,.9));color:rgba(255,255,255,.92)} .video-card{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--surface-3)} .video-card img{aspect-ratio:16/9;object-fit:cover;width:100%} .video-card .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(5,13,31,.30);border:0;cursor:pointer} .video-card .play span{width:64px;height:64px;border-radius:50%;background:var(--grad-accent-2);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);transition:transform .2s var(--ease)} .video-card .play:hover span{transform:scale(1.08)} .video-card .play svg{width:26px;color:#fff;margin-left:3px} .video-card .vtitle{padding:.9rem 1rem;font-weight:600;color:var(--heading);font-size:.95rem;background:var(--surface)} .video-card iframe{width:100%;height:auto;border:0;display:block} /* ---- testimonial shorts (9:16, click-to-play inline) ---- */ .shorts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;max-width:1180px;margin-inline:auto} .video-card--short img{aspect-ratio:9/16;object-fit:cover;width:100%} .video-card--short iframe{aspect-ratio:9/16} .video-card--short .play span{width:52px;height:52px} /* ---- featured video (75%) + lead CTA rail (25%) ---- */ .video-cta-layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(260px,1fr);gap:1.4rem;align-items:stretch} .video-card--feature img{aspect-ratio:16/9;object-fit:cover;width:100%;height:100%} .video-card--feature iframe{aspect-ratio:16/9;height:100%} .video-cta-aside{display:flex;flex-direction:column} .video-cta-aside .lead-actions{margin-top:auto} button.lead-action{font:inherit;text-align:left;cursor:pointer;width:100%} @media(max-width:900px){ .video-cta-layout{grid-template-columns:1fr} .shorts-grid{grid-template-columns:repeat(2,1fr)} } /* ---- ticket cards ---- */ .ticket-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;align-items:stretch} .ticket{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.7rem;position:relative;transition:box-shadow .25s,border-color .25s,transform .25s var(--ease)} .ticket:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-strong)} .ticket.featured{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),var(--shadow)} .ticket .ribbon{position:absolute;top:1.2rem;right:1.2rem;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#fff;background:var(--grad-accent-2);padding:.32rem .65rem;border-radius:6px} .ticket h3{margin-bottom:.3rem} .ticket .price{font-family:var(--ff-display);font-size:1.6rem;font-weight:650;color:var(--heading);margin:.6rem 0;font-variant-numeric:tabular-nums} .ticket .price small{font-size:.85rem;color:var(--muted);font-weight:500} .ticket .feature-list{flex:1;margin:1rem 0} .ticket .feature-list li{font-size:.92rem} /* ---- FAQ accordion ---- */ .accordion{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface)} .accordion .item{border-bottom:1px solid var(--line)} .accordion .item:last-child{border-bottom:0} .accordion .q{width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:1rem; padding:1.25rem 1.4rem;background:none;border:0;color:var(--heading);font-family:var(--ff-display);font-weight:600;font-size:1.02rem;cursor:pointer;transition:color .2s,padding-left .25s var(--ease)} .accordion .q:hover{color:var(--blue);padding-left:1.7rem} .accordion .q .ic{flex:none;width:26px;height:26px;border-radius:8px;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;transition:.2s} .accordion .q[aria-expanded="true"] .ic{background:var(--grad-accent-2);color:#fff;transform:rotate(45deg);border-color:transparent} .accordion .a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)} .accordion .a-inner{padding:0 1.4rem 1.3rem;color:var(--text-dim)} /* ---- forms ---- */ .form-wrap{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-lg);padding:clamp(1.5rem,1rem + 2vw,2.6rem);box-shadow:var(--shadow);position:relative;overflow:hidden} .form-wrap::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad-accent-2)} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.4rem;align-items:start} .field{display:flex;flex-direction:column;gap:.4rem;min-width:0} .field[hidden]{display:none} .form-grid .full{grid-column:1/-1} .field label{font-weight:600;font-size:.9rem;color:var(--heading)} .field label .req{color:var(--blue)} .field input,.field select,.field textarea{width:100%;padding:.85rem 1rem;border-radius:var(--radius-sm);border:1px solid var(--line-strong); background:var(--surface);color:var(--heading);font:inherit;font-size:.97rem;transition:border-color .2s,box-shadow .2s} .field textarea{min-height:120px;resize:vertical} .field input::placeholder,.field textarea::placeholder{color:var(--muted-2)} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue-bright);box-shadow:var(--ring);outline:none} .field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:var(--error)} .field .err{color:var(--error);font-size:.82rem;min-height:1em;display:none} .field.invalid .err{display:block} .field .hint{color:var(--muted-2);font-size:.82rem} .field input[type=file]{padding:.6rem;background:var(--surface-2)} .consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;color:var(--text-dim);line-height:1.5} .consent input{width:20px;height:20px;flex:none;margin-top:.15rem;accent-color:var(--blue-bright)} .consent a{color:var(--blue);text-decoration:underline} /* compact inquiry form */ .inquiry-form{max-width:600px;margin-inline:auto;gap:.8rem .9rem} .inquiry-form .field label{font-size:.84rem;font-weight:500} .inquiry-form .field input,.inquiry-form .field select{padding:.68rem .8rem;font-size:.92rem;border-radius:var(--radius-sm)} .inquiry-form .consent{font-size:.82rem} .inquiry-form .inquiry-submit{margin-top:.2rem} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .form-note{font-size:.85rem;color:var(--muted);margin-top:1rem} .form-status{display:none;padding:1rem 1.2rem;border-radius:10px;margin-bottom:1.2rem;font-weight:500} .form-status.show{display:block} .form-status.success{background:var(--success-bg);border:1px solid var(--success-line);color:var(--success)} .form-status.error{background:var(--error-bg);border:1px solid var(--error-line);color:var(--error)} .thanks-banner{width:var(--container);margin:1.4rem auto 0;padding:1rem 1.2rem;border-radius:10px;background:var(--success-bg);border:1px solid var(--success-line);color:var(--success);font-weight:500} .btn.loading{position:relative;color:transparent!important;pointer-events:none} .btn.loading::after{content:"";position:absolute;width:18px;height:18px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* ---- CTA band (deep navy accent section, fixed across themes) ---- */ .cta-band{position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:clamp(2.4rem,1.5rem + 4vw,4.5rem); background:radial-gradient(900px 520px at 85% -10%,rgba(37,99,235,.34),transparent 58%), radial-gradient(700px 420px at 8% 110%,rgba(8,145,178,.26),transparent 55%), linear-gradient(125deg,var(--navy-950),var(--navy-800));border:1px solid var(--navy-750)} .cta-band::before{content:"";position:absolute;left:0;right:0;top:0;height:2px; background:linear-gradient(90deg,transparent,#22d3ee,#3b82f6,transparent);opacity:.8} .cta-band::after{content:"";position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:44px 44px;mask-image:radial-gradient(700px 420px at 80% 0%,#000,transparent 75%)} .cta-band>*{position:relative;z-index:1} /* full-width (edge-to-edge) CTA band */ .cta-band--full{border-radius:0;border-left:0;border-right:0;padding:clamp(2.8rem,1.8rem + 4vw,5rem) 0} .cta-band h2{max-width:22ch;color:#fff} .cta-band p{color:rgba(255,255,255,.82);max-width:56ch;font-size:1.08rem} .cta-band .eyebrow{color:#7dd3fc} /* ghost buttons on dark photo/navy surfaces need light treatment */ .cta-band .btn--ghost,.cta-bar .btn--ghost,.cta-banner .btn--ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.38);backdrop-filter:blur(6px)} .cta-band .btn--ghost:hover,.cta-bar .btn--ghost:hover,.cta-banner .btn--ghost:hover{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.6)} /* ---- image CTA bar (photo background + readable overlaid content) ---- */ .cta-bar{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--line-strong); min-height:300px;display:flex;align-items:center} .cta-bar__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} .cta-bar__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,rgba(5,13,31,.93) 0%,rgba(5,13,31,.82) 44%,rgba(16,37,76,.45) 100%)} /* full-width (edge-to-edge) photo CTA bar */ .cta-bar--full{border-radius:0;border-left:0;border-right:0;min-height:360px;padding:clamp(2.4rem,1.6rem + 3vw,4rem) 0} /* branded artwork CTA: taller, lighter scrim so the banner shows through */ .cta-bar--banner{min-height:440px} .cta-bar--banner .cta-bar__bg{object-position:center} .cta-bar--banner .cta-bar__scrim{background:linear-gradient(100deg,rgba(5,13,31,.86) 0%,rgba(5,13,31,.55) 42%,rgba(5,13,31,.06) 100%)} .cta-bar--banner.cta-bar--right .cta-bar__scrim{background:linear-gradient(260deg,rgba(5,13,31,.86) 0%,rgba(5,13,31,.55) 42%,rgba(5,13,31,.06) 100%)} .cta-bar--full>.container{width:var(--container)} .cta-bar--full.cta-bar--right>.container{display:flex;justify-content:flex-end} .cta-bar--right{justify-content:flex-end;text-align:right} .cta-bar--right .cta-bar__scrim{background:linear-gradient(255deg,rgba(5,13,31,.93) 0%,rgba(5,13,31,.82) 44%,rgba(16,37,76,.45) 100%)} .cta-bar__body{padding:clamp(1.8rem,1.2rem + 3vw,3.2rem);max-width:620px} .cta-bar__body h2{max-width:20ch;margin:.4rem 0 .7rem;color:#fff} .cta-bar__body p{color:rgba(255,255,255,.85);max-width:56ch;margin-bottom:0} .cta-bar__body .eyebrow{color:#7dd3fc} .cta-bar--right .cta-bar__body .btn-row{justify-content:flex-end} @media(max-width:640px){ .cta-bar__body{max-width:100%} .cta-bar--right{justify-content:flex-start;text-align:left} .cta-bar--right .cta-bar__body .btn-row{justify-content:flex-start} } /* ---- icon + title topic card (icon and title on one line) ---- */ .card--topic{display:flex;align-items:center;gap:.85rem;padding:1.15rem 1.25rem} .ico--pill{flex:none;width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--tint-accent);border:1px solid var(--tint-accent-line)} .ico--pill svg{width:22px;color:var(--blue)} .card--topic h3{margin:0;font-size:1rem;line-height:1.35;font-family:var(--ff-display);font-weight:600} /* ---- background-image CTA banner (mid-article) ---- */ .cta-banner{position:relative;overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--line-strong);margin:1.6rem 0;isolation:isolate} .cta-banner__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} .cta-banner__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,rgba(5,13,31,.91) 0%,rgba(5,13,31,.78) 45%,rgba(16,37,76,.5) 100%)} .cta-banner__body{padding:clamp(1.8rem,1.2rem + 3vw,3.2rem)} .cta-banner__body h2{max-width:22ch;margin:.4rem 0 .7rem;color:#fff} .cta-banner__body p{color:rgba(255,255,255,.85);max-width:60ch;margin-bottom:0} .cta-banner__body .eyebrow{color:#7dd3fc} /* ---- homepage: compact hero (background only, 60% copy) ---- */ .hero--home-compact .hero-inner{padding:clamp(2.6rem,1.8rem + 3.4vw,4.4rem) 0} .hero-copy{max-width:62%} .hero-copy .hero-sub{max-width:56ch} @media(max-width:900px){.hero-copy{max-width:100%}} /* ---- media split (Why Attend) ---- */ .split--media .split-media img{width:100%;height:100%;min-height:340px;object-fit:cover;border-radius:var(--radius-lg);border:1px solid var(--line-strong);box-shadow:var(--shadow)} @media(max-width:820px){.split--media .split-media{order:-1}.split--media .split-media img{min-height:220px}} /* ---- homepage: highlight videos + lead-gen rail ---- */ .video-lead-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(1.6rem,1rem + 3vw,2.8rem);align-items:start} .video-lead-aside{position:sticky;top:96px} .lead-actions{display:flex;flex-direction:column;gap:.5rem;margin-top:.2rem} .lead-action{display:flex;align-items:center;gap:.7rem;padding:.7rem .85rem;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:.92rem;font-weight:500;transition:border-color .2s,background .2s,color .2s} .lead-action:hover{border-color:var(--line-strong);background:var(--surface-2);color:var(--heading)} .lead-action__ico{width:32px;height:32px;flex:none;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--tint-accent);border:1px solid var(--tint-accent-line)} .lead-action__ico svg{width:18px;color:var(--blue)} .lead-action__t{flex:1} .lead-action > svg:last-child{width:16px;color:var(--muted);flex:none} @media(max-width:900px){.video-lead-layout{grid-template-columns:1fr}.video-lead-aside{position:static}} /* ---- prose (legal/content pages) ---- */ .prose{max-width:var(--reading)} .prose h2{margin-top:2.4rem} .prose h3{margin-top:1.8rem} .prose ul li{margin-bottom:.5rem;color:var(--text-dim)} .prose p{color:var(--text-dim)} /* ---- related links ---- */ .related{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem} .related a{display:block;padding:1.1rem 1.3rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--heading);font-weight:600;transition:.2s;position:relative;overflow:hidden} .related a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--grad-accent-2); transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)} .related a:hover{border-color:var(--blue);color:var(--heading);transform:translateY(-2px);box-shadow:var(--shadow)} .related a:hover::after{transform:scaleX(1)} .related a span{display:block;font-size:.82rem;color:var(--muted);font-weight:400;margin-top:.25rem} /* ---- footer (near-black navy corporate footer, fixed across themes) ---- */ .site-footer{background:linear-gradient(180deg,var(--navy-950),#040a18);padding:4rem 0 2rem;margin-top:2rem;position:relative} .site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent,#22d3ee 30%,#3b82f6 70%,transparent);opacity:.6} .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.2rem} .footer-grid h4{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:#7dd3fc;margin-bottom:1.1rem} .footer-grid ul{list-style:none;padding:0;margin:0} .footer-grid li{margin-bottom:.6rem} .footer-grid a{color:rgba(255,255,255,.72);font-size:.93rem;transition:color .2s} .footer-grid a:hover{color:#fff} .site-footer .brand{color:#fff} .site-footer .brand:hover{color:#fff} .site-footer .brand small{color:#7dd3fc} .footer-about p{color:rgba(255,255,255,.66);font-size:.93rem;max-width:36ch} .footer-contact{color:rgba(255,255,255,.72);font-size:.92rem;line-height:1.9;margin-top:.6rem} .footer-contact a{color:rgba(255,255,255,.72)} .site-footer strong{color:#fff} .social-row{display:flex;gap:.6rem;margin-top:1rem} .social-row a{width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.8);transition:.2s} .social-row a:hover{background:rgba(56,189,248,.14);color:#fff;border-color:#38bdf8;transform:translateY(-2px)} .social-row svg{width:18px} .news-form{display:flex;gap:.5rem;margin-top:.8rem} .news-form input{flex:1;padding:.7rem .9rem;border-radius:9px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);color:#fff;font:inherit} .news-form input::placeholder{color:rgba(255,255,255,.5)} .footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:2.8rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.52);font-size:.85rem} .footer-bottom a{color:rgba(255,255,255,.52)} .footer-bottom a:hover{color:#fff} /* ---- sticky mobile CTA ---- */ .sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;grid-template-columns:repeat(4,1fr); gap:1px;background:var(--line);border-top:1px solid var(--line-strong);backdrop-filter:blur(10px)} .sticky-cta a{background:var(--sticky-bg);padding:.7rem .3rem;text-align:center;font-size:.72rem;font-weight:600;color:var(--text-dim);display:flex;flex-direction:column;align-items:center;gap:.25rem} .sticky-cta a.primary{background:var(--grad-accent-2);color:#fff} .sticky-cta svg{width:20px} /* ---- timed lead-capture popup ---- */ .lead-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:1.2rem} .lead-modal[hidden]{display:none} .lead-modal__scrim{position:absolute;inset:0;background:rgba(5,13,31,.62);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);opacity:0;transition:opacity .25s} .lead-modal__panel{position:relative;width:min(480px,100%);max-height:94vh;overflow-y:auto;overscroll-behavior:contain; scrollbar-width:none; background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg); padding:1.4rem 1.5rem;opacity:0;transform:translateY(22px) scale(.97);transition:opacity .3s var(--ease),transform .3s var(--ease)} .lead-modal__panel::-webkit-scrollbar{display:none} .lead-modal__panel::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad-accent-2)} .lead-modal.open .lead-modal__scrim{opacity:1} .lead-modal.open .lead-modal__panel{opacity:1;transform:none} .lead-modal__close{position:absolute;top:.9rem;right:.9rem;z-index:2;width:40px;height:40px;border-radius:10px;border:1px solid var(--line-strong); background:var(--surface);color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .2s,border-color .2s,background .2s} .lead-modal__close:hover{color:var(--heading);border-color:var(--blue);background:var(--surface-2)} .lead-modal .inquiry-form{max-width:none} .lead-modal .lead-modal__close{width:34px;height:34px;top:.7rem;right:.7rem} /* ---- compact inquiry form — one shared layout for the popup AND every inline form across the site. Two fields per row ("I want to" + Company, Name + Email); Contact Number spans the entire row. ---- */ .form-wrap .form-intro,.lead-modal .form-intro{margin-bottom:.8rem} .lead-modal .form-intro{padding-right:2.4rem} .form-wrap .form-intro .eyebrow,.lead-modal .form-intro .eyebrow{font-size:.66rem;margin-bottom:.5rem} /* urgency intro: bright yellow "Closing Soon" highlight badge with a calm pulse */ .form-intro--urgent .badge--urgent{margin-bottom:.6rem} .badge--urgent{color:#713f12;background:#fde047;border-color:#facc15;font-weight:700;letter-spacing:.06em; box-shadow:0 0 0 4px rgba(250,204,21,.18),0 6px 18px -6px rgba(250,204,21,.45);animation:pulse-badge 2.2s ease-in-out infinite} @keyframes pulse-badge{50%{opacity:.72;box-shadow:0 0 0 7px rgba(250,204,21,.10),0 6px 18px -6px rgba(250,204,21,.3)}} .form-wrap .form-intro h3,.lead-modal .form-intro h3{font-size:1.15rem;margin-bottom:.25rem} .form-wrap .form-intro p,.lead-modal .form-intro p{font-size:.84rem;line-height:1.5} .inquiry-form{max-width:480px;gap:.55rem .7rem} /* inline forms fill their dark box edge-to-edge (popup keeps its own width) */ .form-wrap .inquiry-form{max-width:none} .inquiry-form>.field.full{grid-column:auto} .inquiry-form>.field.full.phone-field, .inquiry-form>.field.full:has(.consent){grid-column:1/-1} .inquiry-form .field label{font-size:.76rem} .inquiry-form .field input,.inquiry-form .field select,.inquiry-form .field textarea{padding:.5rem .65rem;font-size:.85rem;border-radius:7px} .inquiry-form .field textarea{min-height:76px} .inquiry-form .field .err{font-size:.72rem;min-height:0} .inquiry-form .phone-field .phone-row{grid-template-columns:minmax(116px,150px) 1fr} .inquiry-form .consent{font-size:.74rem;gap:.5rem;line-height:1.45} .inquiry-form .consent input{width:16px;height:16px} /* simple, small submit button: flat solid blue, no gradient/shine */ .inquiry-form .inquiry-submit{padding:.66rem 1.5rem;font-size:.9rem;background:#2563eb;border-radius:8px;box-shadow:none} .inquiry-form .inquiry-submit::before{display:none} .inquiry-form .inquiry-submit:hover{background:#1d4ed8;box-shadow:none} body.modal-open{overflow:hidden} /* mobile: compact centered dialog that fits the screen */ @media(max-width:560px){ .lead-modal{padding:.8rem;align-items:center} .lead-modal__panel{width:100%;max-height:90dvh;border-radius:var(--radius-lg);padding:1rem 1rem 1.15rem;transform:translateY(22px) scale(.97)} .lead-modal .lead-modal__close{width:30px;height:30px;top:.55rem;right:.55rem} .lead-modal .form-intro{margin-bottom:.55rem;padding-right:2rem} .lead-modal .form-intro h3{font-size:1rem;margin-bottom:.2rem} .lead-modal .form-intro p{font-size:.75rem;line-height:1.45} .lead-modal .badge--urgent{font-size:.6rem;padding:.26rem .55rem} /* keep two fields per row on phones so the form stays short */ .lead-modal .inquiry-form.form-grid{grid-template-columns:1fr 1fr;gap:.45rem .5rem} .lead-modal .inquiry-form>.field.full:has(input[type="email"]){grid-column:1/-1} .lead-modal .field label{font-size:.7rem} .lead-modal .field input,.lead-modal .field select,.lead-modal .field textarea{padding:.42rem .55rem;font-size:.8rem} .lead-modal .field .err{font-size:.66rem} .lead-modal .phone-field .phone-row{grid-template-columns:100px 1fr;gap:.45rem} .lead-modal .isd-btn{min-height:32px;padding:.36rem .5rem;font-size:.78rem} .lead-modal .consent{font-size:.68rem;gap:.45rem;line-height:1.4} .lead-modal .consent input{width:14px;height:14px} .lead-modal .inquiry-submit{padding:.6rem 1.3rem;font-size:.85rem} } /* ---- dark corporate form box (every inline inquiry form + the popup) ---- Same scoped-token technique as .section--deep: remap the design tokens inside the box so fields, labels, hints and states adapt automatically. */ .form-wrap,.lead-modal__panel{ color-scheme:dark; background:radial-gradient(560px 320px at 100% 0%,rgba(37,99,235,.28),transparent 60%), radial-gradient(420px 280px at 0% 100%,rgba(8,145,178,.20),transparent 55%), linear-gradient(150deg,var(--navy-850),var(--navy-800)); border-color:var(--navy-750); --surface:rgba(255,255,255,.06); --surface-2:rgba(255,255,255,.10); --surface-3:rgba(255,255,255,.12); --line:rgba(158,180,222,.16); --line-strong:rgba(158,180,222,.34); --heading:#ffffff; --text:#c7d3ea; --text-dim:#aebcda; --muted:#8fa1c6; --muted-2:#8298bf; --blue:#9dc0ff; --blue-bright:#60a5fa; --cyan:#67e8f9; --tint-accent:rgba(103,177,255,.14); --tint-accent-line:rgba(103,177,255,.30); --tint-hover:rgba(103,177,255,.12); --success:#34d399; --success-bg:rgba(52,211,153,.12); --success-line:rgba(52,211,153,.35); --error:#f87171; --error-bg:rgba(248,113,113,.14); --error-line:rgba(248,113,113,.38); --sb-track:rgba(158,180,222,.22); --ring:0 0 0 3px rgba(96,165,250,.40); --shadow-lg:0 2px 5px rgba(0,0,0,.3),0 42px 96px -36px rgba(0,0,0,.55)} .form-wrap .field input,.form-wrap .field select,.form-wrap .field textarea, .lead-modal__panel .field input,.lead-modal__panel .field select,.lead-modal__panel .field textarea{color:#fff} .form-wrap .field input::placeholder,.form-wrap .field textarea::placeholder, .lead-modal__panel .field input::placeholder,.lead-modal__panel .field textarea::placeholder{color:rgba(199,211,234,.55)} .form-wrap .field select option,.lead-modal__panel .field select option{background:var(--navy-850);color:#fff} .lead-modal__panel::before,.form-wrap::before{background:linear-gradient(90deg,#22d3ee,#3b82f6)} /* ---- cookie banner ---- */ .cookie{position:fixed;left:14px;right:14px;bottom:14px;z-index:95;max-width:560px;margin-inline:auto; background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);padding:1.1rem 1.3rem; box-shadow:var(--shadow-lg);display:none;gap:1rem;align-items:center;flex-wrap:wrap} .cookie.show{display:flex} .cookie p{margin:0;font-size:.88rem;color:var(--text-dim);flex:1;min-width:220px} /* ---- misc ---- */ .muted{color:var(--muted)} .center{text-align:center} .mt-2{margin-top:1.4rem}.mt-3{margin-top:2rem}.mb-0{margin-bottom:0} .disclaimer{font-size:.85rem;color:var(--muted);border-left:2px solid var(--line-strong);padding-left:1rem;margin:1.5rem 0} .pill-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0} .split{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;align-items:center} /* ---- blog / long-tail content layout with lead-gen sidebar ---- */ .blog-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(1.8rem,1rem + 3vw,3.4rem);align-items:start} .blog-main{min-width:0} .blog-main .content-block{padding:1.6rem 0;border-top:1px solid var(--line)} .blog-main .content-block:first-child{border-top:0;padding-top:0} .blog-main .content-block h2{margin-bottom:1rem} .blog-main .content-block p{color:var(--text-dim);margin-bottom:1rem;line-height:1.75;text-align:justify;text-justify:inter-word;hyphens:auto} .blog-main .content-block p:last-child{margin-bottom:0} .blog-main .lead-intro .lede{font-size:1.15rem;color:var(--text);text-align:justify;hyphens:auto} @media(max-width:560px){.blog-main .content-block p,.blog-main .lead-intro .lede{text-align:left;hyphens:none}} .blog-main .speaker-grid{grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:.4rem} .check-list--2col{display:grid;grid-template-columns:1fr 1fr;gap:0 1.6rem} .blog-sidebar{position:sticky;top:96px} .blog-sidebar__inner{display:flex;flex-direction:column;gap:1rem} .lead-widget{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-lg);padding:1.3rem;box-shadow:0 1px 2px rgba(8,18,38,.04)} .lead-widget__head{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem} .lead-widget__ico{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--tint-accent);border:1px solid var(--tint-accent-line)} .lead-widget__ico svg{width:20px;color:var(--blue)} .lead-widget h3{font-size:1.05rem;margin-bottom:.4rem} .lead-widget p{color:var(--text-dim);font-size:.9rem;margin-bottom:.9rem;line-height:1.55} .lead-widget--facts{background:var(--widget-facts-bg)} .fact-list{list-style:none;padding:0;margin:0 0 1rem} .fact-list li{display:flex;gap:.7rem;align-items:flex-start;padding:.55rem 0;font-size:.9rem;color:var(--text-dim);border-bottom:1px solid var(--line)} .fact-list li:last-child{border-bottom:0} .fact-list svg{width:18px;color:var(--blue);flex:none;margin-top:.15rem} @media(max-width:980px){ .blog-layout{grid-template-columns:1fr} .blog-sidebar{position:static;order:2} .blog-sidebar__inner{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem} } @media(max-width:560px){ .check-list--2col{grid-template-columns:1fr} .blog-sidebar__inner{grid-template-columns:1fr} } .skeleton{background:linear-gradient(90deg,var(--surface-3),var(--surface-2),var(--surface-3));background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:8px;min-height:1em} @keyframes shimmer{to{background-position:-200% 0}} /* =========================== responsive =========================== */ @media (max-width:1080px){ .hero-grid{grid-template-columns:1fr;gap:2rem} .hero-visual{order:-1;max-width:560px} .grid-4,.ticket-grid,.gallery-grid{grid-template-columns:repeat(2,1fr)} .snapshot{grid-template-columns:repeat(3,1fr)} .footer-grid{grid-template-columns:1fr 1fr} .has-mega>.dropdown{grid-template-columns:1fr} } @media (max-width:880px){ :root{--header-h:64px} .nav-menu,.nav-cta .btn{display:none} .nav-toggle{display:flex} .mobile-nav{display:block} .grid-3,.grid-2,.split,.related{grid-template-columns:1fr} .agenda-item{grid-template-columns:1fr;gap:.4rem} .sticky-cta{display:grid} body{padding-bottom:62px} .snapshot{grid-template-columns:repeat(2,1fr)} .theme-toggle{width:40px;height:40px} } @media (max-width:560px){ .grid-4,.ticket-grid,.gallery-grid,.grid-auto{grid-template-columns:1fr} .form-grid{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr} .btn-row .btn{width:100%} .date-ribbon{flex-direction:column;width:100%} .date-pill{border-right:0;border-bottom:1px solid var(--line)} .date-pill:last-child{border-bottom:0} .countdown{flex-wrap:wrap} .cd-cell{flex:1;min-width:64px} /* compact mobile header brand */ .brand{font-size:.98rem;gap:.5rem} .brand small{font-size:.58rem;letter-spacing:.12em} .brand-mark{width:34px;height:34px} } /* ===================================================================== IMAGE HEROES, INVOLVE LAYOUT, DYNAMIC FORM, PRICING, METRICS, BRANDS, SENIORITY, TESTIMONIALS ===================================================================== */ /* ---- image hero (photo + navy scrim, white text — fixed across themes) ---- */ .hero--img{background:var(--navy-900);border-bottom:0} .hero--img::after{opacity:.10} .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;z-index:0} .hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(5,13,31,.74),rgba(5,13,31,.82)), radial-gradient(1100px 640px at 80% -8%,rgba(37,99,235,.28),transparent 60%), linear-gradient(90deg,rgba(5,13,31,.88) 0%,rgba(5,13,31,.56) 55%,rgba(5,13,31,.35) 100%)} .hero--img .hero-inner,.hero--home .hero-inner{position:relative;z-index:2} .hero--xs .hero-inner{padding:clamp(1.2rem,.9rem + 1.6vw,2rem) 0} .hero--xs h1{font-size:clamp(1.8rem,1.3rem + 2vw,2.6rem)} .hero--xs .hero-sub{font-size:1.02rem;margin-bottom:.6rem} .hero--xs .hero-trust{margin-top:.8rem} .hero--sm .hero-inner{padding:clamp(2rem,1.4rem + 3vw,3.4rem) 0} .hero--md .hero-inner{padding:clamp(2.6rem,2rem + 3.5vw,4.6rem) 0} .hero--lg .hero-inner{padding:clamp(3rem,2rem + 5vw,6rem) 0} .hero--img .hero-sub{max-width:60ch} .hero--home{background:var(--navy-900);border-bottom:0} .hero--home .hero-bg{object-position:center} /* home hero: dark left (for copy) fading to a fully visible image on the right */ .hero--home .hero-scrim{background:linear-gradient(90deg,rgba(5,13,31,.96) 0%,rgba(5,13,31,.84) 32%,rgba(5,13,31,.42) 60%,rgba(5,13,31,.04) 100%)} /* 15% smaller title + 15% shorter hero */ .hero--home h1{font-size:clamp(1.9rem,1.2rem + 2.9vw,3.4rem)} .hero--home-compact .hero-inner{padding:clamp(2.2rem,1.5rem + 2.9vw,3.75rem) 0} .hero-photo{border-radius:var(--radius-lg);border:1px solid var(--line-strong);box-shadow:var(--shadow-lg);object-fit:cover;object-position:center top;width:100%;aspect-ratio:4/3} /* white-on-navy text inside photo heroes */ .hero--img h1,.hero--home h1{color:#fff} .hero--img h1 .grad,.hero--home h1 .grad{background:linear-gradient(100deg,#67e8f9,#7fb0ff 60%,#93c5fd);-webkit-background-clip:text;background-clip:text;color:transparent} .hero--img .hero-sub,.hero--home .hero-sub{color:rgba(255,255,255,.88)} .hero--img .eyebrow,.hero--home .eyebrow{color:#7dd3fc} .hero--img .hero-trust,.hero--home .hero-trust{color:rgba(255,255,255,.75)} .hero--img .hero-trust svg,.hero--home .hero-trust svg{color:#7dd3fc} .hero--img .breadcrumbs ol,.hero--home .breadcrumbs ol{color:rgba(255,255,255,.7)} .hero--img .breadcrumbs a,.hero--home .breadcrumbs a{color:rgba(255,255,255,.85)} .hero--img .date-ribbon,.hero--home .date-ribbon{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);backdrop-filter:blur(6px)} .hero--img .date-pill,.hero--home .date-pill{background:transparent;border-right-color:rgba(255,255,255,.16)} .hero--img .date-pill .d,.hero--home .date-pill .d{color:#fff} .hero--img .date-pill .l,.hero--home .date-pill .l{color:rgba(255,255,255,.68)} .hero--img .btn--ghost,.hero--home .btn--ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.38);backdrop-filter:blur(6px)} .hero--img .btn--ghost:hover,.hero--home .btn--ghost:hover{background:rgba(255,255,255,.18);color:#fff} .hero--img .ico,.hero--home .ico{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)} .hero--img .ico svg,.hero--home .ico svg{color:#7dd3fc} @media (max-width:560px){ .hero--img .date-pill,.hero--home .date-pill{border-right:0;border-bottom:1px solid rgba(255,255,255,.14)} .hero--img .date-pill:last-child,.hero--home .date-pill:last-child{border-bottom:0} } /* ---- get-involved two-column layout ---- */ .involve-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;align-items:start} .involve-benefits h2{margin-bottom:.8rem} .involve-benefits .check-list{margin-top:1rem} .form-intro{margin-bottom:1.2rem} .form-intro h3{margin-bottom:.3rem} .form-intro p{color:var(--text-dim);margin-bottom:0;font-size:.95rem} @media (max-width:960px){.involve-grid{grid-template-columns:1fr;gap:1.6rem}} /* ---- dynamic inquiry form ---- */ .inquiry-form .consent a{color:var(--blue);text-decoration:underline} .cond-group{margin:0;padding:0} .cond-group[hidden]{display:none} .cond-group .form-grid{gap:1.1rem;margin:0} .phone-field .phone-row{display:grid;grid-template-columns:minmax(120px,150px) 1fr;gap:.6rem} .phone-field .isd{min-width:0} /* ISD dropdown trigger (matches inputs, adapts to dark form boxes) */ .isd-btn{display:flex;align-items:center;gap:.4rem;width:100%;height:100%;min-height:36px;padding:.5rem .6rem;border-radius:7px; border:1px solid var(--line-strong);background:var(--surface);color:var(--heading);cursor:pointer;font-family:inherit;font-size:.85rem} .isd-btn svg{width:13px;margin-left:auto;color:var(--muted);flex:none} .isd-btn:focus-visible{box-shadow:var(--ring)} .isd-flag{font-size:1rem;line-height:1} /* dropdown panel: fixed-positioned (floats above modals), search box inside */ .isd-pop{position:fixed;z-index:1300;background:#0d1c3a;border:1px solid rgba(158,180,222,.35);border-radius:12px; box-shadow:0 24px 60px -20px rgba(0,0,0,.6);padding:.55rem} .isd-pop[hidden]{display:none} .isd-search{width:100%;padding:.5rem .65rem .5rem 1.9rem;border-radius:7px;border:1px solid rgba(158,180,222,.34); background:rgba(255,255,255,.07);color:#fff;margin-bottom:.45rem;font:inherit;font-size:.85rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fa1c6' stroke-width='2.2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:.55rem center;background-size:14px} .isd-search::placeholder{color:rgba(199,211,234,.55)} .isd-search:focus{outline:none;border-color:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.3)} .isd-list{list-style:none;margin:0;padding:0;max-height:220px;overflow-y:auto} .isd-list li{display:flex;align-items:center;gap:.5rem;padding:.5rem .55rem;border-radius:7px;cursor:pointer;font-size:.85rem;color:#c7d3ea} .isd-list li:hover{background:rgba(103,177,255,.14);color:#fff} .isd-list li .dial{margin-left:auto;color:#8fa1c6} .isd-list li.empty{color:#8fa1c6;cursor:default} .isd-list li.empty:hover{background:none} /* ---- pricing: sticky tabs ---- */ .ptabs-wrap{position:sticky;top:var(--header-h);z-index:90;background:var(--header-bg-solid);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-strong)} .ptabs{display:flex;gap:.4rem;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:.6rem 0} .ptabs::-webkit-scrollbar{display:none} .ptab{flex:0 0 auto;padding:.7rem 1.15rem;border-radius:var(--radius-btn);border:1px solid var(--line-strong);background:var(--surface); color:var(--text-dim);font-family:var(--ff-display);font-weight:600;font-size:.92rem;white-space:nowrap;transition:.2s} .ptab:hover{color:var(--heading);border-color:var(--blue)} .ptab.active{background:var(--grad-accent-2);color:#fff;border-color:transparent} .ptab-panel{scroll-margin-top:calc(var(--header-h) + 64px)} /* tabbed panels: show only the active one (JS-enabled) */ html.js .ptab-panel{display:none} html.js .ptab-panel.is-active{display:block} /* ---- pricing cards ---- */ .price-grid{display:grid;gap:1.2rem;align-items:stretch} .price-grid.grid-3{grid-template-columns:repeat(3,1fr)} .price-grid.grid-4{grid-template-columns:repeat(4,1fr)} .price-card{display:flex;flex-direction:column;background:var(--surface); border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem;position:relative; box-shadow:0 1px 2px rgba(8,18,38,.04);transition:box-shadow .25s,border-color .25s,transform .25s var(--ease)} .price-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-strong)} .price-card.featured{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),var(--shadow)} .price-card .ribbon{position:absolute;top:-.7rem;left:1.4rem;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em; color:#fff;background:var(--grad-accent-2);padding:.32rem .7rem;border-radius:6px} .price-card h3{margin-bottom:.2rem} .price-kicker{font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--blue);font-weight:600;margin-bottom:.6rem} .price-block{margin:.4rem 0 1rem} .price-now{font-family:var(--ff-display);font-size:1.9rem;font-weight:650;color:var(--heading);line-height:1.1;font-variant-numeric:tabular-nums} .price-now .price-unit{font-size:.8rem;color:var(--blue);font-weight:600;letter-spacing:.02em} .price-was{color:var(--muted);font-size:.9rem;margin-top:.2rem} .price-save{color:var(--success);font-size:.82rem;margin-top:.2rem;font-weight:600} .price-card .feature-list{flex:1;margin:.4rem 0 1.2rem} .price-card .feature-list li{font-size:.9rem} .price-mini{font-family:var(--ff-display);font-weight:650;color:var(--heading);font-size:1.15rem;margin:.4rem 0} .price-mini span{font-size:.78rem;color:var(--muted);font-weight:500} /* ---- comparison table (responsive: horizontal scroll + sticky label column) ---- */ .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);scrollbar-width:thin} table.compare{width:100%;border-collapse:separate;border-spacing:0;min-width:720px;font-size:.92rem} table.compare th,table.compare td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;min-width:120px} table.compare thead th{background:var(--surface-2);color:var(--heading);font-family:var(--ff-display);position:sticky;top:0} table.compare tbody th{color:var(--text-dim);font-weight:600} /* row labels stay visible while the tiers scroll horizontally */ table.compare tbody th,table.compare thead th:first-child,table.compare .row-price th{position:sticky;left:0;background:var(--surface);z-index:2;min-width:150px;max-width:190px;box-shadow:inset -1px 0 0 var(--line)} table.compare thead th:first-child{background:var(--surface-2);z-index:3} table.compare td{color:var(--text-dim)} table.compare .hl{background:var(--tint-hover)} table.compare svg{width:18px;color:var(--success)} table.compare .x{color:var(--muted-2)} table.compare .row-price td{font-size:1rem} table.compare .row-price .sub{display:block;font-size:.78rem;color:var(--muted)} /* ---- notes / scarcity ---- */ .price-notes{list-style:none;padding:1.2rem 1.4rem;margin:1.6rem 0 0;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);color:var(--muted)} .price-notes li{padding:.25rem 0 .25rem 1.4rem;position:relative;font-size:.88rem} .price-notes li::before{content:"•";position:absolute;left:.3rem;color:var(--blue)} .scarcity{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:var(--radius-lg);padding:1.8rem} .scarcity .badge{margin-bottom:.6rem;background:var(--warn-badge-bg);color:var(--warning);border-color:var(--warn-badge-line)} /* ---- speaker card extra ---- */ .speaker-card .photo img{object-position:center top} .speaker-card .s-company{color:var(--blue);font-weight:600;font-size:.9rem} .speaker-card .role{min-height:auto;margin-top:.15rem} .speaker-card .s-country{color:var(--muted);font-size:.82rem;margin-top:.4rem;display:inline-flex;align-items:center;gap:.3rem} .speaker-card .s-country svg{width:14px;color:var(--muted)} /* ---- metric cards ---- */ .metric-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem} .metric{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem 1rem;text-align:center; transition:transform .25s var(--ease),border-color .25s,box-shadow .25s;position:relative;overflow:hidden} .metric::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--grad-accent-2);opacity:0;transition:opacity .25s} .metric:hover{transform:translateY(-3px);border-color:var(--tint-accent-line);box-shadow:var(--shadow)} .metric:hover::before{opacity:1} .metric-v{font-family:var(--ff-display);font-weight:650;font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem); background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1;font-variant-numeric:tabular-nums} .metric-l{color:var(--muted);font-size:.82rem;margin-top:.45rem} /* ---- brand grid ---- */ .brand-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem} .brand-cell{display:flex;align-items:center;justify-content:center;text-align:center;padding:1.15rem .8rem; background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);color:var(--text-dim); font-family:var(--ff-display);font-weight:600;font-size:.95rem;transition:.2s} .brand-cell:hover{border-color:var(--blue);color:var(--heading);transform:translateY(-2px)} /* ---- seniority bars ---- */ .seniority-bars{list-style:none;padding:0;margin:0} .seniority-bars li{margin-bottom:.9rem} .sb-top{display:flex;justify-content:space-between;font-size:.9rem;color:var(--text-dim);margin-bottom:.3rem} .sb-pct{color:var(--heading);font-weight:600;font-variant-numeric:tabular-nums} .sb-track{height:10px;border-radius:999px;background:var(--sb-track);overflow:hidden} .sb-fill{display:block;height:100%;border-radius:999px;background:var(--grad-accent-2);width:0;transition:width 1s var(--ease)} .seniority-headline{margin-top:1rem;font-weight:600;color:var(--blue)} .edit-photo img{border-radius:var(--radius-lg);border:1px solid var(--line-strong);box-shadow:var(--shadow);object-fit:cover;object-position:center top;width:100%;aspect-ratio:4/3} /* ---- testimonials ---- */ .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem} .testi-card{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:0 1px 2px rgba(8,18,38,.04)} .testi-head{display:flex;align-items:center;gap:.8rem;margin-bottom:.9rem;flex-wrap:wrap} .testi-avatar{width:56px;height:56px;border-radius:14px;object-fit:cover;object-position:center top;border:2px solid var(--line-strong);flex:none} .testi-avatar--ph{display:flex;align-items:center;justify-content:center;background:var(--grad-accent-2);color:#fff;font-family:var(--ff-display);font-weight:650;font-size:1.3rem} .testi-name{font-family:var(--ff-display);font-weight:600;color:var(--heading)} .testi-role{font-size:.82rem;color:var(--blue)} .testi-card .stars{color:var(--star);letter-spacing:.05em;margin-left:auto;font-size:.95rem} .testi-card blockquote{margin:0;color:var(--text-dim);font-size:.95rem;line-height:1.6} /* ---- responsive ---- */ @media (max-width:1080px){ .price-grid.grid-4{grid-template-columns:repeat(2,1fr)} .metric-grid{grid-template-columns:repeat(3,1fr)} .brand-grid{grid-template-columns:repeat(4,1fr)} .testi-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:880px){ .hero--home .hero-photo{max-width:520px} } @media (max-width:640px){ .price-grid.grid-3,.price-grid.grid-4{grid-template-columns:1fr} .metric-grid{grid-template-columns:repeat(2,1fr)} .brand-grid{grid-template-columns:repeat(2,1fr)} .testi-grid{grid-template-columns:1fr} .phone-field .phone-row{grid-template-columns:110px 1fr} } /* ===================================================================== MOTION LAYER — subtle, meaningful, corporate ===================================================================== */ /* hero: slow aurora drift behind content (plain heroes only, not photo heroes) */ .hero:not(.hero--img):not(.hero--home)::before{content:"";position:absolute;inset:-25% -10%;pointer-events:none; background:radial-gradient(640px 420px at 18% 24%,rgba(37,99,235,.13),transparent 60%), radial-gradient(720px 520px at 82% 8%,rgba(8,145,178,.11),transparent 60%), radial-gradient(520px 380px at 60% 90%,rgba(30,66,159,.09),transparent 60%); filter:blur(42px);animation:aurora 18s ease-in-out infinite alternate} @keyframes aurora{to{transform:translate3d(3%,-2.5%,0) scale(1.06)}} /* buttons: shine sweep */ .btn--primary{position:relative;overflow:hidden} .btn--primary::before{content:"";position:absolute;top:0;left:-70%;width:44%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent); transform:skewX(-20deg);transition:left .55s var(--ease);pointer-events:none} .btn--primary:hover::before{left:130%} /* scroll reveal (JS adds .reveal, then .in when visible) */ .reveal{opacity:0;transform:translateY(20px)} .reveal.in{opacity:1;transform:none;transition:opacity .65s var(--ease),transform .65s var(--ease)}