/* ===================================================== ARMIT.CO — armit-rebuild.css Homepage v4 — Customer-Facing Production ===================================================== */ /* Fonts loaded via Adobe Typekit — see script in index-new.php */ /* Kit ID: tjs4ijm | termina (headings) + helvetica (body) */ /* ── CSS Variables ── */ :root { --o: #FE5000; --o-dark: #D44000; --o-glow: rgba(254,80,0,0.22); --o-soft: rgba(254,80,0,0.08); --cy: #00D4FF; --cy-glow: rgba(0,212,255,0.12); --cy-line: rgba(0,212,255,0.11); --bg: #040C18; --bg2: #060F1E; --panel: #081524; --panel2: #0A1B30; --text: #C8D8EC; --text2: rgba(200,216,236,0.60); --white: #ffffff; --border: rgba(0,212,255,0.10); --r-sm: 10px; --r-md: 18px; --r-lg: 26px; --font-display: "termina", sans-serif; --font-body: "helvetica", "Helvetica Neue", Arial, sans-serif; } /* ── Reset & Base ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.armit-rebuild-page { font-family: var(--font-body); background: var(--bg); color: var(--text); overflow-x: hidden; min-height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.armit-rebuild-page h1, body.armit-rebuild-page h2, body.armit-rebuild-page h3, body.armit-rebuild-page h4, body.armit-rebuild-page h5 { font-family: var(--font-display); font-weight: 700; line-height: 1.0; letter-spacing: -0.02em; color: var(--white); } body.armit-rebuild-page .layout, body.armit-rebuild-page .armit-rebuild-main { height: auto !important; min-height: 0 !important; overflow: visible !important; } .ar-container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 40px; } .ar-section { position: relative; padding: 100px 0; overflow: hidden; } /* ── Kicker label ── */ .ar-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; color: var(--o); font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .ar-kicker::before { content: ''; display: block; width: 22px; height: 2px; background: var(--o); flex-shrink: 0; } /* ── Scroll reveal ── */ .ar-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; } .ar-reveal.is-visible { opacity: 1; transform: translateY(0); } .ar-d1 { transition-delay: 0.10s; } .ar-d2 { transition-delay: 0.20s; } .ar-d3 { transition-delay: 0.30s; } .ar-d4 { transition-delay: 0.40s; } .ar-d5 { transition-delay: 0.50s; } /* ── Buttons ── */ .ar-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px; text-decoration: none !important; cursor: pointer; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; transition: all 0.22s ease; border: 1px solid transparent; white-space: nowrap; } .ar-btn-primary { background: linear-gradient(135deg, var(--o) 0%, #FF6622 100%); color: var(--white) !important; box-shadow: 0 8px 28px var(--o-glow); } .ar-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(254,80,0,0.32); color: var(--white) !important; } .ar-btn-outline { color: var(--white) !important; border-color: rgba(255,255,255,0.18); background: transparent; } .ar-btn-outline:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.3); color: var(--white) !important; } .ar-btn-ghost { color: rgba(255,255,255,0.78) !important; border-color: var(--cy-line); background: var(--cy-glow); } .ar-btn-ghost:hover { border-color: rgba(0,212,255,0.28); color: var(--white) !important; background: rgba(0,212,255,0.16); } .ar-btn-lg { min-height: 54px; padding: 0 32px; font-size: 12px; } /* ===================================================== TOPBAR ===================================================== */ .ar-topbar { background: #030A14; border-bottom: 1px solid rgba(255,255,255,0.05); position: sticky; top: 0; z-index: 1000; } .ar-topbar-inner { display: flex; align-items: center; justify-content: space-between; min-height: 36px; gap: 20px; } .ar-topbar-left { font-size: 10px; font-weight: 700; font-family: var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(200,216,236,0.42); } .ar-topbar-right { display: flex; gap: 20px; } .ar-topbar-right a { font-size: 10px; font-weight: 700; font-family: var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(200,216,236,0.52); text-decoration: none; transition: color 0.2s; } .ar-topbar-right a:hover { color: var(--cy); } .ar-topbar-right a.ar-es-link { color: var(--cy); } .ar-topbar-right a.ar-es-link:hover { color: var(--white); } /* ===================================================== NAVBAR ===================================================== */ .ar-nav { position: sticky; top: 36px; z-index: 999; background: rgba(4,12,24,0.96); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); box-shadow: 0 12px 40px rgba(0,0,0,0.38); transition: box-shadow 0.3s, border-color 0.3s; } .ar-nav.scrolled { box-shadow: 0 16px 50px rgba(0,0,0,0.55); border-bottom-color: rgba(0,212,255,0.14); } .ar-nav-inner { display: flex; align-items: center; justify-content: space-between; min-height: 78px; gap: 24px; } .ar-logo { display: flex; align-items: center; text-decoration: none; } .ar-logo img { height: 54px; width: auto; } .ar-logo-fallback { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--white); letter-spacing: 0.04em; display: none; } .ar-nav-links { flex: 1; display: flex; justify-content: center; list-style: none; gap: 30px; } .ar-nav-links a { position: relative; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(255,255,255,0.70); text-decoration: none; transition: color 0.2s; padding-bottom: 4px; } .ar-nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--o); transform: scaleX(0); transform-origin: left; transition: transform 0.22s ease; } .ar-nav-links a:hover, .ar-nav-links a.ar-active { color: var(--o); } .ar-nav-links a:hover::after, .ar-nav-links a.ar-active::after { transform: scaleX(1); } .ar-nav-actions { display: flex; gap: 10px; } .ar-mobile-toggle { display: none; width: 44px; height: 44px; background: transparent; border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r-sm); flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; } .ar-mobile-toggle span { display: block; width: 20px; height: 2px; background: rgba(255,255,255,0.7); border-radius: 2px; } /* ===================================================== HERO ===================================================== */ .ar-hero { position: relative; min-height: 92vh; display: flex; align-items: center; padding: 80px 0 60px; background: var(--bg); overflow: hidden; } /* Grid pattern */ .ar-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(0,212,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(0,212,255,0.035) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 80% 65% at 50% 0%, black 35%, transparent 100%); pointer-events: none; } .ar-hero-orb1 { position: absolute; width: 700px; height: 700px; top: -200px; right: -100px; background: radial-gradient(circle, rgba(0,100,255,0.11) 0%, transparent 65%); pointer-events: none; } .ar-hero-orb2 { position: absolute; width: 500px; height: 500px; bottom: -80px; left: -60px; background: radial-gradient(circle, rgba(254,80,0,0.07) 0%, transparent 65%); pointer-events: none; } /* Scanline animation */ @keyframes ar-scan { 0% { transform: translateY(-100vh); opacity: 0; } 8% { opacity: 0.35; } 92% { opacity: 0.35; } 100% { transform: translateY(200vh); opacity: 0; } } .ar-hero-scan { position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--cy) 40%, var(--o) 60%, transparent 100%); animation: ar-scan 7s linear infinite; pointer-events: none; } .ar-hero-layout { display: grid; grid-template-columns: 1fr 460px; gap: 56px; align-items: center; position: relative; z-index: 1; } /* Eyebrow */ .ar-hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px; padding: 7px 14px 7px 8px; background: rgba(254,80,0,0.08); border: 1px solid rgba(254,80,0,0.22); border-radius: 999px; } @keyframes ar-pulse { 0%,100% { box-shadow: 0 0 4px var(--o); } 50% { box-shadow: 0 0 12px var(--o), 0 0 20px rgba(254,80,0,0.28); } } .ar-eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--o); animation: ar-pulse 2s ease-in-out infinite; flex-shrink: 0; } .ar-hero-eyebrow span { font-size: 10px; font-weight: 700; font-family: var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--o); } /* Hero heading */ .ar-hero h1 { font-size: clamp(2.8rem, 5.2vw, 5.8rem); line-height: 0.94; letter-spacing: -0.02em; text-transform: uppercase; margin-bottom: 16px; } .ar-hero h1 .h1-white { display: block; color: var(--white); } .ar-hero h1 .h1-accent { display: block; background: linear-gradient(90deg, var(--o) 0%, #FF7A3D 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .ar-hero-rule { width: 56px; height: 3px; background: linear-gradient(90deg, var(--o), var(--cy)); margin: 26px 0; } .ar-hero-sub { max-width: 640px; font-size: 1.14rem; line-height: 1.76; color: rgba(200,216,236,0.80); margin-bottom: 18px; } .ar-hero-sub strong { color: var(--white); font-weight: 600; } .ar-hero-impact { font-size: 1.0rem; line-height: 1.70; color: rgba(200,216,236,0.62); margin-bottom: 28px; max-width: 580px; } /* Proof pills */ .ar-proof-row { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 32px; } .ar-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; background: rgba(0,212,255,0.05); border: 1px solid rgba(0,212,255,0.16); font-family: var(--font-body); font-size: 0.82rem; font-weight: 500; color: rgba(255,255,255,0.80); white-space: nowrap; } .ar-pill .ar-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--cy); box-shadow: 0 0 5px var(--cy); flex-shrink: 0; } .ar-pill .ar-dot-o { background: var(--o); box-shadow: 0 0 5px var(--o); } .ar-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; } /* ── Hero panel ── */ .ar-live-panel { background: linear-gradient(160deg, #0A1E38 0%, #051018 100%); border: 1px solid rgba(0,212,255,0.16); border-radius: var(--r-lg); box-shadow: 0 32px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04); overflow: hidden; position: relative; } @keyframes ar-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .ar-live-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--o), var(--cy), var(--o)); background-size: 200% 100%; animation: ar-shimmer 3.5s linear infinite; } .ar-panel-chrome { display: flex; align-items: center; gap: 7px; padding: 13px 18px; border-bottom: 1px solid rgba(0,212,255,0.08); } .ar-chrome-dot { width: 9px; height: 9px; border-radius: 50%; } .cd-r { background: #FF5F57; } .cd-y { background: #FEBC2E; } .cd-g { background: #28C840; } .ar-chrome-label { margin-left: 8px; font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(200,216,236,0.40); } .ar-panel-body { padding: 20px 22px 22px; } .ar-panel-kicker { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cy); margin-bottom: 14px; } .ar-panel-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05); } .ar-panel-row:last-of-type { border-bottom: none; } .ar-panel-lbl { font-size: 0.90rem; color: rgba(200,216,236,0.58); } .ar-panel-val { font-family: var(--font-display); font-size: 0.96rem; font-weight: 700; color: var(--white); text-align: right; } .ar-panel-val.live { color: #4CFFA0; } .ar-panel-val.alert { color: var(--o); } .ar-panel-val.cyan { color: var(--cy); } .ar-panel-rule { height: 1px; margin: 16px 0; background: linear-gradient(90deg, transparent, var(--cy-line), transparent); } .ar-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ar-mini-tile { padding: 13px 15px; background: rgba(0,212,255,0.04); border: 1px solid rgba(0,212,255,0.1); border-radius: var(--r-sm); } .ar-mini-tile strong { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--white); line-height: 1; margin-bottom: 5px; } .ar-mini-tile span { display: block; font-size: 0.84rem; color: rgba(200,216,236,0.58); line-height: 1.4; } .ar-mini-tile.ar-orange { border-color: rgba(254,80,0,0.18); background: rgba(254,80,0,0.05); } .ar-mini-tile.ar-orange strong { color: var(--o); } /* ===================================================== TICKER ===================================================== */ .ar-ticker { background: #020810; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 13px 0; overflow: hidden; position: relative; } .ar-ticker::before, .ar-ticker::after { content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; } .ar-ticker::before { left: 0; background: linear-gradient(90deg, #020810, transparent); } .ar-ticker::after { right: 0; background: linear-gradient(270deg, #020810, transparent); } @keyframes ar-ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .ar-ticker-track { display: flex; animation: ar-ticker 32s linear infinite; width: max-content; } .ar-ticker-item { display: inline-flex; align-items: center; gap: 10px; padding: 0 36px; white-space: nowrap; } .ar-ticker-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--o); flex-shrink: 0; } .ar-ticker-item span { font-size: 10px; font-weight: 700; font-family: var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(200,216,236,0.44); } .ar-ticker-item strong { font-size: 10px; font-weight: 700; font-family: var(--font-display); letter-spacing: 0.10em; text-transform: uppercase; color: rgba(200,216,236,0.78); } /* ===================================================== STATS BAR ===================================================== */ .ar-stats { background: var(--bg2); padding: 56px 0; border-bottom: 1px solid var(--border); } .ar-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; } .ar-stat-cell { background: var(--panel); padding: 32px 24px; text-align: center; position: relative; transition: background 0.3s; cursor: default; } .ar-stat-cell:hover { background: var(--panel2); } .ar-stat-cell::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--o), transparent); opacity: 0; transition: opacity 0.3s; } .ar-stat-cell:hover::after { opacity: 1; } .ar-stat-num { display: block; font-family: var(--font-display); font-size: 2.8rem; font-weight: 700; color: var(--white); line-height: 1; margin-bottom: 9px; } .ar-stat-num .a { color: var(--o); } .ar-stat-label { display: block; font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(200,216,236,0.46); margin-bottom: 5px; } .ar-stat-sub { display: block; font-family: var(--font-body); font-size: 0.76rem; color: rgba(200,216,236,0.34); line-height: 1.4; } /* ===================================================== REFRAME — CAPABILITY LAYERS ===================================================== */ .ar-reframe { background: var(--bg2); padding: 100px 0; } .ar-reframe-header { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 56px; } .ar-reframe h2 { font-size: clamp(2.2rem, 3.8vw, 4rem); text-transform: uppercase; line-height: 0.96; } .ar-reframe-desc { font-size: 1.0rem; line-height: 1.78; color: rgba(200,216,236,0.68); max-width: 510px; align-self: end; } .ar-cap-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; } .ar-cap-cell { background: var(--panel); padding: 30px 20px; transition: background 0.3s; } .ar-cap-cell:hover { background: rgba(10,27,48,1); } .ar-cap-num { font-family: var(--font-display); font-size: 2.6rem; color: rgba(254,80,0,0.16); line-height: 1; margin-bottom: 14px; transition: color 0.3s; } .ar-cap-cell:hover .ar-cap-num { color: rgba(254,80,0,0.35); } .ar-cap-icon { width: 36px; height: 36px; color: var(--o); margin-bottom: 14px; } .ar-cap-title { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; color: var(--white); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 9px; } .ar-cap-text { font-size: 0.97rem; line-height: 1.68; color: rgba(200,216,236,0.62); } .ar-cap-tag { display: inline-block; margin-top: 13px; padding: 4px 10px; background: var(--o-soft); border: 1px solid rgba(254,80,0,0.18); border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--o); } .ar-cap-tag.cy { background: var(--cy-glow); border-color: rgba(0,212,255,0.18); color: var(--cy); } .ar-cap-tag.green { background: rgba(76,255,160,0.07); border-color: rgba(76,255,160,0.18); color: #4CFFA0; } /* ===================================================== SOLUTIONS ===================================================== */ .ar-solutions { background: var(--bg); padding: 100px 0; } .ar-sol-header { text-align: center; margin-bottom: 56px; } .ar-sol-header h2 { font-size: clamp(2.2rem, 3.8vw, 4rem); text-transform: uppercase; margin-bottom: 14px; } .ar-sol-header p { font-size: 1.0rem; color: rgba(200,216,236,0.62); max-width: 620px; margin: 0 auto; line-height: 1.72; } .ar-sol-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .ar-sol-card { position: relative; display: flex; flex-direction: column; padding: 30px 24px 26px; border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(255,255,255,0.038) 0%, rgba(255,255,255,0.014) 100%); border: 1px solid var(--border); overflow: hidden; transition: transform 0.3s ease, border-color 0.3s, box-shadow 0.3s; } .ar-sol-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; opacity: 0; transition: opacity 0.3s; } .ar-sol-card.sc-marine::before { background: linear-gradient(90deg, #0B84FF, var(--cy)); } .ar-sol-card.sc-build::before { background: linear-gradient(90deg, #9B5FFF, #5B2FFF); } .ar-sol-card.sc-energy::before { background: linear-gradient(90deg, #FFB800, var(--o)); } .ar-sol-card.sc-partner::before { background: linear-gradient(90deg, var(--o), #FF6622); } .ar-sol-card:hover { transform: translateY(-6px); border-color: rgba(0,212,255,0.20); box-shadow: 0 24px 60px rgba(0,0,0,0.34); } .ar-sol-card:hover::before { opacity: 1; } .ar-sol-icon-wrap { width: 46px; height: 46px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .ar-sol-icon-wrap svg { width: 24px; height: 24px; } .ar-sol-icon-wrap.sc-marine { background: rgba(11,132,255,0.12); color: #3BA8FF; } .ar-sol-icon-wrap.sc-build { background: rgba(155,95,255,0.12); color: #A87FFF; } .ar-sol-icon-wrap.sc-energy { background: rgba(255,184,0,0.12); color: #FFB800; } .ar-sol-icon-wrap.sc-partner { background: rgba(254,80,0,0.12); color: var(--o); } .ar-sol-label { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 9px; } .ar-sol-label.sc-marine { color: #3BA8FF; } .ar-sol-label.sc-build { color: #A87FFF; } .ar-sol-label.sc-energy { color: #FFB800; } .ar-sol-label.sc-partner { color: var(--o); } .ar-sol-card h3 { font-size: 1.5rem; text-transform: uppercase; margin-bottom: 10px; } .ar-sol-card p { font-size: 0.97rem; line-height: 1.72; color: rgba(200,216,236,0.72); flex: 1; margin-bottom: 18px; } .ar-sol-outcome { padding: 11px 14px; background: rgba(0,0,0,0.26); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--r-sm); font-size: 0.90rem; color: rgba(200,216,236,0.62); line-height: 1.56; margin-bottom: 18px; } .ar-sol-outcome strong { color: var(--white); display: block; margin-bottom: 3px; font-size: 0.92rem; } .ar-sol-link { display: inline-flex; align-items: center; gap: 7px; color: var(--cy) !important; text-decoration: none; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; transition: gap 0.2s, color 0.2s; margin-top: auto; } .ar-sol-link:hover { color: var(--white) !important; gap: 11px; } /* ===================================================== INFRASTRUCTURE MOAT ===================================================== */ .ar-moat { background: var(--bg2); padding: 100px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); position: relative; overflow: hidden; } .ar-moat::before { content: ''; position: absolute; width: 700px; height: 700px; top: 50%; left: -250px; transform: translateY(-50%); background: radial-gradient(circle, rgba(254,80,0,0.05) 0%, transparent 65%); pointer-events: none; } .ar-moat-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .ar-moat-copy h2 { font-size: clamp(2.2rem, 3.5vw, 3.8rem); text-transform: uppercase; margin-bottom: 20px; line-height: 0.96; } .ar-moat-copy h2 em { font-style: normal; background: linear-gradient(90deg, var(--o), #FF7A3D); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .ar-moat-copy p { font-size: 1.05rem; line-height: 1.80; color: rgba(200,216,236,0.72); margin-bottom: 13px; max-width: 520px; } .ar-moat-copy p strong { color: var(--white); font-weight: 600; } /* Compare table */ .ar-compare { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; } .ar-compare-head { display: grid; grid-template-columns: 1fr 1fr 1fr; background: var(--panel); border-bottom: 1px solid var(--border); } .ar-compare-th { padding: 13px 16px; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(200,216,236,0.40); border-right: 1px solid var(--border); } .ar-compare-th:last-child { border-right: none; } .ar-compare-th.hl { color: var(--o); } .ar-compare-row { display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.2s; } .ar-compare-row:last-child { border-bottom: none; } .ar-compare-row:hover { background: rgba(255,255,255,0.025); } .ar-compare-td { padding: 12px 16px; font-size: 0.90rem; color: rgba(200,216,236,0.54); border-right: 1px solid rgba(255,255,255,0.04); line-height: 1.4; } .ar-compare-td:last-child { border-right: none; } .ar-compare-td.armit { color: var(--white); font-weight: 500; background: rgba(254,80,0,0.04); } .ar-check { color: #4CFFA0; font-weight: 700; } .ar-cross { color: rgba(200,216,236,0.22); } /* ===================================================== ARMIT CENTRAL ===================================================== */ .ar-central { background: var(--bg); padding: 100px 0; position: relative; overflow: hidden; } .ar-central::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(254,80,0,0.045) 0%, transparent 70%); pointer-events: none; } .ar-central-inner { display: grid; grid-template-columns: 1fr 480px; gap: 70px; align-items: center; position: relative; z-index: 1; } .ar-central-badge { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; background: rgba(254,80,0,0.1); border: 1px solid rgba(254,80,0,0.28); border-radius: 999px; margin-bottom: 22px; } .ar-central-badge-live { width: 22px; height: 22px; background: rgba(254,80,0,0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .ar-central-badge-live::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--o); animation: ar-pulse 2s infinite; } .ar-central-badge span { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--o); } .ar-central-copy h2 { font-size: clamp(2.2rem, 3.5vw, 4rem); text-transform: uppercase; line-height: 0.95; margin-bottom: 18px; } .ar-central-copy p { font-size: 1.05rem; line-height: 1.78; color: rgba(200,216,236,0.72); margin-bottom: 13px; max-width: 540px; } .ar-central-copy p strong { color: var(--white); } .ar-central-callout { margin: 18px 0 26px; padding: 14px 18px; background: rgba(254,80,0,0.07); border-left: 3px solid var(--o); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 0.91rem; color: rgba(255,255,255,0.80); line-height: 1.56; } .ar-central-callout strong { color: var(--o); } /* Command panel */ .ar-cmd-panel { background: linear-gradient(160deg, #081A2C, #04101C); border: 1px solid rgba(0,212,255,0.15); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.5); position: relative; } .ar-cmd-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--o), var(--cy)); } .ar-cmd-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; border-bottom: 1px solid rgba(0,212,255,0.08); } .ar-cmd-title { font-family: var(--font-display); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cy); } .ar-cmd-live { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #4CFFA0; } .ar-cmd-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #4CFFA0; box-shadow: 0 0 8px #4CFFA0; animation: ar-pulse 1.5s infinite; } .ar-cmd-body { padding: 18px 20px; } .ar-cmd-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.04); } .ar-cmd-row:last-of-type { border-bottom: none; } .ar-cmd-lbl { font-size: 0.82rem; color: rgba(200,216,236,0.52); } .ar-cmd-val { font-family: var(--font-display); font-size: 0.92rem; font-weight: 700; color: var(--white); } .ar-cmd-val.g { color: #4CFFA0; } .ar-cmd-val.o { color: var(--o); } .ar-cmd-rule { height: 1px; margin: 12px 0; background: linear-gradient(90deg, transparent, var(--cy-line), transparent); } .ar-cmd-event { padding: 12px 14px; background: rgba(254,80,0,0.07); border: 1px solid rgba(254,80,0,0.18); border-radius: var(--r-sm); } .ar-cmd-event-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; } .ar-cmd-event-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--o); animation: ar-pulse 1.8s infinite; flex-shrink: 0; } .ar-cmd-event-head span { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--o); } .ar-cmd-event p { font-size: 0.81rem; color: rgba(200,216,236,0.68); line-height: 1.52; margin: 0; } /* ===================================================== OUTCOMES — What Changes ===================================================== */ .ar-outcomes { background: var(--bg2); padding: 100px 0; border-top: 1px solid var(--border); } .ar-outcomes-header { text-align: center; margin-bottom: 56px; } .ar-outcomes-header h2 { font-size: clamp(2.2rem, 3.5vw, 4rem); text-transform: uppercase; margin-bottom: 14px; } .ar-outcomes-header p { font-size: 1.0rem; color: rgba(200,216,236,0.62); max-width: 600px; margin: 0 auto; line-height: 1.72; } .ar-outcomes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; } .ar-outcome-card { padding: 28px 24px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); position: relative; transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s; } .ar-outcome-card:hover { transform: translateY(-4px); border-color: rgba(254,80,0,0.22); box-shadow: 0 18px 48px rgba(0,0,0,0.3); } .ar-outcome-icon { width: 40px; height: 40px; color: var(--o); margin-bottom: 14px; } .ar-outcome-card h3 { font-size: 1.1rem; text-transform: uppercase; margin-bottom: 8px; } .ar-outcome-card p { font-size: 0.97rem; line-height: 1.70; color: rgba(200,216,236,0.65); margin: 0; } /* ===================================================== CONTRACTOR ===================================================== */ .ar-contractor { background: var(--bg); padding: 100px 0; border-top: 1px solid var(--border); position: relative; overflow: hidden; } .ar-contractor::before { content: ''; position: absolute; right: -180px; top: 50%; transform: translateY(-50%); width: 560px; height: 560px; background: radial-gradient(circle, rgba(254,80,0,0.06) 0%, transparent 65%); pointer-events: none; } .ar-contractor-inner { display: grid; grid-template-columns: 1fr 460px; gap: 80px; align-items: center; position: relative; z-index: 1; } .ar-contractor-copy h2 { font-size: clamp(2.2rem, 3.5vw, 4rem); text-transform: uppercase; line-height: 0.95; margin-bottom: 18px; } .ar-contractor-copy h2 .acc { background: linear-gradient(90deg, var(--o), #FF7A3D); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .ar-contractor-copy p { font-size: 1.0rem; line-height: 1.78; color: rgba(200,216,236,0.70); margin-bottom: 13px; max-width: 500px; } .ar-contractor-copy p strong { color: var(--white); } .ar-steps { list-style: none; display: flex; flex-direction: column; gap: 14px; margin: 24px 0 30px; } .ar-step { display: flex; align-items: flex-start; gap: 14px; } .ar-step-num { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: rgba(254,80,0,0.1); border: 1px solid rgba(254,80,0,0.26); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 0.88rem; font-weight: 700; color: var(--o); } .ar-step-text { font-size: 0.94rem; color: rgba(200,216,236,0.74); line-height: 1.60; padding-top: 4px; } .ar-step-text strong { color: var(--white); display: block; margin-bottom: 2px; } /* Contractor card */ .ar-partner-card { background: linear-gradient(160deg, #0A1E36, #051120); border: 1px solid rgba(254,80,0,0.18); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 28px 70px rgba(0,0,0,0.44); } .ar-partner-top { padding: 22px 24px 18px; border-bottom: 1px solid rgba(255,255,255,0.05); background: rgba(254,80,0,0.06); } .ar-partner-top-label { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--o); margin-bottom: 7px; } .ar-partner-headline { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; text-transform: uppercase; color: var(--white); line-height: 1.1; } .ar-partner-body { padding: 22px 24px; } .ar-partner-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05); } .ar-partner-row:last-of-type { border-bottom: none; } .ar-partner-lbl { font-size: 0.84rem; color: rgba(200,216,236,0.52); } .ar-partner-val { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; color: var(--white); text-align: right; } .ar-partner-val.good { color: #4CFFA0; } .ar-partner-total { margin-top: 14px; padding: 15px; background: rgba(76,255,160,0.06); border: 1px solid rgba(76,255,160,0.15); border-radius: var(--r-sm); text-align: center; } .ar-partner-total strong { display: block; font-family: var(--font-display); font-size: 1.6rem; color: #4CFFA0; margin-bottom: 4px; } .ar-partner-total span { font-size: 0.78rem; color: rgba(200,216,236,0.46); text-transform: uppercase; letter-spacing: 0.1em; } /* ===================================================== NETWORK ===================================================== */ .ar-network { background: var(--bg2); padding: 100px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); position: relative; overflow: hidden; } .ar-network::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(0,212,255,0.038) 1px, transparent 1px); background-size: 38px 38px; mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 20%, transparent 80%); pointer-events: none; } .ar-network::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 900px; height: 900px; background: radial-gradient(circle, rgba(0,100,255,0.07) 0%, transparent 55%); pointer-events: none; } .ar-network-inner { position: relative; z-index: 1; text-align: center; } .ar-network-inner h2 { font-size: clamp(2.4rem, 4vw, 4.4rem); text-transform: uppercase; margin-bottom: 16px; line-height: 0.95; } .ar-network-inner h2 em { font-style: normal; color: var(--cy); } .ar-network-inner > p { font-size: 1.03rem; line-height: 1.76; color: rgba(200,216,236,0.68); max-width: 680px; margin: 0 auto 46px; } .ar-net-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 42px; } .ar-net-fact { padding: 24px 18px; background: rgba(0,212,255,0.04); border: 1px solid rgba(0,212,255,0.11); border-radius: var(--r-md); text-align: center; transition: border-color 0.3s, background 0.3s; } .ar-net-fact:hover { border-color: rgba(0,212,255,0.24); background: rgba(0,212,255,0.07); } .ar-net-fact-val { display: block; font-family: var(--font-display); font-size: 2rem; color: var(--cy); margin-bottom: 7px; line-height: 1; } .ar-net-fact-lbl { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(200,216,236,0.46); } .ar-net-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; } .ar-net-note { font-size: 0.82rem; color: rgba(200,216,236,0.40); text-align: center; margin-top: 16px; } .ar-net-note a { color: var(--cy); text-decoration: none; } /* ===================================================== ECOSYSTEM ===================================================== */ .ar-eco { background: var(--bg); padding: 100px 0; border-bottom: 1px solid var(--border); } .ar-eco h2 { font-size: clamp(2.2rem, 3.5vw, 3.8rem); text-transform: uppercase; margin-bottom: 10px; } .ar-eco-lead { font-size: 1.0rem; color: rgba(200,216,236,0.60); max-width: 620px; line-height: 1.72; margin-bottom: 46px; } .ar-eco-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .ar-eco-card { padding: 28px 22px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--border); text-decoration: none; display: block; transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; } .ar-eco-card:hover { transform: translateY(-5px); border-color: rgba(254,80,0,0.28); box-shadow: 0 20px 50px rgba(0,0,0,0.32); } .ar-eco-type { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(200,216,236,0.38); margin-bottom: 14px; } .ar-eco-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; text-transform: uppercase; color: var(--white); margin-bottom: 9px; letter-spacing: 0.04em; } .ar-eco-desc { font-family: var(--font-body); font-size: 0.86rem; line-height: 1.65; color: rgba(200,216,236,0.56); margin-bottom: 16px; } .ar-eco-link { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cy); } /* ===================================================== CLOSING ===================================================== */ .ar-close { padding: 100px 0; background: var(--bg2); position: relative; overflow: hidden; } .ar-close::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 80% at 0% 50%, rgba(254,80,0,0.05) 0%, transparent 60%), radial-gradient(ellipse 50% 80% at 100% 50%, rgba(0,132,255,0.05) 0%, transparent 60%); pointer-events: none; } .ar-close-inner { position: relative; z-index: 1; text-align: center; } .ar-close-inner h2 { font-size: clamp(2.6rem, 5vw, 5.2rem); text-transform: uppercase; line-height: 0.94; margin-bottom: 18px; } .ar-close-inner h2 .line-grad { background: linear-gradient(90deg, var(--o), #FF7A3D, var(--cy)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .ar-close-inner > p { font-size: 1.05rem; line-height: 1.72; color: rgba(200,216,236,0.68); max-width: 640px; margin: 0 auto 38px; } .ar-close-ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: 13px; } .ar-close-note { margin-top: 22px; font-size: 0.80rem; color: rgba(200,216,236,0.34); } .ar-close-note a { color: var(--cy); text-decoration: none; } /* ===================================================== FOOTER ===================================================== */ .ar-footer { background: #020810; border-top: 1px solid rgba(255,255,255,0.04); padding: 20px 0; } .ar-footer-inner { display: grid; grid-template-columns: 160px 1fr auto; gap: 20px; align-items: center; } .ar-footer-brand { display: flex; align-items: center; } .ar-footer-brand img { height: 42px; width: auto; opacity: 0.90; transition: opacity 0.2s; } .ar-footer-brand img:hover { opacity: 1; } .ar-footer-brand span { color: var(--o); } .ar-footer-copy { font-size: 0.78rem; color: rgba(200,216,236,0.36); line-height: 1.52; } .ar-footer-links { display: flex; gap: 18px; } .ar-footer-links a { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(200,216,236,0.42); text-decoration: none; transition: color 0.2s; } .ar-footer-links a:hover { color: var(--o); } /* ===================================================== DROPDOWN NAVIGATION ===================================================== */ .ar-has-drop { position: relative; } .ar-drop-caret { font-size: 9px; opacity: 0.55; margin-left: 3px; transition: transform 0.2s; display: inline-block; } .ar-has-drop:hover .ar-drop-caret { transform: rotate(180deg); opacity: 1; } .ar-dropdown { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); width: 280px; background: #071423; border: 1px solid rgba(0,212,255,0.16); border-radius: var(--r-md); box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.03); list-style: none; padding: 8px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; z-index: 2000; } .ar-dropdown::before { content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%); width: 10px; height: 10px; background: #071423; border-left: 1px solid rgba(0,212,255,0.16); border-top: 1px solid rgba(0,212,255,0.16); transform: translateX(-50%) rotate(45deg); } .ar-has-drop:hover .ar-dropdown { opacity: 1; visibility: visible; pointer-events: all; transform: translateX(-50%) translateY(0); } .ar-drop-head { font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(200,216,236,0.35); padding: 8px 12px 6px; } .ar-dropdown li a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--r-sm); text-decoration: none; transition: background 0.18s; font-size: 1rem; /* inherit normal size */ color: rgba(255,255,255,0.82) !important; } .ar-dropdown li a::after { display: none; } /* remove nav underline */ .ar-dropdown li a:hover { background: rgba(0,212,255,0.07); color: var(--white) !important; } .ar-drop-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; color: var(--cy); } .ar-drop-icon svg { width: 15px; height: 15px; } .ar-drop-text { display: flex; flex-direction: column; gap: 2px; } .ar-drop-text strong { font-family: var(--font-display); font-size: 0.82rem; font-weight: 700; color: var(--white); text-transform: uppercase; letter-spacing: 0.04em; } .ar-drop-text span, .ar-drop-text:not(strong) { font-size: 0.78rem; color: rgba(200,216,236,0.52); line-height: 1.3; } .ar-drop-divider { height: 1px; background: rgba(0,212,255,0.10); margin: 6px 8px; } .ar-dropdown li a.ar-drop-all { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cy) !important; justify-content: center; border: 1px solid rgba(0,212,255,0.14); background: rgba(0,212,255,0.04); } .ar-dropdown li a.ar-drop-all:hover { background: rgba(0,212,255,0.10); } /* ===================================================== HERO PANEL — INFRASTRUCTURE SCALE ===================================================== */ .ar-net-live-badge { display: flex; align-items: center; gap: 9px; padding: 9px 14px; background: rgba(76,255,160,0.07); border: 1px solid rgba(76,255,160,0.18); border-radius: 999px; margin-bottom: 18px; font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #4CFFA0; } @keyframes ar-pulse-g { 0%,100% { box-shadow: 0 0 4px #4CFFA0; } 50% { box-shadow: 0 0 10px #4CFFA0, 0 0 18px rgba(76,255,160,0.3); } } .ar-net-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #4CFFA0; flex-shrink: 0; animation: ar-pulse-g 2s ease-in-out infinite; } .ar-panel-scale-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; } .ar-scale-stat { padding: 14px 14px; background: rgba(0,212,255,0.04); border: 1px solid rgba(0,212,255,0.10); border-radius: var(--r-sm); } .ar-scale-stat strong { display: block; font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: var(--white); line-height: 1; margin-bottom: 5px; } .ar-scale-stat strong span { font-size: 1.1rem; color: var(--cy); } .ar-scale-stat > span { font-size: 0.78rem; color: rgba(200,216,236,0.52); line-height: 1.3; display: block; } .ar-scale-stat.ar-scale-orange { border-color: rgba(254,80,0,0.18); background: rgba(254,80,0,0.05); } .ar-scale-stat.ar-scale-orange strong { color: var(--o); } .ar-scale-stat.ar-scale-orange strong span { color: var(--o); } .ar-panel-envs-label { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(200,216,236,0.38); margin-bottom: 10px; } .ar-panel-env-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; } .ar-env-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; } .ar-env-chip svg { width: 13px; height: 13px; flex-shrink: 0; } .chip-marine { background: rgba(11,132,255,0.10); border: 1px solid rgba(11,132,255,0.22); color: #3BA8FF; } .chip-build { background: rgba(155,95,255,0.10); border: 1px solid rgba(155,95,255,0.22); color: #A87FFF; } .chip-energy { background: rgba(255,184,0,0.10); border: 1px solid rgba(255,184,0,0.22); color: #FFB800; } .chip-gov { background: rgba(0,212,255,0.08); border: 1px solid rgba(0,212,255,0.20); color: var(--cy); } .ar-panel-diffs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; } .ar-panel-diff-row { display: flex; align-items: center; gap: 9px; font-size: 0.84rem; color: rgba(200,216,236,0.72); } .ar-panel-diff-row svg { width: 14px; height: 14px; color: #4CFFA0; flex-shrink: 0; } ===================================================== */ .ar-routing { background: var(--bg); padding: 70px 0; border-bottom: 1px solid var(--border); } .ar-routing-header { text-align: center; margin-bottom: 40px; } .ar-routing-header h2 { font-size: clamp(1.6rem, 2.5vw, 2.4rem); text-transform: uppercase; margin-bottom: 10px; } .ar-routing-header p { font-size: 1.0rem; color: rgba(200,216,236,0.60); max-width: 500px; margin: 0 auto; } .ar-routing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .ar-route-card { display: flex; flex-direction: column; align-items: flex-start; padding: 28px 24px 24px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--border); text-decoration: none; position: relative; overflow: hidden; transition: transform 0.28s ease, border-color 0.28s, box-shadow 0.28s; } .ar-route-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; opacity: 0; transition: opacity 0.28s; } .ar-route-card:hover { transform: translateY(-6px); box-shadow: 0 22px 55px rgba(0,0,0,0.38); } .ar-route-card:hover::before { opacity: 1; } .ar-route-card.rc-marine { } .ar-route-card.rc-marine::before { background: linear-gradient(90deg,#0B84FF,var(--cy)); } .ar-route-card.rc-build { } .ar-route-card.rc-build::before { background: linear-gradient(90deg,#9B5FFF,#5B2FFF); } .ar-route-card.rc-partner { } .ar-route-card.rc-partner::before { background: linear-gradient(90deg,var(--o),#FF6622); } .ar-route-card.rc-enterprise { } .ar-route-card.rc-enterprise::before { background: linear-gradient(90deg,var(--cy),#0B84FF); } .ar-route-card:hover.rc-marine { border-color: rgba(11,132,255,0.30); } .ar-route-card:hover.rc-build { border-color: rgba(155,95,255,0.30); } .ar-route-card:hover.rc-partner { border-color: rgba(254,80,0,0.30); } .ar-route-card:hover.rc-enterprise { border-color: rgba(0,212,255,0.30); } .ar-route-icon { width: 44px; height: 44px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; flex-shrink: 0; } .ar-route-icon svg { width: 22px; height: 22px; } .ar-route-icon.rc-marine { background: rgba(11,132,255,0.12); color: #3BA8FF; } .ar-route-icon.rc-build { background: rgba(155,95,255,0.12); color: #A87FFF; } .ar-route-icon.rc-partner { background: rgba(254,80,0,0.12); color: var(--o); } .ar-route-icon.rc-enterprise { background: rgba(0,212,255,0.10); color: var(--cy); } .ar-route-label { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(200,216,236,0.44); margin-bottom: 8px; } .ar-route-title { font-family: var(--font-display); font-size: 1.22rem; font-weight: 700; text-transform: uppercase; color: var(--white); margin-bottom: 10px; line-height: 1.1; } .ar-route-desc { font-size: 0.92rem; line-height: 1.62; color: rgba(200,216,236,0.62); margin-bottom: 20px; flex: 1; } .ar-route-action { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cy) !important; text-decoration: none; transition: gap 0.2s; margin-top: auto; } .ar-route-card:hover .ar-route-action { gap: 11px; } .ar-route-action.rc-marine { color: #3BA8FF !important; } .ar-route-action.rc-build { color: #A87FFF !important; } .ar-route-action.rc-partner { color: var(--o) !important; } /* Panel CTA button */ .ar-panel-cta-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin-top: 14px; background: linear-gradient(135deg, var(--o) 0%, #FF6622 100%); color: var(--white) !important; text-decoration: none; border-radius: 999px; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; box-shadow: 0 8px 24px var(--o-glow); transition: all 0.22s ease; } .ar-panel-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(254,80,0,0.32); } .ar-panel-cta-ghost { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 38px; margin-top: 8px; background: transparent; color: rgba(200,216,236,0.62) !important; text-decoration: none; border: 1px solid rgba(200,216,236,0.12); border-radius: 999px; font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; transition: all 0.22s ease; } .ar-panel-cta-ghost:hover { border-color: var(--cy); color: var(--cy) !important; } /* Panel pricing block */ .ar-panel-price-block { padding: 14px 0 12px; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 4px; } .ar-panel-price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; } .ar-panel-price-lbl { font-size: 0.88rem; color: rgba(200,216,236,0.54); } .ar-panel-price-val { font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; color: var(--white); } .ar-panel-price-val.highlight { color: var(--o); } .ar-panel-price-sub { font-size: 0.76rem; color: rgba(200,216,236,0.38); text-align: right; margin-top: -2px; } @media (max-width: 991px) { .ar-routing-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .ar-routing-grid { grid-template-columns: 1fr; } } @media (max-width: 1199px) { .ar-container { padding: 0 26px; } .ar-hero-layout { grid-template-columns: 1fr; gap: 48px; } .ar-live-panel { max-width: 520px; } .ar-cap-grid { grid-template-columns: repeat(3, 1fr); } .ar-sol-grid { grid-template-columns: repeat(2, 1fr); } .ar-net-facts { grid-template-columns: repeat(2, 1fr); } .ar-outcomes-grid { grid-template-columns: repeat(2, 1fr); } .ar-eco-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 991px) { .ar-topbar { display: none; } .ar-nav { top: 0; } .ar-nav-actions { display: none; } .ar-mobile-toggle { display: flex; } .ar-nav-inner { min-height: 74px; } .ar-moat-inner, .ar-central-inner, .ar-contractor-inner { grid-template-columns: 1fr; gap: 48px; } .ar-reframe-header { grid-template-columns: 1fr; gap: 18px; } .ar-cap-grid { grid-template-columns: repeat(2, 1fr); } .ar-stats-grid { grid-template-columns: repeat(2, 1fr); } .ar-footer-inner { grid-template-columns: 1fr; gap: 13px; } .ar-footer-links { flex-wrap: wrap; gap: 12px; } /* ── Mobile nav panel ── */ .ar-nav-links { display: none; flex-direction: column; position: fixed; top: 74px; left: 0; right: 0; max-height: calc(100vh - 74px); background: #061522; border-top: 1px solid rgba(0,212,255,0.14); padding: 10px 0 30px; overflow-y: auto; z-index: 9997; gap: 0; box-shadow: 0 20px 60px rgba(0,0,0,0.60); } .ar-nav-links.mobile-open { display: flex; } /* Overlay */ .ar-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 9996; } .ar-nav-overlay.active { display: block; } /* Mobile nav links */ .ar-nav-links li { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.05); } .ar-nav-links > li > a { display: flex; align-items: center; justify-content: space-between; padding: 15px 24px; font-size: 1.02rem; color: rgba(200,216,236,0.84) !important; text-transform: uppercase; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.08em; background: transparent; } .ar-nav-links > li > a:hover { background: rgba(255,255,255,0.03); } .ar-nav-links > li > a::after { display: none !important; } .ar-nav-links > li > a.ar-active { color: var(--o) !important; } /* Mobile dropdown — expands inline */ .ar-has-drop .ar-dropdown { position: static !important; opacity: 1 !important; visibility: visible !important; pointer-events: all !important; transform: none !important; background: rgba(0,0,0,0.28); border: none; border-radius: 0; box-shadow: none; width: 100%; padding: 4px 0 8px 16px; display: none; transition: none; } .ar-has-drop.drop-open .ar-dropdown { display: block; } .ar-dropdown::before { display: none; } .ar-dropdown li a { padding: 10px 14px !important; font-size: 0.88rem !important; color: rgba(200,216,236,0.68) !important; } .ar-drop-head { padding: 10px 14px 4px; } /* Hamburger → X */ .ar-mobile-toggle span { transition: transform 0.22s ease, opacity 0.18s ease; } .ar-mobile-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .ar-mobile-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .ar-mobile-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } @media (max-width: 767px) { .ar-section, .ar-hero, .ar-reframe, .ar-solutions, .ar-moat, .ar-central, .ar-outcomes, .ar-contractor, .ar-network, .ar-eco, .ar-close { padding: 68px 0; } .ar-container { padding: 0 18px; } .ar-hero h1 { font-size: 2.8rem; } .ar-cap-grid, .ar-sol-grid, .ar-stats-grid, .ar-eco-grid, .ar-net-facts, .ar-outcomes-grid { grid-template-columns: 1fr; } .ar-hero-ctas, .ar-close-ctas, .ar-net-cta { flex-direction: column; } .ar-btn-lg { width: 100%; } } /* ===================================================== DROPDOWN FIX — overflow + z-index ===================================================== */ .ar-nav, .ar-nav-inner, .ar-has-drop { overflow: visible !important; } .ar-dropdown { z-index: 9999 !important; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s !important; } .ar-has-drop:hover .ar-dropdown { transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s !important; } /* Reset stale transform on initial state */ .ar-dropdown { transform: translateX(-50%) translateY(8px) !important; } .ar-has-drop:hover .ar-dropdown { transform: translateX(-50%) translateY(0) !important; } /* Dropdown link reset — override nav link styles */ .ar-dropdown li a { display: flex !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 0.88rem !important; min-height: unset !important; padding: 9px 12px !important; font-weight: 400 !important; } .ar-dropdown li a::after { display: none !important; }