
@import url("vendor/fontawesome/css/all.min.css");

:root { --navy:#06285b; --ink:#07182f; --red:#ed1234; --grey:#65748a; --ice:#f3f6fa; --line:#dce5ef; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#fff; color:var(--ink); font-family:Inter,Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { height:92px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; gap:32px; border-bottom:1px solid #e6ebf1; background:rgba(255,255,255,.96); position:sticky; top:0; z-index:20; backdrop-filter:blur(12px); }
.brand img { display:block; width:232px; height:auto; }
nav { display:flex; gap:clamp(22px,3vw,52px); font-weight:650; color:#152b50; }
nav a { padding:34px 0 30px; border-bottom:3px solid transparent; transition:.2s; }
nav a:hover { color:var(--red); border-color:var(--red); }
.button { min-height:54px; padding:0 28px; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; font-weight:750; transition:transform .2s,background .2s,color .2s; }
.button:hover { transform:translateY(-2px); }
.button-primary { background:var(--red); color:#fff; box-shadow:0 10px 24px rgba(237,18,52,.2); }
.button-primary:hover { background:#c90c28; }
.button-secondary { border:2px solid var(--navy); color:var(--navy); background:#fff; }
.hero { min-height:calc(100vh - 92px); padding:90px 5vw 50px; position:relative; display:grid; grid-template-columns:minmax(390px, .82fr) 1.25fr; align-items:center; overflow:hidden; background:linear-gradient(115deg,#fff 0%,#fff 42%,#f1f6fc 72%,#e7f0fa 100%); }
.hero-copy { position:relative; z-index:2; max-width:610px; padding-bottom:90px; animation:rise .55s ease-out both; }
.eyebrow { margin:0 0 22px; color:var(--red); font-family:Arial,Helvetica,sans-serif; font-size:15px; letter-spacing:.04em; font-weight:700; text-transform:none; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:26px; color:var(--navy); font-size:clamp(48px,5.15vw,76px); line-height:1.07; letter-spacing:-.045em; font-weight:780; }
h1 span { display:block; }
.lead { max-width:580px; margin-bottom:36px; color:#4f617a; font-size:20px; line-height:1.6; }
.actions { display:flex; gap:16px; }
.product-stage { min-height:540px; display:flex; align-items:center; justify-content:center; position:relative; animation:enter .75s ease-out .1s both; }
.hero-production-image { width:100%; height:520px; object-fit:cover; border-radius:18px; box-shadow:0 30px 60px rgba(8,30,58,.25); }
.product-stage:after { content:""; position:absolute; inset:0; border-radius:18px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.45); pointer-events:none; }
.production-card { position:absolute; left:28px; bottom:28px; z-index:2; max-width:430px; padding:18px 22px; display:flex; flex-direction:column; gap:5px; border-left:4px solid var(--red); background:rgba(4,24,56,.9); color:#fff; box-shadow:0 12px 30px rgba(0,0,0,.25); backdrop-filter:blur(8px); }.production-card span { color:#ff526c; font-size:10px; letter-spacing:.14em; font-weight:800; }.production-card strong { font-size:18px; }.production-card small { color:#c8d7e8; }
.capability-rail { position:absolute; z-index:3; bottom:32px; left:5vw; right:5vw; min-height:72px; padding:0 30px; display:flex; justify-content:space-between; align-items:center; gap:18px; border:1px solid rgba(213,223,235,.9); border-radius:14px; background:rgba(255,255,255,.88); box-shadow:0 12px 35px rgba(21,48,82,.1); backdrop-filter:blur(12px); color:#29456c; font-weight:650; }.capability-rail span:before { content:"•"; color:var(--red); margin-right:14px; font-size:22px; }
.section { padding:110px 6vw; }.section h2,.spotlight h2,.made h2 { max-width:850px; margin-bottom:20px; font-size:clamp(36px,4vw,58px); line-height:1.08; letter-spacing:-.035em; color:var(--navy); }.section-intro { max-width:770px; color:var(--grey); font-size:19px; line-height:1.65; }
.feature-grid { margin-top:56px; display:grid; grid-template-columns:repeat(3,1fr); border-left:1px solid var(--line); border-top:1px solid var(--line); }.feature-grid article { min-height:255px; padding:34px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:.2s; }.feature-grid article:hover { background:var(--ice); transform:translateY(-3px); }.feature-icon { width:78px; height:78px; margin-bottom:28px; display:grid; place-items:center; border-radius:18px; background:#eaf2fb; color:var(--navy); }.feature-icon i { font-size:36px; }.feature-grid article:hover .feature-icon { background:var(--red); color:#fff; }.feature-grid h3 { margin-bottom:12px; color:var(--navy); font-size:23px; }.feature-grid p { color:var(--grey); line-height:1.65; }
.spotlight { min-height:680px; padding:100px 6vw; display:grid; grid-template-columns:1fr 1fr; gap:8vw; align-items:center; }.overlay-section { background:var(--navy); }.overlay-section h2,.overlay-section .spotlight-copy>p { color:#fff; }.spotlight-copy>p:not(.eyebrow) { font-size:18px; line-height:1.7; color:#c6d3e2; }.spotlight ul { padding:0; list-style:none; }.spotlight li { margin:15px 0; color:#d9e3ef; }.spotlight li:before { content:"✓"; margin-right:13px; color:#ff3857; font-weight:bold; }
.overlay-demo { padding:18px; border:1px solid #54749a; border-radius:10px; background:#0b1b32; box-shadow:0 28px 60px rgba(0,0,0,.3); }.video-scene { aspect-ratio:16/9; position:relative; overflow:hidden; background:linear-gradient(0deg,rgba(8,27,17,.14),rgba(8,27,17,.03)),url("assets/kabaddi-overlay.png") center/cover no-repeat; }.live-tag { position:absolute; top:16px; right:16px; padding:7px 12px; background:var(--red); color:#fff; font-size:12px; font-weight:800; }.score { position:absolute; top:16px; left:16px; display:grid; grid-template-columns:auto auto; background:#fff; box-shadow:0 5px 18px #0004; }.score b,.score strong { padding:10px 14px; }.score b { color:#fff; background:var(--navy); }.score strong { color:var(--navy); }.score small { grid-column:span 2; padding:5px; background:var(--red); color:#fff; text-align:center; }.lower-third { position:absolute; left:22px; bottom:44px; display:flex; flex-direction:column; padding:11px 70px 11px 16px; border-left:5px solid var(--red); background:linear-gradient(90deg,#fff 80%,transparent); color:var(--navy); }.lower-third span { font-size:10px; }.ticker { position:absolute; bottom:0; left:0; right:0; padding:9px; background:#051832; color:#fff; font-size:10px; letter-spacing:.08em; white-space:nowrap; }
.replay-section { background:#fff; }.replay-section .spotlight-copy>p:not(.eyebrow),.replay-section li { color:var(--grey); }.replay-visual { height:390px; position:relative; }.frame { position:absolute; width:68%; aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; border-radius:10px; background:url("assets/kabaddi-replay.png") center/cover no-repeat; border:8px solid #092343; color:#fff; font-weight:800; box-shadow:0 22px 38px #15334b32; }.frame-back { left:0; top:0; opacity:.35; filter:saturate(.6); }.frame-mid { left:14%; top:42px; opacity:.68; }.frame-front { left:28%; top:84px; flex-direction:column; gap:18px; }.frame-front:after { content:""; position:absolute; inset:0; background:#07182f42; }.frame-front span,.frame-front b { position:relative; z-index:2; }.frame-front b { width:62px; height:62px; display:grid; place-items:center; padding-left:4px; border-radius:50%; background:var(--red); }.timeline { position:absolute; left:22%; right:2%; bottom:0; display:flex; justify-content:space-around; border-top:4px solid var(--navy); }.timeline i { width:14px; height:14px; margin-top:-9px; border-radius:50%; background:var(--red); }
.applications { background:var(--ice); }.application-grid { margin-top:50px; display:grid; grid-template-columns:1fr 1fr; gap:25px; }.application-grid article { min-height:430px; padding:45px; display:flex; align-items:end; position:relative; overflow:hidden; color:#fff; border-radius:12px; }.application-grid article:before { content:""; position:absolute; inset:0; transition:.4s; }.application-grid article:hover:before { transform:scale(1.04); }.sports-card:before { background:linear-gradient(0deg,#03172ded,transparent 82%),url("assets/kabaddi-broadcast.png") center/cover no-repeat; }.events-card:before { background:linear-gradient(0deg,#35111eed,transparent 82%),url("assets/cricket-wedding-production.png") 88% center/cover no-repeat; }.application-grid article div { position:relative; z-index:2; }.application-grid span { font-size:12px; letter-spacing:.16em; font-weight:800; }.application-grid h3 { max-width:560px; margin:14px 0; font-size:32px; line-height:1.15; }.application-grid p { max-width:500px; margin:0; color:#dce6f1; line-height:1.5; }
.pricing { background:#fff; }.pricing-table-wrap { margin-top:52px; overflow-x:auto; border:1px solid var(--line); border-radius:16px; box-shadow:0 20px 55px rgba(15,46,82,.1); }.pricing-table { width:100%; min-width:850px; border-collapse:collapse; background:#fff; }.pricing-table th,.pricing-table td { padding:16px 20px; border-bottom:1px solid #e5ebf2; text-align:center; }.pricing-table thead th { padding-top:24px; padding-bottom:24px; background:#071f46; color:#fff; font-size:18px; }.pricing-table thead th:first-child { text-align:left; border-radius:15px 0 0 0; }.pricing-table thead th:last-child { border-radius:0 15px 0 0; }.pricing-table tbody th { text-align:left; color:#243b5b; font-size:15px; font-weight:650; }.pricing-table tbody td { color:#304966; font-weight:650; }.pricing-table tbody tr:nth-child(even) th,.pricing-table tbody tr:nth-child(even) td { background:#f7f9fc; }.pricing-table .standard-col { background:#eef5fd!important; color:var(--navy); }.pricing-table .recommended { position:relative; background:var(--red); }.pricing-table .recommended span { position:absolute; top:-13px; left:50%; padding:6px 12px; transform:translateX(-50%); border-radius:20px; background:#fff; color:var(--red); box-shadow:0 4px 16px #0002; font-size:10px; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }.pricing-table .price-row th,.pricing-table .price-row td { padding-top:24px; padding-bottom:24px; border-bottom:0; color:var(--navy); font-size:22px; font-weight:850; }.pricing-table .price-row .standard-col { color:var(--red); font-size:26px; }.pricing-notes { margin:24px 0 32px; padding:22px 26px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; border-radius:12px; background:var(--ice); }.pricing-notes p { margin:0; color:#4f617a; font-size:14px; line-height:1.55; }.pricing-notes i { margin-right:8px; color:var(--red); }.pricing-actions { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }.pricing-actions .button { gap:10px; }.whatsapp-button { background:#20a85a; color:#fff; box-shadow:0 10px 24px rgba(32,168,90,.2); }.whatsapp-button:hover { background:#158747; }
.made { padding:90px 6vw; display:grid; grid-template-columns:1fr 1fr; gap:9vw; align-items:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.made p:last-child { color:var(--grey); font-size:19px; line-height:1.7; }.contact { text-align:center; background:linear-gradient(135deg,#f5f8fc,#e9f2fa); }.contact h2 { margin-left:auto; margin-right:auto; }.contact>p:not(.eyebrow) { margin-bottom:30px; color:var(--grey); font-size:19px; }
footer { min-height:150px; padding:35px 6vw; display:flex; align-items:center; justify-content:space-between; gap:30px; background:#041a38; color:#b8c8da; } footer img { width:220px; filter:brightness(0) invert(1); } footer p { margin:0; }
.video-scene { background-image:linear-gradient(0deg,rgba(8,27,17,.14),rgba(8,27,17,.03)),url("assets/cricket-overlay.png"); background-position:center; background-size:cover; }
.frame { background-image:url("assets/kabaddi-replay.png"); background-position:center; background-size:cover; }
.sports-card:before { background:linear-gradient(0deg,#03172ded,transparent 82%),url("assets/kabaddi-broadcast.png") center/cover no-repeat; }
@keyframes rise { from { opacity:0; transform:translateY(18px); } } @keyframes enter { from { opacity:0; transform:translateX(28px); } }
@media (max-width:1000px) { nav { display:none; }.hero { grid-template-columns:1fr; padding-top:70px; }.hero-copy { padding-bottom:20px; }.product-stage { min-height:430px; }.capability-rail { position:relative; left:auto; right:auto; bottom:auto; grid-column:1; margin-top:20px; flex-wrap:wrap; padding:20px; }.feature-grid { grid-template-columns:repeat(2,1fr); }.spotlight { grid-template-columns:1fr; }.replay-visual { order:2; }.application-grid { grid-template-columns:1fr; }.pricing-notes { grid-template-columns:1fr; gap:12px; }.made { grid-template-columns:1fr; } }
@media (max-width:620px) { .site-header { height:76px; padding:0 20px; }.brand img { width:170px; }.header-cta { display:none; }.hero { padding:55px 20px 30px; min-height:auto; }.hero-copy { padding:0; }.lead { font-size:17px; }.actions { flex-direction:column; }.product-stage { min-height:300px; }.hero-production-image { height:310px; }.production-card { left:12px; right:12px; bottom:12px; }.capability-rail { display:grid; grid-template-columns:1fr 1fr; font-size:13px; }.section,.spotlight,.made { padding:75px 22px; }.feature-grid { grid-template-columns:1fr; }.application-grid article { min-height:350px; padding:28px; }.overlay-demo { padding:8px; }.score,.lower-third { transform:scale(.75); transform-origin:left top; }.lower-third { transform-origin:left bottom; }.replay-visual { height:290px; } footer { flex-direction:column; text-align:center; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }
