:root { --ink:#eaf2ff; --muted:#9db0c8; --surface:#111c2d; --surface-2:#16253a; --line:rgba(170,210,245,.14); --cyan:#63e2ff; --blue:#4e8cff; }
html { font-size:16px; min-height:100%; scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#09111f; font-family:"Segoe UI",Arial,sans-serif; }
.site-nav { background:rgba(9,17,31,.88); border-bottom:1px solid var(--line); box-shadow:0 14px 40px rgba(0,0,0,.25); position:sticky; top:0; z-index:20; backdrop-filter:blur(18px); }
.brand-mark { display:inline-flex; padding:.45rem 0; } .brand-mark img { display:block; max-height:54px; max-width:min(520px,54vw); width:auto; }
.site-nav .nav-link { color:#c6d5e8; font-weight:600; margin-left:.75rem; } .site-nav .nav-link:hover { color:var(--cyan); }
.contact-link { border:1px solid rgba(99,226,255,.4); border-radius:999px; padding-inline:1rem!important; }
.hero-section { min-height:min(780px,calc(100vh - 66px)); position:relative; display:grid; align-items:end; overflow:hidden; color:#fff; background:#071525; }
.hero-media,.hero-overlay { position:absolute; inset:0; } .hero-media { background-image:url("/img/tipstore-hero.jpg"); background-position:center; background-repeat:no-repeat; background-size:cover; opacity:.78; }
.hero-overlay { background:radial-gradient(circle at 75% 25%,rgba(37,117,181,.18),transparent 35%),linear-gradient(90deg,rgba(5,13,24,.96),rgba(5,13,24,.55) 55%,rgba(5,13,24,.25)),linear-gradient(0deg,rgba(5,13,24,.98),transparent 65%); }
.hero-content { width:min(1120px,calc(100% - 40px)); margin:0 auto; position:relative; z-index:1; padding:clamp(5rem,12vh,8rem) 0; }
.eyebrow,.section-kicker { color:var(--cyan); font-size:.78rem; font-weight:800; letter-spacing:.16em; margin-bottom:1rem; text-transform:uppercase; }
.hero-content h1 { font-size:clamp(2.7rem,7vw,5.7rem); line-height:.98; max-width:850px; margin-bottom:1.5rem; letter-spacing:-.04em; } .hero-lead { color:rgba(255,255,255,.78); font-size:clamp(1.05rem,2vw,1.35rem); line-height:1.65; max-width:720px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem; } .btn { border-radius:999px; font-weight:700; padding:.8rem 1.35rem; } .btn-primary { background:linear-gradient(135deg,var(--cyan),var(--blue)); border:0; color:#06101e; } .btn-primary:hover { filter:brightness(1.12); color:#06101e; }
.intro-section,.services-section { width:min(1120px,calc(100% - 40px)); margin:0 auto; padding:clamp(4rem,8vw,6.5rem) 0; } .intro-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr); gap:clamp(2rem,5vw,4rem); align-items:start; }
h2 { color:var(--ink); font-size:clamp(2rem,4vw,3.2rem); line-height:1.08; letter-spacing:-.03em; margin-bottom:1.25rem; } p { color:var(--muted); line-height:1.75; }
.intro-points { display:grid; gap:.85rem; } .intro-points span { background:linear-gradient(120deg,var(--surface),rgba(22,37,58,.5)); border:1px solid var(--line); border-left:3px solid var(--cyan); border-radius:12px; color:#d9e7f6; font-weight:700; padding:1rem 1.15rem; }
.section-heading { max-width:760px; margin-bottom:2rem; } .services-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.service-card { background:linear-gradient(145deg,var(--surface),#0d1727); border:1px solid var(--line); border-radius:18px; min-height:260px; padding:1.5rem; transition:transform .2s ease,border-color .2s ease; } .service-card:hover { transform:translateY(-5px); border-color:rgba(99,226,255,.45); }
.service-number { color:var(--cyan); display:inline-block; font-weight:800; margin-bottom:1.6rem; } .service-card h3 { color:var(--ink); font-size:1.25rem; margin-bottom:.85rem; } .service-card p { margin-bottom:0; }
.contact-section { width:min(1120px,calc(100% - 40px)); display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.8fr); gap:2rem; margin:0 auto 4rem; padding:clamp(2rem,5vw,4rem); background:linear-gradient(135deg,#152942,#0e192a); border:1px solid var(--line); border-radius:24px; box-shadow:0 30px 80px rgba(0,0,0,.22); } .contact-section h2,.contact-section p,.contact-section strong,.contact-section span { color:inherit; }
.contact-card,.contact-form-shell { background:rgba(7,15,27,.48); border:1px solid var(--line); border-radius:18px; padding:1.5rem; } .contact-card { display:grid; gap:.45rem; align-self:start; } .contact-card a { color:#d9f7ff; } .contact-card a:hover { color:var(--cyan); }
.contact-form-shell { grid-column:1/-1; } .contact-form-shell h3 { color:#fff; font-size:1.7rem; margin-bottom:1.5rem; } .form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; } .form-field-wide { grid-column:1/-1; }
.contact-form label { display:block; color:#d8e5f4; font-weight:600; margin-bottom:.4rem; } .contact-form small { color:var(--muted); font-weight:400; } .contact-form input:not([type=checkbox]),.contact-form textarea { width:100%; background:#0b1525; border:1px solid #2b405c; border-radius:10px; color:#fff; padding:.85rem 1rem; } .contact-form input:focus,.contact-form textarea:focus { border-color:var(--cyan); outline:0; box-shadow:0 0 0 3px rgba(99,226,255,.15); }
.consent-check { display:flex!important; gap:.65rem; align-items:flex-start; margin:1.25rem 0 .45rem; font-size:.9rem; font-weight:400!important; color:var(--muted)!important; } .consent-check input { margin-top:.25rem; accent-color:var(--cyan); } .field-validation-error,.validation-summary-errors { color:#ffabb7; display:block; font-size:.88rem; margin-top:.3rem; } .alert { margin-bottom:1rem; border-radius:10px; }
.site-footer { background:#050b14; color:rgba(255,255,255,.6); padding:1.5rem 0; } .site-footer .container { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem; }
@media (max-width:900px) { .intro-grid,.contact-section { grid-template-columns:1fr; } .services-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) { .hero-section { min-height:680px; } .services-grid,.form-grid { grid-template-columns:1fr; } .form-field-wide { grid-column:auto; } .site-nav .nav-link { margin-left:0; } .brand-mark img { max-height:44px; max-width:230px; } .hero-actions .btn { width:100%; } }