:root { --bg:#070D18; --surface:#0D1524; --surface2:#111B2E; --line:rgba(255,255,255,.08); --text:#E9EEF5;
          --muted:#C3CEDD; --blue:#61CBF4; --aqua:#00FFF0; --studio:#F7941D; }
  * { box-sizing:border-box; margin:0; padding:0; }
  body { background:var(--bg); color:var(--text); font-family:Inter, system-ui, sans-serif; line-height:1.6; }
  a { color:inherit; text-decoration:none; }
  .wrap { max-width:1160px; margin:0 auto; padding:0 24px; }
  header { position:sticky; top:0; z-index:10; background:rgba(7,13,24,.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
  .bar { display:flex; align-items:center; justify-content:space-between; height:72px; }
  .brand { display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.04em; font-size:18px; }
  .brand img { height:34px; }
  .brand .t { color:var(--blue); }
  nav { display:flex; gap:24px; font-size:14px; font-weight:500; color:var(--muted); }
  nav a:hover { color:var(--text); }
  .hero { padding-top:120px; padding-bottom:104px; }
  .eyebrow { font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--blue); margin-bottom:20px; }
  h1 { font-size:clamp(34px,4.6vw,58px); line-height:1.1; font-weight:800; letter-spacing:-.02em; }
  .lead { font-size:19px; color:var(--muted); margin-top:20px; }
  .btns { display:flex; gap:14px; margin-top:40px; flex-wrap:wrap; }
  .btn { display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:10px; font-weight:600; font-size:15px; }
  .btn.primary { background:var(--blue); color:#04203A; }
  .btn.ghost { border:1px solid var(--line); }
  .btn.ghost:hover { border-color:var(--muted); }
  section { padding:88px 0; border-top:1px solid var(--line); }
  h2 { font-size:32px; font-weight:700; letter-spacing:-.01em; margin-bottom:10px; }
  .sub { color:var(--muted); margin-bottom:44px; }
  .products { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
  .product { background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden; transition:border-color .2s, transform .2s; display:flex; flex-direction:column; }
  .product:hover { transform:translateY(-3px); }
  .product.blue:hover { border-color:var(--blue); }
  .product.aqua:hover { border-color:var(--aqua); }
  .logo-tile { height:230px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; background:#050A13; border-bottom:1px solid var(--line); }
  .logo-tile img { height:64px; }
  .pbody { padding:28px 30px 30px; display:flex; flex-direction:column; gap:8px; flex:1; }
  .pname { font-size:24px; font-weight:800; letter-spacing:.02em; }
  .pname .b { color:var(--blue); } .pname .a { color:var(--aqua); }
  .pdesc { color:var(--muted); }
  .plink { margin-top:auto; padding-top:16px; font-weight:600; font-size:14px; }
  .blue .plink { color:var(--blue); } .aqua .plink { color:var(--aqua); }
  .dev { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
  .card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px; }
  .tag { display:inline-block; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:4px 10px; margin-bottom:18px; }
  .card h3 { font-size:18px; font-weight:700; letter-spacing:.02em; margin-bottom:6px; }
  .card p { color:var(--muted); font-size:15px; }
  .vision { background:var(--surface2); }
  footer { border-top:1px solid var(--line); padding:44px 0; color:var(--muted); font-size:14px; }
  .foot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
  .foot a:hover { color:var(--text); }
  @media (max-width:900px) { .dev { grid-template-columns:repeat(2,1fr); } }
  @media (max-width:640px) { nav { display:none; } .products, .dev { grid-template-columns:1fr; } .hero { padding-top:72px; padding-bottom:64px; } section { padding:64px 0; } }
.page-hero { padding-top:96px; padding-bottom:56px; }
  .vision h3 { font-size:clamp(26px,3.6vw,40px); font-weight:800; line-height:1.15; letter-spacing:-.01em; }
  .vision .vtext { font-size:19px; color:var(--muted); max-width:820px; margin-top:18px; line-height:1.6; }
  .nav-cta { color:var(--text) !important; }
  .supply { display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:36px 40px; }
  .supply .sub { margin-bottom:0; max-width:680px; }
  .wordmark { font-size:clamp(34px,4.4vw,52px); font-weight:800; letter-spacing:.02em; line-height:1; }
  .wordmark .b { color:var(--blue); } .wordmark .a { color:var(--aqua); }
  .product.blue .logo-tile { background:linear-gradient(180deg,#06121F,#050A13); }
  .product.aqua .logo-tile { background:linear-gradient(180deg,#041716,#050A13); }
  .lines { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:24px; }
  .line { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:32px; display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
  .line h3 { font-size:28px; font-weight:800; }
  .line p { color:var(--muted); }
  .line .tag { margin-bottom:4px; }
  .line .btn { margin-top:8px; }
  a.line { transition:border-color .2s, transform .2s; }
  a.line:hover { border-color:var(--blue); transform:translateY(-3px); }
  a.line .plink { color:var(--blue); font-weight:600; font-size:14px; margin-top:8px; }
  .eyebrow a:hover { text-decoration:underline; }
  .offers { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  @media (max-width:900px) { .offers { grid-template-columns:1fr; } }
  .card h3.fname { font-size:24px; font-weight:800; letter-spacing:.02em; }
  .c-lms { color:#3DDC84; } .c-view { color:#FF8A1F; } .c-erp { color:#FF4D4F; } .c-hms { color:#A78BFA; }
  .offers.four { grid-template-columns:repeat(4,1fr); }
  @media (max-width:1000px) { .offers.four { grid-template-columns:repeat(2,1fr); } }
  @media (max-width:640px) { .offers.four { grid-template-columns:1fr; } }
  .eyebrow { font-size:13px; color:#7FD6F7; }
  .tag { color:#E4EAF2; border-color:rgba(255,255,255,.22); font-size:12px; }
  .card p, .pdesc, .line p { color:#D3DBE6; font-size:16px; }
  .sub, .lead { color:#C3CEDD; }
  nav { color:#C3CEDD; font-size:15px; }
  .plink { font-size:15px; }
  .fname .b { color:var(--blue); } .fname .a { color:var(--aqua); }
  .steps { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  @media (max-width:900px) { .steps { grid-template-columns:1fr; } }
  .num { display:inline-flex; width:34px; height:34px; border-radius:50%; align-items:center; justify-content:center; background:var(--blue); color:#04203A; font-weight:800; margin-bottom:14px; }
  .steps .loop { grid-column:1 / -1; }
  .brandrow { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
  .line .brandrow img { height:44px; }
  h1.brandrow img { height:clamp(40px,5vw,62px); }
  .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .stats { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
  @media (max-width:900px) { .stats { grid-template-columns:repeat(2,1fr); } }
  .stat { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px; }
  .stat .n { font-size:clamp(28px,3.2vw,40px); font-weight:800; color:var(--blue); line-height:1.1; }
  .stat .l { color:#D3DBE6; margin-top:8px; }
  .tbl { overflow-x:auto; }
  .tbl table { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
  .tbl th, .tbl td { text-align:left; padding:16px 20px; border-bottom:1px solid var(--line); font-size:16px; }
  .tbl th { color:#7FD6F7; font-size:13px; text-transform:uppercase; letter-spacing:.08em; }
  .tbl td:last-child { font-weight:700; color:#fff; }
  .notes p { color:#AEB9C9; font-size:14px; margin-bottom:10px; max-width:900px; }
  a.card.link { display:flex; flex-direction:column; transition:border-color .2s, transform .2s; }
  a.card.link:hover { border-color:var(--blue); transform:translateY(-3px); }
  a.card.link .plink { color:var(--blue); font-weight:600; margin-top:auto; padding-top:14px; }

  /* GR81 IPTV STUDIO, the third app (27 Oct 2026), in the Studio's orange */
  .products.three { grid-template-columns:repeat(3,1fr); }
  .products.three .wordmark { font-size:clamp(26px,2.6vw,34px); text-align:center; }
  .wordmark .s, .fname .s { color:var(--studio); }
  .studio .plink { color:var(--studio); }
  .product.studio:hover { border-color:var(--studio); }
  .product.studio .logo-tile { background:linear-gradient(180deg,#1C1004,#050A13); }
  @media (max-width:900px) { .products.three { grid-template-columns:1fr; } }
