:root { --brand-1: #0637b8; --brand-2: #0757e8; --brand-3: #1234b5; --accent: #0751d8; --ink: #10132a; --muted: #545e82; --paper: #f8f9ff; --surface: #ffffff; --border: #e4e9fb; --line: #c7d3f7; --shadow: 0 20px 48px rgba(7, 30, 120, 0.1); /* Feature-tile duotone chips — one distinct hue per capability */ --c-attendance-1: #06b6d4; --c-attendance-2: #0e7490; --c-people-1: #8b5cf6; --c-people-2: #6d28d9; --c-visitor-1: #f59e0b; --c-visitor-2: #d97706; --c-workforce-1: #10b981; --c-workforce-2: #047857; --c-qr-1: #ec4899; --c-qr-2: #be185d; --c-events-1: #fb923c; --c-events-2: #ea580c; --c-payments-1: #14b8a6; --c-payments-2: #0d9488; --c-notify-1: #f43f5e; --c-notify-2: #be123c; --c-reports-1: #38bdf8; --c-reports-2: #0369a1; --c-enterprise-1: #4f46e5; --c-enterprise-2: #3730a3; --c-education-1: #22c55e; --c-education-2: #15803d; --c-residential-1: #f97316; --c-residential-2: #c2410c; } /* Three-state theme: no explicit choice follows the system preference; an explicit choice (the toggle button, persisted to localStorage and applied via [data-theme] on ) always wins over it, in both directions — hence the repeated block below the media query. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --ink: #eef1ff; --muted: #a6b1d6; --paper: #090c1f; --surface: #121935; --border: #232d57; --line: #34407a; --shadow: 0 20px 48px rgba(0, 0, 0, 0.45); } } :root[data-theme='dark'] { --ink: #eef1ff; --muted: #a6b1d6; --paper: #090c1f; --surface: #121935; --border: #232d57; --line: #34407a; --shadow: 0 20px 48px rgba(0, 0, 0, 0.45); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; overflow-x: hidden; } body { background: var(--paper); color: var(--ink); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, .brand span { font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; text-wrap: balance; margin: 0; } a { color: inherit; } a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } ul { margin: 0; padding: 0; list-style: none; } .grad-text { background: linear-gradient(100deg, #fff 20%, #cfe0ff 50%, #fff 80%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ── Scroll reveal ────────────────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); } .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } } /* ── Top bar ──────────────────────────────────────────────────────────── */ .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem clamp(1.25rem, 4vw, 3rem); background: var(--paper); background: color-mix(in srgb, var(--paper) 85%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); } .brand span { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; } .topnav { display: flex; gap: clamp(1rem, 3vw, 2rem); font-size: 0.92rem; font-weight: 500; } .topnav a { text-decoration: none; color: var(--muted); transition: color 0.2s ease; } .topnav a:hover, .topnav a:focus-visible { color: var(--accent); } .theme-toggle { flex-shrink: 0; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .theme-toggle:hover { color: var(--accent); border-color: var(--line); } .theme-toggle:active { transform: scale(0.92); } .theme-toggle svg { width: 1.15rem; height: 1.15rem; } .icon-moon { display: none; } /* Icon reflects the *current* effective appearance, matching the same three-state logic as the color tokens above. */ :root[data-theme='dark'] .icon-sun { display: none; } :root[data-theme='dark'] .icon-moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .icon-sun { display: none; } :root:not([data-theme='light']) .icon-moon { display: block; } } @media (max-width: 40rem) { .topnav { display: none; } } /* ── Hero ─────────────────────────────────────────────────────────────── */ .hero { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--brand-1) 0%, #3a1f9e 45%, #0891b2 100%); background-size: 200% 200%; animation: aurora 16s ease-in-out infinite; color: #ffffff; padding: clamp(4rem, 11vw, 8rem) 1.5rem clamp(5rem, 12vw, 7rem); } @keyframes aurora { 0%, 100% { background-position: 0% 30%; } 50% { background-position: 100% 70%; } } .hero-glow { position: absolute; inset: -20% -20% auto -20%; height: 60%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.18), transparent 70%); pointer-events: none; } .hero-inner { position: relative; z-index: 2; max-width: 40rem; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; } .hero-mark-wrap { position: relative; display: grid; place-items: center; width: clamp(90px, 12vw, 120px); height: clamp(90px, 12vw, 120px); } .hero-mark { position: relative; z-index: 2; width: clamp(60px, 8vw, 76px); height: clamp(60px, 8vw, 76px); } .hero-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.55); animation: pulse-ring 3.2s cubic-bezier(0.25, 0.7, 0.4, 1) infinite; } .hero-ring-2 { animation-delay: 1.1s; } @keyframes pulse-ring { 0% { transform: scale(0.55); opacity: 0.9; } 80%, 100% { transform: scale(1.35); opacity: 0; } } .hero h1 { font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; } .hero-lead { font-size: clamp(1.02rem, 2.2vw, 1.2rem); color: rgba(255, 255, 255, 0.88); max-width: 36rem; margin: 0; } .hero-float { position: absolute; z-index: 1; width: 3rem; height: 3rem; padding: 0.65rem; border-radius: 1rem; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28); color: #fff; backdrop-filter: blur(6px); animation: float 7s ease-in-out infinite; } .hero-float svg { width: 100%; height: 100%; } .hero-float-1 { top: 16%; left: 10%; animation-delay: 0s; } .hero-float-2 { top: 62%; left: 6%; animation-delay: 1.6s; } .hero-float-3 { top: 20%; right: 9%; animation-delay: 0.9s; } .hero-float-4 { top: 64%; right: 13%; animation-delay: 2.3s; } @keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-16px) rotate(4deg); } } @media (max-width: 48rem) { .hero-float { display: none; } } @media (prefers-reduced-motion: reduce) { .hero { animation: none; } .hero-ring, .hero-float { animation: none; } } /* ── Shared section scaffolding ──────────────────────────────────────── */ section { padding: clamp(3.5rem, 8vw, 6rem) clamp(1.25rem, 4vw, 3rem); } .section-head { max-width: 40rem; margin: 0 auto clamp(2.25rem, 5vw, 3.25rem); text-align: center; } .section-head h2 { font-size: clamp(1.6rem, 3.4vw, 2.25rem); font-weight: 800; letter-spacing: -0.015em; } .section-head p { margin: 0.6rem 0 0; color: var(--muted); font-size: 1.02rem; } /* ── Bento feature grid ───────────────────────────────────────────────── */ .bento { max-width: 68rem; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; grid-auto-flow: dense; gap: 1.1rem; } .bento-tile { position: relative; grid-column: span 2; padding: 1.75rem; border-radius: 1.25rem; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease; } .bento-tile:hover { transform: translateY(-6px); } .bento-lg { grid-column: span 2; } @media (min-width: 64rem) { .bento-lg { grid-column: span 2; } .bento-tile:not(.bento-lg) { grid-column: span 1; } } @media (max-width: 48rem) { .bento { grid-template-columns: 1fr; } .bento-tile, .bento-lg { grid-column: span 1; } } .tile-icon { width: 3rem; height: 3rem; border-radius: 0.9rem; display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 1rem; transition: transform 0.35s ease; } .tile-icon svg { width: 1.5rem; height: 1.5rem; } .bento-tile:hover .tile-icon { transform: scale(1.08) rotate(-4deg); } .bento-tile h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.45rem; } .bento-tile p { margin: 0; color: var(--muted); font-size: 0.96rem; } .tile-attendance .tile-icon { background: linear-gradient(135deg, var(--c-attendance-1), var(--c-attendance-2)); } .tile-people .tile-icon { background: linear-gradient(135deg, var(--c-people-1), var(--c-people-2)); } .tile-visitor .tile-icon { background: linear-gradient(135deg, var(--c-visitor-1), var(--c-visitor-2)); } .tile-workforce .tile-icon { background: linear-gradient(135deg, var(--c-workforce-1), var(--c-workforce-2)); } .tile-qr .tile-icon { background: linear-gradient(135deg, var(--c-qr-1), var(--c-qr-2)); } .tile-events .tile-icon { background: linear-gradient(135deg, var(--c-events-1), var(--c-events-2)); } .tile-payments .tile-icon { background: linear-gradient(135deg, var(--c-payments-1), var(--c-payments-2)); } .tile-notify .tile-icon { background: linear-gradient(135deg, var(--c-notify-1), var(--c-notify-2)); } .tile-reports .tile-icon { background: linear-gradient(135deg, var(--c-reports-1), var(--c-reports-2)); } /* ── Organizations ────────────────────────────────────────────────────── */ .orgs { background: var(--surface); } .orgs-grid { max-width: 68rem; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } @media (max-width: 55rem) { .orgs-grid { grid-template-columns: 1fr; } } .org-panel { padding: 2rem; border-radius: 1.25rem; background: var(--paper); border: 1px solid var(--border); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); } .org-panel:hover { transform: translateY(-6px); } .org-icon { width: 3rem; height: 3rem; border-radius: 0.9rem; display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 1.1rem; } .org-icon svg { width: 1.5rem; height: 1.5rem; } .org-enterprise .org-icon { background: linear-gradient(135deg, var(--c-enterprise-1), var(--c-enterprise-2)); } .org-education .org-icon { background: linear-gradient(135deg, var(--c-education-1), var(--c-education-2)); } .org-residential .org-icon { background: linear-gradient(135deg, var(--c-residential-1), var(--c-residential-2)); } .org-panel h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.6rem; } .org-panel p { margin: 0; color: var(--muted); } /* ── Platform diagram ─────────────────────────────────────────────────── */ .diagram { position: relative; max-width: 50rem; margin: 0 auto; } .diagram-svg { width: 100%; height: auto; display: block; color: var(--line); } .flow-line { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 6 10; animation: flow 3.5s linear infinite; } @keyframes flow { to { stroke-dashoffset: -32; } } @media (prefers-reduced-motion: reduce) { .flow-line { animation: none; } } .diagram-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; } .diagram-hub { margin-top: 3%; font-weight: 700; padding: 0.7rem 1.4rem; border-radius: 0.75rem; background: linear-gradient(135deg, var(--brand-1), var(--brand-3)); color: #fff; font-size: clamp(0.85rem, 2vw, 1rem); } .diagram-branches { margin-top: 12%; width: 84%; display: flex; justify-content: space-between; gap: 0.75rem; } .diagram-node { flex: 1; text-align: center; padding: 0.85rem 0.5rem; border-radius: 0.85rem; color: #fff; font-size: clamp(0.72rem, 1.6vw, 0.9rem); } .diagram-node h4 { font-size: clamp(0.85rem, 2vw, 1rem); font-weight: 700; margin-bottom: 0.25rem; } .diagram-node span { opacity: 0.9; font-size: 0.78em; } .node-people { background: linear-gradient(135deg, var(--c-people-1), var(--c-people-2)); } .node-workforce { background: linear-gradient(135deg, var(--c-workforce-1), var(--c-workforce-2)); } .node-security { background: linear-gradient(135deg, var(--c-visitor-1), var(--c-visitor-2)); } .diagram-converge { margin-top: auto; margin-bottom: 6%; font-weight: 700; padding: 0.6rem 1.2rem; border-radius: 0.75rem; background: var(--surface); border: 1px solid var(--border); font-size: clamp(0.8rem, 1.8vw, 0.95rem); } .diagram-final { font-weight: 700; padding: 0.65rem 1.3rem; border-radius: 0.75rem; background: var(--accent); color: #fff; font-size: clamp(0.8rem, 1.8vw, 0.95rem); } @media (max-width: 40rem) { .diagram-node span { display: none; } } /* Below this width the 3-across row gets too cramped for the background flow-lines to still read as connectors, so it becomes a simple stacked flow instead of trying to force the same diagram into a narrower box. */ @media (max-width: 30rem) { .diagram-svg { display: none; } .diagram-overlay { position: static; gap: 0.9rem; } .diagram-hub { margin-top: 0; } .diagram-branches { flex-direction: column; width: 100%; margin-top: 0; gap: 0.6rem; } .diagram-node { flex: none; width: 100%; padding: 1rem; } .diagram-node span { display: block; } .diagram-converge { margin-top: 0; margin-bottom: 0; } } /* ── Promise ──────────────────────────────────────────────────────────── */ .promise-grid { max-width: 56rem; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } @media (max-width: 40rem) { .promise-grid { grid-template-columns: 1fr; } } .promise-card { padding: 2rem; border-radius: 1.25rem; color: #fff; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); } .promise-card:hover { transform: translateY(-6px) scale(1.01); } .promise-card h3 { font-size: 1.6rem; font-weight: 800; } .promise-sub { font-size: 0.85rem; font-weight: 600; text-transform: none; opacity: 0.85; margin: 0.2rem 0 0.9rem; } .promise-card p:last-child { margin: 0; opacity: 0.92; } .promise-sugam { background: linear-gradient(135deg, #22d3ee, #2563eb); } .promise-suraksha { background: linear-gradient(135deg, #6366f1, #4c1d95); } .promise-smart { background: linear-gradient(135deg, #fbbf24, #ea580c); } .promise-connected { background: linear-gradient(135deg, #ec4899, #9d174d); } /* ── Footer ───────────────────────────────────────────────────────────── */ footer { padding: 2rem 1.5rem; text-align: center; border-top: 1px solid var(--border); } footer p { margin: 0; color: var(--muted); font-size: 0.9rem; }