:root { --ink:#eaf2ff; --muted:#9db0c8; --surface:#111c2d; --surface-2:#16253a; --line:rgba(170,210,245,.14); --cyan:#63e2ff; --blue:#4e8cff; }
*,*::before,*::after { box-sizing:border-box; }
html { font-size:16px; min-height:100%; scroll-behavior:smooth; overflow-x:hidden; }
body { margin:0; min-width:0; color:var(--ink); background:#09111f; font-family:"Segoe UI",Arial,sans-serif; overflow-x:hidden; }
img,svg { max-width:100%; }
.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); padding-block:.18rem; }
.brand-mark { display:inline-flex; align-items:center; padding:0; } .brand-mark img { display:block; height:auto; max-height:84px; max-width:min(520px,58vw); width:465px; }
.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:.08em; margin-bottom:1rem; text-transform:none; }
.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; }
.intro-ai-note { margin-top:.35rem; padding:1.15rem; background:linear-gradient(135deg,rgba(35,76,117,.58),rgba(17,31,51,.78)); border:1px solid rgba(99,226,255,.3); border-radius:14px; }
.intro-ai-note strong { display:block; color:var(--cyan); font-size:.9rem; letter-spacing:.04em; margin-bottom:.45rem; }
.intro-ai-note p { color:#c8d9e9; font-size:.9rem; line-height:1.58; margin:0; }
.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; }
.experience-section,.knowhow-section { width:min(1120px,calc(100% - 40px)); margin:0 auto; padding:clamp(3rem,7vw,5.5rem) 0; } .experience-section .section-heading,.knowhow-section .section-heading { max-width:760px; } .experience-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:auto; align-items:start; gap:1rem; } .project-card { position:relative; overflow:hidden; background:linear-gradient(145deg,#111f33,#0b1525); border:1px solid var(--line); border-radius:20px; padding:clamp(1.4rem,3vw,2rem); } .project-card::after { content:""; position:absolute; width:180px; height:180px; right:-70px; top:-80px; border-radius:50%; background:rgba(99,226,255,.09); filter:blur(2px); } .project-card-featured { background:linear-gradient(145deg,#142d49,#0c1728); border-color:rgba(99,226,255,.35); } .project-card-smart { grid-row:span 2; } .project-meta { display:flex; justify-content:space-between; gap:1rem; color:var(--cyan); font-size:.78rem; font-weight:700; letter-spacing:.04em; margin-bottom:2.5rem; text-transform:uppercase; } .project-card h3 { color:#fff; font-size:1.65rem; margin-bottom:.85rem; } .project-card p { margin-bottom:1.4rem; } .project-tags { display:flex; flex-wrap:wrap; gap:.5rem; } .project-tags span { border:1px solid rgba(99,226,255,.28); border-radius:999px; color:#bdefff; font-size:.78rem; padding:.38rem .65rem; } .project-chart { position:relative; z-index:1; margin-top:1.7rem; padding-top:1.2rem; border-top:1px solid var(--line); } .project-chart-heading { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.7rem; } .project-chart-heading span { color:var(--cyan); font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; } .project-chart-heading small { color:#9db0c8; font-size:.78rem; } .project-chart img { display:block; width:100%; height:auto; border-radius:12px; }
.knowhow-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; } .knowhow-card { background:linear-gradient(145deg,rgba(17,31,51,.92),rgba(10,20,34,.92)); border:1px solid var(--line); border-radius:18px; padding:1.5rem; transition:transform .2s ease,border-color .2s ease; } .knowhow-card:hover { transform:translateY(-4px); border-color:rgba(99,226,255,.38); } .knowhow-year { color:var(--cyan); font-size:.78rem; font-weight:800; letter-spacing:.05em; margin-bottom:1.5rem; text-transform:uppercase; } .knowhow-card h3 { color:#fff; font-size:1.25rem; margin-bottom:.75rem; } .knowhow-card p { font-size:.94rem; margin-bottom:1.2rem; } .knowhow-location { color:#91a9c1!important; font-size:.8rem; font-weight:700; }
 .project-card-smart { grid-column:1; grid-row:1 / span 2; } .project-card-smashzone { grid-column:2; grid-row:1; } .project-card-kalorias { grid-column:2; grid-row:2; }
.project-ai-callout { position:relative; z-index:1; margin-top:1.4rem; padding:1.15rem; background:rgba(6,16,30,.42); border:1px solid rgba(99,226,255,.22); border-radius:14px; }
.project-ai-callout .project-chart-heading { padding:0; border:0; margin-bottom:.55rem; }
.project-ai-callout p { font-size:.94rem; margin-bottom:1rem; }
.project-ai-list { display:grid; gap:.7rem; list-style:none; margin:0; padding:0; }
.project-ai-list li { display:grid; gap:.12rem; padding-left:1rem; border-left:2px solid var(--cyan); }
.project-ai-list strong { color:#eaf8ff; font-size:.92rem; }
.project-ai-list span { color:#9db0c8; font-size:.82rem; line-height:1.45; }
.project-feature-list { position:relative; z-index:1; display:grid; gap:.75rem; margin-top:1.35rem; }
.project-feature-list > div { padding:.8rem .9rem; background:rgba(6,16,30,.32); border:1px solid rgba(170,210,245,.1); border-radius:11px; }
.project-feature-list strong { display:block; color:#eaf8ff; font-size:.91rem; margin-bottom:.18rem; }
.project-feature-list span { display:block; color:#a9bbcf; font-size:.82rem; line-height:1.48; }
.project-closing { position:relative; z-index:1; margin:1.25rem 0 0!important; padding-top:1rem; border-top:1px solid var(--line); color:#d7e9f7!important; font-size:.92rem; }
.project-location { position:relative; z-index:1; display:block; margin-top:1.2rem; color:#91a9c1; font-size:.8rem; font-weight:700; }
.project-link { position:relative; z-index:1; display:inline-block; margin-top:.75rem; color:#bdefff; font-size:.88rem; font-weight:700; text-decoration:none; }
 .project-link:hover { color:var(--cyan); text-decoration:underline; }
 .smashzone-highlights { position:relative; z-index:1; display:grid; gap:.65rem; margin:1.3rem 0 1.15rem; }
 .smashzone-highlights > div { padding:.75rem .85rem; background:rgba(6,16,30,.32); border:1px solid rgba(170,210,245,.1); border-radius:11px; }
 .smashzone-highlights strong { display:block; color:#eaf8ff; font-size:.9rem; margin-bottom:.15rem; }
 .smashzone-highlights span { display:block; color:#a9bbcf; font-size:.82rem; line-height:1.45; }
 .smashzone-card { cursor:pointer; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
 .smashzone-card:hover,.smashzone-card:focus-visible { transform:translateY(-4px); border-color:rgba(99,226,255,.72); box-shadow:0 18px 45px rgba(0,0,0,.24); outline:none; }
 .smashzone-open { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:3.15rem; margin-top:1.35rem; padding:.85rem 1.05rem; background:linear-gradient(135deg,rgba(99,226,255,.2),rgba(78,140,255,.2)); border:1px solid rgba(99,226,255,.62); border-radius:12px; color:#eafaff; cursor:pointer; font:inherit; font-size:.98rem; font-weight:800; text-align:left; transition:background .2s ease,border-color .2s ease,transform .2s ease; }
 .smashzone-open span { color:var(--cyan); font-size:1.2rem; }
 .smashzone-open:hover,.smashzone-open:focus-visible { background:linear-gradient(135deg,rgba(99,226,255,.32),rgba(78,140,255,.32)); border-color:var(--cyan); transform:translateY(-1px); outline:none; }
 body.modal-open { overflow:hidden; }
 .smashzone-modal[hidden] { display:none; }
 .smashzone-modal { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:1rem; }
 .smashzone-modal-backdrop { position:absolute; inset:0; background:rgba(2,8,17,.78); backdrop-filter:blur(8px); }
 .smashzone-modal-panel { position:relative; z-index:1; width:min(900px,100%); max-height:min(88vh,850px); overflow:auto; padding:clamp(1.4rem,4vw,2.7rem); background:linear-gradient(145deg,#142d49,#0b1525); border:1px solid rgba(99,226,255,.35); border-radius:22px; box-shadow:0 30px 100px rgba(0,0,0,.5); }
 .smashzone-modal-close { position:absolute; top:1rem; right:1rem; width:2.3rem; height:2.3rem; border:1px solid rgba(170,210,245,.25); border-radius:50%; background:rgba(6,16,30,.6); color:#dff8ff; font-size:1.5rem; line-height:1; cursor:pointer; }
 .smashzone-modal-close:hover { border-color:var(--cyan); color:var(--cyan); }
 .smashzone-modal-panel h2 { max-width:720px; padding-right:2rem; }
 .smashzone-modal-intro { max-width:700px; font-size:1.05rem; }
 .smashzone-modal-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem; margin:1.8rem 0; }
 .smashzone-modal-grid section { padding:1rem; background:rgba(6,16,30,.35); border:1px solid rgba(170,210,245,.12); border-radius:14px; }
 .smashzone-modal-grid h3 { color:#fff; font-size:1rem; margin-bottom:.55rem; }
 .smashzone-modal-grid ul { margin:0; padding-left:1.05rem; }
 .smashzone-modal-grid li { color:#b9c9da; font-size:.86rem; line-height:1.5; margin:.28rem 0; }
 .smashzone-modal-footer { display:grid; gap:.25rem; margin:1.2rem 0 1.35rem; padding:1rem 1.1rem; border-left:3px solid var(--cyan); background:rgba(99,226,255,.08); }
 .smashzone-modal-footer strong { color:#eaf8ff; }
 .smashzone-modal-footer span { color:#a9bbcf; font-size:.9rem; }
.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; }
.navbar-toggler { display:inline-flex; align-items:center; justify-content:center; width:44px; height:42px; border:1px solid rgba(99,226,255,.42)!important; border-radius:10px; padding:.55rem; }
.menu-icon { display:grid; gap:4px; width:22px; }
.menu-icon span { display:block; height:2px; border-radius:999px; background:var(--cyan); }
@media (max-width:900px) { .intro-grid,.contact-section { grid-template-columns:1fr; } .services-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .experience-grid,.knowhow-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
 @media (max-width:640px) { .hero-section { min-height:720px; } .hero-media { background-size:cover; background-position:center top; opacity:.62; } .hero-content { width:min(calc(100% - 32px),560px); padding:4.25rem 0 4.5rem; } .hero-content h1 { font-size:clamp(2.45rem,12vw,4rem); line-height:1.02; overflow-wrap:anywhere; } .hero-lead { font-size:1rem; line-height:1.55; } .services-grid,.form-grid,.knowhow-grid,.smashzone-modal-grid { grid-template-columns:minmax(0,1fr); } .experience-grid { display:flex; flex-direction:column; gap:1rem; } .form-field-wide { grid-column:auto; } .site-nav { padding-block:.12rem; } .site-nav .container { padding-inline:1rem; } .site-nav .nav-link { margin-left:0; padding-block:.7rem; } .brand-mark { flex-shrink:0; min-width:0; padding:0; } .brand-mark img { display:block; max-height:52px; max-width:none; width:min(250px,62vw); height:auto; } .navbar-toggler { flex:0 0 44px; } .hero-actions { gap:.7rem; } .hero-actions .btn { width:100%; } .intro-section,.services-section,.experience-section,.knowhow-section { width:min(calc(100% - 32px),560px); } .contact-section { width:calc(100% - 32px); padding:1.35rem; border-radius:18px; } .project-meta { margin-bottom:2rem; flex-direction:column; gap:.35rem; } .project-card { min-width:0; width:100%; flex:0 0 auto; grid-column:auto!important; grid-row:auto!important; } .project-card h3 { font-size:1.45rem; } .project-chart-heading { align-items:flex-start; flex-direction:column; gap:.3rem; } .project-ai-callout,.project-feature-list { padding:1rem; } .smashzone-modal { padding:.6rem; } .smashzone-modal-panel { max-height:94vh; border-radius:16px; } }