:root { --bg: #05111f; --panel: rgba(12, 31, 54, 0.92); --line: rgba(141, 207, 255, 0.28); --text: #f2f9ff; --muted: #bfd8ea; --soft: #dceefa; --cyan: #8fe8ff; --blue: #5cc8ff; --green: #62e7b6; --gold: #f1c86b; --deep: #061827; --white: #ffffff; --shadow: 0 24px 70px rgba(0, 0, 0, 0.36); --radius: 24px; --max: 1240px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: Arial, Helvetica, sans-serif; color: var(--text); background: radial-gradient(circle at 10% 8%, rgba(92, 200, 255, 0.22), transparent 34%), radial-gradient(circle at 90% 15%, rgba(98, 231, 182, 0.14), transparent 30%), radial-gradient(circle at 50% 105%, rgba(241, 200, 107, 0.10), transparent 36%), linear-gradient(135deg, #05111f 0%, #071a2f 45%, #09243d 100%); line-height: 1.6; overflow-x: hidden; } a { color: inherit; text-decoration: none; } img { display: block; width: 100%; height: auto; } .skip-link { position: absolute; left: -999px; top: 10px; padding: 10px 14px; background: var(--cyan); color: var(--deep); z-index: 9999; border-radius: 8px; font-weight: 900; } .skip-link:focus { left: 12px; } .topbar { position: sticky; top: 0; z-index: 1000; background: rgba(5, 17, 31, 0.95); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); } .nav { width: min(var(--max), calc(100% - 32px)); margin: 0 auto; min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; min-width: 250px; } .brand-mark { width: 48px; height: 48px; border-radius: 14px; border: 1px solid rgba(143, 232, 255, 0.55); background: linear-gradient(145deg, rgba(92, 200, 255, 0.28), rgba(98, 231, 182, 0.12)), #0b223c; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(92, 200, 255, 0.16); font-weight: 900; color: var(--white); letter-spacing: -1px; } .brand-text strong { display: block; color: var(--white); font-size: 14px; letter-spacing: 0.08em; line-height: 1.1; } .brand-text span { color: var(--cyan); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 800; } .nav-links { display: flex; align-items: center; justify-content: flex-end; gap: clamp(10px, 1.05vw, 17px); white-space: nowrap; flex-wrap: nowrap; width: 100%; } .nav-links > a, .dropdown > button { color: #e7f6ff; background: transparent; border: 0; font-size: 13px; font-weight: 800; cursor: pointer; padding: 10px 0; letter-spacing: 0.01em; } .nav-links > a:hover, .dropdown > button:hover { color: var(--cyan); } .nav-cta { color: var(--deep) !important; background: linear-gradient(135deg, var(--cyan), var(--green)) !important; padding: 10px 15px !important; border-radius: 999px; box-shadow: 0 10px 28px rgba(92, 200, 255, 0.22); } .dropdown { position: relative; } .dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 280px; padding: 12px; background: rgba(7, 24, 43, 0.98); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); display: none; z-index: 20; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: grid; gap: 6px; } .dropdown-menu a { padding: 10px 12px; border-radius: 12px; color: #eaf7ff; font-size: 13px; font-weight: 700; } .dropdown-menu a:hover { background: rgba(92, 200, 255, 0.12); color: var(--cyan); } .wrap { width: min(var(--max), calc(100% - 32px)); margin: 0 auto; } .section { padding: 86px 0; } .hero { padding: 88px 0 72px; overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 34px; align-items: center; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 9px 13px; border: 1px solid rgba(143, 232, 255, 0.38); border-radius: 999px; background: rgba(92, 200, 255, 0.09); color: var(--cyan); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em; } h1 { font-size: clamp(42px, 6vw, 76px); line-height: 0.98; letter-spacing: -0.055em; color: var(--white); margin-bottom: 24px; } h1 span { display: block; color: var(--cyan); } .hero p { max-width: 730px; color: var(--soft); font-size: 18px; margin-bottom: 28px; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; } .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: 999px; font-weight: 900; border: 1px solid rgba(143, 232, 255, 0.35); } .btn-primary { background: linear-gradient(135deg, var(--cyan), var(--green)); color: var(--deep); box-shadow: 0 18px 45px rgba(92, 200, 255, 0.22); } .btn-secondary { background: rgba(255, 255, 255, 0.06); color: var(--white); } .hero-points { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 860px; } .hero-point { border: 1px solid var(--line); background: rgba(12, 31, 54, 0.66); border-radius: 18px; padding: 15px; } .hero-point strong { display: block; color: var(--white); font-size: 14px; margin-bottom: 4px; } .hero-point span { color: var(--muted); font-size: 13px; } .hero-photo, .image-card { position: relative; border-radius: 32px; overflow: hidden; border: 1px solid rgba(143, 232, 255, 0.34); box-shadow: var(--shadow); background: #0b223c; } .hero-photo { min-height: 560px; } .hero-photo img { height: 560px; object-fit: cover; object-position: center; filter: saturate(1.12) contrast(1.08); } .photo-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 17, 31, 0.04), rgba(6, 17, 31, 0.78)), linear-gradient(90deg, rgba(6, 17, 31, 0.50), transparent 58%); } .hero-card, .image-card .caption { position: absolute; left: 22px; right: 22px; bottom: 22px; padding: 22px; border-radius: 22px; border: 1px solid rgba(143, 232, 255, 0.34); background: rgba(6, 17, 31, 0.86); backdrop-filter: blur(12px); } .hero-card strong { color: var(--white); font-size: 20px; display: block; margin-bottom: 8px; } .hero-card p, .image-card .caption { margin: 0; color: var(--soft); font-size: 14px; font-weight: 700; } .section-head { max-width: 880px; margin-bottom: 34px; } .section-kicker { color: var(--cyan); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 12px; } h2 { font-size: clamp(32px, 4.2vw, 54px); line-height: 1.05; letter-spacing: -0.04em; color: var(--white); margin-bottom: 16px; } .section-head p { color: var(--soft); font-size: 17px; } .split-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 28px; align-items: stretch; } .image-card { border-radius: var(--radius); min-height: 440px; } .image-card img { height: 100%; min-height: 440px; object-fit: cover; object-position: center; filter: saturate(1.10) contrast(1.08); } .panel { border: 1px solid var(--line); background: linear-gradient(145deg, rgba(12, 31, 54, 0.93), rgba(16, 43, 72, 0.86)); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); } .panel h3 { color: var(--white); font-size: 26px; line-height: 1.15; margin-bottom: 16px; } .panel p { color: var(--soft); margin-bottom: 18px; } .list { display: grid; gap: 12px; margin-top: 18px; } .list-item { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; padding: 14px; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(143, 232, 255, 0.18); border-radius: 16px; } .list-icon { width: 38px; height: 38px; border-radius: 14px; background: rgba(92, 200, 255, 0.12); color: var(--cyan); display: grid; place-items: center; font-weight: 900; font-size: 14px; } .list-item strong { display: block; color: var(--white); margin-bottom: 3px; } .list-item span { color: var(--muted); font-size: 14px; } .domain-section, .workflow-section { background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)), rgba(6, 17, 31, 0.30); } .domain-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .domain-card { border: 1px solid var(--line); background: rgba(12, 31, 54, 0.76); border-radius: 22px; padding: 22px; min-height: 225px; position: relative; overflow: hidden; } .domain-card:before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(92, 200, 255, 0.14), transparent 45%); pointer-events: none; } .domain-code { color: var(--gold); font-size: 13px; font-weight: 900; letter-spacing: 0.12em; margin-bottom: 16px; position: relative; } .domain-card h3 { color: var(--white); font-size: 20px; line-height: 1.2; margin-bottom: 10px; position: relative; } .domain-card p { color: var(--muted); font-size: 14px; position: relative; } .photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .photo-card { border-radius: 24px; overflow: hidden; background: rgba(12, 31, 54, 0.78); border: 1px solid var(--line); box-shadow: 0 16px 46px rgba(0, 0, 0, 0.2); } .photo-card img { height: 220px; object-fit: cover; object-position: center; filter: saturate(1.12) contrast(1.08); } .photo-body { padding: 22px; } .photo-body h3 { color: var(--white); font-size: 21px; margin-bottom: 10px; } .photo-body p { color: var(--muted); font-size: 14px; } .workflow-grid { display: grid; grid-template-columns: 1fr 0.84fr; gap: 28px; align-items: start; } .timeline { display: grid; gap: 14px; } .step { display: grid; grid-template-columns: 58px 1fr; gap: 18px; padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: rgba(12, 31, 54, 0.78); } .step-number { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; background: rgba(92, 200, 255, 0.12); border: 1px solid rgba(143, 232, 255, 0.28); color: var(--cyan); font-weight: 900; font-size: 18px; } .step h3 { color: var(--white); font-size: 20px; margin-bottom: 6px; } .step p { color: var(--muted); font-size: 14px; } .metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .metric-card { border: 1px solid var(--line); border-radius: 22px; padding: 22px; background: rgba(12, 31, 54, 0.78); } .metric-card strong { display: block; color: var(--cyan); font-size: 28px; line-height: 1; margin-bottom: 10px; } .metric-card h3 { color: var(--white); font-size: 18px; margin-bottom: 8px; } .metric-card p { color: var(--muted); font-size: 14px; } .notice { margin-top: 26px; border: 1px solid rgba(241, 200, 107, 0.38); background: rgba(241, 200, 107, 0.09); border-radius: 22px; padding: 22px; color: #fff4d6; font-size: 14px; } .cta { padding: 80px 0; } .cta-box { position: relative; overflow: hidden; border: 1px solid rgba(143, 232, 255, 0.34); border-radius: 34px; padding: 46px; background: linear-gradient(135deg, rgba(92, 200, 255, 0.18), rgba(98, 231, 182, 0.10)), rgba(12, 31, 54, 0.92); box-shadow: var(--shadow); display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; } .cta-box h2 { margin-bottom: 12px; } .cta-box p { color: var(--soft); max-width: 820px; } footer { border-top: 1px solid var(--line); background: rgba(5, 14, 26, 0.94); padding: 48px 0 28px; } .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 26px; margin-bottom: 34px; } .footer-brand strong { color: var(--white); font-size: 18px; display: block; margin-bottom: 10px; } .footer-brand p, .footer small { color: var(--muted); } .footer-col h4 { color: var(--white); margin-bottom: 12px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.12em; } .footer-col a { display: block; color: var(--muted); margin-bottom: 8px; font-size: 14px; } .footer-col a:hover { color: var(--cyan); } .legal { color: var(--muted); font-size: 12px; border-top: 1px solid rgba(143, 232, 255, 0.16); padding-top: 20px; } @media (max-width: 1160px) { .nav { align-items: flex-start; padding: 12px 0; } .nav-links { overflow-x: auto; justify-content: flex-start; padding-bottom: 8px; } .dropdown-menu { left: 0; transform: none; } } @media (max-width: 980px) { .hero-grid, .split-grid, .workflow-grid, .cta-box { grid-template-columns: 1fr; } .hero-points, .domain-grid, .photo-grid, .metrics-grid, .footer-grid { grid-template-columns: repeat(2, 1fr); } .hero-photo, .hero-photo img { min-height: 420px; height: 420px; } } @media (max-width: 720px) { .nav { width: min(100% - 22px, var(--max)); display: block; } .brand { margin-bottom: 8px; min-width: 0; } .hero { padding-top: 56px; } .hero-points, .domain-grid, .photo-grid, .metrics-grid, .footer-grid { grid-template-columns: 1fr; } .section { padding: 60px 0; } .panel, .cta-box { padding: 24px; } .step { grid-template-columns: 1fr; } } html, body, #container
{
   width: 100%;
   height: 100%;
}
body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 16px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}