html { background: #f0f9ff; }
 @view-transition { navigation: auto; }
 :root {
 /* ===== LocalPoint — Home Page Palette ===== */
 --primary-blue: #004e92;
 --primary-teal: #00a0a0;
 --accent-green: #8cc63f;
 --light-teal: #4dd0e1;
 --gradient-main: linear-gradient(135deg, #004e92 0%, #00a0a0 50%, #8cc63f 100%);
 --shadow: 0 10px 40px rgba(0,78,146,0.15), inset 0 1px 0 rgba(255,255,255,0.5);
 --shadow-hover: 0 20px 60px rgba(0,78,146,0.3), inset 0 1px 0 rgba(255,255,255,0.8);

 --bg: #f0f9ff;
 --surface: #ffffff;
 --text-main:#2d3748;
 --text-mut: #4a5568;
 --border: #cce7f5;

 /* Aliases used through the file */
 --navy: var(--primary-blue);
 --navy-dark: #003870;
 --teal: var(--primary-teal);
 --teal-dark: #007a7a;
 --teal-light: #e0f7f7;
 --green: var(--accent-green);
 --green-dark: #6ea32e;
 --accent: var(--primary-blue);
 --accent-light:#e8f4ff;

 --r-xl:20px;
 --r-lg:12px;
 --nav-h:70px;
 }
 *, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
 html { scroll-behavior: smooth; }
 body { font-family:'Outfit',sans-serif; background:var(--bg); color:var(--text-main); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
 button { border:none; background:none; font-family:inherit; cursor:pointer; }

 /* ========================= NAV ========================= */
 .ts-nav {
 position: fixed; top:0; left:0; right:0; z-index:200; height:var(--nav-h);
 display:flex; align-items:center; justify-content:space-between; padding:0 2.5rem;
 background:linear-gradient(135deg, rgba(0,78,146,0.97) 0%, rgba(0,160,160,0.95) 60%, rgba(140,198,63,0.9) 100%);
 backdrop-filter:blur(18px) saturate(180%);
 border-bottom:2px solid rgba(255,255,255,0.15);
 box-shadow:0 4px 30px rgba(0,78,146,0.3);
 }
 .ts-nav .logo img { height:38px; background:#fff; border-radius:10px; padding:4px 8px; }
 .nav-back { display:flex; align-items:center; gap:0.5rem; font-size:0.9rem; font-weight:700; color:rgba(255,255,255,0.9); transition:color 0.25s; text-decoration:none; }
 .nav-back:hover { color:#fff; text-shadow:0 0 10px rgba(255,255,255,0.6); }
 .nav-contact { font-size:0.85rem; font-weight:700; color:rgba(255,255,255,0.9); display:flex; align-items:center; gap:0.4rem; text-decoration:none; }
 .nav-contact:hover { color:#fff; }

 /* REFERRAL BANNER */
 .ref-banner { display:none; background:linear-gradient(90deg,var(--navy),var(--teal)); color:#fff; text-align:center; padding:0.7rem; font-size:0.85rem; font-weight:700; }
 .ref-banner.active { display:block; }

 /* ========================= HERO ========================= */
 .hero-wrap { position:relative; height:calc(100svh - 82px); min-height:500px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
 
 .hero-bg { position:absolute; inset:0; }
 .hero-bg img { width:100%; height:100%; object-fit:cover; }
 .hero-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(170deg, rgba(0,78,146,0.6) 0%, rgba(0,160,160,0.2) 50%, rgba(0,78,146,0.65) 100%); }

 .hero-content { position:relative; z-index:5; text-align:center; max-width:800px; padding:0 2rem; }
 
 .hero-eyebrow { display:inline-flex; align-items:center; gap:0.5rem; background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.25); backdrop-filter:blur(12px); color:#fff; padding:0.5rem 1.2rem; border-radius:50px; font-size:0.75rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:1.8rem; animation:fadeDown 0.8s ease both; }
 
 .hero-content h1 { font-size:clamp(3rem,6vw,5.5rem); font-weight:900; color:#fff; line-height:1.05; letter-spacing:-0.03em; margin-bottom:1.5rem; text-shadow:0 4px 30px rgba(0,0,0,0.4); animation:fadeUp 0.8s 0.15s ease both; }
 .hero-content h1 em { font-style:normal; color:var(--teal); }
 
 .hero-content p { font-size:1.15rem; font-weight:300; color:rgba(255,255,255,0.85); line-height:1.6; max-width:550px; margin:0 auto 2.5rem; animation:fadeUp 0.8s 0.3s ease both; }
 
 .hero-scroll-btn { display:inline-flex; align-items:center; gap:0.6rem; background:#fff; color:var(--primary-blue); padding:0.9rem 2rem; font-size:1rem; font-weight:700; border-radius:50px; box-shadow:0 8px 24px rgba(0,78,146,0.35); transition:transform 0.3s,box-shadow 0.3s; cursor:pointer; animation:fadeUp 0.8s 0.45s ease both; border:none; font-family:inherit; }
 .hero-scroll-btn:hover { transform:translateY(-3px) scale(1.03); box-shadow:0 12px 32px rgba(0,78,146,0.5); }
 .hero-scroll-btn i { color:var(--primary-teal); }
 
 /* Hero stats strip */
 .hero-stats { position:absolute; bottom:0; left:0; right:0; z-index:5; background:rgba(0,30,70,0.55); backdrop-filter:blur(16px); border-top:1px solid rgba(0,160,160,0.3); display:flex; justify-content:center; gap:5rem; padding:1.5rem; }
 .hero-stat { text-align:center; color:#fff; }
 .hero-stat .val { font-size:1.6rem; font-weight:900; letter-spacing:-0.02em; color:var(--accent-green); display:block; }
 .hero-stat .lab { font-size:0.75rem; font-weight:500; opacity:0.7; text-transform:uppercase; letter-spacing:0.05em; }

 /* ========================= SECTION ========================= */
 .page-section { max-width:1280px; margin:0 auto; padding:5rem 2rem; }

 .section-header { text-align:center; margin-bottom:4rem; }
 .section-label { display:inline-block; background:rgba(0,78,146,0.1); color:var(--primary-blue); font-size:0.72rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; padding:0.5rem 1.2rem; border-radius:50px; margin-bottom:1.2rem; }
 .section-header h2 { font-size:clamp(2rem,4vw,3rem); font-weight:900; letter-spacing:-0.02em; color:var(--text-main); margin-bottom:0.8rem; }
 .section-header p { font-size:1.05rem; color:var(--text-mut); max-width:520px; margin:0 auto; line-height:1.6; }

 /* ========================= CATEGORY GRID ========================= */
 .cat-grid {
 display:grid;
 grid-template-columns:repeat(3,1fr);
 grid-template-rows:auto;
 gap:1.5rem;
 }

 .cat-card {
 position:relative; border-radius:var(--r-xl); overflow:hidden;
 cursor:pointer; box-shadow:0 4px 20px rgba(45,70,153,0.1);
 background:#d8dff5;
 opacity:0; transform:translateY(30px);
 animation:fadeReveal 0.6s ease forwards;
 }
 .cat-card:nth-child(1) { grid-column:span 2; height:360px; animation-delay:0.05s; }
 .cat-card:nth-child(2) { height:360px; animation-delay:0.1s; }
 .cat-card:nth-child(3) { height:280px; animation-delay:0.15s; }
 .cat-card:nth-child(4) { height:280px; animation-delay:0.2s; }
 .cat-card:nth-child(5) { height:280px; animation-delay:0.25s; }
 
 .cat-card:hover { transform:translateY(-6px) !important; box-shadow:0 20px 50px rgba(0,78,146,0.22); }
 .cat-card:hover .cat-img { transform:scale(1.07); }
 .cat-card:hover .cat-arrow { background:#fff; color:var(--primary-blue); transform:translate(3px,-3px) scale(1.15); }

 .cat-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 0.9s cubic-bezier(0.2,0.8,0.2,1); }
 .cat-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(8,12,20,0.9) 0%, rgba(8,12,20,0.3) 55%, transparent 100%); transition:opacity 0.3s; }
 
 .cat-content { position:absolute; inset:0; padding:1.8rem; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; }
 
 .cat-chip { display:inline-flex; align-items:center; gap:0.4rem; background:rgba(255,255,255,0.15); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.2); color:#fff; font-size:0.72rem; font-weight:700; letter-spacing:0.06em; padding:0.35rem 0.85rem; border-radius:50px; margin-bottom:auto; width:fit-content; }
 
 .cat-title { font-size:1.75rem; font-weight:900; letter-spacing:-0.02em; margin-bottom:0.3rem; text-shadow:0 2px 10px rgba(0,0,0,0.3); }
 .cat-desc { font-size:0.88rem; opacity:0.85; line-height:1.4; margin-bottom:1.2rem; }
 
 .cat-footer { display:flex; align-items:center; justify-content:space-between; }
 .cat-count { font-size:0.78rem; font-weight:700; color:#fff; background:rgba(0,160,160,0.55); backdrop-filter:blur(12px); border:1px solid rgba(0,210,210,0.45); padding:0.3rem 0.85rem; border-radius:50px; letter-spacing:0.03em; text-shadow:0 1px 4px rgba(0,0,0,0.3); }
 .cat-arrow { width:40px; height:40px; background:rgba(255,255,255,0.2); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.3); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all 0.35s cubic-bezier(0.2,0.8,0.2,1); }

 /* Small card adjustments */
 .cat-card:is(:nth-child(3),:nth-child(4),:nth-child(5)) .cat-title { font-size:1.4rem; }

 /* ========================= SERVICES VIEW ========================= */
 #view-services { display:none; }
 .srv-wrap { max-width:1280px; margin:0 auto; padding:7rem 2rem 6rem; min-height:100vh; }

 .srv-breadcrumb { display:flex; align-items:center; gap:0.7rem; margin-bottom:2.5rem; }
 .crumb-back { display:flex; align-items:center; gap:0.5rem; padding:0.7rem 1.3rem; background:var(--surface); border:2px solid var(--border); border-radius:50px; font-size:0.9rem; font-weight:700; color:var(--text-main); transition:all 0.25s; }
 .crumb-back:hover { border-color:var(--primary-blue); color:var(--primary-blue); }
 .crumb-sep { color:var(--text-mut); font-size:0.9rem; }
 .crumb-curr { font-size:0.9rem; font-weight:600; color:var(--text-mut); }

 .srv-page-title { margin-bottom:3rem; }
 .srv-page-title h2 { font-size:clamp(2rem,4vw,3rem); font-weight:900; letter-spacing:-0.02em; margin-bottom:0.4rem; }
 .srv-page-title p { color:var(--text-mut); font-size:1.05rem; }

 .items-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:1.8rem; }

 /* Item Card */
 .item-card {
 background:var(--surface); border-radius:var(--r-xl); overflow:hidden; display:flex; flex-direction:column;
 border:1px solid var(--border);
 box-shadow:0 2px 12px rgba(0,0,0,0.04);
 transition:transform 0.35s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.35s ease;
 opacity:0; transform:translateY(20px); animation:fadeReveal 0.5s ease forwards;
 }
 .item-card:hover { transform:translateY(-8px); box-shadow:0 20px 40px rgba(0,0,0,0.1); }
 
 .item-img-wrap { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#dde3ed; }
 .item-img { width:100%; height:100%; object-fit:cover; transition:transform 0.8s cubic-bezier(0.2,0.8,0.2,1); }
 .item-card:hover .item-img { transform:scale(1.06); }

 /* Image count pills */
 .img-dot-strip { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:flex; gap:4px; }
 .img-dot { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.5); }
 .img-dot.on { background:#fff; width:16px; border-radius:4px; }

 .item-body { padding:1.4rem 1.5rem 1.5rem; flex-grow:1; display:flex; flex-direction:column; gap:0.6rem; }
 
 .item-top { display:flex; justify-content:space-between; align-items:flex-start; gap:0.5rem; }
 .item-title { font-size:1.15rem; font-weight:800; line-height:1.25; color:var(--text-main); }
 .price-pill { background:var(--teal-light); color:var(--teal-dark); font-size:0.85rem; font-weight:900; padding:0.3rem 0.8rem; border-radius:8px; white-space:nowrap; flex-shrink:0; }
 
 .item-desc { font-size:0.9rem; color:var(--text-mut); line-height:1.55; flex-grow:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; line-clamp:3; overflow:hidden; }
 
 .item-meta { font-size:0.78rem; font-weight:600; color:var(--text-mut); background:#f5f7fb; padding:0.45rem 0.8rem; border-radius:8px; display:inline-block; }
 
 .item-cta { display:flex; width:100%; align-items:center; justify-content:center; gap:0.5rem; padding:0.95rem; background:var(--gradient-main); color:#fff; font-size:0.95rem; font-weight:800; border-radius:12px; margin-top:0.4rem; transition:all 0.3s; }
 .item-cta:hover { box-shadow:0 8px 22px rgba(0,78,146,0.35); filter:brightness(1.07); }
 .item-cta:active { transform:scale(0.98); }

 /* ========================= MODAL ========================= */
 .modal-wrap {
 position:fixed; inset:0; background:rgba(8,14,28,0.55); backdrop-filter:blur(8px); z-index:300;
 display:flex; align-items:center; justify-content:center; padding:1rem;
 opacity:0; pointer-events:none; transition:opacity 0.35s;
 }
 .modal-wrap.open { opacity:1; pointer-events:all; }
 
 .modal-comp {
 background:var(--surface); width:100%; max-width:540px; border-radius:var(--r-xl); overflow:hidden;
 box-shadow:0 40px 80px rgba(0,0,0,0.3);
 transform:translateY(30px) scale(0.97); transition:transform 0.45s cubic-bezier(0.2,0.8,0.2,1);
 display:flex; flex-direction:column; max-height:92vh;
 }
 .modal-wrap.open .modal-comp { transform:translateY(0) scale(1); }
 
 /* Modal image header */
 .modal-img-head { position:relative; width:100%; height:180px; overflow:hidden; background:#dde3ed; flex-shrink:0; }
 .modal-img-head img { width:100%; height:100%; object-fit:cover; }
 .modal-img-head-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.1)); }
 .modal-img-info { position:absolute; bottom:1.2rem; left:1.5rem; right:4rem; color:#fff; }
 .modal-img-cat { font-size:0.7rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; opacity:0.75; margin-bottom:0.3rem; }
 .modal-img-title { font-size:1.3rem; font-weight:900; line-height:1.1; }
 .modal-img-price { position:absolute; bottom:1.1rem; right:1.2rem; background:rgba(255,255,255,0.2); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.25); color:#fff; font-size:0.9rem; font-weight:800; padding:0.4rem 0.9rem; border-radius:50px; }
 .modal-close-btn { position:absolute; top:1rem; right:1rem; z-index:5; width:36px; height:36px; background:rgba(0,0,0,0.4); backdrop-filter:blur(8px); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1rem; transition:background 0.2s; }
 .modal-close-btn:hover { background:rgba(0,0,0,0.6); }
 
 .modal-body { padding:1.5rem 2rem 2rem; overflow-y:auto; }
 
 .ref-box { display:none; background:#ecfdf5; border:1.5px dashed #6ee7b7; padding:0.9rem 1.1rem; border-radius:12px; font-size:0.85rem; color:#065f46; font-weight:700; margin-bottom:1.5rem; }
 .ref-box.show { display:flex; align-items:center; gap:0.6rem; }

 .form-row { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-bottom:1.2rem; }
 .f-group { display:flex; flex-direction:column; }
 .f-group:not(:last-child):not(.f-group + .form-row) { margin-bottom:1.2rem; }
 label { font-size:0.72rem; font-weight:900; text-transform:uppercase; letter-spacing:0.07em; color:var(--text-mut); margin-bottom:0.5rem; display:block; }
 input, textarea { padding:0.9rem 1rem; border:2px solid var(--border); border-radius:12px; font-family:inherit; font-size:0.95rem; color:var(--text-main); outline:none; background:#f8fafd; transition:all 0.25s; width:100%; }
 input:focus, textarea:focus { border-color:var(--primary-blue); background:#fff; box-shadow:0 0 0 4px rgba(0,78,146,0.1); }
 
 .btn-submit { width:100%; padding:1.1rem; background:var(--gradient-main); color:#fff; border-radius:14px; font-size:1rem; font-weight:800; letter-spacing:0.02em; margin-top:0.8rem; transition:all 0.3s; display:flex; align-items:center; justify-content:center; gap:0.5rem; }
 .btn-submit:hover { filter:brightness(1.08); box-shadow:0 10px 24px rgba(0,78,146,0.4); }
 .btn-submit:disabled { opacity:0.6; cursor:wait; }

 /* FOOTER */
 .ts-footer { background:linear-gradient(135deg,#003870,#004e92); color:rgba(255,255,255,0.6); text-align:center; padding:2.5rem 1.5rem; font-size:0.85rem; margin-top:2rem; }
 .ts-footer a { color:var(--accent-green); text-decoration:none; }

 /* ========================= ANIMATIONS ========================= */
 @keyframes fadeUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
 @keyframes fadeDown { from { opacity:0; transform:translateY(-16px); } to { opacity:1; transform:translateY(0); } }
 @keyframes fadeReveal { to { opacity:1; transform:translateY(0); } }

 /* ========================= RESPONSIVE ========================= */
 @media(max-width:900px) {
 .cat-grid { grid-template-columns:1fr 1fr; }
 .cat-card:nth-child(1) { grid-column:span 2; height:300px; }
 .cat-card:nth-child(n) { height:240px; }
 .hero-stats { gap:2rem; }
 }
 @media(max-width:600px) {
 .cat-grid { grid-template-columns:1fr; }
 .cat-card:nth-child(1) { grid-column:span 1; height:260px; }
 .hero-stats { flex-wrap:wrap; gap:1.5rem; }
 .items-grid { grid-template-columns:1fr; }
 .form-row { grid-template-columns:1fr; }
 .ts-nav { padding:0 1.2rem; }
 }

 /* ── LANGUAGE SELECTOR ── */
 .lp-lang-sel { position:relative; }
 .lp-lang-toggle { display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.2);border:2px solid rgba(255,255,255,0.4);border-radius:10px;padding:8px 14px;cursor:pointer;color:#fff;transition:all 0.3s;backdrop-filter:blur(10px); }
 .lp-lang-toggle:hover { background:rgba(255,255,255,0.3);border-color:rgba(255,255,255,0.6); }
 .lp-lang-toggle img { width:24px;height:18px;object-fit:cover;border-radius:2px;display:block; }
 .lp-lang-toggle .lp-chev { font-size:0.7rem;transition:transform 0.3s; }
 .lp-lang-sel.open .lp-lang-toggle .lp-chev { transform:rotate(180deg); }
 .lp-lang-drop { position:absolute;top:calc(100% + 10px);right:0;background:#fff;border-radius:12px;box-shadow:0 8px 32px rgba(0,78,146,0.18);overflow:hidden;min-width:60px;z-index:9999;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity 0.3s,transform 0.3s,visibility 0.3s; }
 .lp-lang-sel.open .lp-lang-drop { opacity:1;visibility:visible;transform:translateY(0); }
 .lp-lang-opt { display:flex;align-items:center;justify-content:center;width:100%;padding:10px 14px;border:none;background:none;cursor:pointer;transition:background 0.15s; }
 .lp-lang-opt:hover { background:rgba(0,78,146,0.07); }
 .lp-lang-opt.lp-active { background:linear-gradient(135deg,#004e92,#00a0a0); }
 .lp-lang-opt img { width:28px;height:21px;object-fit:cover;border-radius:2px;display:block; }
 @media(max-width:768px) {
 .lp-lang-sel { position:absolute;right:62px;top:50%;transform:translateY(-50%); }
 .lp-lang-toggle { padding:6px 10px; }
 .lp-lang-toggle img { width:20px;height:15px; }
 .lp-lang-drop { right:auto;left:50%;transform:translateX(-50%) translateY(-10px); }
 .lp-lang-sel.open .lp-lang-drop { transform:translateX(-50%) translateY(0); }
 }
 /* ── HERO MOBILE FIX ── */
 @media(max-width:768px) {
 .hero-content { padding-bottom:80px; }
 .hero-content h1 { font-size:clamp(2.2rem,9vw,3.2rem) !important; margin-bottom:1rem; }
 .hero-content p { font-size:1rem; margin-bottom:1.8rem; }
 }