/* ================================================================ TravelCarePlans — Global Stylesheet Site: travelcareplans.com Version: 1.0 Last updated: 2026-04-26 ================================================================ HOW TO CHANGE COLORS (edit once, updates everywhere): Find the :root block below and change the hex values. HOW TO CHANGE FONTS: Edit the Google Fonts link in each HTML file's , then update --ff-d and --ff-b below. ================================================================ */ /* ── DESIGN TOKENS ── */ :root { --bg: #04111c; --bg2: #071928; --navy: #0d1e2c; --glass: rgba(255,255,255,0.035); --glass2: rgba(255,255,255,0.06); --border: rgba(255,255,255,0.08); --teal: #1D9E75; --teal-l: #5DCAA5; --teal-g: rgba(29,158,117,0.18); --purple: #7c3aed; --purple-g: rgba(124,58,237,0.12); --gold: #c9b87a; --white: #ffffff; --w80: rgba(255,255,255,0.80); --w55: rgba(255,255,255,0.55); --w30: rgba(255,255,255,0.30); --w12: rgba(255,255,255,0.12); --ff-d: 'Cormorant Garamond', serif; --ff-b: 'DM Sans', sans-serif; } /* ── RESET ── */ *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; } html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; } body { font-family:var(--ff-b); background:var(--bg); color:var(--white); overflow-x:hidden; line-height:1.65; } img { max-width:100%; height:auto; display:block; } a { text-decoration:none; color:inherit; } /* ── NOISE TEXTURE ── */ body::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:0; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E"); opacity:.35; } /* ── ANIMATED ORBS ── */ .orbs { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; } .orb { position:absolute; border-radius:50%; filter:blur(80px); animation:orbFloat 14s ease-in-out infinite; } .orb1 { width:700px; height:500px; background:var(--teal-g); top:-10%; left:-10%; animation-delay:0s; } .orb2 { width:500px; height:400px; background:var(--purple-g); top:20%; right:-15%; animation-delay:-5s; } .orb3 { width:350px; height:280px; background:var(--teal-g); bottom:-5%; left:35%; animation-delay:-9s; } @keyframes orbFloat { 0%,100%{transform:translate(0,0) scale(1)} 40%{transform:translate(28px,-22px) scale(1.04)} 70%{transform:translate(-18px,14px) scale(0.97)} } /* ── GRADIENT TEXT ── */ .grad-text { background:linear-gradient(135deg, var(--teal-l) 0%, #a78bfa 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } /* ── TAG / BADGE ── */ .tag { display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--teal-l); background:rgba(29,158,117,0.10); border:1px solid rgba(29,158,117,0.25); border-radius:100px; padding:.32rem .85rem; } .tag-dot { width:5px; height:5px; border-radius:50%; background:var(--teal-l); animation:pulse 2s infinite; flex-shrink:0; } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} } /* ── GLASS ── */ .glass { background:var(--glass); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid var(--border); border-radius:16px; } /* ── BUTTONS ── */ .btn-p { display:inline-flex; align-items:center; gap:.45rem; background:var(--teal); color:#fff; padding:.75rem 1.6rem; border-radius:10px; font-family:var(--ff-b); font-weight:600; font-size:.9rem; transition:all .25s; box-shadow:0 0 26px rgba(29,158,117,0.35); border:1px solid transparent; cursor:pointer; } .btn-p:hover { background:var(--teal-l); box-shadow:0 0 40px rgba(93,202,165,0.45); transform:translateY(-1px); } .btn-o { display:inline-flex; align-items:center; gap:.45rem; background:var(--glass); color:var(--w80); padding:.75rem 1.6rem; border-radius:10px; font-family:var(--ff-b); font-weight:600; font-size:.9rem; transition:all .25s; border:1px solid var(--border); backdrop-filter:blur(10px); cursor:pointer; } .btn-o:hover { border-color:rgba(255,255,255,0.25); color:var(--white); transform:translateY(-1px); } /* ── SECTION SHARED ── */ .sec { padding:7rem 5vw; position:relative; } .sec-inner { max-width:1180px; margin:0 auto; } .sec-head { text-align:center; max-width:680px; margin:0 auto 4.5rem; } .sec-head h2 { font-family:var(--ff-d); font-size:clamp(2rem,4vw,3.2rem); font-weight:600; letter-spacing:-.02em; color:var(--white); line-height:1.15; margin:.8rem 0 1rem; } .sec-head p { color:var(--w55); font-size:.97rem; line-height:1.9; } .t-line { width:40px; height:2px; background:linear-gradient(90deg, var(--teal), var(--purple)); border-radius:2px; margin:.6rem auto 0; } /* ── NAVIGATION (base — layout handled by .nav / .nav-inner in supplementary section) ── */ nav { position:sticky; top:0; z-index:999; background:rgba(4,17,28,0.88); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--border); } .nav-links { list-style:none; display:flex; gap:2rem; align-items:center; } .nav-links a { color:var(--w55); font-size:.87rem; font-weight:500; transition:color .2s; text-wrap: nowrap; } .nav-links a:hover, .nav-links a.active { color:var(--white); } /* ── HERO ── */ .hero { min-height:100vh; position:relative; display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; padding:8rem 5vw 6rem; background: radial-gradient(ellipse 900px 700px at 12% 40%, rgba(29,158,117,0.10) 0%, transparent 58%), radial-gradient(ellipse 600px 500px at 88% 62%, rgba(124,58,237,0.07) 0%, transparent 58%), var(--bg); overflow:hidden; } .hero::before { content:''; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(circle, rgba(93,202,165,0.12) 1px, transparent 1px); background-size:32px 32px; mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%); -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%); } .hero-text { position:relative; z-index:2; } .hero-text .tag { margin-bottom:1.4rem; } .hero-h1 { font-family:var(--ff-d); font-size:clamp(2.8rem,5.5vw,5rem); font-weight:600; line-height:1.06; letter-spacing:-.025em; color:var(--white); margin-bottom:1.4rem; } .hero-sub { font-size:clamp(.95rem,1.6vw,1.1rem); color:var(--w55); max-width:520px; margin-bottom:2.5rem; line-height:1.8; } .hero-btns { display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom:3rem; } .hero-stats { display:flex; gap:2.5rem; } .hstat-val { font-family:var(--ff-d); font-size:1.6rem; font-weight:700; color:var(--teal-l); } .hstat-lab { font-size:.73rem; color:var(--w30); margin-top:.15rem; letter-spacing:.04em; text-transform:uppercase; } .hero-img-wrap { position:relative; z-index:2; } .hero-img-frame { position:relative; border-radius:20px; overflow:hidden; border:1px solid rgba(29,158,117,0.25); box-shadow:0 0 80px rgba(29,158,117,0.14), 0 40px 120px rgba(0,0,0,0.5); } .hero-img-frame img { width:100%; height:480px; object-fit:cover; object-position:center top; display:block; } /* gradient fallback if image missing */ .hero-img-frame .img-fallback { width:100%; height:480px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--navy) 0%, var(--bg2) 100%); color:var(--w30); font-size:.82rem; flex-direction:column; gap:.5rem; } .hero-img-frame::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom, transparent 55%, rgba(4,17,28,0.65) 100%); pointer-events:none; } .hero-badge { position:absolute; bottom:1.5rem; left:1.5rem; z-index:3; background:rgba(4,17,28,0.88); backdrop-filter:blur(16px); border:1px solid rgba(29,158,117,0.3); border-radius:12px; padding:.85rem 1.2rem; display:flex; align-items:center; gap:.8rem; } .hbadge-dot { width:8px; height:8px; border-radius:50%; background:var(--teal); box-shadow:0 0 8px var(--teal); animation:pulse 2s infinite; flex-shrink:0; } .hbadge-text { font-size:.78rem; color:var(--w80); } .hbadge-text strong { color:var(--teal-l); display:block; font-size:.85rem; } .hero-corner { position:absolute; top:-1px; right:-1px; width:80px; height:80px; background:linear-gradient(135deg,var(--teal) 0%,transparent 60%); opacity:.25; border-radius:0 20px 0 0; } /* ── TRUST MARQUEE ── */ .trust-wrap { overflow:hidden; position:relative; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:rgba(7,25,40,0.6); backdrop-filter:blur(10px); padding:1.2rem 0; } .trust-wrap::before, .trust-wrap::after { content:''; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none; } .trust-wrap::before { left:0; background:linear-gradient(90deg, rgba(4,17,28,1), transparent); } .trust-wrap::after { right:0; background:linear-gradient(-90deg, rgba(4,17,28,1), transparent); } .trust-track { display:flex; gap:4rem; animation:marquee 24s linear infinite; width:max-content; } @keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} } .trust-item { display:flex; align-items:center; gap:.7rem; white-space:nowrap; flex-shrink:0; } .trust-num { font-family:var(--ff-d); font-size:1.3rem; font-weight:700; color:var(--teal-l); } .trust-label { font-size:.82rem; color:var(--w55); letter-spacing:.04em; } .trust-sep { width:4px; height:4px; border-radius:50%; background:rgba(29,158,117,0.4); flex-shrink:0; } /* ── CARE PLANS ── */ .care-sec { background:radial-gradient(ellipse 700px 500px at 78% 50%, var(--teal-g) 0%, transparent 62%), var(--bg); } .care-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; max-width:1180px; margin:0 auto; } .care-img-wrap { position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--border); box-shadow:0 0 60px rgba(29,158,117,0.12); } .care-img-wrap img { width:100%; height:440px; object-fit:cover; object-position:center; } .care-img-wrap .img-fallback { width:100%; height:440px; background:linear-gradient(135deg,var(--navy),var(--bg2)); display:flex; align-items:center; justify-content:center; color:var(--w30); font-size:.8rem; } .care-img-wrap::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(29,158,117,0.12),transparent); z-index:1; pointer-events:none; } .care-stat-badge { position:absolute; top:1.5rem; right:1.5rem; z-index:2; background:rgba(4,17,28,0.9); backdrop-filter:blur(16px); border:1px solid rgba(29,158,117,0.3); border-radius:12px; padding:.9rem 1.1rem; text-align:center; } .care-stat-badge .val { font-family:var(--ff-d); font-size:1.8rem; font-weight:700; color:var(--teal-l); } .care-stat-badge .lbl { font-size:.7rem; color:var(--w55); margin-top:.2rem; line-height:1.4; } .care-text .tag { margin-bottom:1.2rem; } .care-text h2 { font-family:var(--ff-d); font-size:clamp(1.9rem,3.5vw,2.8rem); font-weight:600; letter-spacing:-.02em; line-height:1.15; color:var(--white); margin-bottom:1.2rem; } .care-text p { color:var(--w55); font-size:.94rem; line-height:1.9; margin-bottom:1.5rem; } .sol-label { font-size:.73rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-l); margin-bottom:.9rem; } .sol-list { list-style:none; display:flex; flex-direction:column; gap:.85rem; } .sol-item { display:flex; gap:.9rem; align-items:flex-start; font-size:.92rem; color:var(--w80); line-height:1.7; } .sol-icon { width:20px; height:20px; border-radius:50%; flex-shrink:0; margin-top:.18rem; background:rgba(29,158,117,0.14); border:1px solid rgba(29,158,117,0.35); display:flex; align-items:center; justify-content:center; } .sol-icon svg { width:10px; height:10px; stroke:var(--teal-l); fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; } /* ── PLATFORM ── */ .plat-sec { background:var(--bg2); } .plat-browser { max-width:1000px; margin:0 auto; border-radius:16px; overflow:hidden; border:1px solid var(--border); box-shadow:0 0 100px rgba(29,158,117,0.12), 0 60px 120px rgba(0,0,0,0.5); } .browser-bar { background:rgba(7,25,40,0.95); padding:.7rem 1rem; display:flex; align-items:center; gap:.7rem; border-bottom:1px solid var(--border); } .browser-dots { display:flex; gap:.35rem; } .browser-dots span { width:10px; height:10px; border-radius:50%; display:block; } .browser-dots span:nth-child(1) { background:#ff5f57; } .browser-dots span:nth-child(2) { background:#ffbd2e; } .browser-dots span:nth-child(3) { background:#28ca41; } .browser-url { flex:1; background:rgba(255,255,255,0.06); border:1px solid var(--border); border-radius:6px; padding:.3rem .8rem; font-size:.75rem; color:var(--w30); } .browser-img { width:100%; display:block; } .plat-feat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; max-width:1000px; margin:2.5rem auto 0; } .pfcard { padding:1.6rem; border-radius:14px; background:var(--glass); border:1px solid var(--border); transition:all .3s; } .pfcard:hover { background:var(--glass2); border-color:rgba(29,158,117,0.25); transform:translateY(-3px); } .pfc-icon { width:40px; height:40px; border-radius:10px; background:rgba(29,158,117,0.12); border:1px solid rgba(29,158,117,0.2); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; } .pfc-icon svg { width:18px; height:18px; stroke:var(--teal-l); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .pfcard h4 { font-size:.92rem; font-weight:600; color:var(--white); margin-bottom:.4rem; } .pfcard p { font-size:.8rem; color:var(--w55); line-height:1.65; } /* ── HOW IT WORKS ── */ .hiw-sec { background:radial-gradient(ellipse 800px 600px at 20% 60%, var(--purple-g) 0%, transparent 62%), var(--bg); } .steps-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1.5rem; max-width:1100px; margin:0 auto; position:relative; } .steps-grid::before { content:''; position:absolute; top:2.55rem; left:10%; width:80%; height:1px; background:linear-gradient(90deg,transparent,var(--teal) 20%,rgba(124,58,237,0.6) 80%,transparent); } .step { text-align:center; position:relative; z-index:1; } .step-num { width:52px; height:52px; border-radius:50%; margin:0 auto 1.2rem; background:var(--glass); border:1px solid rgba(29,158,117,0.3); display:flex; align-items:center; justify-content:center; font-family:var(--ff-d); font-size:1.1rem; font-weight:700; color:var(--teal-l); box-shadow:0 0 20px rgba(29,158,117,0.14); } .step-icon-ring { width:44px; height:44px; border-radius:50%; background:rgba(29,158,117,0.08); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; margin:0 auto .8rem; } .step-icon-ring svg { width:18px; height:18px; stroke:var(--teal-l); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .step h3 { font-size:.9rem; font-weight:600; color:var(--white); margin-bottom:.4rem; } .step p { font-size:.78rem; color:var(--w55); line-height:1.6; } /* ── TECHNOLOGY BENTO ── */ .tech-sec { background:var(--bg2); } .bento { display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:auto auto; gap:1.2rem; max-width:1100px; margin:0 auto; } .bento-card { padding:2rem; border-radius:16px; background:var(--glass); border:1px solid var(--border); transition:all .3s; position:relative; overflow:hidden; } .bento-card::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 0% 0%, var(--teal-g), transparent 70%); opacity:0; transition:opacity .3s; } .bento-card:hover::before { opacity:1; } .bento-card:hover { border-color:rgba(29,158,117,0.2); transform:translateY(-2px); } .bento-card.span2 { grid-column:span 2; } .bento-card.span3 { grid-column:span 3; } .bento-img { width:100%; height:180px; object-fit:cover; border-radius:10px; margin-bottom:1.2rem; border:1px solid var(--border); } .bento-ico { width:44px; height:44px; border-radius:11px; background:rgba(29,158,117,0.12); border:1px solid rgba(29,158,117,0.2); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; } .bento-ico svg { width:20px; height:20px; stroke:var(--teal-l); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .bento-card h3 { font-family:var(--ff-d); font-size:1.2rem; font-weight:600; color:var(--white); margin-bottom:.5rem; position:relative; } .bento-card p { font-size:.85rem; color:var(--w55); line-height:1.7; position:relative; } .bento-num { font-family:var(--ff-d); font-size:3.5rem; font-weight:700; line-height:1; margin-bottom:.3rem; } /* ── TEAM ── */ .team-sec { background:radial-gradient(ellipse 700px 500px at 60% 40%, rgba(124,58,237,0.08) 0%, transparent 62%), var(--bg2); } .team-group-strip { max-width:1100px; margin:0 auto 3.5rem; border-radius:20px; overflow:hidden; border:1px solid var(--border); position:relative; height:220px; } .team-group-strip img { width:100%; height:100%; object-fit:cover; object-position:center 30%; } .team-group-strip::after { content:''; position:absolute; inset:0; background:linear-gradient(to right, rgba(4,17,28,0.88) 0%, rgba(4,17,28,0.3) 40%, rgba(4,17,28,0.3) 60%, rgba(4,17,28,0.88) 100%); } .team-group-label { position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.4rem; } .team-group-label h3 { font-family:var(--ff-d); font-size:1.8rem; font-weight:600; color:var(--white); } .team-group-label p { font-size:.85rem; color:var(--w55); } .team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; max-width:1100px; margin:0 auto; } .tcard-member { border-radius:20px; overflow:hidden; background:var(--glass); border:1px solid var(--border); transition:all .3s; } .tcard-member:hover { border-color:rgba(29,158,117,0.25); transform:translateY(-4px); box-shadow:0 30px 80px rgba(0,0,0,0.3); } .member-photo { height:260px; position:relative; overflow:hidden; } .member-photo img { width:100%; height:100%; object-fit:cover; object-position:center top; } .member-photo-init { width:100%; height:100%; background:linear-gradient(135deg, var(--bg2) 0%, var(--navy) 100%); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.6rem; } .initials-circle { width:88px; height:88px; border-radius:50%; background:linear-gradient(135deg,rgba(29,158,117,0.25),rgba(124,58,237,0.25)); border:1.5px solid rgba(29,158,117,0.35); display:flex; align-items:center; justify-content:center; font-family:var(--ff-d); font-size:1.8rem; font-weight:700; color:var(--teal-l); box-shadow:0 0 40px rgba(29,158,117,0.2); } .photo-note { font-size:.7rem; color:var(--w30); text-align:center; padding:0 1rem; } .member-photo::after { content:''; position:absolute; bottom:0; left:0; right:0; height:80px; background:linear-gradient(transparent, rgba(4,17,28,0.88)); pointer-events:none; } .member-body { padding:1.6rem; } .member-name { font-family:var(--ff-d); font-size:1.25rem; font-weight:700; color:var(--white); margin-bottom:.2rem; } .member-title { font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-l); margin-bottom:.9rem; } .member-bio { font-size:.83rem; color:var(--w55); line-height:1.75; margin-bottom:1.2rem; } .li-btn { display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:600; color:var(--w80); border:1px solid var(--border); border-radius:8px; padding:.45rem .9rem; transition:all .2s; background:var(--glass); } .li-btn:hover { border-color:rgba(29,158,117,0.4); color:var(--teal-l); } .li-btn svg { width:13px; height:13px; fill:currentColor; } /* ── FORMS ── */ .forms-sec { background:radial-gradient(ellipse 900px 600px at 50% 50%, rgba(29,158,117,0.07) 0%, transparent 62%), var(--bg); } .forms-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; max-width:1100px; margin:0 auto; } .form-card { padding:2.5rem; border-radius:20px; background:var(--glass); border:1px solid var(--border); } .form-card h3 { font-family:var(--ff-d); font-size:1.7rem; font-weight:600; color:var(--white); margin-bottom:.4rem; } .form-card .form-sub { font-size:.86rem; color:var(--w55); line-height:1.7; margin-bottom:2rem; } .fg { margin-bottom:1.15rem; } .fg label { display:block; font-size:.73rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--w55); margin-bottom:.4rem; } .fg input, .fg select, .fg textarea { width:100%; background:rgba(255,255,255,0.05); border:1px solid var(--border); border-radius:9px; color:var(--white); font-family:var(--ff-b); font-size:.88rem; padding:.7rem 1rem; outline:none; transition:all .2s; } .fg input::placeholder, .fg textarea::placeholder { color:var(--w30); } .fg input:focus, .fg select:focus, .fg textarea:focus { border-color:rgba(29,158,117,0.5); background:rgba(29,158,117,0.04); } .fg select option { background:var(--navy); color:var(--white); } .fg textarea { resize:vertical; min-height:95px; } .form-submit { width:100%; background:var(--teal); color:#fff; padding:.8rem; border:none; border-radius:9px; font-family:var(--ff-b); font-size:.92rem; font-weight:700; cursor:pointer; transition:all .25s; margin-top:.4rem; box-shadow:0 0 24px rgba(29,158,117,0.28); } .form-submit:hover { background:var(--teal-l); box-shadow:0 0 40px rgba(29,158,117,0.45); } .form-consent { font-size:.72rem; color:var(--w30); margin-top:.75rem; text-align:center; display:flex; align-items:center; justify-content:center; gap:.3rem; } .form-consent svg { width:11px; height:11px; stroke:var(--teal-l); fill:none; stroke-width:2; flex-shrink:0; } .form-success { display:none; text-align:center; padding:2rem; font-size:.9rem; color:var(--teal-l); } .contact-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; max-width:1100px; margin:2.5rem auto 0; } .cstrip-card { padding:1.4rem; border-radius:14px; background:var(--glass); border:1px solid var(--border); text-align:center; transition:all .2s; } .cstrip-card:hover { border-color:rgba(29,158,117,0.25); } .cstrip-icon { width:38px; height:38px; border-radius:9px; background:rgba(29,158,117,0.10); border:1px solid rgba(29,158,117,0.2); display:flex; align-items:center; justify-content:center; margin:0 auto .7rem; } .cstrip-icon svg { width:16px; height:16px; stroke:var(--teal-l); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .cstrip-label { font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--w30); margin-bottom:.3rem; } .cstrip-email { font-size:.82rem; color:var(--teal-l); transition:opacity .2s; } .cstrip-email:hover { opacity:.75; } /* ── CTA ── */ .cta-sec { position:relative; text-align:center; padding:7rem 5vw; overflow:hidden; background:linear-gradient(135deg,rgba(29,158,117,0.1) 0%,rgba(124,58,237,0.08) 100%), var(--bg2); border-top:1px solid var(--border); } .cta-sec::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 600px 400px at 50% 50%, rgba(29,158,117,0.14), transparent); pointer-events:none; } .cta-sec h2 { font-family:var(--ff-d); font-size:clamp(2.4rem,5vw,4.2rem); font-weight:600; color:var(--white); margin-bottom:1rem; position:relative; } .cta-sec p { color:var(--w55); font-size:1rem; margin-bottom:2.5rem; position:relative; } .cta-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; position:relative; } .cta-trust { font-size:.78rem; color:var(--w30); margin-top:1.2rem; display:flex; gap:1.5rem; justify-content:center; align-items:center; flex-wrap:wrap; } .cta-trust span { color:var(--teal-l); } /* ── FOOTER ── */ footer { background:rgba(2,9,16,0.98); border-top:1px solid var(--border); padding:4rem 5vw 2rem; } .footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:3rem; max-width:1180px; margin:0 auto 3rem; } .footer-brand .footer-logo-row { display:flex; align-items:center; gap:.7rem; margin-bottom:.9rem; } .footer-brand .fl-img { height:32px; width:auto; object-fit:contain; } .footer-brand .fl-wordmark { font-family:var(--ff-d); font-size:1.1rem; font-weight:600; color:var(--white); } .footer-tagline { font-size:.84rem; color:var(--w55); line-height:1.75; margin-bottom:1.4rem; } .f-socials { display:flex; gap:.5rem; } .fsoc { width:34px; height:34px; border-radius:8px; border:1px solid var(--border); background:var(--glass); display:flex; align-items:center; justify-content:center; transition:all .2s; color:var(--w55); } .fsoc:hover { background:rgba(29,158,117,0.15); border-color:rgba(29,158,117,0.35); color:var(--teal-l); } .fsoc svg { width:13px; height:13px; fill:currentColor; } .f-col h4 { font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-l); margin-bottom:1rem; } .f-links { list-style:none; display:flex; flex-direction:column; gap:.55rem; } .f-links a { font-size:.84rem; color:var(--w55); transition:color .2s; } .f-links a:hover { color:var(--white); } .f-email { color:var(--teal-l); font-size:.82rem; display:block; margin-bottom:.35rem; transition:opacity .2s; } .f-email:hover { opacity:.75; } .footer-bottom { border-top:1px solid var(--border); padding-top:1.5rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.8rem; max-width:1180px; margin:0 auto; } .f-copy { font-size:.78rem; color:var(--w30); } .f-legal { display:flex; gap:1.5rem; } .f-legal a { font-size:.78rem; color:var(--w30); transition:color .2s; } .f-legal a:hover { color:var(--teal-l); } /* ── PAGE HERO (inner pages) ── */ .page-hero { padding:8rem 5vw 5rem; text-align:center; background:radial-gradient(ellipse 700px 500px at 50% 50%, rgba(29,158,117,0.1), transparent 65%), var(--bg); position:relative; overflow:hidden; } .page-hero::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle, rgba(93,202,165,0.1) 1px, transparent 1px); background-size:32px 32px; mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%); -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%); } .page-hero h1 { font-family:var(--ff-d); font-size:clamp(2.5rem,5vw,4rem); font-weight:600; color:var(--white); margin:.8rem 0 1rem; letter-spacing:-.02em; line-height:1.1; position:relative; } .page-hero p { color:var(--w55); font-size:1rem; max-width:580px; margin:0 auto; line-height:1.85; position:relative; } /* ── RESPONSIVE ── */ @media(max-width:1024px) { .hero { grid-template-columns:1fr; padding:7rem 5vw 5rem; } .hero-img-wrap { max-width:560px; } .care-grid { grid-template-columns:1fr; gap:3rem; } .plat-feat-grid { grid-template-columns:repeat(2,1fr); } .steps-grid { grid-template-columns:repeat(3,1fr); } .steps-grid::before { display:none; } .bento { grid-template-columns:repeat(2,1fr); } .bento-card.span2, .bento-card.span3 { grid-column:span 1; } .team-grid { grid-template-columns:repeat(2,1fr); } .forms-grid { grid-template-columns:1fr; } .contact-strip { grid-template-columns:1fr 1fr; } .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; } nav { padding:.8rem 4vw; } .nav-links { display:none; } .nav-ham { display:flex; } } @media(max-width:640px) { .plat-feat-grid { grid-template-columns:1fr; } .steps-grid { grid-template-columns:repeat(2,1fr); } .bento { grid-template-columns:1fr; } .team-grid { grid-template-columns:1fr; } .footer-grid { grid-template-columns:1fr; } .hero-stats { flex-wrap:wrap; gap:1.5rem; } .contact-strip { grid-template-columns:1fr; } .cta-trust { flex-direction:column; gap:.6rem; } } /* ================================================================ SUPPLEMENTARY STYLES — index.html semantic class names (These extend the existing styles above with matching tokens) ================================================================ */ /* ── BUTTONS (new naming) ── */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; font-family:var(--ff-b); font-weight:600; font-size:.88rem; padding:.72rem 1.5rem; border-radius:10px; transition:all .25s; cursor:pointer; border:none; text-decoration:none; position:relative; white-space:nowrap; } .btn-primary, .btn-ghost { width: 126px; } .btn-primary { background:var(--teal); color:#fff; box-shadow:0 0 26px rgba(29,158,117,0.35); border:1px solid transparent; } .btn-primary:hover { background:var(--teal-l); box-shadow:0 0 40px rgba(93,202,165,0.45); transform:translateY(-1px); } .btn-ghost { background:var(--glass); color:var(--w80); border:1px solid var(--border); backdrop-filter:blur(10px); } .btn-ghost:hover { border-color:rgba(255,255,255,0.25); color:var(--white); transform:translateY(-1px); } .btn-lg { padding:.9rem 2rem; font-size:.95rem; border-radius:12px; } .btn-full { width:100%; } @media(min-width: 640px) { .btn-primary, .btn-ghost { width: auto; } } /* ── SECTION / CONTAINER ── */ .section { padding:7rem 5vw; position:relative; } .container { max-width:1180px; margin:0 auto; } .container--narrow { max-width:720px; margin:0 auto; } .section-header { text-align:center; max-width:680px; margin:0 auto 4.5rem; } .section-title { font-family:var(--ff-d); font-size:clamp(2rem,4vw,3.2rem); font-weight:600; letter-spacing:-.02em; color:var(--white); line-height:1.15; margin:.8rem 0 1rem; } .section-sub { color:var(--w55); font-size:.97rem; line-height:1.9; } /* ── NAV (new structure) ── */ .nav { transition:background .3s; } .nav--scrolled { background:rgba(4,17,28,0.97) !important; } .nav-inner { max-width:1280px; margin:0 auto; display:flex; flex-direction: column; align-items:center; padding:.9rem 5vw; gap:0.5rem; } .nav-inner__top { max-width:1280px; display: flex; margin:0 auto; align-items:center; padding:.9rem 5vw; gap:3rem; } @media(min-width: 1024px) { .nav-inner{ flex-direction: row; } } /* Logo — left-anchored, no flex-grow */ .nav-logo { display:flex; align-items:center; gap:.7rem; text-decoration:none; flex-shrink:0; } .nav-logo-img { height:34px; width:auto; object-fit:contain; /* No filter — show logo in its natural colours */ } .nav-logo-text { font-family:var(--ff-d); font-size:1.12rem; font-weight:600; color:var(--white); letter-spacing:-.01em; white-space:nowrap; } /* Nav links — centred, grows to fill available space */ .nav-links { list-style:none; display:flex; gap:2rem; align-items:center; flex:1; justify-content:center; } .nav-links a { color:var(--w55); font-size:.87rem; font-weight:500; transition:color .2s; } .nav-links a:hover { color:var(--white); } /* CTA buttons — right-anchored */ .nav-cta { display:flex; gap:.6rem; align-items:center; flex-shrink:0; } .nav-cta a {font-size: .8rem;} .nav-hamburger { display:none; background:none; border:none; cursor:pointer; padding:.3rem; } /* Footer logo — also no filter */ .footer-logo-img { height:30px; width:auto; object-fit:contain; /* No filter — show logo in its natural colours */ } @media(min-width:640px) { .nav-cta a {font-size: 1rem;} } @media(max-width:1024px) { .nav-links { display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; align-items:stretch; background:rgba(4,17,28,0.98); border-bottom:1px solid var(--border); padding:.5rem 0; flex:none; justify-content:flex-start; } .nav-links--open { display:flex; } .nav-links li a { display:block; padding:.85rem 5vw; font-size:.95rem; } .nav-hamburger { display:block; } /* .nav-cta .btn-ghost { display:none; } */ } /* ── HERO (new structure) ── */ .hero { min-height:100vh; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:9rem 5vw 6rem; text-align:center; background: radial-gradient(ellipse 900px 700px at 12% 40%, rgba(29,158,117,0.10) 0%, transparent 58%), radial-gradient(ellipse 600px 500px at 88% 62%, rgba(124,58,237,0.07) 0%, transparent 58%), var(--bg); overflow:hidden; } .hero-grid-overlay { position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(circle, rgba(93,202,165,0.12) 1px, transparent 1px); background-size:32px 32px; mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%); -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%); } .hero-content { position:relative; z-index:2; max-width:800px; margin:0 auto; } .hero-content .tag { margin-bottom:1.4rem; } .hero-headline { font-family:var(--ff-d); font-size:clamp(2.8rem,5.5vw,5rem); font-weight:600; line-height:1.06; letter-spacing:-.025em; color:var(--white); margin-bottom:1.4rem; } .hero-sub { font-size:clamp(.95rem,1.6vw,1.1rem); color:var(--w55); max-width:600px; margin:0 auto 2.5rem; line-height:1.8; } .hero-actions { display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center; margin-bottom:4rem; } .hero-image-wrap { max-width:900px; width:100%; margin:0 auto; border-radius:20px; overflow:hidden; border:1px solid rgba(29,158,117,0.25); box-shadow:0 0 80px rgba(29,158,117,0.14), 0 40px 120px rgba(0,0,0,0.5); } .hero-image-wrap img { width:100%; height:auto; max-height:500px; object-fit:cover; display:block; } .img-placeholder { background:linear-gradient(135deg, var(--navy) 0%, var(--bg2) 100%); } .img-placeholder--hero { height:460px; display:flex; align-items:center; justify-content:center; color:var(--w30); font-size:.82rem; } /* ── TRUST MARQUEE (new structure) ── */ .trust-bar { overflow:hidden; position:relative; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:rgba(7,25,40,0.6); backdrop-filter:blur(10px); padding:1.2rem 0; } .trust-bar::before, .trust-bar::after { content:''; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none; } .trust-bar::before { left:0; background:linear-gradient(90deg, rgba(4,17,28,1), transparent); } .trust-bar::after { right:0; background:linear-gradient(-90deg, rgba(4,17,28,1), transparent); } .marquee { overflow:hidden; } .marquee-track { display:flex; align-items:center; gap:3rem; animation:marqueeScroll 28s linear infinite; width:max-content; } @keyframes marqueeScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} } .marquee-stat { white-space:nowrap; font-size:.84rem; color:var(--w55); flex-shrink:0; } .marquee-stat strong { color:var(--teal-l); font-weight:600; } .marquee-sep { flex-shrink:0; opacity:.4; } /* ── CARE PLANS (new structure) ── */ .care-plans { background:radial-gradient(ellipse 700px 500px at 78% 50%, var(--teal-g) 0%, transparent 62%), var(--bg); } .care-plans-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:1.5rem; max-width:1100px; margin:0 auto; } .care-plan-card { padding:2rem; border-radius:16px; transition:all .3s; position:relative; } .care-plan-card:hover { border-color:rgba(29,158,117,0.25); transform:translateY(-3px); box-shadow:0 20px 60px rgba(0,0,0,0.25); } .care-plan-card--wide { grid-column:span 2; } .cp-icon { width:48px; height:48px; border-radius:12px; background:rgba(29,158,117,0.12); border:1px solid rgba(29,158,117,0.2); display:flex; align-items:center; justify-content:center; margin-bottom:1.2rem; } .cp-icon svg { stroke:var(--teal-l); } .care-plan-card h3 { font-family:var(--ff-d); font-size:1.25rem; font-weight:600; color:var(--white); margin-bottom:.6rem; } .care-plan-card p { font-size:.86rem; color:var(--w55); line-height:1.75; } .cp-split { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:center; } .cp-text h3 { font-family:var(--ff-d); font-size:1.5rem; font-weight:600; color:var(--white); margin-bottom:.7rem; } .cp-text p { font-size:.88rem; color:var(--w55); line-height:1.8; } .cp-image { border-radius:12px; overflow:hidden; border:1px solid var(--border); } .cp-image img { width:100%; height:200px; object-fit:cover; display:block; } @media(max-width:1024px) { .care-plans-grid { grid-template-columns:1fr; } .care-plan-card--wide { grid-column:span 1; } .cp-split { grid-template-columns:1fr; } } /* ── PLATFORM (new structure) ── */ .platform { background:var(--bg2); } .platform-inner { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; } .platform-text .tag { margin-bottom:1.2rem; } .platform-text .section-sub { max-width:480px; margin:0 0 2rem; } .platform-features { list-style:none; display:flex; flex-direction:column; gap:.9rem; } .platform-features li { display:flex; gap:.8rem; align-items:flex-start; font-size:.9rem; color:var(--w80); line-height:1.65; } .pf-icon { width:22px; height:22px; border-radius:50%; flex-shrink:0; margin-top:.12rem; background:rgba(29,158,117,0.14); border:1px solid rgba(29,158,117,0.35); display:flex; align-items:center; justify-content:center; } .pf-icon svg { stroke:var(--teal-l); } .platform-visual { position:relative; } .browser-frame { border-radius:16px; overflow:hidden; border:1px solid var(--border); box-shadow:0 0 100px rgba(29,158,117,0.12), 0 60px 120px rgba(0,0,0,0.5); } .browser-bar { background:rgba(7,25,40,0.95); padding:.7rem 1rem; display:flex; align-items:center; gap:.7rem; border-bottom:1px solid var(--border); } .browser-dot { width:10px; height:10px; border-radius:50%; display:inline-block; } .browser-dot:nth-child(1) { background:#ff5f57; } .browser-dot:nth-child(2) { background:#ffbd2e; } .browser-dot:nth-child(3) { background:#28ca41; } .browser-url { flex:1; background:rgba(255,255,255,0.06); border:1px solid var(--border); border-radius:6px; padding:.3rem .8rem; font-size:.75rem; color:var(--w30); } .browser-screenshot { width:100%; display:block; max-height:400px; object-fit:cover; } @media(max-width:1024px) { .platform-inner { grid-template-columns:1fr; gap:3rem; } } /* ── HOW IT WORKS (new structure) ── */ .how-it-works { background:radial-gradient(ellipse 800px 600px at 20% 60%, var(--purple-g) 0%, transparent 62%), var(--bg); } .hiw-steps { display:flex; align-items:flex-start; gap:1rem; max-width:1100px; margin:0 auto; } .hiw-step { flex:1; padding:2rem; border-radius:16px; text-align:center; transition:all .3s; } .hiw-step:hover { border-color:rgba(29,158,117,0.25); transform:translateY(-3px); } .hiw-number { font-family:var(--ff-d); font-size:2.5rem; font-weight:700; background:linear-gradient(135deg, var(--teal-l), #a78bfa); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:1rem; line-height:1; } .hiw-image { border-radius:10px; overflow:hidden; margin-bottom:1.4rem; border:1px solid var(--border); } .hiw-image img { width:100%; height:160px; object-fit:cover; display:block; } .hiw-step h3 { font-family:var(--ff-d); font-size:1.15rem; font-weight:600; color:var(--white); margin-bottom:.6rem; } .hiw-step p { font-size:.83rem; color:var(--w55); line-height:1.75; } .hiw-connector { flex-shrink:0; margin-top:5rem; opacity:.6; } @media(max-width:1024px) { .hiw-steps { flex-direction:column; } .hiw-connector { transform:rotate(90deg); margin:0 auto; } } /* ── TECHNOLOGY BENTO (new structure) ── */ .technology { background:var(--bg2); } .bento-grid { display:grid; grid-template-columns:repeat(3, 1fr); grid-template-rows:auto auto; gap:1.2rem; max-width:1100px; margin:0 auto; } .bento-card { padding:2rem; border-radius:16px; transition:all .3s; position:relative; overflow:hidden; } .bento-card::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 0% 0%, var(--teal-g), transparent 70%); opacity:0; transition:opacity .3s; } .bento-card:hover::before { opacity:1; } .bento-card:hover { border-color:rgba(29,158,117,0.2); transform:translateY(-2px); } .bento-card--tall { grid-row:span 2; } .bento-card--wide { grid-column:span 2; } .bento-icon { width:48px; height:48px; border-radius:12px; background:rgba(29,158,117,0.12); border:1px solid rgba(29,158,117,0.2); display:flex; align-items:center; justify-content:center; margin-bottom:1.2rem; } .bento-icon svg { stroke:var(--teal-l); } .bento-card h3 { font-family:var(--ff-d); font-size:1.15rem; font-weight:600; color:var(--white); margin-bottom:.5rem; position:relative; } .bento-card p { font-size:.84rem; color:var(--w55); line-height:1.7; position:relative; } .bento-image { margin-top:1.5rem; border-radius:10px; overflow:hidden; border:1px solid var(--border); } .bento-image img { width:100%; height:160px; object-fit:cover; display:block; } .bento-image--banner img { height:120px; } @media(max-width:1024px) { .bento-grid { grid-template-columns:repeat(2, 1fr); } .bento-card--tall { grid-row:span 1; } .bento-card--wide { grid-column:span 1; } } @media(max-width:640px) { .bento-grid { grid-template-columns:1fr; } } /* ── TEAM (new structure) ── */ .team { background:radial-gradient(ellipse 700px 500px at 60% 40%, rgba(124,58,237,0.08) 0%, transparent 62%), var(--bg2); } .team-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; max-width:1100px; margin:0 auto 3rem; } .team-card { border-radius:20px; overflow:hidden; transition:all .3s; } .team-card:hover { border-color:rgba(29,158,117,0.25); transform:translateY(-4px); box-shadow:0 30px 80px rgba(0,0,0,0.3); } .team-card--featured { border-color:rgba(29,158,117,0.2); } .team-photo-wrap { height:260px; position:relative; overflow:hidden; background:linear-gradient(135deg, var(--bg2), var(--navy)); } .team-photo { width:100%; height:100%; object-fit:cover; object-position:center top; } .team-avatar-fallback { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-family:var(--ff-d); font-size:2.2rem; font-weight:700; background:linear-gradient(135deg,rgba(29,158,117,0.25),rgba(124,58,237,0.25)); color:var(--teal-l); } .team-photo-wrap::after { content:''; position:absolute; bottom:0; left:0; right:0; height:80px; background:linear-gradient(transparent, rgba(4,17,28,0.88)); pointer-events:none; } .team-info { padding:1.6rem; } .team-info h3 { font-family:var(--ff-d); font-size:1.25rem; font-weight:700; color:var(--white); margin-bottom:.2rem; } .team-role { font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-l); margin-bottom:.9rem; } .team-bio { font-size:.83rem; color:var(--w55); line-height:1.75; margin-bottom:1.2rem; } .team-linkedin { display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:600; color:var(--w80); border:1px solid var(--border); border-radius:8px; padding:.45rem .9rem; transition:all .2s; background:var(--glass); } .team-linkedin:hover { border-color:rgba(29,158,117,0.4); color:var(--teal-l); } .team-banner { max-width:1100px; margin:0 auto; border-radius:20px; overflow:hidden; height:220px; position:relative; } .team-banner img { width:100%; height:100%; object-fit:cover; object-position:center 30%; } @media(max-width:1024px) { .team-grid { grid-template-columns:repeat(2, 1fr); } } @media(max-width:640px) { .team-grid { grid-template-columns:1fr; } } /* ── FORMS (new structure) ── */ .form-section { background:var(--bg); } .form-section--waitlist { background:radial-gradient(ellipse 900px 600px at 50% 50%, rgba(29,158,117,0.07) 0%, transparent 62%), var(--bg); } .form-section--contact { background:var(--bg2); } .form-wrap { padding:3rem; border-radius:24px; position:relative; overflow:hidden; box-shadow:0 40px 100px rgba(0,0,0,0.3); } .form-header { text-align:center; margin-bottom:2.5rem; } .form-header .tag { margin-bottom:1rem; } .tcp-form { display:flex; flex-direction:column; gap:0; } .form-row { display:flex; gap:1rem; } .form-row--2 > .form-group { flex:1; } .form-group { margin-bottom:1.1rem; } .form-group label { display:block; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--w55); margin-bottom:.4rem; } .req { color:var(--teal-l); } .form-group input, .form-group select, .form-group textarea { width:100%; background:rgba(255,255,255,0.05); border:1px solid var(--border); border-radius:9px; color:var(--white); font-family:var(--ff-b); font-size:.88rem; padding:.7rem 1rem; outline:none; transition:all .2s; } .form-group input::placeholder, .form-group textarea::placeholder { color:var(--w30); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:rgba(29,158,117,0.5); background:rgba(29,158,117,0.04); box-shadow:0 0 0 3px rgba(29,158,117,0.1); } .form-group select option { background:var(--navy); color:var(--white); } .form-group textarea { resize:vertical; min-height:100px; } .form-group--check { margin-top:.4rem; } .check-label { display:flex; align-items:flex-start; gap:.75rem; cursor:pointer; } .check-label input[type="checkbox"] { width:16px; height:16px; flex-shrink:0; margin-top:.15rem; accent-color:var(--teal); } .check-label span { font-size:.78rem; color:var(--w55); line-height:1.6; } .form-note { text-align:center; font-size:.78rem; color:var(--w30); margin-top:1rem; } .form-note a { color:var(--teal-l); text-decoration:underline; text-underline-offset:2px; } @media(max-width:640px) { .form-row--2 { flex-direction:column; } .form-wrap { padding:2rem 1.5rem; } } /* ── CTA BANNER (new structure) ── */ .cta-banner { position:relative; text-align:center; padding:8rem 5vw; overflow:hidden; background:linear-gradient(135deg, rgba(29,158,117,0.1) 0%, rgba(124,58,237,0.08) 100%), var(--bg2); border-top:1px solid var(--border); } .cta-banner::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 600px 400px at 50% 50%, rgba(29,158,117,0.14), transparent); pointer-events:none; } .cta-inner { position:relative; z-index:1; } .cta-inner .section-title { color:#fff; } .cta-inner .section-sub { max-width:520px; margin:0 auto 2.5rem; } .cta-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; } /* ── FOOTER (new structure) ── */ .footer { background:rgba(2,9,16,0.98); border-top:1px solid var(--border); padding:4.5rem 5vw 2rem; } .footer-top { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:3rem; max-width:1180px; margin:0 auto 3rem; } .footer-logo { display:flex; align-items:center; gap:.65rem; margin-bottom:1rem; } .footer-logo-img { height:30px; width:auto; object-fit:contain; } .footer-logo-text { font-family:var(--ff-d); font-size:1.1rem; font-weight:600; color:var(--white); } .footer-tagline { font-size:.84rem; color:var(--w55); line-height:1.75; margin-bottom:1.4rem; } .footer-socials { display:flex; gap:.5rem; } .social-link { width:34px; height:34px; border-radius:8px; border:1px solid var(--border); background:var(--glass); display:flex; align-items:center; justify-content:center; transition:all .2s; color:var(--w55); } .social-link:hover { background:rgba(29,158,117,0.15); border-color:rgba(29,158,117,0.35); color:var(--teal-l); } .social-link svg { width:14px; height:14px; } .footer-links-group h4 { font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-l); margin-bottom:1rem; } .footer-links-group ul { list-style:none; display:flex; flex-direction:column; gap:.55rem; } .footer-links-group a { font-size:.84rem; color:var(--w55); transition:color .2s; } .footer-links-group a:hover { color:var(--white); } .footer-bottom { border-top:1px solid var(--border); padding-top:1.5rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.8rem; max-width:1180px; margin:0 auto; font-size:.78rem; color:var(--w30); } .footer-disclaimer { font-size:.72rem; color:var(--w30); opacity:.7; max-width:480px; } @media(max-width:1024px) { .footer-top { grid-template-columns:1fr 1fr; gap:2rem; } } @media(max-width:640px) { .footer-top { grid-template-columns:1fr; } .footer-bottom { flex-direction:column; text-align:center; } } /* ── SCROLL FADE-IN ANIMATION ── */ .fade-up { opacity:0; transform:translateY(28px); transition:opacity .65s ease, transform .65s ease; } .fade-up.in-view { opacity:1; transform:translateY(0); }