/* Theme Name: Rashid Web Developer Theme URI: https://rashidwebcoder.com Author: Rashid Author URI: mailto:rashidwebcoder@gmail.com Description: A premium, production-ready WordPress theme built for Rashid, a freelance WordPress Developer & Web Designer based in Dunyapur, Punjab, Pakistan. Includes full dark/light mode, custom Projects & Testimonials post types, custom Customizer options, a working contact form handler, and a complete set of business pages (Home, About, Services, Portfolio, Pricing, Testimonials, Blog, Contact, Privacy Policy, Terms). Version: 6.4.0 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: rashid Tags: portfolio, business, blog, e-commerce, custom-colors, custom-logo, custom-menu, featured-images, translation-ready, threaded-comments */ /* ========================================================= 1. DESIGN TOKENS / CSS VARIABLES ========================================================= */ :root{ --color-primary:#FFB000; --color-accent:#FFC533; --color-dark-bg:#0B0B0D; --color-dark-card:#141416; --color-dark-border:#242426; --color-light-bg:#F7F7F5; --color-light-card:#FFFFFF; --color-light-border:#E7E5E0; --text-dark:#111111; --text-light:#F5F5F5; --muted-dark:#9A9A9E; --muted-light:#5B5B5F; --radius-sm:8px; --radius-md:14px; --radius-lg:22px; --shadow-sm:0 2px 10px rgba(0,0,0,.12); --shadow-lg:0 18px 50px rgba(0,0,0,.25); --container-width:1240px; --font-heading:'Space Grotesk', sans-serif; --font-body:'Inter', sans-serif; /* default = dark theme */ --bg:var(--color-dark-bg); --surface:var(--color-dark-card); --border:var(--color-dark-border); --text:var(--text-light); --muted:var(--muted-dark); } [data-theme="light"]{ --bg:var(--color-light-bg); --surface:var(--color-light-card); --border:var(--color-light-border); --text:var(--text-dark); --muted:var(--muted-light); } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;overflow-x:hidden;} body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:16px; line-height:1.65; transition:background .35s ease,color .35s ease; overflow-x:hidden; } img{max-width:100%;display:block;height:auto;} svg{width:18px;height:18px;flex-shrink:0;} a{color:inherit;text-decoration:none;} ul{list-style:none;margin:0;padding:0;} button{font-family:inherit;cursor:pointer;} input,textarea,select{font-family:inherit;} @media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important;transition-duration:.001ms !important;} } h1,h2,h3,h4,h5{ font-family:var(--font-heading); line-height:1.15; letter-spacing:-0.02em; margin:0 0 .5em; font-weight:600; } h1{font-size:clamp(2.2rem,5vw,3.6rem);} h2{font-size:clamp(1.7rem,3.4vw,2.5rem);} h3{font-size:1.3rem;} p{margin:0 0 1em;color:var(--muted);} .accent{color:var(--color-primary);} .container{ width:100%; max-width:var(--container-width); margin:0 auto; padding:0 24px; } section{padding:96px 0;} @media (max-width:768px){ section{padding:64px 0;} } .section-label{ display:inline-block; font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--color-primary); margin-bottom:14px; } .section-head{max-width:680px;margin-bottom:52px;} .section-head.center{margin-left:auto;margin-right:auto;text-align:center;} /* ========================================================= 2. BUTTONS ========================================================= */ .btn{ display:inline-flex; align-items:center; gap:10px; padding:14px 26px; border-radius:var(--radius-sm); font-weight:600; font-size:.95rem; border:1px solid transparent; transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease; white-space:nowrap; } .btn svg{width:18px;height:18px;transition:transform .25s ease;} .btn:hover svg{transform:translateX(4px);} .btn-primary{background:var(--color-primary);color:#0B0B0D;} .btn-primary:hover{background:var(--color-accent);box-shadow:var(--shadow-sm);transform:translateY(-2px);} .btn-outline{background:transparent;color:var(--text);border-color:var(--border);} .btn-outline:hover{border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-2px);} .btn-whatsapp{background:#25D366;color:#fff;} .btn-whatsapp:hover{background:#1ebc59;transform:translateY(-2px);} .btn-block{width:100%;justify-content:center;} .btn-sm{padding:10px 18px;font-size:.85rem;} /* ========================================================= 3. HEADER ========================================================= */ .site-header{ position:sticky;top:0;z-index:999; padding:18px 0; background:color-mix(in srgb, var(--bg) 60%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); transition:background .3s ease, border-color .3s ease, padding .3s ease, box-shadow .3s ease; } /* Sit below the WordPress admin toolbar when logged in, instead of overlapping it */ body.admin-bar .site-header{top:32px;} @media screen and (max-width:782px){ body.admin-bar .site-header{top:46px;} } .site-header.is-scrolled{ background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(16px); box-shadow:0 8px 30px rgba(0,0,0,.18); padding:12px 0; } .header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;} .site-logo{display:flex;align-items:center;gap:11px;line-height:1.1;font-family:var(--font-heading);} .site-logo .mark{ width:38px;height:38px;flex-shrink:0;border-radius:10px; background:linear-gradient(145deg,var(--color-primary),var(--color-accent)); color:#0B0B0D;display:flex;align-items:center;justify-content:center; font-size:1.05rem;font-weight:700; } .site-logo .word{display:flex;flex-direction:column;} .site-logo .name{font-size:1.15rem;font-weight:700;letter-spacing:.04em;color:var(--text);} .site-logo .role{font-size:.65rem;font-weight:600;letter-spacing:.18em;color:var(--color-primary);} .site-logo img{max-height:44px;} .main-nav{display:flex;align-items:center;gap:8px;} .main-nav ul{display:flex;align-items:center;gap:4px;} .main-nav li{position:relative;} .main-nav a{ padding:10px 16px;border-radius:999px;font-size:.92rem;font-weight:500;color:var(--muted); transition:color .2s ease, background .2s ease;position:relative; } .main-nav a:hover,.main-nav .current-menu-item>a,.main-nav .current_page_item>a{color:var(--text);background:var(--surface);} /* Dropdown submenus (for menu items that have child pages) */ .main-nav li.menu-item-has-children>a{display:flex;align-items:center;gap:5px;} .main-nav li.menu-item-has-children>a::after{content:'';width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;opacity:.7;} .main-nav .sub-menu{ list-style:none;position:absolute;top:100%;left:0;min-width:200px; background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm); padding:8px;box-shadow:0 16px 30px rgba(0,0,0,.25); opacity:0;visibility:hidden;transform:translateY(8px); transition:opacity .2s ease, transform .2s ease, visibility .2s ease; z-index:100;flex-direction:column;gap:0; } .main-nav li.menu-item-has-children:hover>.sub-menu, .main-nav li.menu-item-has-children.sub-menu-open>.sub-menu{ opacity:1;visibility:visible;transform:translateY(0); } .main-nav .sub-menu a{display:block;border-radius:8px;padding:10px 14px;} .main-nav .sub-menu li{width:100%;} @media (max-width:900px){ .main-nav li.menu-item-has-children>a::after{margin-left:auto;} .main-nav .sub-menu{position:static;box-shadow:none;border:0;background:none;padding:0 0 0 14px;max-height:0;overflow:hidden;opacity:1;visibility:visible;transform:none;transition:max-height .25s ease;} .main-nav li.menu-item-has-children.sub-menu-open>.sub-menu{max-height:400px;} } .main-nav .nav-cta{margin-left:6px;box-shadow:0 6px 18px rgba(255,176,0,.18);} .main-nav .nav-cta:hover{box-shadow:0 8px 22px rgba(255,176,0,.3);} .header-actions{display:flex;align-items:center;gap:14px;padding-left:14px;border-left:1px solid var(--border);} .theme-toggle{ width:42px;height:42px;border-radius:50%;border:1px solid var(--border); background:var(--surface);display:flex;align-items:center;justify-content:center; color:var(--text);transition:border-color .2s ease; } .theme-toggle:hover{border-color:var(--color-primary);} .theme-toggle svg{width:19px;height:19px;} .theme-toggle .icon-moon{display:none;} [data-theme="light"] .theme-toggle .icon-sun{display:none;} [data-theme="light"] .theme-toggle .icon-moon{display:block;} .hamburger{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:var(--surface);align-items:center;justify-content:center;color:var(--text);} .hamburger svg{width:20px;height:20px;} @media (max-width:960px){ .main-nav{ position:fixed;inset:0 0 0 30%;background:var(--bg);border-left:1px solid var(--border); transform:translateX(100%);transition:transform .35s ease;padding:100px 32px 32px;flex-direction:column;align-items:flex-start; overflow-y:auto;z-index:950; } .main-nav.is-open{transform:translateX(0);} .main-nav ul{flex-direction:column;align-items:flex-start;width:100%;gap:2px;} .main-nav a{display:block;width:100%;padding:14px 16px;} .main-nav .nav-cta{margin-top:24px;width:100%;} .hamburger{display:flex;} body.menu-open{overflow:hidden;} .nav-backdrop{ position:fixed;inset:0;background:rgba(0,0,0,.5); opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;z-index:940; } .nav-backdrop.is-open{opacity:1;visibility:visible;} } @media (max-width:520px){ .main-nav{inset:0 0 0 12%;} } /* ========================================================= 4. HERO ========================================================= */ .hero{padding:90px 0 60px;} .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;} @media (max-width:960px){ .hero-grid{grid-template-columns:1fr;} } .badge{ display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px; border:1px solid var(--border);background:var(--surface);font-size:.75rem;font-weight:600; letter-spacing:.08em;text-transform:uppercase;margin-bottom:22px;color:var(--muted); } .badge .dot{width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 4px rgba(61,220,132,.18);} .hero h1{margin-bottom:20px;} .hero-lead{font-size:1.1rem;max-width:520px;} .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin:30px 0 34px;} .hero-contact-line{display:flex;flex-wrap:wrap;gap:22px;} .hero-contact-line a{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:500;color:var(--muted);} .hero-contact-line svg{width:16px;height:16px;color:var(--color-primary);} .hero-contact-line a:hover{color:var(--text);} .hero-visual{position:relative;} .hero-photo-frame{ position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border); background:var(--surface);box-shadow:var(--shadow-lg); } .hero-photo-frame img{width:100%;object-fit:cover;aspect-ratio:4/5;} .floating-card{ position:absolute;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md); padding:14px 18px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:12px; } .floating-card .num{font-family:var(--font-heading);font-size:1.4rem;font-weight:700;color:var(--color-primary);} .floating-card .label{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;} .fc-1{top:22px;left:-24px;} .fc-2{bottom:26px;right:-22px;} @media (max-width:640px){ .fc-1{left:8px;} .fc-2{right:8px;} } /* ========================================================= 5. CARDS / GRIDS ========================================================= */ .grid{display:grid;gap:26px;} .grid-2{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(3,1fr);} .grid-4{grid-template-columns:repeat(4,1fr);} @media (max-width:960px){ .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);} } @media (max-width:640px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;} } .card{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md); padding:32px 28px;transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--color-primary);} .card .icon-wrap{ width:52px;height:52px;border-radius:var(--radius-sm);background:rgba(255,176,0,.12); display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--color-primary); } .card .icon-wrap svg{width:26px;height:26px;} .card h3{margin-bottom:10px;} .card p{margin-bottom:0;} .card-link{display:inline-flex;align-items:center;gap:6px;margin-top:16px;color:var(--color-primary);font-weight:600;font-size:.9rem;} .card-link svg{width:15px;height:15px;transition:transform .2s ease;} .card:hover .card-link svg,.project-card:hover .card-link svg,.blog-card:hover .card-link svg{transform:translateX(4px);} .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease, transform .6s ease;} .reveal.in-view{opacity:1;transform:translateY(0);} /* ========================================================= 6. PORTFOLIO ========================================================= */ .filter-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px;} .filter-btn{ padding:10px 20px;border-radius:999px;border:1px solid var(--border);background:var(--surface); color:var(--muted);font-size:.85rem;font-weight:600;transition:all .2s ease; } .filter-btn.active,.filter-btn:hover{background:var(--color-primary);color:#0B0B0D;border-color:var(--color-primary);} .project-card{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);background:var(--surface);transition:transform .3s ease,box-shadow .3s ease;} .project-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);} .project-thumb{position:relative;overflow:hidden;aspect-ratio:16/11;} .project-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;} .project-card:hover .project-thumb img{transform:scale(1.06);} .project-cat{position:absolute;top:14px;left:14px;background:var(--color-primary);color:#0B0B0D;font-size:.7rem;font-weight:700;padding:5px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em;} .project-body{padding:22px 24px;} .project-tech{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 16px;} .project-tech span{font-size:.72rem;background:var(--bg);border:1px solid var(--border);padding:4px 10px;border-radius:999px;color:var(--muted);} /* ========================================================= 7. TESTIMONIALS ========================================================= */ .testimonial-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:32px;} .stars{display:flex;gap:4px;margin-bottom:16px;color:var(--color-primary);} .stars svg{width:16px;height:16px;} .testimonial-quote{font-size:1.02rem;color:var(--text);margin-bottom:20px;} .testimonial-person{display:flex;align-items:center;gap:12px;} .testimonial-avatar{width:44px;height:44px;border-radius:50%;background:var(--color-primary);color:#0B0B0D;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--font-heading);flex-shrink:0;} .testimonial-avatar svg{width:22px;height:22px;} .testimonial-person .who b{display:block;font-size:.92rem;} .testimonial-person .who span{font-size:.78rem;color:var(--muted);} .slider{position:relative;overflow:hidden;} .slider-track{display:flex;transition:transform .5s ease;} .slider-slide{min-width:100%;padding:4px;} .slider-dots{display:flex;justify-content:center;gap:8px;margin-top:24px;} .slider-dots button{width:9px;height:9px;border-radius:50%;background:var(--border);border:none;padding:0;} .slider-dots button.active{background:var(--color-primary);width:22px;border-radius:6px;} /* ========================================================= 8. PRICING ========================================================= */ .pricing-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:38px 32px;position:relative;display:flex;flex-direction:column;} .pricing-card.featured{border-color:var(--color-primary);box-shadow:var(--shadow-lg);} .pricing-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--color-primary);color:#0B0B0D;font-size:.72rem;font-weight:700;padding:6px 16px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em;} .price-amount{font-family:var(--font-heading);font-size:2.6rem;font-weight:700;margin:10px 0;} .price-amount span{font-size:1rem;color:var(--muted);font-weight:500;} .pricing-features{margin:24px 0;flex-grow:1;} .pricing-features li{display:flex;gap:10px;padding:9px 0;font-size:.92rem;border-bottom:1px dashed var(--border);} .pricing-features li svg{width:17px;height:17px;color:var(--color-primary);flex-shrink:0;margin-top:2px;} /* ========================================================= 9. PROCESS / TIMELINE ========================================================= */ .timeline{position:relative;padding-left:36px;border-left:2px solid var(--border);} .timeline-item{position:relative;padding-bottom:44px;} .timeline-item:last-child{padding-bottom:0;} .timeline-item::before{ content:attr(data-step);position:absolute;left:-49px;top:0;width:28px;height:28px;border-radius:50%; background:var(--color-primary);color:#0B0B0D;font-weight:700;font-size:.75rem;display:flex;align-items:center;justify-content:center; } .timeline-item h3{margin-bottom:6px;} /* ========================================================= 10. FORMS ========================================================= */ .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;} @media (max-width:640px){ .form-row{grid-template-columns:1fr;} } .field{margin-bottom:18px;} .field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:8px;} .field .req{color:var(--color-primary);} .field input,.field select,.field textarea{ width:100%;padding:13px 16px;border-radius:var(--radius-sm);border:1px solid var(--border); background:var(--bg);color:var(--text);font-size:.95rem;transition:border-color .2s ease; } .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--color-primary);} .form-msg{padding:14px 18px;border-radius:var(--radius-sm);margin-bottom:20px;font-size:.9rem;font-weight:500;} .form-msg.success{background:rgba(61,220,132,.12);color:#3ddc84;border:1px solid rgba(61,220,132,.3);} .form-msg.error{background:rgba(255,90,90,.12);color:#ff5a5a;border:1px solid rgba(255,90,90,.3);} /* ========================================================= 11. CTA BANNER ========================================================= */ .cta-banner{ background:linear-gradient(135deg, var(--color-primary), var(--color-accent)); border-radius:var(--radius-lg);padding:60px 48px;color:#0B0B0D; display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap; } .cta-banner h2{color:#0B0B0D;margin-bottom:8px;} .cta-banner p{color:rgba(11,11,13,.75);margin-bottom:0;} .cta-banner .btn-outline{border-color:rgba(11,11,13,.4);color:#0B0B0D;} .cta-banner .btn-outline:hover{background:#0B0B0D;color:var(--color-primary);border-color:#0B0B0D;} .cta-actions{display:flex;gap:14px;flex-wrap:wrap;} .cta-banner .btn-primary{background:#0B0B0D;color:var(--color-primary);} .cta-banner .btn-primary:hover{background:#1c1c1f;} /* ========================================================= 12. FOOTER ========================================================= */ .site-footer{background:var(--surface);position:relative;padding:80px 0 0;margin-top:60px;} .site-footer::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--color-primary),var(--color-accent),transparent);} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:56px;} @media (max-width:860px){ .footer-grid{grid-template-columns:1fr 1fr;row-gap:44px;} } @media (max-width:520px){ .footer-grid{grid-template-columns:1fr;text-align:center;row-gap:40px;} } .footer-brand .name{font-family:var(--font-heading);font-size:1.3rem;font-weight:700;} .footer-brand .role{color:var(--color-primary);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;} @media (max-width:520px){ .footer-brand p{margin-left:auto;margin-right:auto;} } .footer-col h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:18px;} .footer-col ul li{margin-bottom:10px;} .footer-col a{color:var(--muted);font-size:.92rem;transition:color .2s ease;} .footer-col a:hover{color:var(--color-primary);} .footer-contact li{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.9rem;margin-bottom:12px;} @media (max-width:520px){ .footer-contact li{justify-content:center;} } .footer-contact svg{width:16px;height:16px;color:var(--color-primary);flex-shrink:0;} .footer-social{display:flex;gap:10px;margin-top:18px;} @media (max-width:520px){ .footer-social{justify-content:center;} } .footer-social a{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;} .footer-social a:hover{background:var(--color-primary);border-color:var(--color-primary);color:#0B0B0D;} .footer-social svg{width:16px;height:16px;} .footer-bottom{border-top:1px solid var(--border);padding:22px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.82rem;color:var(--muted);} .footer-bottom a:hover{color:var(--color-primary);} @media (max-width:520px){ .footer-bottom{justify-content:center;text-align:center;} } .newsletter-form input{min-width:0;} /* ========================================================= 13. WHATSAPP FLOAT ========================================================= */ .whatsapp-float{ position:fixed;bottom:26px;right:26px;z-index:998;width:60px;height:60px;border-radius:50%; background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 26px rgba(37,211,102,.45); animation:pulse-wa 2.4s infinite; } .whatsapp-float svg{width:30px;height:30px;color:#fff;} @keyframes pulse-wa{ 0%{box-shadow:0 0 0 0 rgba(37,211,102,.55);} 70%{box-shadow:0 0 0 16px rgba(37,211,102,0);} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0);} } /* ========================================================= 14. PAGE HERO (interior pages) ========================================================= */ .page-hero{padding:64px 0 40px;border-bottom:1px solid var(--border);} .breadcrumbs{display:flex;gap:8px;align-items:center;font-size:.85rem;color:var(--muted);margin-bottom:14px;} .breadcrumbs a:hover{color:var(--color-primary);} .breadcrumbs svg{width:12px;height:12px;} /* ========================================================= 15. SKILLS ========================================================= */ .skill-item{margin-bottom:22px;} .skill-top{display:flex;justify-content:space-between;margin-bottom:8px;font-size:.9rem;font-weight:600;} .skill-bar{height:8px;background:var(--bg);border-radius:999px;overflow:hidden;border:1px solid var(--border);} .skill-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));border-radius:999px;transition:width 1.2s ease;} .tech-badges{display:flex;flex-wrap:wrap;gap:12px;} .tech-badge{display:flex;align-items:center;gap:10px;padding:12px 18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);font-weight:600;font-size:.9rem;} .tech-badge svg{width:20px;height:20px;color:var(--color-primary);} /* ========================================================= 16. BLOG ========================================================= */ .blog-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;transition:transform .3s ease;} .blog-card:hover{transform:translateY(-6px);} .blog-thumb{aspect-ratio:16/10;overflow:hidden;} .blog-thumb img{width:100%;height:100%;object-fit:cover;} .blog-meta{display:flex;gap:14px;font-size:.78rem;color:var(--muted);margin-bottom:10px;text-transform:uppercase;letter-spacing:.04em;} .blog-meta svg{width:14px;height:14px;} .inline-icon svg{width:16px;height:16px;color:var(--color-primary);vertical-align:-3px;margin-right:4px;} .form-msg svg{width:16px;height:16px;vertical-align:-3px;margin-right:4px;} .blog-body{padding:22px 24px;} .blog-cat{display:inline-block;font-size:.7rem;font-weight:700;color:var(--color-primary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;} article.single-post h1{margin-bottom:18px;} .post-content p{color:var(--text);} .post-content h2,.post-content h3{margin-top:1.4em;} .post-content ul,.post-content ol{color:var(--text);margin:0 0 1.2em 1.2em;} .post-content li{margin-bottom:8px;color:var(--text);} .post-nav{display:flex;justify-content:space-between;gap:20px;margin-top:50px;padding-top:30px;border-top:1px solid var(--border);} .post-nav a{max-width:45%;font-size:.9rem;color:var(--muted);} .post-nav a:hover{color:var(--color-primary);} /* ========================================================= 17. MISC / 404 / SEARCH ========================================================= */ .error-404{text-align:center;padding:120px 0;} .error-404 .code{font-family:var(--font-heading);font-size:7rem;font-weight:700;color:var(--color-primary);line-height:1;} .search-form-wrap{display:flex;gap:10px;max-width:520px;margin:0 auto 40px;} .search-form-wrap input{flex-grow:1;padding:14px 18px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text);} .map-embed{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);} .map-embed iframe{width:100%;height:340px;border:0;filter:grayscale(.15);} .widget{margin-bottom:36px;} .widget h3{font-size:1rem;margin-bottom:16px;} .tag-list{display:flex;flex-wrap:wrap;gap:8px;} .tag-list a{font-size:.78rem;padding:6px 14px;border:1px solid var(--border);border-radius:999px;color:var(--muted);} .tag-list a:hover{color:var(--color-primary);border-color:var(--color-primary);} .entry-content table{width:100%;border-collapse:collapse;} .entry-content table td, .entry-content table th{border:1px solid var(--border);padding:8px 12px;} /* ========================================================= 18. STATS BAR (homepage) ========================================================= */ .stats-bar{padding:34px 0;background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);} .stats-bar-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;} .stat-item{text-align:center;} .stat-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin-bottom:8px;color:var(--color-primary);} .stat-icon svg{width:22px;height:22px;} .stat-num{font-family:var(--font-heading);font-size:1.6rem;font-weight:700;line-height:1;} .stat-label{font-size:.78rem;color:var(--muted);margin-top:6px;} @media (max-width:900px){.stats-bar-grid{grid-template-columns:repeat(3,1fr);row-gap:26px;}} @media (max-width:480px){.stats-bar-grid{grid-template-columns:repeat(2,1fr);}} /* ========================================================= 19. PRELOADER ========================================================= */ #rashid-preloader{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity .4s ease, visibility .4s ease;} #rashid-preloader.loaded{opacity:0;visibility:hidden;} #rashid-preloader .loader-ring{width:44px;height:44px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--color-primary);animation:rashid-spin .8s linear infinite;} @keyframes rashid-spin{to{transform:rotate(360deg);}} /* ========================================================= 20. BACK TO TOP ========================================================= */ #back-to-top{position:fixed;right:24px;bottom:238px;width:44px;height:44px;border-radius:50%;background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s, transform .25s, visibility .25s;z-index:960;border:0;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.2);} #back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0);} #back-to-top svg{width:20px;height:20px;transform:rotate(-90deg);} /* ========================================================= 21. COOKIE CONSENT ========================================================= */ #cookie-consent{position:fixed;left:20px;right:20px;bottom:20px;max-width:520px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:18px 20px;box-shadow:0 12px 30px rgba(0,0,0,.25);z-index:80;display:flex;flex-wrap:wrap;align-items:center;gap:14px;transform:translateY(140%);transition:transform .4s ease;} #cookie-consent.visible{transform:translateY(0);} #cookie-consent p{margin:0;font-size:.85rem;color:var(--muted);flex:1 1 240px;} #cookie-consent .btn{padding:8px 16px;font-size:.82rem;} /* ========================================================= 22. NEWSLETTER BOX (footer) ========================================================= */ .newsletter-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:18px;margin-top:20px;} .newsletter-box h4{font-size:.95rem;margin-bottom:10px;} .newsletter-form{display:flex;gap:8px;} .newsletter-form input{flex:1;padding:10px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:.85rem;} .newsletter-form button{padding:10px 14px;border-radius:var(--radius-sm);background:var(--color-primary);color:#fff;border:0;font-size:.85rem;cursor:pointer;} .newsletter-msg{font-size:.78rem;color:var(--color-primary);} .newsletter-msg:empty{margin:0;display:none;} /* ========================================================= 23. FAQ ACCORDION ========================================================= */ /* ---------- FAQ — professional accordion styling (v4.1) ---------- */ .faq-list{max-width:800px;margin:0 auto;} .faq-item{ position:relative;border:1px solid var(--border);border-radius:var(--radius-md); margin-bottom:14px;overflow:hidden;background:var(--surface); transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease; } .faq-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--color-primary);opacity:0;transition:opacity .2s ease;} .faq-item:hover{border-color:rgba(255,176,0,.4);box-shadow:var(--shadow-md);} .faq-item.open{border-color:var(--color-primary);} .faq-item.open::before{opacity:1;} .faq-question{ width:100%;text-align:left;padding:20px 22px;background:none;border:0;cursor:pointer; display:flex;justify-content:space-between;align-items:center;gap:16px; font-weight:600;color:var(--text);font-size:1rem; } .faq-question::before{ content:'Q';flex-shrink:0;width:30px;height:30px;border-radius:50%; background:rgba(255,176,0,.12);color:var(--color-primary);font-weight:800;font-size:.85rem; display:flex;align-items:center;justify-content:center; } .faq-question span{flex:1;} .faq-question svg{width:18px;height:18px;flex-shrink:0;transition:transform .25s ease;color:var(--muted);} .faq-item.open .faq-question svg{transform:rotate(180deg);color:var(--color-primary);} .faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease;} .faq-answer p{padding:0 22px 20px 68px;color:var(--muted);margin:0;line-height:1.65;} /* ========================================================= 24. PRINT STYLES ========================================================= */ @media print{ .site-header,.whatsapp-float,#back-to-top,#cookie-consent,.mobile-menu,.footer-social,.cta-banner,#rashid-preloader,.reading-progress,.social-share,.post-lightbox-trigger-hint{display:none !important;} body{background:#fff;color:#000;} a{color:#000;text-decoration:underline;} } /* ========================================================= 25. READING PROGRESS BAR (blog posts) ========================================================= */ .reading-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:var(--color-primary);z-index:1001;transition:width .1s linear;} body.admin-bar .reading-progress{top:32px;} @media screen and (max-width:782px){body.admin-bar .reading-progress{top:46px;}} /* ========================================================= 26. SOCIAL SHARE BUTTONS (blog posts) ========================================================= */ .social-share{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:36px 0;padding-top:24px;border-top:1px solid var(--border);} .social-share span{font-size:.85rem;font-weight:600;color:var(--muted);margin-right:4px;} .social-share a,.social-share button{ width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;transition:border-color .2s ease, color .2s ease; } .social-share a:hover,.social-share button:hover{border-color:var(--color-primary);color:var(--color-primary);} .social-share svg{width:17px;height:17px;} .social-share .copy-feedback{font-size:.78rem;color:var(--color-primary);margin-left:2px;opacity:0;transition:opacity .2s ease;} .social-share .copy-feedback.visible{opacity:1;} /* ========================================================= 27. RELATED POSTS (blog posts) ========================================================= */ .related-posts{margin-top:50px;} .related-posts h3{margin-bottom:20px;font-size:1.2rem;} /* ========================================================= 28. PROJECT SCREENSHOT LIGHTBOX ========================================================= */ .hero-photo-frame.is-zoomable{cursor:zoom-in;position:relative;} .hero-photo-frame.is-zoomable::after{ content:'';position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%; background:rgba(0,0,0,.55);opacity:0;transition:opacity .2s ease; } .hero-photo-frame.is-zoomable:hover::after{opacity:1;} .rashid-lightbox{position:fixed;inset:0;z-index:2000;background:rgba(8,9,12,.92);display:flex;align-items:center;justify-content:center;padding:40px;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;} .rashid-lightbox.open{opacity:1;visibility:visible;} .rashid-lightbox img{max-width:100%;max-height:100%;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5);} .rashid-lightbox-close{position:absolute;top:24px;right:28px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;} .rashid-lightbox-close svg{width:20px;height:20px;} /* ========================================================= 29. COPY-TO-CLIPBOARD (contact links) ========================================================= */ .copyable{position:relative;} .copyable .copy-tip{ position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px); background:var(--text);color:var(--bg);font-size:.72rem;font-weight:600;padding:4px 9px;border-radius:6px; white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s ease, transform .18s ease; } .copyable .copy-tip.visible{opacity:1;transform:translateX(-50%) translateY(0);} /* ========================================================= 30. TABLE OF CONTENTS (long blog posts) ========================================================= */ .post-toc{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:18px 20px;margin-bottom:30px;} .post-toc h4{display:flex;align-items:center;gap:8px;font-size:.95rem;margin-bottom:12px;} .post-toc h4 svg{width:16px;height:16px;color:var(--color-primary);} .post-toc ol{margin:0;padding-left:20px;} .post-toc li{margin-bottom:6px;font-size:.88rem;} .post-toc a{color:var(--muted);} .post-toc a:hover{color:var(--color-primary);} /* ========================================================= 31. v3.0 NEW FEATURES — TOAST NOTIFICATIONS ========================================================= */ #rashid-toast-wrap{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:3000;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none;} .rashid-toast{ background:var(--surface);border:1px solid var(--border);color:var(--text); padding:12px 20px;border-radius:var(--radius-sm);box-shadow:var(--shadow-lg); font-size:.88rem;font-weight:600;opacity:0;transform:translateY(16px);transition:opacity .25s ease,transform .25s ease; max-width:88vw; } .rashid-toast.show{opacity:1;transform:translateY(0);} .rashid-toast.success{border-color:#10B981;} .rashid-toast.error{border-color:#EF4444;} /* ========================================================= 32. CONFETTI CANVAS ========================================================= */ .rashid-confetti-canvas{position:fixed;inset:0;z-index:3500;pointer-events:none;} /* ========================================================= 33. SEARCH OVERLAY + LIVE RESULTS ========================================================= */ .search-toggle{background:none;border:none;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;width:38px;height:38px;} #rashid-search-overlay{ position:fixed;inset:0;z-index:2500;background:rgba(8,9,12,.92); display:flex;align-items:flex-start;justify-content:center;padding:10vh 20px; opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease; } #rashid-search-overlay.open{opacity:1;visibility:visible;} .search-overlay-box{width:100%;max-width:640px;} .search-overlay-box input[type="search"]{ width:100%;padding:16px 20px;border-radius:var(--radius-md);border:1px solid var(--border); background:var(--surface);color:var(--text);font-size:1.1rem; } #search-overlay-close{position:absolute;top:24px;right:28px;background:none;border:none;color:#fff;cursor:pointer;width:40px;height:40px;} #search-live-results{margin-top:16px;background:var(--surface);border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);} .search-result-item{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid var(--border);color:var(--text);} .search-result-item:last-child{border-bottom:none;} .search-result-item:hover{background:rgba(255,176,0,.08);} .search-result-item small{color:var(--muted);text-transform:uppercase;font-size:.7rem;} #search-live-results .no-results{padding:14px 18px;color:var(--muted);margin:0;} body.search-open{overflow:hidden;} /* ========================================================= 34. STICKY MOBILE CTA BAR ========================================================= */ .mobile-cta-bar{ position:fixed;left:0;right:0;bottom:0;z-index:1500;display:none; grid-template-columns:1fr 1fr 1fr;background:var(--surface);border-top:1px solid var(--border); transform:translateY(100%);transition:transform .25s ease; } .mobile-cta-bar.visible{display:grid;transform:translateY(0);} .mobile-cta-bar.hide-on-scroll{transform:translateY(100%);} .mobile-cta-bar a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;font-size:.68rem;font-weight:600;color:var(--text);border-right:1px solid var(--border);} .mobile-cta-bar a:last-child{border-right:none;} .mobile-cta-bar svg{width:18px;height:18px;color:var(--color-primary);} @media (max-width:700px){ .mobile-cta-bar{display:grid;} /* Reserve space so the fixed bottom bar never sits on top of the footer text */ .site-footer{padding-bottom:64px;} .whatsapp-float{bottom:82px;right:20px;} #back-to-top{bottom:284px;right:16px;} } /* ========================================================= 34b. AI SITE ASSISTANT — premium floating widget ========================================================= */ #rashid-ai-chat{position:fixed!important;right:26px!important;bottom:102px!important;z-index:2147483000!important;display:block!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;font-family:Inter,system-ui,sans-serif} #rashid-ai-toggle{position:relative!important;width:58px;height:58px;padding:0;border:1px solid rgba(255,255,255,.16);border-radius:50%;cursor:pointer;background:linear-gradient(135deg,var(--color-primary),#e69500);color:#0b0b0d;display:flex!important;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(0,0,0,.24),0 0 0 6px rgba(255,176,0,.08);transition:transform .22s ease,box-shadow .22s ease} #rashid-ai-toggle:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 16px 36px rgba(0,0,0,.3),0 0 0 8px rgba(255,176,0,.11)} #rashid-ai-toggle .ai-toggle-dot{position:absolute;top:3px;right:3px;width:11px;height:11px;border-radius:50%;background:#2ecc71;border:2px solid var(--bg,#fff)} #rashid-ai-panel[hidden]{display:none!important} #rashid-ai-panel{position:absolute;right:0;bottom:72px;width:370px;max-width:calc(100vw - 28px);height:520px;max-height:72vh;background:var(--bg,#fff);border:1px solid var(--border);border-radius:22px;box-shadow:0 24px 70px rgba(0,0,0,.25);display:flex;flex-direction:column;overflow:hidden;animation:ai-panel-in .18s ease-out} @keyframes ai-panel-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}} .ai-chat-header{display:flex;align-items:center;justify-content:space-between;padding:15px 17px;background:linear-gradient(135deg,var(--color-primary),#e69500);color:#0b0b0d} .ai-chat-brand{display:flex;align-items:center;gap:10px}.ai-chat-brand>span:last-child{display:flex;flex-direction:column;line-height:1.1}.ai-chat-brand strong{font-size:.96rem}.ai-chat-brand small{font-size:.67rem;font-weight:600;opacity:.7;margin-top:3px} .ai-chat-avatar{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:rgba(11,11,13,.13);font-weight:800;font-size:.9rem} #rashid-ai-close{width:32px;height:32px;border:0;border-radius:9px;background:rgba(11,11,13,.1);color:#0b0b0d;cursor:pointer;display:grid;place-items:center;transition:background .15s ease,transform .15s ease}.ai-chat-header #rashid-ai-close svg{width:15px;height:15px}.ai-chat-header #rashid-ai-close:hover{background:rgba(11,11,13,.2);transform:rotate(4deg)} .ai-chat-welcome{display:flex;gap:11px;margin:13px 13px 0;padding:12px 13px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--text)}.ai-welcome-icon{width:30px;height:30px;flex:0 0 30px;border-radius:9px;display:grid;place-items:center;background:rgba(255,176,0,.14);color:var(--color-primary);font-weight:800}.ai-chat-welcome strong{font-size:.8rem}.ai-chat-welcome p{margin:3px 0 0;font-size:.7rem;line-height:1.45;color:var(--muted)} #rashid-ai-messages{flex:1;overflow-y:auto;padding:13px 14px;display:flex;flex-direction:column;gap:9px;min-height:120px;background:var(--bg,#fff)} .ai-msg{max-width:84%;padding:10px 13px;border-radius:14px;font-size:.78rem;line-height:1.5;word-wrap:break-word}.ai-msg-user{align-self:flex-end;background:var(--color-primary);color:#0b0b0d;border-bottom-right-radius:5px}.ai-msg-assistant{align-self:flex-start;background:var(--surface);border:1px solid var(--border);color:var(--text);border-bottom-left-radius:5px}.ai-msg a{color:inherit;text-decoration:underline;font-weight:650}.ai-msg-assistant a{color:var(--color-primary)} .ai-msg-typing{display:flex;align-items:center;gap:4px;padding:12px 14px}.ai-msg-typing span{width:6px;height:6px;border-radius:50%;background:var(--muted);opacity:.6;animation:ai-typing-bounce 1.1s infinite ease-in-out}.ai-msg-typing span:nth-child(2){animation-delay:.15s}.ai-msg-typing span:nth-child(3){animation-delay:.3s}@keyframes ai-typing-bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}} #rashid-ai-form{display:flex;align-items:center;gap:7px;border-top:1px solid var(--border);padding:10px;background:var(--bg,#fff)}#rashid-ai-input{flex:1;min-width:0;border:1px solid var(--border);border-radius:12px;padding:11px 12px;font-size:.78rem;background:var(--surface);color:var(--text);outline:0}#rashid-ai-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(255,176,0,.1)}#rashid-ai-form button{border:0;border-radius:11px;background:var(--color-primary);color:#0b0b0d;width:40px;height:40px;flex-shrink:0;cursor:pointer;display:grid;place-items:center;transition:transform .15s ease,opacity .15s ease}#rashid-ai-form button:hover{transform:translateX(2px);opacity:.9}#rashid-ai-form button svg{width:17px;height:17px}.ai-chat-footer{text-align:center;padding:6px 10px 9px;font-size:.58rem;color:var(--muted);background:var(--bg,#fff)} @media (max-width:700px){#rashid-ai-chat{right:18px!important;bottom:158px!important}#rashid-ai-panel{right:0;bottom:68px;width:calc(100vw - 36px);height:min(520px,70vh);border-radius:19px}} @media (max-width:360px){#rashid-ai-panel{width:calc(100vw - 24px)}} /* ========================================================= 35. PRICING PLAN TOGGLE (Monthly / Yearly) ========================================================= */ .plan-toggle-wrap{display:flex;align-items:center;justify-content:center;gap:12px;margin:20px 0 36px;} .plan-toggle-wrap span{font-size:.9rem;font-weight:600;color:var(--muted);} .plan-toggle-wrap span.active{color:var(--text);} .switch{position:relative;display:inline-block;width:50px;height:28px;} .switch input{opacity:0;width:0;height:0;} .switch .slider{position:absolute;cursor:pointer;inset:0;background:var(--border);border-radius:20px;transition:.2s;} .switch .slider::before{content:'';position:absolute;height:20px;width:20px;left:4px;bottom:4px;background:#fff;border-radius:50%;transition:.2s;} .switch input:checked + .slider{background:var(--color-primary);} .switch input:checked + .slider::before{transform:translateX(22px);} .plan-save-badge{background:rgba(16,185,129,.15);color:#10B981;font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:20px;margin-left:6px;} /* ========================================================= 36. INSTANT QUOTE ESTIMATOR ========================================================= */ .quote-estimator{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;} .quote-estimator .est-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);} .quote-estimator .est-row:last-of-type{border-bottom:none;} .quote-estimator label{font-size:.92rem;display:flex;align-items:center;gap:8px;} .quote-estimator select,.quote-estimator input[type="number"]{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:6px 10px;} .quote-estimate-box{text-align:center;margin-top:20px;padding-top:20px;border-top:2px dashed var(--border);} .quote-estimate-box span{display:block;font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;} #quote-estimate-output{font-family:var(--font-heading);font-size:2rem;font-weight:700;color:var(--color-primary);} /* ========================================================= 37. MULTI-STEP CONTACT WIZARD ========================================================= */ .wizard-progress{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:28px;} .wizard-dot{width:32px;height:32px;border-radius:50%;background:var(--bg);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:var(--muted);} .wizard-dot.active{border-color:var(--color-primary);color:var(--color-primary);} .wizard-dot.done{background:var(--color-primary);border-color:var(--color-primary);color:#111;} .wizard-step{display:none;} .wizard-step.active{display:block;animation:wizardIn .25s ease;} @keyframes wizardIn{from{opacity:0;transform:translateX(12px);}to{opacity:1;transform:translateX(0);}} .wizard-actions{display:flex;gap:12px;margin-top:18px;} .field-error{display:block;color:#EF4444;font-size:.78rem;margin-top:4px;min-height:1em;} input.invalid,textarea.invalid,select.invalid{border-color:#EF4444 !important;} .rashid-honeypot-field{position:absolute;left:-9999px;opacity:0;pointer-events:none;} /* ========================================================= 38. BOOKING / TESTIMONIAL SUBMISSION FORMS ========================================================= */ .rating-input{display:flex;gap:4px;margin-bottom:8px;} .rating-star{width:24px;height:24px;color:var(--border);cursor:pointer;transition:color .15s ease;} .rating-star.active{color:var(--color-primary);} /* ========================================================= 39. FAQ SEARCH BOX ========================================================= */ .faq-search-box{position:relative;max-width:440px;margin:0 auto 32px;} .faq-search-box input{width:100%;padding:12px 16px 12px 42px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface);color:var(--text);} .faq-search-box svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);} /* ========================================================= 40. SCROLLSPY ACTIVE TOC LINK ========================================================= */ .post-toc a.active{color:var(--color-primary);font-weight:700;} /* ========================================================= 41. CURSOR SPOTLIGHT GLOW ========================================================= */ .hero-spotlight{position:relative;overflow:hidden;} .hero-spotlight::before{ content:'';position:absolute;inset:0;pointer-events:none;z-index:0; background:radial-gradient(400px circle at var(--spot-x,50%) var(--spot-y,50%), rgba(255,176,0,.12), transparent 70%); transition:background .1s ease; } .hero-spotlight > *{position:relative;z-index:1;} /* ========================================================= 42. HOVER TILT ON CARDS ========================================================= */ .project-card,.pricing-card{transition:transform .15s ease;will-change:transform;} /* ========================================================= 43. BLUR-UP IMAGE REVEAL ========================================================= */ img.img-loading{filter:blur(8px);opacity:.5;} img.img-loaded{filter:blur(0);opacity:1;transition:filter .4s ease,opacity .4s ease;} /* ========================================================= 44. PAGE FADE TRANSITION ========================================================= */ body{opacity:0;} body.page-loaded{opacity:1;transition:opacity .25s ease;} body.page-leaving{opacity:0;transition:opacity .2s ease;} /* ========================================================= 45. DECORATIVE GRADIENT BLOBS ========================================================= */ .gradient-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.25;z-index:0;pointer-events:none;} .gradient-blob.blob-1{width:340px;height:340px;background:var(--color-primary);top:-100px;right:-80px;} .gradient-blob.blob-2{width:260px;height:260px;background:#2563EB;bottom:-80px;left:-60px;} /* ---------- Ambient background blobs — same effect as the hero, reused on every section ---------- */ .section-ambient{position:relative;overflow:hidden;} .section-ambient > .container, .section-ambient > .tech-marquee{position:relative;z-index:1;} .section-ambient .gradient-blob{opacity:.14;animation:blobDrift 14s ease-in-out infinite;} .gradient-blob.blob-a{width:300px;height:300px;background:var(--color-primary);top:-90px;right:-70px;} .gradient-blob.blob-b{width:240px;height:240px;background:#2563EB;bottom:-70px;left:-60px;animation-delay:2s;} @keyframes blobDrift{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-18px,14px) scale(1.08);}} @media (max-width:700px){.section-ambient .gradient-blob{opacity:.09;}} /* ========================================================= 46. v4.0 HOMEPAGE REBUILD — SLIDER, TIMELINE, MARQUEE, MISC ========================================================= */ /* ---------- Hero floating decorative icons ---------- */ .hero-float-icon{position:absolute;opacity:.12;pointer-events:none;z-index:0;width:48px;height:48px;color:var(--color-primary);} .hero-float-icon.fi-1{top:14%;left:6%;animation:floatY 6s ease-in-out infinite;} .hero-float-icon.fi-2{top:60%;left:3%;animation:floatY 7s ease-in-out infinite .5s;} .hero-float-icon.fi-3{top:20%;right:4%;animation:floatY 8s ease-in-out infinite 1s;} .hero-float-icon svg{width:100%;height:100%;} @keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-16px);}} @media (max-width:900px){.hero-float-icon{display:none;}} /* ---------- Availability badge (off state) ---------- */ .badge.badge-muted{opacity:.75;} .dot.dot-off{background:#9A9A9E;} /* ---------- Hero typed rotating text ---------- */ .hero-typed{font-size:1rem;font-weight:600;color:var(--muted);margin:-8px 0 20px;display:flex;gap:6px;} .hero-typed-word{color:var(--color-primary);border-right:2px solid var(--color-primary);padding-right:3px;} /* ---------- Project Slider ---------- */ .project-slider{position:relative;} .project-slider-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:8px;-ms-overflow-style:none;scrollbar-width:none;} .project-slider-track::-webkit-scrollbar{display:none;} .project-slide{flex:0 0 calc(33.333% - 16px);scroll-snap-align:start;min-width:280px;} @media (max-width:1000px){.project-slide{flex:0 0 calc(66% - 12px);}} @media (max-width:640px){.project-slide{flex:0 0 88%;}} .slider-arrow{position:absolute;top:40%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:var(--surface);border:1px solid var(--border);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;box-shadow:var(--shadow-md);} .slider-arrow svg{width:18px;height:18px;} .slider-prev{left:-10px;} .slider-next{right:-10px;} @media (max-width:700px){.slider-arrow{display:none;}} .slider-dots{display:flex;justify-content:center;gap:8px;margin-top:20px;} .slider-dots .dot-btn{width:8px;height:8px;border-radius:50%;background:var(--border);border:none;cursor:pointer;padding:0;} .slider-dots .dot-btn.active{background:var(--color-primary);width:22px;border-radius:5px;transition:width .2s ease;} /* ---------- How I Work timeline ---------- */ .timeline-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative;} @media (max-width:900px){.timeline-grid{grid-template-columns:1fr 1fr;}} @media (max-width:560px){.timeline-grid{grid-template-columns:1fr;}} .timeline-step{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 22px;text-align:center;position:relative;} .timeline-step .timeline-num{position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:28px;height:28px;border-radius:50%;background:var(--color-primary);color:#111;font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center;} .timeline-step .icon-wrap{margin:10px auto 14px;} .timeline-step h3{margin-bottom:8px;font-size:1.05rem;} .timeline-step p{font-size:.88rem;color:var(--muted);} /* ---------- Tech marquee ---------- */ .tech-marquee{overflow:hidden;position:relative;display:flex;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);} .tech-marquee-track{display:flex;flex:0 0 auto;gap:16px;padding:4px 8px;animation:marqueeScroll 32s linear infinite;} .tech-marquee:hover .tech-marquee-track{animation-play-state:paused;} .tech-marquee .tech-badge{flex:0 0 auto;white-space:nowrap;} @keyframes marqueeScroll{from{transform:translateX(0);}to{transform:translateX(-100%);}} @media (prefers-reduced-motion: reduce){.tech-marquee-track{animation:none;}.tech-marquee{overflow-x:auto;}} /* ---------- CTA activity line ---------- */ .cta-activity{margin-top:10px;font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:6px;opacity:.85;} .cta-activity svg{width:15px;height:15px;} /* ---------- Section nav dots (right edge, desktop only) ---------- */ #section-nav-dots{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:900;display:none;flex-direction:column;gap:10px;} #section-nav-dots a{width:9px;height:9px;border-radius:50%;background:var(--border);display:block;transition:background .2s ease,transform .2s ease;} #section-nav-dots a.active{background:var(--color-primary);transform:scale(1.3);} @media (min-width:1200px){#section-nav-dots{display:flex;}} /* ---------- Exit-intent lite popup ---------- */ #exit-intent-popup{position:fixed;inset:0;z-index:4000;background:rgba(8,9,12,.85);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;} #exit-intent-popup.open{opacity:1;visibility:visible;} .exit-popup-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:36px;max-width:420px;text-align:center;position:relative;} .exit-popup-box h3{margin-bottom:10px;} .exit-popup-box p{color:var(--muted);margin-bottom:20px;font-size:.92rem;} #exit-popup-close{position:absolute;top:14px;right:14px;background:none;border:none;color:var(--muted);cursor:pointer;width:32px;height:32px;} /* ========================================================================= * v5.0 — HOMEPAGE ADVANCED FEATURES (ADD-ON — nothing above this line changed) * ========================================================================= */ /* Scroll progress bar */ .scroll-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));z-index:9999;transition:width .1s ease-out;} /* Offer bar */ .offer-bar{background:linear-gradient(90deg,var(--color-primary),var(--color-accent));color:#111;font-size:.85rem;position:relative;z-index:100;} .offer-bar-inner{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;padding:10px 40px 10px 16px;position:relative;} .offer-bar-text{display:flex;align-items:center;gap:6px;font-weight:600;} .offer-bar-text svg{width:16px;height:16px;} .offer-countdown{font-variant-numeric:tabular-nums;background:rgba(0,0,0,.15);padding:2px 8px;border-radius:6px;} #offer-bar-close{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;font-size:1.3rem;line-height:1;cursor:pointer;color:#111;} .offer-bar.hidden{display:none;} /* Trust badges row */ .trust-badges-row{padding:40px 0;} .trust-badges-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;} .trust-badge-item{text-align:center;padding:22px 16px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);} .trust-badge-item h3{font-size:1rem;margin:10px 0 6px;} .trust-badge-item p{font-size:.82rem;color:var(--muted);margin:0;} @media (max-width:900px){.trust-badges-grid{grid-template-columns:repeat(2,1fr);}} /* Comparison table */ .compare-table{max-width:860px;margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.08);background:var(--bg);} .compare-row{display:grid;grid-template-columns:2fr 1fr 1fr;align-items:center;} .compare-row:not(:last-child){border-bottom:1px solid var(--border);} .compare-row:not(.compare-head):hover{background:rgba(255,176,0,.05);} .compare-cell{padding:16px 18px;font-size:.92rem;text-align:center;transition:background .2s ease;} .compare-cell.compare-label{text-align:left;color:var(--text);font-weight:500;} .compare-head{background:var(--surface);} .compare-head .compare-cell{padding:20px 18px;font-size:.95rem;font-weight:700;} .compare-highlight{background:linear-gradient(180deg,rgba(255,176,0,.09),rgba(255,176,0,.03));font-weight:600;} .compare-head .compare-highlight{background:var(--color-primary);color:#14140f;} .compare-crown{display:inline-flex;align-items:center;gap:6px;justify-content:center;} .compare-crown svg{width:15px;height:15px;} .compare-icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;} .compare-yes{background:rgba(34,197,94,.14);color:#22c55e;} .compare-yes svg{width:15px;height:15px;} .compare-no{background:var(--surface);color:var(--muted);font-size:1rem;line-height:1;} @media (max-width:640px){.compare-cell.compare-label{font-size:.8rem;}.compare-cell{padding:12px 8px;}.compare-table{max-width:100%;}.compare-head .compare-cell{font-size:.82rem;padding:14px 8px;}} /* Client logos marquee caption */ .logos-caption{text-align:center;color:var(--muted);font-size:.85rem;margin-bottom:16px;} .logo-badge{opacity:.7;filter:grayscale(1);transition:all .25s ease;} .logo-badge:hover{opacity:1;filter:grayscale(0);} /* Skill proficiency bars */ .skill-bars-wrap{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:18px;} .skill-bar-top{display:flex;justify-content:space-between;font-size:.88rem;margin-bottom:6px;} .skill-bar-pct{color:var(--color-primary);font-weight:700;} .skill-bar-track{height:10px;background:var(--bg);border:1px solid var(--border);border-radius:999px;overflow:hidden;} .skill-bar-fill{height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));border-radius:999px;transition:width 1.4s cubic-bezier(.22,1,.36,1);} /* Calculator */ .calculator-box{max-width:720px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;display:flex;flex-direction:column;gap:18px;} .calc-field{display:flex;flex-direction:column;gap:6px;} .calc-field label{font-size:.85rem;font-weight:600;color:var(--muted);} .calc-field select{padding:10px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:.9rem;} .calc-checks{gap:8px;} .calc-check{flex-direction:row !important;align-items:center;gap:8px !important;font-size:.85rem;font-weight:400 !important;color:var(--text) !important;} .calc-result{text-align:center;border-top:1px dashed var(--border);padding-top:18px;display:flex;flex-direction:column;align-items:center;gap:10px;} .calc-result>span{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;} .calc-price{font-family:var(--font-heading);font-size:2.4rem;font-weight:700;color:var(--color-primary);} .calc-note{font-size:.78rem;color:var(--muted);margin:0;} /* Case studies */ .case-study-num{font-family:var(--font-heading);font-size:2rem;font-weight:700;margin:8px 0;} /* Rating strip */ .trust-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:44px 40px;box-shadow:0 6px 24px rgba(0,0,0,.10);} .trust-top{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;} .trust-divider{height:1px;background:var(--border);margin:36px 0 30px;} .trust-subhead{text-align:center;font-size:1rem;font-weight:600;margin-bottom:24px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;} .pricing-combo-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:48px 40px;box-shadow:0 6px 24px rgba(0,0,0,.10);} [data-theme="light"] .trust-card,[data-theme="light"] .pricing-combo-card{box-shadow:0 4px 16px rgba(0,0,0,.06);} .pricing-combo-card .pricing-card{background:var(--bg);} @media (max-width:640px){.trust-card,.pricing-combo-card{padding:32px 22px;}} .avatar-stack{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;} .avatar-stack .avatar-circle{width:26px;height:26px;border-radius:50%;background:var(--color-primary);color:#14140f;display:flex;align-items:center;justify-content:center;border:2px solid var(--surface);margin-left:-10px;flex-shrink:0;} .avatar-stack .avatar-circle:first-child{margin-left:0;} .avatar-stack .avatar-circle svg{width:13px;height:13px;} .avatar-stack-label{font-size:.74rem;color:var(--muted);white-space:nowrap;} .rating-badge{text-align:center;} .rating-stars svg{width:18px;height:18px;fill:var(--color-primary);stroke:var(--color-primary);} .rating-score{font-family:var(--font-heading);font-size:1.6rem;font-weight:700;margin-top:6px;} .rating-score span{font-size:.75rem;color:var(--muted);font-family:var(--font-body);font-weight:400;margin-left:4px;} .rating-count{font-size:.78rem;color:var(--muted);} .guarantee-badges{display:flex;flex-wrap:wrap;gap:12px;} .guarantee-badge{display:flex;align-items:center;gap:6px;font-size:.8rem;background:var(--surface);border:1px solid var(--border);padding:8px 14px;border-radius:999px;} .guarantee-badge svg{width:15px;height:15px;color:var(--color-primary);} /* Activity ticker */ .activity-ticker{position:relative;height:24px;overflow:hidden;text-align:center;font-size:.82rem;color:var(--muted);margin-top:20px;} .activity-ticker-item{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease;} .activity-ticker-item svg{width:14px;height:14px;color:var(--color-primary);} .activity-ticker-item.active{opacity:1;transform:translateY(0);} /* Newsletter (homepage lead magnet — distinct from footer newsletter, which uses .newsletter-box) */ .newsletter-box-home{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:40px;text-align:center;max-width:640px;margin:0 auto;} .newsletter-box-home .newsletter-text p{color:var(--muted);margin-top:8px;} .newsletter-form-home{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;justify-content:center;} .newsletter-form-home input{flex:1;min-width:220px;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg);color:var(--text);} .newsletter-success{display:none;color:#22c55e;font-size:.85rem;margin-top:14px;align-items:center;justify-content:center;gap:6px;} .newsletter-success.visible{display:flex;} .newsletter-success svg{width:16px;height:16px;} /* QR section */ .qr-section-card{display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:flex-start;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 32px;} .qr-code-box{background:#fff;padding:10px;border-radius:var(--radius-md);flex-shrink:0;} .qr-text h3{margin-bottom:6px;} .qr-text p{color:var(--muted);font-size:.88rem;max-width:420px;} @media (max-width:600px){.qr-section-card{text-align:center;justify-content:center;padding:24px;}} /* Language toggle (floating) */ .lang-toggle{position:fixed;bottom:172px;right:24px;z-index:950;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:999px;padding:8px 14px;font-size:.78rem;font-weight:700;cursor:pointer;box-shadow:var(--shadow-sm);} .lang-toggle .lang-toggle-alt{color:var(--muted);} .lang-toggle.is-ur [data-lang-current]{color:var(--muted);} .lang-toggle.is-ur .lang-toggle-alt{color:var(--text);} @media (max-width:700px){.lang-toggle{bottom:228px;right:16px;}} /* Tilt-enabled cards (JS adds transform) */ .tilt-card{will-change:transform;transition:transform .15s ease;} @media (prefers-reduced-motion:reduce){.tilt-card,.skill-bar-fill,.counter{transition:none !important;}} /* Print: hide new interactive-only widgets */ @media print{.offer-bar,.scroll-progress,.lang-toggle,#newsletter-form-home,.calculator-box,.activity-ticker{display:none !important;}} /* ---------- Client Portal (v5.1) ---------- */ .plan-features{list-style:none;margin:18px 0 22px;padding:0;text-align:left;} .plan-features li{display:flex;align-items:center;gap:8px;font-size:.88rem;padding:6px 0;border-bottom:1px solid var(--border);} .plan-features li:last-child{border-bottom:none;} .plan-features li svg{width:15px;height:15px;color:var(--color-primary);flex-shrink:0;} .portal-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:24px;border-bottom:1px solid var(--border);margin-bottom:8px;} .portal-project-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 30px;margin-bottom:24px;} .portal-project-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px;} .portal-project-head h3{margin:0;} .portal-status-badge{font-size:.72rem;font-weight:700;padding:5px 14px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em;background:var(--bg);border:1px solid var(--border);white-space:nowrap;} .portal-status-badge.status-completed{background:rgba(34,197,94,.14);color:#22c55e;border-color:transparent;} .portal-status-badge.status-in-progress{background:rgba(255,176,0,.14);color:var(--color-primary);border-color:transparent;} .portal-status-badge.status-in-review{background:rgba(96,165,250,.14);color:#60a5fa;border-color:transparent;} .portal-status-badge.status-on-hold,.portal-status-badge.status-closed{background:var(--bg);color:var(--muted);} .portal-status-badge.status-open{background:rgba(255,176,0,.14);color:var(--color-primary);border-color:transparent;} .portal-status-badge.status-answered{background:rgba(34,197,94,.14);color:#22c55e;border-color:transparent;} .portal-progress-top{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted);margin-bottom:6px;} .portal-progress-track{height:8px;border-radius:999px;background:var(--bg);overflow:hidden;} .portal-progress-fill{height:100%;background:var(--color-primary);border-radius:999px;transition:width .6s ease;} .portal-milestones{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px;} .portal-milestones li{display:flex;align-items:center;gap:8px;font-size:.86rem;color:var(--muted);} .portal-milestones li svg{width:15px;height:15px;flex-shrink:0;color:var(--muted);} .portal-milestones li.done{color:var(--text);} .portal-milestones li.done svg{color:#22c55e;} .portal-project-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:22px;padding-top:22px;border-top:1px solid var(--border);} .portal-subhead{display:flex;align-items:center;gap:6px;font-size:.85rem;margin-bottom:10px;} .portal-subhead svg{width:15px;height:15px;color:var(--color-primary);} .portal-muted{font-size:.85rem;color:var(--muted);} .portal-file-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;} .portal-file-list a{display:flex;align-items:center;gap:6px;font-size:.85rem;} .portal-file-list a svg{width:14px;height:14px;} .portal-upload-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;} .portal-upload-form input[type=file]{font-size:.8rem;max-width:170px;} .portal-feedback-box{margin-top:22px;padding-top:22px;border-top:1px solid var(--border);} .portal-reply{margin-top:10px;font-size:.85rem;background:var(--bg);border-radius:var(--radius-sm);padding:10px 14px;} @media (max-width:640px){.portal-project-grid{grid-template-columns:1fr;}.portal-topbar{align-items:flex-start;}} /* ========================================================= SERVICES PAGE — premium layout (v5.15) ========================================================= */ .service-feature{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:80px;} .service-feature:last-child{margin-bottom:0;} .service-feature .sf-copy .icon-wrap{width:56px;height:56px;border-radius:14px;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin-bottom:22px;} .service-feature .sf-copy .icon-wrap svg{width:26px;height:26px;color:var(--color-primary);} .service-feature.is-reversed .sf-copy{order:2;} .service-feature .sf-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:34px;} .service-feature .sf-panel h3{font-size:1rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:18px;} @media (max-width:820px){ .service-feature{grid-template-columns:1fr;gap:28px;margin-bottom:56px;} .service-feature.is-reversed .sf-copy{order:0;} } .service-compact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} @media (max-width:960px){ .service-compact-grid{grid-template-columns:repeat(2,1fr);} } @media (max-width:640px){ .service-compact-grid{grid-template-columns:1fr;} } .service-compact-card{display:flex;flex-direction:column;height:100%;} .service-compact-card .icon-wrap{width:46px;height:46px;border-radius:12px;background:var(--bg);display:flex;align-items:center;justify-content:center;margin-bottom:18px;} .service-compact-card .icon-wrap svg{width:21px;height:21px;color:var(--color-primary);} .service-compact-card h3{font-size:1.08rem;margin-bottom:8px;} .service-compact-card p{font-size:.9rem;margin-bottom:16px;} .service-compact-card .sc-features{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:8px;flex-grow:1;} .service-compact-card .sc-features li{display:flex;gap:8px;font-size:.84rem;color:var(--muted);align-items:flex-start;} .service-compact-card .sc-features svg{width:14px;height:14px;color:var(--color-primary);flex-shrink:0;margin-top:3px;} .service-compact-card .btn{margin-top:auto;align-self:flex-start;} .features-highlight{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 32px;margin-bottom:32px;} @media (max-width:860px){ .features-highlight{grid-template-columns:repeat(2,1fr);} } @media (max-width:520px){ .features-highlight{grid-template-columns:1fr;} } .features-highlight-item{display:flex;align-items:center;gap:10px;} .features-highlight-item svg{flex-shrink:0;color:var(--color-primary);} .features-expand{margin-top:8px;} .features-expand summary{ list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px; padding:14px 22px;border:1px solid var(--border);border-radius:999px; font-weight:600;font-size:.9rem;color:var(--text);max-width:340px;margin:0 auto; transition:border-color .2s ease,color .2s ease; } .features-expand summary::-webkit-details-marker{display:none;} .features-expand summary:hover{border-color:var(--color-primary);color:var(--color-primary);} .features-expand summary::after{content:'\2193';transition:transform .2s ease;} .features-expand[open] summary::after{transform:rotate(180deg);} .features-expand-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 28px;margin-top:32px;} @media (max-width:860px){ .features-expand-list{grid-template-columns:repeat(2,1fr);} } @media (max-width:520px){ .features-expand-list{grid-template-columns:1fr;} } .features-expand-list li{display:flex;gap:8px;font-size:.85rem;color:var(--muted);align-items:flex-start;} .features-expand-list li svg{width:14px;height:14px;color:var(--muted);flex-shrink:0;margin-top:3px;} /* ========================================================= ABOUT PAGE — premium touches (v5.15) ========================================================= */ .about-status-badge{ position:absolute;bottom:18px;left:18px;right:18px; display:flex;align-items:center;gap:8px; background:color-mix(in srgb, var(--bg) 82%, transparent);backdrop-filter:blur(8px); border:1px solid var(--border);border-radius:999px;padding:10px 16px; font-size:.82rem;font-weight:600;color:var(--text); } .about-status-badge svg{width:15px;height:15px;color:var(--color-primary);flex-shrink:0;} /* ========================================================= v5.16 PRO VISUAL POLISH Premium cream light mode + stronger hierarchy, spacing, cards, forms, navigation, hero and responsive behavior. ========================================================= */ :root{ --color-primary:#D89400; --color-accent:#F2B632; --color-dark-bg:#090A0C; --color-dark-card:#111317; --color-dark-border:#24282E; --color-light-bg:#F4EBDD; --color-light-card:#FFFDF8; --color-light-border:#E4D7C4; --text-dark:#211E19; --text-light:#F7F5F0; --muted-dark:#A7A9AE; --muted-light:#6B6257; --radius-sm:10px; --radius-md:18px; --radius-lg:28px; --shadow-sm:0 8px 24px rgba(31,25,17,.08); --shadow-lg:0 24px 70px rgba(31,25,17,.14); } [data-theme="light"]{ --bg:#F4EBDD; --surface:#FFFDF8; --border:#E4D7C4; --text:#211E19; --muted:#6B6257; } [data-theme="dark"]{ --bg:#090A0C; --surface:#111317; --border:#24282E; --text:#F7F5F0; --muted:#A7A9AE; } body{ background: radial-gradient(circle at 8% 8%, rgba(216,148,0,.06), transparent 28rem), radial-gradient(circle at 92% 18%, rgba(216,148,0,.045), transparent 30rem), var(--bg); } [data-theme="light"] body{ background: radial-gradient(circle at 5% 0%, rgba(216,148,0,.10), transparent 26rem), radial-gradient(circle at 95% 12%, rgba(255,255,255,.75), transparent 30rem), var(--bg); } ::selection{background:var(--color-primary);color:#15120D;} :focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;} .site-header{ padding:16px 0; background:color-mix(in srgb,var(--bg) 78%,transparent); box-shadow:0 1px 0 color-mix(in srgb,var(--border) 70%,transparent); } .site-header.is-scrolled{ background:color-mix(in srgb,var(--bg) 94%,transparent); box-shadow:0 12px 40px rgba(0,0,0,.12); } .site-logo .mark{ border-radius:12px; box-shadow:0 8px 22px rgba(216,148,0,.20); } .main-nav a{font-size:.88rem;} .main-nav a:hover,.main-nav .current-menu-item>a,.main-nav .current_page_item>a{ background:color-mix(in srgb,var(--surface) 90%,var(--color-primary) 10%); } .hero{ padding:105px 0 78px; min-height:680px; display:flex; align-items:center; } .hero-grid{gap:76px;} .hero h1{ font-size:clamp(2.7rem,5.4vw,4.65rem); max-width:760px; letter-spacing:-.045em; } .hero-lead{font-size:1.08rem;line-height:1.8;max-width:610px;} .hero-actions{margin:34px 0 30px;} .hero-photo-frame{ border-radius:32px; border-color:color-mix(in srgb,var(--color-primary) 22%,var(--border)); box-shadow:0 30px 90px rgba(0,0,0,.18),0 0 0 8px color-mix(in srgb,var(--color-primary) 4%,transparent); } .hero-photo-frame img{aspect-ratio:4/5;} .floating-card{ border-radius:16px; padding:15px 19px; box-shadow:0 18px 50px rgba(0,0,0,.18); backdrop-filter:blur(12px); } section{position:relative;} .section-ambient{overflow:hidden;} .section-ambient > .container{position:relative;z-index:2;} .section-head{margin-bottom:48px;} .section-head h2{letter-spacing:-.035em;} .card,.testimonial-card,.trust-card,.compare-table,.qr-section-card{ border:1px solid var(--border); background:color-mix(in srgb,var(--surface) 94%,transparent); box-shadow:var(--shadow-sm); border-radius:var(--radius-md); } .card{ padding:30px; transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease; } .card:hover{ transform:translateY(-5px); box-shadow:0 18px 48px rgba(0,0,0,.12); border-color:color-mix(in srgb,var(--color-primary) 38%,var(--border)); } .icon-wrap{ width:50px;height:50px; border-radius:15px; display:flex;align-items:center;justify-content:center; background:color-mix(in srgb,var(--color-primary) 10%,var(--surface)); border:1px solid color-mix(in srgb,var(--color-primary) 18%,var(--border)); color:var(--color-primary); margin-bottom:20px; } .icon-wrap svg{width:22px;height:22px;} .btn{ min-height:48px; border-radius:12px; padding:13px 22px; box-shadow:none; } .btn-primary{ background:linear-gradient(135deg,var(--color-primary),var(--color-accent)); box-shadow:0 10px 26px rgba(216,148,0,.18); } .btn-primary:hover{ filter:saturate(1.05); box-shadow:0 14px 32px rgba(216,148,0,.26); } .btn-outline{background:transparent;} .stats-bar{ padding:22px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:color-mix(in srgb,var(--surface) 45%,transparent); } .stats-bar-grid{gap:0;} .stat-item{ padding:18px 22px; border-right:1px solid var(--border); } .stat-item:last-child{border-right:0;} .stat-num{font-size:1.9rem;} .stat-label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;} .trust-badge-item{ padding:26px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); } .project-card{ border-radius:22px; overflow:hidden; border:1px solid var(--border); background:var(--surface); transition:transform .28s ease,box-shadow .28s ease; } .project-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);} .project-thumb img,.project-thumb picture{width:100%;} .project-body{padding:24px 26px 28px;} .testimonial-card{padding:30px;} .trust-card{padding:36px;} .compare-table{overflow:hidden;} .compare-row{min-height:66px;} .compare-head{font-weight:700;} .field input,.field textarea,.field select{ width:100%; min-height:50px; border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:12px; padding:12px 14px; transition:border-color .2s,box-shadow .2s,background .2s; } .field textarea{min-height:140px;resize:vertical;} .field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--color-primary); box-shadow:0 0 0 4px rgba(216,148,0,.10); outline:0; } .page-hero{ padding:82px 0 56px; border-bottom:1px solid var(--border); background:linear-gradient(180deg,color-mix(in srgb,var(--color-primary) 5%,transparent),transparent); } .page-hero h1{font-size:clamp(2.4rem,5vw,4rem);} .breadcrumbs{font-size:.78rem;margin-bottom:22px;} .site-footer{ border-top:1px solid var(--border); background:color-mix(in srgb,var(--surface) 65%,var(--bg)); } .site-footer .card{box-shadow:none;} .offer-bar{ border-bottom:1px solid color-mix(in srgb,var(--color-primary) 24%,var(--border)); } @media (max-width:960px){ .hero{padding:76px 0 58px;min-height:0;} .hero-grid{gap:48px;} .stat-item{border-right:0;border-bottom:1px solid var(--border);} } @media (max-width:640px){ .container{padding:0 18px;} section{padding:72px 0;} .hero h1{font-size:clamp(2.35rem,12vw,3.3rem);} .hero-actions .btn{width:100%;justify-content:center;} .card{padding:24px;} .trust-card{padding:24px;} .page-hero{padding:62px 0 42px;} } /* ========================================================================== v5.17 ULTRA-PRO VISUAL ENGINE ========================================================================== */ :root{ --cream-bg:#f5efe3; --cream-surface:#fffaf0; --cream-border:#dfd3bf; --cream-text:#211f1a; } [data-theme="light"] body, body.light-theme{background:var(--cream-bg);} .hero-spotlight{isolation:isolate;overflow:hidden;background: radial-gradient(900px 500px at 78% 35%,color-mix(in srgb,var(--color-primary) 12%,transparent),transparent 65%), linear-gradient(135deg,color-mix(in srgb,var(--bg) 96%,var(--color-primary) 4%),var(--bg));} .hero-particle-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.9;} .hero-grid-lines{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.26;background-image: linear-gradient(color-mix(in srgb,var(--color-primary) 16%,transparent) 1px,transparent 1px), linear-gradient(90deg,color-mix(in srgb,var(--color-primary) 16%,transparent) 1px,transparent 1px); background-size:56px 56px; mask-image:linear-gradient(to bottom,transparent,black 15%,black 82%,transparent);} .hero-grid-lines:after{content:"";position:absolute;inset:-30%;background:linear-gradient(115deg,transparent 35%,color-mix(in srgb,var(--color-primary) 16%,transparent),transparent 52%);animation:hero-grid-sweep 9s linear infinite;} .hero-noise{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");} .hero-spotlight>.container{z-index:3;} .hero-spotlight .gradient-blob{filter:blur(2px);animation:hero-blob-float 10s ease-in-out infinite alternate;} .hero-spotlight .blob-2{animation-delay:-4s;} .hero-photo-frame{position:relative;transform-style:preserve-3d;} .hero-photo-frame:before{content:"";position:absolute;inset:-2px;border-radius:34px;padding:2px;background:linear-gradient(120deg,transparent 15%,var(--color-primary),transparent 45%,var(--color-accent),transparent 78%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:frame-orbit 7s linear infinite;opacity:.9;z-index:2;pointer-events:none;} .hero-photo-frame:after{content:"";position:absolute;inset:8%;border-radius:28px;background:radial-gradient(circle,color-mix(in srgb,var(--color-primary) 25%,transparent),transparent 62%);filter:blur(28px);z-index:-1;animation:photo-pulse 4s ease-in-out infinite;} .hero-content .badge{animation:badge-breathe 3s ease-in-out infinite;} .hero-actions .btn{position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease;} .hero-actions .btn:after{content:"";position:absolute;top:-80%;left:-30%;width:25%;height:260%;background:rgba(255,255,255,.28);transform:rotate(25deg) translateX(-180px);transition:transform .65s ease;pointer-events:none;} .hero-actions .btn:hover:after{transform:rotate(25deg) translateX(700px);} .stat-item{position:relative;overflow:hidden;} .stat-item:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));transition:transform .45s ease;} .stat-item:hover:after{transform:scaleX(1);} .card,.project-card,.testimonial-card,.trust-card{will-change:transform;} @keyframes hero-grid-sweep{0%{transform:translateX(-25%) translateY(-8%) rotate(0)}100%{transform:translateX(25%) translateY(8%) rotate(0)}} @keyframes hero-blob-float{0%{transform:translate3d(-10px,8px,0) scale(1)}100%{transform:translate3d(20px,-18px,0) scale(1.08)}} @keyframes frame-orbit{to{transform:rotate(360deg)}} @keyframes photo-pulse{0%,100%{opacity:.45;transform:scale(.96)}50%{opacity:.8;transform:scale(1.04)}} @keyframes badge-breathe{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--color-primary) 0%,transparent)}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--color-primary) 8%,transparent)}} @media (max-width:640px){ .hero-grid-lines{background-size:38px 38px;opacity:.16} .hero-particle-canvas{opacity:.65} } @media (prefers-reduced-motion:reduce){ .hero-grid-lines:after,.hero-spotlight .gradient-blob,.hero-photo-frame:before,.hero-photo-frame:after,.hero-content .badge{animation:none!important} } .card,.project-card,.trust-card,.testimonial-card{background-image:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--color-primary) 7%,transparent),transparent 58%);} @media (pointer:fine) and (prefers-reduced-motion:no-preference){ body:has(.hero-spotlight){cursor:default;} .hero-spotlight:before{content:"";position:absolute;z-index:1;pointer-events:none;inset:0;background:radial-gradient(220px circle at var(--cursor-x,50%) var(--cursor-y,50%),color-mix(in srgb,var(--color-primary) 7%,transparent),transparent 70%);} } /* ========================================================= v5.18 PRO HERO + HEADER EXPERIENCE ========================================================= */ .hero-spotlight{min-height:760px;display:flex;align-items:center;position:relative;background:var(--bg);} .hero-noise{display:none!important;} .hero-spotlight:after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(700px 500px at 12% 50%,color-mix(in srgb,var(--color-primary) 7%,transparent),transparent 70%),radial-gradient(600px 500px at 88% 20%,color-mix(in srgb,var(--color-accent) 8%,transparent),transparent 72%);} .hero-aurora{position:absolute;z-index:0;pointer-events:none;filter:blur(55px);border-radius:50%;mix-blend-mode:screen;opacity:.38;} [data-theme="light"] .hero-aurora{mix-blend-mode:multiply;opacity:.20;} .aurora-a{width:520px;height:230px;left:35%;top:6%;background:linear-gradient(90deg,transparent,var(--color-primary),transparent);transform:rotate(-18deg);animation:aurora-drift 11s ease-in-out infinite alternate;} .aurora-b{width:460px;height:210px;right:-8%;bottom:4%;background:linear-gradient(90deg,transparent,var(--color-accent),transparent);transform:rotate(28deg);animation:aurora-drift-b 14s ease-in-out infinite alternate;} .hero-orbit{position:absolute;border:1px solid color-mix(in srgb,var(--color-primary) 20%,transparent);border-radius:50%;z-index:0;pointer-events:none;transform:rotate(-18deg);} .orbit-a{width:620px;height:260px;right:-120px;top:25%;animation:orbit-spin 22s linear infinite;} .orbit-b{width:760px;height:330px;left:-260px;bottom:-80px;animation:orbit-spin-reverse 30s linear infinite;} .hero-orbit span{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 18px var(--color-primary);top:-4px;left:22%;} .hero-scanline{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent 0%,transparent 48%,color-mix(in srgb,var(--color-primary) 8%,transparent) 50%,transparent 52%,transparent 100%);background-size:100% 180px;animation:scanline 8s linear infinite;opacity:.28;} .hero-stars{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;background-image:radial-gradient(circle,color-mix(in srgb,var(--color-primary) 55%,transparent) 1px,transparent 1.5px),radial-gradient(circle,color-mix(in srgb,var(--color-accent) 35%,transparent) 1px,transparent 1.5px);background-size:97px 113px,151px 137px;background-position:20px 30px,70px 10px;animation:stars-drift 18s linear infinite;} .hero-content,.hero-visual{position:relative;z-index:4;} .hero-tech-stack{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:20px 0 13px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text);} .hero-tech-stack span{padding:7px 10px;border:1px solid var(--border);border-radius:999px;background:color-mix(in srgb,var(--surface) 72%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:.25s ease;} .hero-tech-stack span:hover{border-color:var(--color-primary);transform:translateY(-2px);box-shadow:0 8px 22px color-mix(in srgb,var(--color-primary) 12%,transparent);} .hero-tech-stack i{width:3px;height:3px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 8px var(--color-primary);} .hero-trust-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:10px;color:var(--muted);font-size:.78rem;} .hero-trust-row span{display:inline-flex;align-items:center;gap:6px;} .hero-trust-row svg{width:14px;height:14px;color:var(--color-primary);} .hero-photo-orbit{position:absolute;inset:-25px;border:1px solid color-mix(in srgb,var(--color-primary) 24%,transparent);border-radius:42px;transform:rotate(8deg);animation:photo-orbit 10s linear infinite;pointer-events:none;z-index:1;} .hero-photo-orbit span{position:absolute;right:12%;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--color-accent);box-shadow:0 0 20px 4px color-mix(in srgb,var(--color-accent) 45%,transparent);} .hero-scroll-cue{position:absolute;right:0;bottom:-56px;display:flex;align-items:center;gap:9px;font-size:.63rem;font-weight:700;letter-spacing:.18em;color:var(--muted);} .hero-scroll-cue span{width:22px;height:34px;border:1px solid var(--border);border-radius:14px;position:relative;} .hero-scroll-cue span:after{content:"";position:absolute;width:3px;height:7px;border-radius:3px;background:var(--color-primary);left:50%;top:7px;transform:translateX(-50%);animation:scroll-dot 1.8s ease-in-out infinite;} /* Premium theme switch */ .theme-toggle{width:auto!important;height:42px!important;min-width:104px!important;padding:4px 9px 4px 5px!important;border-radius:999px!important;border:1px solid var(--border)!important;background:color-mix(in srgb,var(--surface) 88%,transparent)!important;gap:7px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 5px 18px rgba(0,0,0,.08);} .theme-toggle:hover{border-color:var(--color-primary)!important;transform:translateY(-1px);} .theme-toggle-track{width:32px;height:32px;border-radius:50%;display:block;position:relative;background:color-mix(in srgb,var(--color-primary) 13%,var(--surface));} .theme-toggle-thumb{position:absolute;inset:2px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--color-primary);color:#17130a;box-shadow:0 2px 10px color-mix(in srgb,var(--color-primary) 28%,transparent);transition:transform .35s cubic-bezier(.2,.8,.2,1);} .theme-toggle svg{width:15px!important;height:15px!important;} .theme-toggle .icon-moon{display:none;} .theme-toggle-label{font-size:.62rem;font-weight:800;letter-spacing:.12em;color:var(--muted);min-width:48px;text-align:left;} .theme-light-label{display:none;} [data-theme="light"] .theme-toggle-thumb{transform:translateX(0);} [data-theme="light"] .theme-toggle .icon-sun{display:none;} [data-theme="light"] .theme-toggle .icon-moon{display:block;} [data-theme="light"] .theme-dark-label{display:none;} [data-theme="light"] .theme-light-label{display:inline;} @keyframes aurora-drift{from{transform:translate(-80px,30px) rotate(-18deg) scale(.9)}to{transform:translate(110px,-35px) rotate(-8deg) scale(1.15)}} @keyframes aurora-drift-b{from{transform:translate(60px,-20px) rotate(28deg) scale(.85)}to{transform:translate(-100px,35px) rotate(38deg) scale(1.12)}} @keyframes orbit-spin{to{transform:rotate(342deg)}} @keyframes orbit-spin-reverse{to{transform:rotate(-378deg)}} @keyframes scanline{from{background-position:0 -180px}to{background-position:0 900px}} @keyframes stars-drift{from{background-position:20px 30px,70px 10px}to{background-position:120px 150px,-40px 110px}} @keyframes photo-orbit{to{transform:rotate(368deg)}} @keyframes scroll-dot{0%,100%{transform:translate(-50%,0);opacity:.45}50%{transform:translate(-50%,10px);opacity:1}} @media (max-width:900px){.hero-spotlight{min-height:auto}.orbit-a{right:-360px}.orbit-b{left:-430px}.hero-scroll-cue{display:none}.hero-tech-stack{gap:6px}.hero-trust-row{gap:9px;flex-direction:column}.theme-toggle{min-width:42px!important;padding:4px!important}.theme-toggle-label{display:none!important}.theme-toggle-thumb{transform:none!important}} @media (prefers-reduced-motion:reduce){.hero-aurora,.hero-orbit,.hero-scanline,.hero-stars,.hero-photo-orbit,.hero-scroll-cue span:after{animation:none!important}} /* ========================================================= v5.19 PRO MAX — GLOBAL WEBSITE REDESIGN SYSTEM ========================================================= */ :root{ --pro-radius:22px; --pro-radius-sm:14px; --pro-ease:cubic-bezier(.2,.75,.2,1); } html{scroll-behavior:smooth;} body{background:var(--bg);} /* Premium cream light theme — softer than plain white */ [data-theme="light"]{ --bg:#f6f0e4; --surface:#fffaf1; --surface-2:#efe6d5; --border:#ded2bd; --text:#1b1915; --muted:#6f685c; } [data-theme="light"] body{background:radial-gradient(circle at 8% 0%,rgba(255,255,255,.9),transparent 30%),var(--bg);} /* Header: glass + elevated navigation */ .site-header{height:78px!important;background:color-mix(in srgb,var(--bg) 82%,transparent)!important;backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);border-bottom:1px solid color-mix(in srgb,var(--border) 75%,transparent)!important;box-shadow:0 8px 35px rgba(0,0,0,.07)!important;} .header-inner{min-height:78px!important;} .site-logo{gap:11px!important;} .site-logo .word{gap:1px!important;} .site-logo .name{font-size:1rem!important;font-weight:900!important;letter-spacing:.08em!important;line-height:1.05!important;} .site-logo .role{font-size:.53rem!important;letter-spacing:.2em!important;font-weight:800!important;opacity:.72;} .logo-dot{color:var(--color-primary);} .logo-mark{width:40px!important;height:40px!important;border-radius:13px!important;display:grid!important;place-items:center!important;position:relative!important;background:linear-gradient(145deg,color-mix(in srgb,var(--color-primary) 22%,var(--surface)),var(--surface))!important;border:1px solid color-mix(in srgb,var(--color-primary) 45%,var(--border))!important;box-shadow:0 8px 25px color-mix(in srgb,var(--color-primary) 14%,transparent),inset 0 1px 0 rgba(255,255,255,.12)!important;overflow:hidden!important;} .logo-mark svg{width:20px;height:20px;color:var(--color-primary);} .logo-mark:before{content:"";position:absolute;inset:-40%;background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-70%) rotate(15deg);animation:logo-sweep 4.5s ease-in-out infinite;} .logo-mark-dot{position:absolute;width:5px;height:5px;border-radius:50%;right:5px;top:5px;background:var(--color-accent);box-shadow:0 0 12px var(--color-accent);} .logo-role-line{display:inline-block;width:14px;height:1px;background:var(--color-primary);vertical-align:middle;margin-right:3px;} .main-nav>ul>li>a{font-weight:700!important;font-size:.75rem!important;letter-spacing:.025em;position:relative;} .main-nav>ul>li>a:after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:9px;background:var(--color-primary);transform:scaleX(0);transform-origin:center;transition:transform .3s var(--pro-ease);} .main-nav>ul>li>a:hover:after,.main-nav>ul>li.current-menu-item>a:after{transform:scaleX(1);} .nav-cta{box-shadow:0 10px 28px color-mix(in srgb,var(--color-primary) 16%,transparent)!important;} /* Toggle: icon + logo-like control */ .theme-toggle{position:relative!important;min-width:122px!important;height:44px!important;padding:5px 10px 5px 5px!important;border-radius:999px!important;display:flex!important;align-items:center!important;gap:8px!important;background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 96%,transparent),color-mix(in srgb,var(--surface-2) 60%,transparent))!important;border:1px solid color-mix(in srgb,var(--border) 95%,transparent)!important;box-shadow:0 7px 22px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.16)!important;overflow:hidden;} .theme-toggle:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);transform:translateX(-100%);transition:transform .65s ease;} .theme-toggle:hover:before{transform:translateX(100%);} .theme-toggle-track{width:34px!important;height:34px!important;flex:0 0 34px;border:1px solid color-mix(in srgb,var(--color-primary) 30%,var(--border));box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--surface) 65%,transparent);} .theme-toggle-thumb{width:28px!important;height:28px!important;inset:2px!important;} .theme-toggle-label{font-size:.58rem!important;letter-spacing:.12em!important;font-weight:900!important;min-width:66px!important;line-height:1.1;} .theme-toggle-status{width:6px;height:6px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 10px var(--color-primary);margin-left:auto;} /* All internal page heroes */ .page-hero{position:relative!important;overflow:hidden!important;padding-top:125px!important;padding-bottom:72px!important;background:radial-gradient(650px 250px at 10% 10%,color-mix(in srgb,var(--color-primary) 9%,transparent),transparent 70%),radial-gradient(600px 260px at 90% 70%,color-mix(in srgb,var(--color-accent) 7%,transparent),transparent 70%),var(--bg)!important;border-bottom:1px solid color-mix(in srgb,var(--border) 75%,transparent)!important;} .page-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(color-mix(in srgb,var(--border) 20%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--border) 20%,transparent) 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 85%);opacity:.35;animation:page-grid 20s linear infinite;} .page-hero:after{content:"";position:absolute;width:360px;height:360px;right:-150px;top:-180px;border:1px solid color-mix(in srgb,var(--color-primary) 22%,transparent);border-radius:50%;box-shadow:0 0 0 30px color-mix(in srgb,var(--color-primary) 3%,transparent),0 0 0 70px color-mix(in srgb,var(--color-primary) 2%,transparent);animation:page-orbit 18s linear infinite;} .page-hero .container{position:relative;z-index:2;} .page-hero h1{max-width:900px;font-size:clamp(2.2rem,5vw,4.5rem)!important;line-height:1.02!important;letter-spacing:-.045em!important;margin-bottom:18px!important;} .page-hero p{max-width:720px;font-size:1rem;line-height:1.8;color:var(--muted);} /* Universal content polish */ section:not(.page-hero){position:relative;} .section-head h2{letter-spacing:-.035em!important;} .card,.pricing-card,.project-card,.testimonial-card,.faq-item,.portal-topbar{border:1px solid color-mix(in srgb,var(--border) 92%,transparent)!important;border-radius:var(--pro-radius)!important;box-shadow:0 18px 55px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.05)!important;transition:transform .35s var(--pro-ease),border-color .35s ease,box-shadow .35s ease!important;} .card:hover,.pricing-card:hover,.project-card:hover,.testimonial-card:hover{transform:translateY(-7px);border-color:color-mix(in srgb,var(--color-primary) 48%,var(--border))!important;box-shadow:0 25px 70px color-mix(in srgb,var(--color-primary) 9%,transparent)!important;} .icon-wrap{border-radius:15px!important;background:color-mix(in srgb,var(--color-primary) 9%,var(--surface))!important;border:1px solid color-mix(in srgb,var(--color-primary) 18%,var(--border))!important;} .btn{border-radius:13px!important;font-weight:800!important;letter-spacing:.01em;} .btn-primary{box-shadow:0 12px 28px color-mix(in srgb,var(--color-primary) 17%,transparent)!important;} input,textarea,select{border-radius:13px!important;background:color-mix(in srgb,var(--surface) 90%,transparent)!important;border-color:var(--border)!important;transition:border-color .25s,box-shadow .25s,transform .25s!important;} input:focus,textarea:focus,select:focus{border-color:var(--color-primary)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--color-primary) 10%,transparent)!important;transform:translateY(-1px);} /* Better tables / legal pages */ .page-privacy-policy .container,.page-terms .container{max-width:900px;} /* Portfolio */ .project-thumb{overflow:hidden;border-radius:18px!important;} .project-thumb img{transition:transform .7s var(--pro-ease),filter .5s ease!important;} .project-card:hover .project-thumb img{transform:scale(1.055);filter:saturate(1.08);} .filter-bar{border:1px solid var(--border)!important;border-radius:999px!important;padding:6px!important;background:color-mix(in srgb,var(--surface) 78%,transparent)!important;box-shadow:0 10px 30px rgba(0,0,0,.05)!important;} /* Pricing */ .pricing-card.featured{transform:translateY(-8px);box-shadow:0 25px 70px color-mix(in srgb,var(--color-primary) 14%,transparent)!important;} .pricing-card.featured:before{content:"RECOMMENDED";position:absolute;top:14px;right:14px;font-size:.56rem;font-weight:900;letter-spacing:.12em;padding:7px 9px;border-radius:999px;background:color-mix(in srgb,var(--color-primary) 14%,var(--surface));color:var(--color-primary);border:1px solid color-mix(in srgb,var(--color-primary) 30%,var(--border));} /* FAQ */ .faq-item{overflow:hidden!important;background:color-mix(in srgb,var(--surface) 96%,transparent)!important;} .faq-item:hover{border-color:color-mix(in srgb,var(--color-primary) 35%,var(--border))!important;} /* Footer */ .site-footer{border-top:1px solid color-mix(in srgb,var(--border) 85%,transparent)!important;background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 70%,var(--bg)),var(--bg))!important;} .footer-brand .name{letter-spacing:.08em!important;font-weight:900!important;} .footer-social a{border-radius:12px!important;transition:transform .25s var(--pro-ease),border-color .25s!important;} .footer-social a:hover{transform:translateY(-3px);border-color:var(--color-primary)!important;} /* Floating controls */ .whatsapp-float{box-shadow:0 14px 35px rgba(0,0,0,.2)!important;border:2px solid color-mix(in srgb,var(--bg) 80%,transparent)!important;} #back-to-top{border-radius:12px!important;} /* Mobile header */ @media(max-width:900px){ .site-header{height:70px!important}.header-inner{min-height:70px!important}.site-logo .role{display:none}.site-logo .name{font-size:.9rem!important}.logo-mark{width:37px!important;height:37px!important;border-radius:11px!important}.theme-toggle{min-width:44px!important;width:44px!important;height:40px!important;padding:3px!important}.theme-toggle-label,.theme-toggle-status{display:none!important}.theme-toggle-track{margin:auto}.page-hero{padding-top:105px!important;padding-bottom:55px!important}.page-hero h1{font-size:clamp(2rem,10vw,3.3rem)!important}.pricing-card.featured{transform:none}.filter-bar{border-radius:16px!important;overflow:auto;white-space:nowrap;justify-content:flex-start;} } @media(prefers-reduced-motion:reduce){.logo-mark:before,.page-hero:before,.page-hero:after{animation:none!important}.card,.pricing-card,.project-card,.testimonial-card{transition:none!important}} @keyframes logo-sweep{0%,55%{transform:translateX(-80%) rotate(15deg)}75%,100%{transform:translateX(120%) rotate(15deg)}} @keyframes page-grid{from{background-position:0 0,0 0}to{background-position:46px 46px,-46px 0}} @keyframes page-orbit{to{transform:rotate(360deg)}} /* ========================================================= 5.20 PRO UI REFINEMENT — SMART HEADER + HOMEPAGE MOTION ========================================================= */ :root{--pro-ease:cubic-bezier(.22,.8,.24,1);--pro-radius:20px;--cream:#F4EBDD;--cream-2:#EDE1CF;} [data-theme="light"]{--bg:var(--cream);--surface:#FBF6ED;--border:#DED1BD;--text:#171513;--muted:#665E54;} /* Header: compact premium glass, then completely hides while scrolling down */ .site-header{position:fixed!important;left:0;right:0;top:0!important;height:76px!important;padding:8px 0!important;transform:translateY(0);transition:transform .42s var(--pro-ease),background .3s ease,box-shadow .3s ease,border-color .3s ease!important;will-change:transform;} .site-header.header-hidden{transform:translateY(-110%);} body.admin-bar .site-header{top:32px!important;} @media screen and (max-width:782px){body.admin-bar .site-header{top:46px!important;}} .header-inner{min-height:60px!important;} .site-logo{gap:10px!important;} .logo-mark{width:42px!important;height:42px!important;border-radius:13px!important;} .site-logo .name{font-size:1rem!important;letter-spacing:.08em!important;} .site-logo .role{font-size:.52rem!important;letter-spacing:.19em!important;} .main-nav>ul>li>a{font-size:.76rem!important;padding:9px 12px!important;} .main-nav .nav-cta{padding:12px 17px!important;border-radius:12px!important;} .header-actions{gap:9px!important;padding-left:12px!important;} .search-toggle{width:40px!important;height:40px!important;border-radius:12px!important;} /* Logo mark: developer/code icon, not a generic box */ .logo-mark{background:linear-gradient(145deg,color-mix(in srgb,var(--color-primary) 17%,var(--surface)),var(--surface))!important;border:1px solid color-mix(in srgb,var(--color-primary) 48%,var(--border))!important;box-shadow:0 8px 26px color-mix(in srgb,var(--color-primary) 12%,transparent),inset 0 1px 0 rgba(255,255,255,.18)!important;} .logo-mark svg{position:relative;z-index:2;width:19px!important;height:19px!important;} .logo-mark-dot{z-index:3!important;} /* Theme toggle: clean icon + wordmark style */ .theme-toggle{min-width:112px!important;width:112px!important;height:42px!important;padding:4px 8px 4px 5px!important;border-radius:999px!important;display:flex!important;align-items:center!important;gap:8px!important;background:var(--surface)!important;border:1px solid color-mix(in srgb,var(--color-primary) 22%,var(--border))!important;box-shadow:0 8px 24px rgba(0,0,0,.09),inset 0 1px 0 rgba(255,255,255,.13)!important;} .theme-toggle-track{width:32px!important;height:32px!important;flex:0 0 32px!important;border:1px solid color-mix(in srgb,var(--color-primary) 35%,var(--border))!important;background:color-mix(in srgb,var(--color-primary) 7%,var(--surface))!important;} .theme-toggle-thumb{width:26px!important;height:26px!important;inset:2px!important;} .theme-toggle-thumb svg{width:14px!important;height:14px!important;} .theme-toggle-copy{display:flex;flex-direction:column;line-height:1;gap:2px;min-width:40px;text-align:left;} .theme-toggle-copy strong{font-size:.58rem;letter-spacing:.14em;color:var(--text);font-weight:900;} .theme-toggle-copy small{font-size:.48rem;letter-spacing:.2em;color:var(--muted);font-weight:800;} .theme-toggle-status{width:5px!important;height:5px!important;flex:0 0 5px;} [data-theme="light"] .theme-toggle-title::after{content:"";} [data-theme="light"] .theme-toggle-title{font-size:0;} [data-theme="light"] .theme-toggle-title:after{content:"LIGHT";font-size:.58rem;} /* Homepage sections: every section gets subtle premium ambient motion, not the old dark particle treatment */ .home-pro-section{position:relative;isolation:isolate;overflow:hidden;} .home-pro-section::before{content:"";position:absolute;z-index:-1;width:42vw;height:260px;left:calc((var(--section-index,0) % 2) * 52% - 10%);top:8%;border-radius:50%;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--color-primary) 7%,transparent),transparent 68%);filter:blur(26px);opacity:.8;animation:sectionGlowDrift 13s ease-in-out infinite alternate;pointer-events:none;} .home-pro-section::after{content:"";position:absolute;z-index:-1;left:-20%;top:0;width:140%;height:1px;background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--color-primary) 0%,transparent) 20%,color-mix(in srgb,var(--color-primary) 38%,transparent) 50%,transparent 80%);transform:translateX(-8%);animation:sectionBeam 8s ease-in-out infinite;pointer-events:none;} .home-pro-section > .container{position:relative;z-index:2;} .home-pro-section .section-head,.home-pro-section .card,.home-pro-section .project-card,.home-pro-section .testimonial-card,.home-pro-section .faq-item,.home-pro-section .stat-item,.home-pro-section .trust-badge{animation:sectionContentIn .75s var(--pro-ease) both;animation-delay:calc(var(--section-index,0) * 30ms + 70ms);} /* Hero uses a cleaner ambient field; remove the old dark/noise/particle visual */ .hero-spotlight .hero-particle-canvas,.hero-spotlight .hero-noise,.hero-spotlight .hero-stars,.hero-spotlight .hero-grid-lines,.hero-spotlight .hero-scanline,.hero-spotlight .hero-orbit,.hero-spotlight .gradient-blob,.hero-spotlight .hero-float-icon{display:none!important;} .hero-spotlight{background:var(--bg)!important;} .hero-spotlight::before{content:"";position:absolute;inset:-10%;z-index:0;background:radial-gradient(600px 420px at 78% 45%,color-mix(in srgb,var(--color-primary) 10%,transparent),transparent 70%),radial-gradient(500px 360px at 12% 35%,color-mix(in srgb,var(--color-accent) 7%,transparent),transparent 72%);animation:heroAmbient 12s ease-in-out infinite alternate;pointer-events:none;} .hero-spotlight::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(115deg,transparent 0 38%,color-mix(in srgb,var(--color-primary) 4%,transparent) 50%,transparent 62%);transform:translateX(-35%);animation:heroBeam 9s ease-in-out infinite;pointer-events:none;} .hero-content,.hero-visual{animation:heroEnter .9s var(--pro-ease) both;} .hero-visual{animation-delay:.12s;} /* Footer — premium mobile-first layout */ .site-footer{padding:72px 0 0!important;margin-top:30px!important;background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 86%,var(--bg)),var(--bg))!important;} .footer-brand-lockup{display:flex;align-items:center;gap:12px;margin-bottom:12px;} .footer-logo-mark{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,color-mix(in srgb,var(--color-primary) 17%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--color-primary) 40%,var(--border));color:var(--color-primary);box-shadow:0 8px 25px color-mix(in srgb,var(--color-primary) 10%,transparent);} .footer-logo-mark svg{width:19px;height:19px;} .footer-brand .name{font-size:1.08rem!important;line-height:1.05;} .footer-brand .role{font-size:.58rem!important;letter-spacing:.18em!important;} .footer-col h4{font-size:.72rem!important;letter-spacing:.16em!important;color:var(--text);} .footer-social a{width:40px!important;height:40px!important;border-radius:12px!important;background:color-mix(in srgb,var(--surface) 85%,transparent);} @media(max-width:900px){ .site-header{height:68px!important;padding:5px 0!important;} .header-inner{min-height:58px!important;} .site-logo .role{display:block!important;font-size:.45rem!important;} .site-logo .name{font-size:.82rem!important;} .logo-mark{width:38px!important;height:38px!important;border-radius:11px!important;} .header-actions{padding-left:7px!important;gap:6px!important;} .search-toggle{width:38px!important;height:38px!important;} .theme-toggle{min-width:42px!important;width:42px!important;height:38px!important;padding:3px!important;} .theme-toggle-copy,.theme-toggle-status{display:none!important;} .theme-toggle-track{margin:auto!important;width:30px!important;height:30px!important;} .main-nav{padding-top:88px!important;background:var(--bg)!important;} } @media(max-width:520px){ .site-logo{gap:8px!important;} .site-logo .name{font-size:.76rem!important;} .site-logo .role{font-size:.39rem!important;letter-spacing:.16em!important;} .logo-mark{width:36px!important;height:36px!important;} .main-nav{inset:0 0 0 8%!important;padding:88px 22px 28px!important;} .site-footer{padding:56px 0 0!important;} .footer-grid{grid-template-columns:1fr!important;gap:34px!important;text-align:left!important;} .footer-brand,.footer-col{padding:0 4px;} .footer-brand p{max-width:100%!important;margin-left:0!important;margin-right:0!important;} .footer-social{justify-content:flex-start!important;} .footer-contact li{justify-content:flex-start!important;} .footer-bottom{flex-direction:column;align-items:flex-start!important;text-align:left!important;padding:20px 4px 92px!important;} .mobile-cta-bar{height:64px!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);} .mobile-cta-bar a{font-size:.68rem!important;font-weight:800!important;} .home-pro-section::before{width:80vw;height:180px;opacity:.5;} } @media(prefers-reduced-motion:reduce){ .site-header,.home-pro-section::before,.home-pro-section::after,.hero-spotlight::before,.hero-spotlight::after,.hero-content,.hero-visual{animation:none!important;transition:none!important;} .home-pro-section .section-head,.home-pro-section .card,.home-pro-section .project-card,.home-pro-section .testimonial-card,.home-pro-section .faq-item,.home-pro-section .stat-item,.home-pro-section .trust-badge{animation:none!important;} } @keyframes sectionGlowDrift{0%{transform:translate3d(-4%,0,0) scale(.92)}100%{transform:translate3d(8%,28px,0) scale(1.08)}} @keyframes sectionBeam{0%,100%{transform:translateX(-15%);opacity:.2}50%{transform:translateX(15%);opacity:.8}} @keyframes sectionContentIn{from{opacity:.01;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}} @keyframes heroAmbient{from{transform:scale(1);opacity:.75}to{transform:scale(1.08) translate3d(1%,-1%,0);opacity:1}} @keyframes heroBeam{0%{transform:translateX(-45%)}55%,100%{transform:translateX(45%)}} @keyframes heroEnter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}} /* ========================================================= v5.22 PRO HEADER + HOMEPAGE MOTION — HEADER + SERVICES ========================================================= */ :root{--pro-ease:cubic-bezier(.22,.8,.24,1);--cream:#F4EBDD;--cream-2:#FBF7F0;} [data-theme="light"]{--bg:var(--cream);--surface:var(--cream-2);--surface-2:#EEE3D2;--border:#DED1BF;--text:#171512;--muted:#665F55;} [data-theme="dark"]{--surface-2:#19191C;} /* Header: refined, non-sticky-on-scroll behavior */ .site-header{position:fixed!important;top:0;left:0;right:0;height:78px!important;padding:8px 0!important;z-index:9999!important;transform:translateY(0);transition:transform .42s var(--pro-ease),background .3s ease,box-shadow .3s ease!important;} .site-header.header-hidden{transform:translateY(-105%);} body.admin-bar .site-header{top:32px!important;}@media screen and (max-width:782px){body.admin-bar .site-header{top:46px!important;}} .header-inner{min-height:62px!important;} .site-logo{display:inline-flex!important;align-items:center!important;gap:11px!important;} .logo-mark{position:relative!important;display:grid!important;place-items:center!important;width:44px!important;height:44px!important;border-radius:13px!important;overflow:hidden!important;} .logo-mark:after{content:"";position:absolute;inset:-40%;background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);transform:translateX(-60%) rotate(12deg);animation:logo-sheen 5s ease-in-out infinite;pointer-events:none;} .site-logo .name{font-weight:900!important;letter-spacing:.09em!important;} .site-logo .role{display:flex!important;align-items:center;gap:6px;font-weight:800!important;letter-spacing:.18em!important;} .logo-role-line{display:inline-block;width:13px;height:1px;background:var(--color-primary);box-shadow:0 0 8px color-mix(in srgb,var(--color-primary) 45%,transparent);} .main-nav>ul>li>a{font-size:.76rem!important;font-weight:750!important;padding:11px 12px!important;border-radius:10px!important;transition:color .25s ease,background .25s ease,transform .25s ease!important;} .main-nav>ul>li>a:hover,.main-nav>ul>li.current-menu-item>a,.main-nav>ul>li.current_page_item>a{background:color-mix(in srgb,var(--color-primary) 10%,var(--surface));color:var(--text)!important;transform:translateY(-1px);} .main-nav>ul>li>a:after{bottom:4px!important;height:2px!important;border-radius:99px!important;} /* Theme toggle — unmistakable icon control on every page */ .theme-toggle{min-width:118px!important;width:118px!important;height:44px!important;padding:4px 8px 4px 5px!important;display:flex!important;align-items:center!important;gap:8px!important;border-radius:999px!important;position:relative!important;background:color-mix(in srgb,var(--surface) 92%,transparent)!important;border:1px solid color-mix(in srgb,var(--color-primary) 25%,var(--border))!important;box-shadow:0 8px 24px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.15)!important;} .theme-toggle-track{width:35px!important;height:35px!important;display:grid!important;place-items:center!important;border-radius:50%!important;flex:0 0 35px!important;background:color-mix(in srgb,var(--color-primary) 12%,var(--surface))!important;border:1px solid color-mix(in srgb,var(--color-primary) 45%,var(--border))!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 5%,transparent)!important;} .theme-toggle-thumb{width:29px!important;height:29px!important;inset:2px!important;display:grid!important;place-items:center!important;border-radius:50%!important;background:var(--color-primary)!important;color:#17130a!important;} .theme-toggle-copy{display:flex!important;flex-direction:column!important;line-height:1!important;text-align:left!important;min-width:54px!important;position:relative;z-index:2;} .theme-toggle-title{font-size:.59rem!important;letter-spacing:.13em!important;font-weight:950!important;} .theme-toggle-copy small{font-size:.46rem!important;letter-spacing:.18em!important;color:var(--muted)!important;margin-top:4px!important;} .theme-toggle-status{width:6px!important;height:6px!important;flex:0 0 6px!important;border-radius:50%!important;background:var(--color-primary)!important;box-shadow:0 0 12px var(--color-primary)!important;} [data-theme="light"] .theme-toggle .icon-sun{display:none!important}[data-theme="light"] .theme-toggle .icon-moon{display:block!important} [data-theme="dark"] .theme-toggle .icon-moon{display:none!important}[data-theme="dark"] .theme-toggle .icon-sun{display:block!important} /* New service page */ .services-pro-hero{position:relative;overflow:hidden;padding:142px 0 82px;background:var(--bg);border-bottom:1px solid var(--border);} .services-pro-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--color-primary) 7%,transparent) 1px,transparent 1px),linear-gradient(color-mix(in srgb,var(--color-primary) 7%,transparent) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,black,transparent 90%);opacity:.32;animation:services-grid 24s linear infinite;} .services-pro-hero:after{content:"";position:absolute;width:620px;height:620px;border:1px solid color-mix(in srgb,var(--color-primary) 15%,transparent);border-radius:50%;right:-280px;top:-300px;box-shadow:0 0 0 70px color-mix(in srgb,var(--color-primary) 3%,transparent),0 0 0 150px color-mix(in srgb,var(--color-primary) 2%,transparent);animation:services-orbit 20s linear infinite;} .services-pro-hero .container{position:relative;z-index:2}.services-hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:70px;align-items:end;} .services-kicker{display:inline-flex;align-items:center;gap:9px;padding:7px 11px;border:1px solid color-mix(in srgb,var(--color-primary) 28%,var(--border));border-radius:999px;background:color-mix(in srgb,var(--surface) 82%,transparent);font-size:.68rem;font-weight:850;letter-spacing:.14em;text-transform:uppercase;color:var(--color-primary);} .services-kicker i{width:7px;height:7px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 12px var(--color-primary);animation:service-pulse 1.8s ease-in-out infinite;} .services-pro-hero h1{font-size:clamp(2.7rem,6vw,5.4rem);line-height:.98;letter-spacing:-.055em;max-width:900px;margin:20px 0 20px;} .services-pro-hero h1 .accent{position:relative;white-space:nowrap;}.services-pro-hero h1 .accent:after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:7px;background:color-mix(in srgb,var(--color-primary) 22%,transparent);filter:blur(5px);border-radius:99px;animation:accent-breathe 2.8s ease-in-out infinite;} .services-pro-lead{font-size:1.05rem;line-height:1.85;max-width:700px;} .services-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;} .services-proof{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;} .services-proof-card{padding:20px;border:1px solid var(--border);background:color-mix(in srgb,var(--surface) 90%,transparent);border-radius:18px;box-shadow:var(--shadow-sm);transition:transform .35s var(--pro-ease),border-color .35s ease;}.services-proof-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--color-primary) 45%,var(--border));}.services-proof-card strong{display:block;font:700 1.7rem var(--font-heading);color:var(--text);}.services-proof-card span{font-size:.78rem;color:var(--muted);} .services-intro{padding:92px 0 34px}.services-intro-head{display:flex;justify-content:space-between;gap:30px;align-items:end}.services-intro-head p{max-width:520px;margin:0;} .service-master-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px;} .service-master-card{position:relative;min-height:330px;padding:28px;border:1px solid var(--border);border-radius:24px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 96%,transparent),color-mix(in srgb,var(--surface-2) 45%,transparent));overflow:hidden;transition:transform .4s var(--pro-ease),border-color .35s ease,box-shadow .4s ease;} .service-master-card:before{content:"";position:absolute;width:180px;height:180px;right:-90px;top:-90px;border-radius:50%;background:color-mix(in srgb,var(--color-primary) 10%,transparent);filter:blur(2px);transition:transform .5s var(--pro-ease);}.service-master-card:hover{transform:translateY(-8px);border-color:color-mix(in srgb,var(--color-primary) 48%,var(--border));box-shadow:0 24px 60px rgba(0,0,0,.14);}.service-master-card:hover:before{transform:scale(1.5);} .service-number{position:absolute;right:22px;top:20px;font:800 .72rem var(--font-heading);letter-spacing:.12em;color:color-mix(in srgb,var(--muted) 60%,transparent);}.service-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:17px;background:color-mix(in srgb,var(--color-primary) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--color-primary) 28%,var(--border));color:var(--color-primary);margin-bottom:24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12);}.service-icon svg{width:25px;height:25px;}.service-master-card h3{font-size:1.25rem;margin-bottom:10px;}.service-master-card p{font-size:.9rem;line-height:1.75;}.service-points{display:grid;gap:7px;margin:20px 0 24px;}.service-points li{display:flex;gap:8px;align-items:flex-start;font-size:.77rem;color:var(--muted);}.service-points svg{width:14px;height:14px;color:var(--color-primary);margin-top:3px;} .services-process{padding:95px 0;background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden;}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--border);border-radius:24px;overflow:hidden;}.process-step{position:relative;padding:30px 25px;min-height:220px;background:color-mix(in srgb,var(--surface) 95%,transparent);border-right:1px solid var(--border);}.process-step:last-child{border-right:0}.process-step:after{content:"";position:absolute;left:25px;right:25px;bottom:18px;height:2px;background:linear-gradient(90deg,var(--color-primary),transparent);transform:scaleX(.15);transform-origin:left;transition:transform .6s var(--pro-ease);}.process-step.in-view:after{transform:scaleX(1);}.process-no{font:900 .7rem var(--font-heading);letter-spacing:.16em;color:var(--color-primary);}.process-step h3{margin-top:38px;font-size:1.15rem}.process-step p{font-size:.82rem;line-height:1.7;} .services-included{padding:95px 0}.included-shell{display:grid;grid-template-columns:.75fr 1.25fr;gap:55px;align-items:start}.included-sticky{position:sticky;top:110px}.included-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.included-item{display:flex;gap:10px;align-items:flex-start;padding:14px;border:1px solid var(--border);border-radius:14px;background:color-mix(in srgb,var(--surface) 72%,transparent);font-size:.82rem;color:var(--muted);transition:transform .25s ease,border-color .25s ease}.included-item:hover{transform:translateX(4px);border-color:color-mix(in srgb,var(--color-primary) 35%,var(--border));}.included-item svg{width:16px;height:16px;color:var(--color-primary);margin-top:2px;} .services-final{padding:40px 0 100px}.services-final .cta-banner{border-radius:28px;background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 12%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--color-primary) 30%,var(--border));box-shadow:0 25px 70px rgba(0,0,0,.12);} @keyframes logo-sheen{0%,65%{transform:translateX(-70%) rotate(12deg)}82%,100%{transform:translateX(70%) rotate(12deg)}} @keyframes services-grid{to{background-position:64px 64px}} @keyframes services-orbit{to{transform:rotate(360deg)}} @keyframes service-pulse{50%{transform:scale(1.5);box-shadow:0 0 20px var(--color-primary)}} @keyframes accent-breathe{50%{opacity:.45;transform:scaleX(.92)}} @media(max-width:980px){.services-hero-grid{grid-template-columns:1fr;gap:35px}.service-master-grid{grid-template-columns:repeat(2,1fr)}.process-grid{grid-template-columns:repeat(2,1fr)}.process-step:nth-child(2){border-right:0}.process-step:nth-child(-n+2){border-bottom:1px solid var(--border)}.included-shell{grid-template-columns:1fr}.included-sticky{position:static}} @media(max-width:700px){.site-header{height:68px!important}.header-inner{min-height:54px!important}.site-logo .role{display:none!important}.site-logo .name{font-size:.82rem!important}.logo-mark{width:38px!important;height:38px!important;border-radius:11px!important}.theme-toggle{min-width:42px!important;width:42px!important;height:40px!important;padding:3px!important}.theme-toggle-copy,.theme-toggle-status{display:none!important}.theme-toggle-track{margin:auto}.services-pro-hero{padding:112px 0 58px}.services-pro-hero h1{font-size:clamp(2.5rem,12vw,4rem)}.services-hero-actions .btn{width:100%;justify-content:center}.services-proof{grid-template-columns:repeat(2,1fr)}.services-intro{padding-top:65px}.services-intro-head{display:block}.service-master-grid{grid-template-columns:1fr}.process-grid{grid-template-columns:1fr}.process-step{border-right:0!important;border-bottom:1px solid var(--border)}.process-step:last-child{border-bottom:0}.included-list{grid-template-columns:1fr}} /* ========================================================= v5.22 — CLEAN PRO HEADER + HOMEPAGE SECTION MOTION ========================================================= */ /* ---------- Header: compact, balanced and genuinely professional ---------- */ .site-header{ position:fixed!important; inset:0 0 auto 0!important; height:72px!important; padding:6px 0!important; transform:translateY(0); background:color-mix(in srgb,var(--bg) 88%,transparent)!important; border-bottom:1px solid color-mix(in srgb,var(--border) 82%,transparent)!important; box-shadow:0 8px 28px rgba(0,0,0,.07)!important; backdrop-filter:blur(20px) saturate(135%)!important; -webkit-backdrop-filter:blur(20px) saturate(135%)!important; transition:transform .38s var(--pro-ease),background .25s ease,box-shadow .25s ease!important; } .site-header.header-hidden{transform:translateY(-110%)!important;} body.admin-bar .site-header{top:32px!important;} @media screen and (max-width:782px){body.admin-bar .site-header{top:46px!important;}} .site-header.is-scrolled{ background:color-mix(in srgb,var(--bg) 96%,transparent)!important; box-shadow:0 12px 36px rgba(0,0,0,.12)!important; } .header-inner{ min-height:60px!important; width:min(1240px,calc(100% - 32px))!important; gap:14px!important; } .site-logo{flex:0 0 auto!important;min-width:148px;gap:10px!important;} .logo-mark{ width:42px!important;height:42px!important;border-radius:12px!important; border:1px solid color-mix(in srgb,var(--color-primary) 55%,transparent)!important; box-shadow:0 7px 20px color-mix(in srgb,var(--color-primary) 17%,transparent)!important; } .logo-mark svg{width:20px!important;height:20px!important;position:relative;z-index:2;} .site-logo .word{gap:2px!important;} .site-logo .name{font-size:.98rem!important;letter-spacing:.08em!important;line-height:1!important;} .site-logo .role{font-size:.46rem!important;letter-spacing:.19em!important;line-height:1!important;} .main-nav{ flex:1 1 auto!important; justify-content:center!important; min-width:0!important; gap:5px!important; } .main-nav>ul{gap:1px!important;min-width:0!important;} .main-nav>ul>li>a{ display:flex!important;align-items:center!important;justify-content:center!important; padding:10px 9px!important; border-radius:9px!important; font-size:.72rem!important; font-weight:800!important; letter-spacing:.01em!important; white-space:nowrap!important; } .main-nav>ul>li>a:after{left:10px!important;right:10px!important;bottom:3px!important;height:1.5px!important;} .main-nav .nav-cta{ flex:0 0 auto!important; margin-left:7px!important; padding:11px 15px!important; border-radius:11px!important; font-size:.72rem!important; box-shadow:0 8px 24px color-mix(in srgb,var(--color-primary) 20%,transparent)!important; } .header-actions{flex:0 0 auto!important;padding-left:10px!important;gap:7px!important;border-left:1px solid var(--border)!important;} .search-toggle{ width:38px!important;height:38px!important;border-radius:10px!important; border:1px solid transparent!important;transition:background .2s ease,border-color .2s ease,transform .2s ease!important; } .search-toggle:hover{background:var(--surface)!important;border-color:var(--border)!important;transform:translateY(-1px);} .search-toggle svg{width:18px!important;height:18px!important;} /* Theme toggle: icon is always visible; copy changes with the selected theme. */ .theme-toggle{ width:96px!important;min-width:96px!important;height:40px!important; padding:4px 7px 4px 4px!important;gap:7px!important; border-radius:999px!important; background:color-mix(in srgb,var(--surface) 94%,transparent)!important; border:1px solid color-mix(in srgb,var(--color-primary) 28%,var(--border))!important; box-shadow:0 6px 18px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.16)!important; } .theme-toggle-track{ width:32px!important;height:32px!important;flex:0 0 32px!important; background:color-mix(in srgb,var(--color-primary) 11%,var(--surface))!important; border:1px solid color-mix(in srgb,var(--color-primary) 38%,var(--border))!important; box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--surface) 75%,transparent)!important; } .theme-toggle-thumb{ width:26px!important;height:26px!important;inset:2px!important; background:var(--color-primary)!important;color:#17130a!important; box-shadow:0 3px 10px color-mix(in srgb,var(--color-primary) 28%,transparent)!important; } .theme-toggle-thumb svg{width:14px!important;height:14px!important;} .theme-toggle-copy{min-width:0!important;gap:2px!important;} .theme-toggle-copy strong{font-size:.53rem!important;letter-spacing:.14em!important;} .theme-toggle-copy small{font-size:.43rem!important;letter-spacing:.15em!important;margin-top:1px!important;} .theme-toggle-status{width:5px!important;height:5px!important;flex:0 0 5px!important;} /* ---------- Homepage: keep Hero untouched; replace old blob animation everywhere else ---------- */ .home-pro-section{ position:relative!important; isolation:isolate!important; overflow:hidden!important; background-image:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--color-primary) 1.4%,transparent) 50%,transparent 100%)!important; } /* Remove the previous drifting dark blobs from every non-hero homepage section. */ .home-pro-section>.gradient-blob{display:none!important;} .home-pro-section::before{ content:""!important; position:absolute!important; inset:0!important; z-index:-2!important; opacity:.18!important; background-image: linear-gradient(color-mix(in srgb,var(--color-primary) 7%,transparent) 1px,transparent 1px), linear-gradient(90deg,color-mix(in srgb,var(--color-primary) 7%,transparent) 1px,transparent 1px)!important; background-size:64px 64px!important; mask-image:linear-gradient(to bottom,transparent 0%,black 22%,black 78%,transparent 100%); -webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 22%,black 78%,transparent 100%); animation:proSectionGrid 18s linear infinite!important; pointer-events:none!important; } .home-pro-section::after{ content:""!important; position:absolute!important; z-index:-1!important; top:-25%!important; left:-18%!important; width:34%!important; height:150%!important; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--color-primary) 9%,transparent),transparent)!important; filter:blur(18px)!important; transform:skewX(-16deg) translateX(-30%)!important; animation:proSectionSweep 11s ease-in-out infinite!important; pointer-events:none!important; } .home-pro-section .section-head, .home-pro-section .card, .home-pro-section .project-card, .home-pro-section .testimonial-card, .home-pro-section .faq-item, .home-pro-section .stat-item, .home-pro-section .trust-badge-item, .home-pro-section .timeline-step{ animation:proSectionEnter .7s var(--pro-ease) both!important; animation-delay:calc(var(--section-index,0) * 22ms + 70ms)!important; } @keyframes proSectionGrid{from{background-position:0 0}to{background-position:64px 64px}} @keyframes proSectionSweep{0%,100%{transform:skewX(-16deg) translateX(-55%);opacity:0}18%{opacity:.4}52%{opacity:.9}82%{opacity:.25}100%{transform:skewX(-16deg) translateX(430%);opacity:0}} @keyframes proSectionEnter{from{opacity:.01;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}} /* ---------- Mobile header ---------- */ @media(max-width:1100px){ .header-inner{width:min(100% - 24px,1240px)!important;gap:8px!important;} .site-logo{min-width:138px!important;} .main-nav>ul>li>a{padding-left:7px!important;padding-right:7px!important;font-size:.68rem!important;} .main-nav .nav-cta{padding-left:11px!important;padding-right:11px!important;font-size:.67rem!important;} .theme-toggle{width:40px!important;min-width:40px!important;padding:3px!important;} .theme-toggle-copy,.theme-toggle-status{display:none!important;} .theme-toggle-track{margin:auto!important;} } @media(max-width:900px){ .site-header{height:66px!important;} .header-inner{min-height:54px!important;} .site-logo{min-width:0!important;} .site-logo .role{display:none!important;} .site-logo .name{font-size:.84rem!important;} .logo-mark{width:38px!important;height:38px!important;border-radius:11px!important;} .header-actions{padding-left:5px!important;} .search-toggle{width:36px!important;height:36px!important;} .theme-toggle{width:38px!important;min-width:38px!important;height:38px!important;} .theme-toggle-track{width:30px!important;height:30px!important;flex-basis:30px!important;} .theme-toggle-thumb{width:24px!important;height:24px!important;} .hamburger{display:flex!important;width:38px!important;height:38px!important;border-radius:10px!important;} } @media(max-width:520px){ .header-inner{width:calc(100% - 18px)!important;} .site-logo{gap:7px!important;} .site-logo .name{font-size:.75rem!important;} .logo-mark{width:35px!important;height:35px!important;border-radius:10px!important;} .search-toggle{display:none!important;} .header-actions{gap:5px!important;} .theme-toggle{width:37px!important;min-width:37px!important;height:37px!important;} } @media(prefers-reduced-motion:reduce){ .home-pro-section::before,.home-pro-section::after,.home-pro-section .section-head,.home-pro-section .card,.home-pro-section .project-card,.home-pro-section .testimonial-card,.home-pro-section .faq-item,.home-pro-section .stat-item,.home-pro-section .trust-badge-item,.home-pro-section .timeline-step{animation:none!important;} } /* ========================================================= v5.24 — VISIBLE HOMEPAGE MOTION ENGINE Hero/first section is intentionally excluded. ========================================================= */ .home-pro-section{ position:relative!important; isolation:isolate!important; overflow:hidden!important; } .home-pro-section .section-motion-layer{ position:absolute!important; inset:0!important; z-index:1!important; pointer-events:none!important; overflow:hidden!important; opacity:1!important; } .home-pro-section .section-motion-layer .motion-grid{ position:absolute!important; inset:-20%!important; background-image: linear-gradient(90deg,color-mix(in srgb,var(--color-primary) 7%,transparent) 1px,transparent 1px), linear-gradient(color-mix(in srgb,var(--color-primary) 7%,transparent) 1px,transparent 1px)!important; background-size:58px 58px!important; mask-image:linear-gradient(to bottom,transparent 0%,black 18%,black 82%,transparent 100%); -webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 18%,black 82%,transparent 100%); opacity:.42!important; transform:perspective(900px) rotateX(56deg) translateY(-10%); transform-origin:center top; animation:motionGridDrift 13s linear infinite!important; } .home-pro-section .section-motion-layer .motion-sweep{ position:absolute!important; top:-35%!important; left:-28%!important; width:22%!important; height:170%!important; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--color-primary) 20%,transparent),transparent)!important; filter:blur(8px)!important; transform:skewX(-18deg) translateX(-120%)!important; opacity:.8!important; animation:motionLightSweep 7s cubic-bezier(.55,.05,.35,1) infinite!important; animation-delay:calc(var(--section-index,0) * -0.7s)!important; } .home-pro-section .section-motion-layer .motion-orbit{ position:absolute!important; width:260px!important; height:260px!important; right:-120px!important; top:10%!important; border:1px solid color-mix(in srgb,var(--color-primary) 24%,transparent)!important; border-radius:50%!important; box-shadow:0 0 55px color-mix(in srgb,var(--color-primary) 7%,transparent)!important; animation:motionOrbitFloat 9s ease-in-out infinite alternate, motionOrbitSpin 18s linear infinite!important; animation-delay:calc(var(--section-index,0) * -0.55s)!important; } .home-pro-section .section-motion-layer .motion-orbit:before{ content:""!important; position:absolute!important; width:10px!important; height:10px!important; border-radius:50%!important; top:-5px!important; left:50%!important; background:var(--color-primary)!important; box-shadow:0 0 22px 5px color-mix(in srgb,var(--color-primary) 42%,transparent)!important; } .home-pro-section .section-motion-layer .motion-orbit:after{ content:""!important; position:absolute!important; inset:24px!important; border:1px dashed color-mix(in srgb,var(--color-primary) 12%,transparent)!important; border-radius:50%!important; } .home-pro-section .section-motion-layer .motion-dot{ position:absolute!important; left:12%!important; bottom:18%!important; width:7px!important; height:7px!important; border-radius:50%!important; background:var(--color-primary)!important; box-shadow:0 0 0 7px color-mix(in srgb,var(--color-primary) 5%,transparent),0 0 24px 4px color-mix(in srgb,var(--color-primary) 35%,transparent)!important; animation:motionDotPulse 3.2s ease-in-out infinite!important; animation-delay:calc(var(--section-index,0) * -0.3s)!important; } .home-pro-section > .container, .home-pro-section > .tech-marquee, .home-pro-section > .newsletter-box-home, .home-pro-section > .cta-banner{ position:relative!important; z-index:3!important; } /* Never dim homepage content just because a motion observer has not fired. */ .home-pro-section .section-head, .home-pro-section .card, .home-pro-section .project-card, .home-pro-section .testimonial-card, .home-pro-section .faq-item, .home-pro-section .stat-item, .home-pro-section .trust-badge-item, .home-pro-section .timeline-step{ position:relative; z-index:3; } @keyframes motionGridDrift{ 0%{background-position:0 0,0 0;transform:perspective(900px) rotateX(56deg) translate3d(0,-10%,0);} 100%{background-position:0 58px,58px 0;transform:perspective(900px) rotateX(56deg) translate3d(0,3%,0);} } @keyframes motionLightSweep{ 0%,12%{transform:skewX(-18deg) translateX(-120%);opacity:0;} 24%{opacity:.9;} 54%{opacity:.72;} 78%,100%{transform:skewX(-18deg) translateX(700%);opacity:0;} } @keyframes motionOrbitFloat{ 0%{transform:translate3d(0,0,0) scale(.94);} 100%{transform:translate3d(-42px,28px,0) scale(1.06);} } @keyframes motionOrbitSpin{to{rotate:360deg;}} @keyframes motionDotPulse{ 0%,100%{transform:scale(.75);opacity:.45;} 50%{transform:scale(1.35);opacity:1;} } /* v5.24 — cleaner desktop header: stop squeezing the navigation */ @media(min-width:1101px){ .header-inner{width:min(100% - 34px,1320px)!important;gap:18px!important;} .site-logo{flex:0 0 174px!important;} .main-nav{flex:1 1 auto!important;justify-content:center!important;gap:2px!important;} .main-nav ul{gap:1px!important;} .main-nav>ul>li>a{font-size:.73rem!important;padding:9px 10px!important;white-space:nowrap!important;} .main-nav .nav-cta{font-size:.72rem!important;padding:11px 15px!important;white-space:nowrap!important;} .header-actions{flex:0 0 auto!important;} .theme-toggle{min-width:116px!important;width:116px!important;} } .site-header .site-logo .name{white-space:nowrap!important;} .site-header .site-logo .role{white-space:nowrap!important;} .site-header .main-nav a{position:relative!important;} .site-header .main-nav>ul>li>a:after{transition:transform .25s ease,opacity .25s ease!important;} .site-header .main-nav>ul>li:not(.menu-item-has-children)>a:before{ content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--color-primary),var(--color-accent)); transform:scaleX(0);transform-origin:center;opacity:0;transition:transform .25s ease,opacity .25s ease; } .site-header .main-nav>ul>li:not(.menu-item-has-children)>a:hover:before, .site-header .main-nav>ul>li.current-menu-item>a:before, .site-header .main-nav>ul>li.current_page_item>a:before{transform:scaleX(1);opacity:1;} .theme-toggle{cursor:pointer!important;user-select:none!important;} .theme-toggle:focus-visible,.search-toggle:focus-visible,.hamburger:focus-visible{outline:2px solid var(--color-primary)!important;outline-offset:3px!important;} @media(max-width:1100px){ .main-nav{inset:0 0 0 18%!important;} } @media(max-width:700px){ .home-pro-section .section-motion-layer .motion-grid{opacity:.24!important;background-size:44px 44px!important;} .home-pro-section .section-motion-layer .motion-orbit{width:190px!important;height:190px!important;right:-105px!important;} .home-pro-section .section-motion-layer .motion-sweep{width:32%!important;opacity:.5!important;} } @media(prefers-reduced-motion:reduce){ .home-pro-section .section-motion-layer .motion-grid, .home-pro-section .section-motion-layer .motion-sweep, .home-pro-section .section-motion-layer .motion-orbit, .home-pro-section .section-motion-layer .motion-dot{animation:none!important;} } /* v5.25 complete footer navigation */ .footer-page-links{list-style:none;margin:0;padding:0;} .footer-page-links li{margin-bottom:10px;} .footer-page-links a{display:inline-flex;align-items:center;gap:7px;} .footer-page-links a::before{content:'›';color:var(--color-primary);font-weight:700;opacity:.8;transition:transform .2s ease;} .footer-page-links a:hover::before{transform:translateX(3px);} .footer-support-links{margin-bottom:20px;} @media (max-width:520px){ .footer-page-links a{justify-content:center;width:100%;} .footer-support-links{padding-bottom:8px;border-bottom:1px solid var(--border);} .site-footer{padding-top:64px;} .footer-grid{gap:32px;} } /* ========================================================= v5.26 — PREMIUM BLOG EXPERIENCE ========================================================= */ .blog-hero{overflow:hidden;position:relative;min-height:420px;display:flex;align-items:center;} .blog-hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) .65fr;gap:40px;align-items:center;padding:34px 0 10px;} .blog-hero h1{font-size:clamp(2.4rem,5vw,4.7rem);line-height:.98;letter-spacing:-.055em;max-width:760px;margin:14px 0 20px;} .blog-hero h1 span{color:var(--color-primary);} .blog-hero p{max-width:680px;color:var(--muted);font-size:1.05rem;line-height:1.75;margin:0;} .blog-hero-stats{display:flex;gap:34px;margin-top:30px;} .blog-hero-stats div{display:flex;flex-direction:column;gap:3px;} .blog-hero-stats strong{font-size:1.35rem;color:var(--text);} .blog-hero-stats span{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);} .blog-hero-orbit{height:310px;width:310px;justify-self:end;position:relative;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--color-primary) 13%,transparent),transparent 62%);filter:drop-shadow(0 0 35px color-mix(in srgb,var(--color-primary) 8%,transparent));} .orbit-ring{position:absolute;border:1px solid color-mix(in srgb,var(--color-primary) 25%,transparent);border-radius:50%;inset:18px;animation:blogOrbit 13s linear infinite;} .orbit-ring-two{inset:58px;border-style:dashed;animation-duration:9s;animation-direction:reverse;} .orbit-dot{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--color-primary);left:50%;top:12px;box-shadow:0 0 25px 5px color-mix(in srgb,var(--color-primary) 35%,transparent);animation:blogDot 4s ease-in-out infinite;} .blog-toolbar-section{padding:18px 0 8px;position:relative;z-index:4;} .blog-toolbar{display:flex;gap:18px;align-items:center;justify-content:space-between;padding:14px;border:1px solid var(--border);background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(16px);border-radius:18px;box-shadow:var(--shadow-sm);} .blog-categories{display:flex;gap:6px;overflow:auto;scrollbar-width:none;min-width:0;} .blog-categories::-webkit-scrollbar{display:none;} .blog-categories a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:10px 13px;border-radius:10px;color:var(--muted);font-size:.78rem;font-weight:700;transition:.25s ease;} .blog-categories a:hover,.blog-categories a.is-active{background:var(--text);color:var(--bg);} .blog-categories small{font-size:.62rem;opacity:.65;} .blog-search{display:flex;align-items:center;gap:8px;flex:0 0 300px;border:1px solid var(--border);border-radius:11px;padding:4px 5px 4px 12px;background:var(--bg);} .blog-search svg{width:16px;height:16px;flex:none;color:var(--muted);} .blog-search input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:.8rem;} .blog-search button{border:0;border-radius:8px;padding:9px 13px;background:var(--color-primary);color:#fff;font-weight:700;font-size:.74rem;cursor:pointer;} .blog-featured-section,.blog-list-section{padding:78px 0 0;} .blog-section-head{align-items:end;margin-bottom:25px;} .blog-section-head h2{margin-top:6px;} .blog-result-count{font-size:.78rem;color:var(--muted);} .text-link{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--text);font-size:.82rem;} .text-link svg,.blog-pro-footer svg{width:16px;height:16px;transition:transform .25s ease;} .text-link:hover svg,.blog-pro-footer a:hover svg{transform:translateX(4px);} .featured-blog-card{display:grid;grid-template-columns:1.12fr .88fr;border:1px solid var(--border);border-radius:26px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow-lg);} .featured-blog-image{display:block;min-height:430px;position:relative;overflow:hidden;background:var(--surface-2);} .featured-blog-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .65s cubic-bezier(.2,.7,.2,1);} .featured-blog-card:hover .featured-blog-image img{transform:scale(1.045);} .featured-badge{position:absolute;left:20px;top:20px;padding:8px 11px;border-radius:999px;background:var(--text);color:var(--bg);font-size:.67rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;} .featured-blog-content{padding:48px;display:flex;flex-direction:column;justify-content:center;} .featured-blog-content h2{font-size:clamp(1.7rem,3vw,2.65rem);line-height:1.08;margin:8px 0 15px;letter-spacing:-.035em;} .featured-blog-content h2 a{color:var(--text);} .featured-blog-content p{color:var(--muted);line-height:1.75;margin:0;} .featured-blog-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:30px;padding-top:22px;border-top:1px solid var(--border);} .author-mini{display:flex;align-items:center;gap:10px;min-width:0;} .author-mini-avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--color-primary);color:#fff;font-weight:800;} .author-mini span:last-child{display:flex;flex-direction:column;gap:2px;} .author-mini b{font-size:.78rem;}.author-mini small{font-size:.67rem;color:var(--muted);} .blog-pro-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;} .blog-pro-card{overflow:hidden;border:1px solid var(--border);background:var(--surface);border-radius:20px;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;animation-delay:calc(var(--card-index) * 45ms);} .blog-pro-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--color-primary) 35%,var(--border));} .blog-pro-image{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2);} .blog-pro-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .35s ease;} .blog-pro-card:hover .blog-pro-image img{transform:scale(1.055);filter:saturate(1.06);} .blog-image-arrow{position:absolute;right:14px;bottom:14px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--text);color:var(--bg);opacity:0;transform:translateY(8px);transition:.3s ease;} .blog-image-arrow svg{width:17px;height:17px;}.blog-pro-card:hover .blog-image-arrow{opacity:1;transform:translateY(0);} .blog-pro-body{padding:21px 22px 20px;} .blog-card-top{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:11px;color:var(--muted);font-size:.67rem;} .blog-cat{color:var(--color-primary);font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;} .blog-pro-body h3{font-size:1.18rem;line-height:1.25;margin:0 0 10px;letter-spacing:-.02em;}.blog-pro-body h3 a{color:var(--text);} .blog-pro-body p{font-size:.84rem;line-height:1.65;color:var(--muted);margin:0;min-height:2.75em;} .blog-pro-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--border);margin-top:17px;padding-top:14px;color:var(--muted);font-size:.68rem;} .blog-pro-footer span{display:inline-flex;align-items:center;gap:5px;}.blog-pro-footer span svg{width:14px;height:14px;}.blog-pro-footer a{display:inline-flex;align-items:center;gap:5px;color:var(--text);font-weight:800;} .blog-empty{text-align:center;padding:70px 25px;border:1px dashed var(--border);border-radius:20px;background:var(--surface);}.blog-empty-icon{width:54px;height:54px;display:grid;place-items:center;margin:0 auto 18px;border-radius:50%;background:color-mix(in srgb,var(--color-primary) 10%,transparent);color:var(--color-primary);}.blog-empty-icon svg{width:24px;height:24px}.blog-empty h3{margin:0 0 7px}.blog-empty p{color:var(--muted);margin:0 0 22px;} .blog-pagination{display:flex;justify-content:center;margin-top:42px;}.blog-pagination .page-numbers{display:inline-flex;align-items:center;gap:7px;margin:3px;padding:9px 12px;border:1px solid var(--border);border-radius:9px;color:var(--text);font-size:.75rem;font-weight:700;background:var(--surface);}.blog-pagination .page-numbers.current,.blog-pagination .page-numbers:hover{background:var(--text);color:var(--bg);border-color:var(--text);}.blog-pagination svg{width:14px;height:14px;} .blog-newsletter-section{padding:78px 0 95px;}.blog-newsletter-box{display:grid;grid-template-columns:1fr minmax(340px,.72fr);gap:35px;align-items:center;border:1px solid var(--border);border-radius:24px;padding:42px 46px;background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--color-primary) 7%,var(--surface)));overflow:hidden;position:relative;}.blog-newsletter-box h2{font-size:clamp(1.6rem,3vw,2.5rem);margin:7px 0 9px;letter-spacing:-.035em;}.blog-newsletter-box p{color:var(--muted);margin:0;}.blog-newsletter-box .newsletter-form{display:grid;grid-template-columns:1fr auto;gap:8px;position:relative;}.blog-newsletter-box .newsletter-form input{min-width:0;border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:10px;padding:13px 14px;outline:none;}.blog-newsletter-box .newsletter-form input:focus{border-color:var(--color-primary);}.blog-newsletter-box .newsletter-form button{white-space:nowrap;}.blog-newsletter-box .newsletter-form small{grid-column:1/-1;color:var(--muted);font-size:.7rem;min-height:16px;} @keyframes blogOrbit{to{transform:rotate(360deg);}}@keyframes blogDot{0%,100%{transform:translate(0,0) scale(.8);}50%{transform:translate(135px,75px) scale(1.15);}} @media(max-width:900px){.blog-hero-grid{grid-template-columns:1fr}.blog-hero-orbit{display:none}.blog-toolbar{align-items:stretch;flex-direction:column}.blog-search{flex-basis:auto;width:100%}.featured-blog-card{grid-template-columns:1fr}.featured-blog-image{min-height:330px}.blog-pro-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.blog-newsletter-box{grid-template-columns:1fr}.blog-newsletter-box .newsletter-form{max-width:none}} @media(max-width:600px){.blog-hero{min-height:0}.blog-hero h1{font-size:2.5rem}.blog-hero-stats{gap:20px}.blog-hero-stats strong{font-size:1.05rem}.blog-featured-section,.blog-list-section{padding-top:58px}.featured-blog-content{padding:28px 22px}.featured-blog-image{min-height:230px}.featured-blog-bottom{align-items:flex-start;flex-direction:column}.blog-pro-grid{grid-template-columns:1fr}.blog-newsletter-box{padding:30px 22px}.blog-newsletter-box .newsletter-form{grid-template-columns:1fr}.blog-newsletter-box .newsletter-form button{width:100%}.blog-newsletter-box .newsletter-form small{grid-column:auto}.blog-categories{padding-bottom:2px}.blog-categories a{padding:9px 11px}} @media(prefers-reduced-motion:reduce){.orbit-ring,.orbit-dot,.blog-pro-card,.featured-blog-image img,.blog-pro-image img{animation:none!important;transition:none!important;}} /* v5.26 — premium single-post layout */ .reading-progress-wrap{position:fixed;left:0;right:0;top:0;height:3px;z-index:5000;pointer-events:none;background:transparent}.reading-progress-wrap #reading-progress{height:100%;width:0;background:var(--color-primary);box-shadow:0 0 12px color-mix(in srgb,var(--color-primary) 35%,transparent)} .single-blog-hero{padding:80px 0 52px;text-align:center;position:relative;overflow:hidden}.single-blog-hero .breadcrumbs{justify-content:center}.single-blog-kicker{display:flex;justify-content:center;gap:9px;align-items:center;margin:28px 0 13px;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}.single-blog-kicker a{color:var(--color-primary);font-weight:800}.single-blog-hero h1{max-width:950px;margin:0 auto;font-size:clamp(2.4rem,5.5vw,5rem);line-height:.99;letter-spacing:-.055em}.single-blog-deck{max-width:760px;margin:22px auto 24px;color:var(--muted);font-size:1.05rem;line-height:1.75}.single-blog-author,.author-mini{display:flex;align-items:center;justify-content:center;gap:10px}.single-blog-author>span:last-child{display:flex;flex-direction:column;text-align:left;gap:2px}.single-blog-author b{font-size:.8rem}.single-blog-author small{font-size:.68rem;color:var(--muted)} .single-blog-cover-section{padding:0 0 65px}.single-blog-cover{max-width:1180px;margin:0 auto;border-radius:26px;overflow:hidden;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-lg);aspect-ratio:16/8;position:relative}.single-blog-cover img{display:block;width:100%;height:100%;object-fit:cover}.single-blog-content-section{padding:0 0 95px}.single-blog-layout{display:grid;grid-template-columns:minmax(0,760px) 280px;gap:55px;justify-content:center;align-items:start}.premium-article{min-width:0}.premium-article>p:first-of-type{font-size:1.12rem}.premium-article p{line-height:1.85}.premium-article h2{font-size:clamp(1.45rem,3vw,2rem);margin-top:42px}.premium-article h3{font-size:1.3rem;margin-top:32px}.premium-article ul,.premium-article ol{line-height:1.85}.premium-article img{max-width:100%;height:auto;border-radius:14px}.article-tags{margin-top:35px}.article-share{margin-top:32px;padding:18px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.article-share strong{margin-right:auto;font-size:.8rem}.article-share .copy-feedback{display:none}.article-share .copy-feedback.show{display:block;position:absolute;bottom:calc(100% + 5px);right:0;background:var(--text);color:var(--bg);padding:5px 8px;border-radius:6px;white-space:nowrap;font-size:.68rem}.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:25px}.post-nav>a{display:flex;align-items:center;gap:9px;min-width:0;padding:16px;border:1px solid var(--border);border-radius:13px;color:var(--text);font-size:.72rem}.post-nav>a:last-child{text-align:right;justify-content:flex-end}.post-nav b{display:block;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}.blog-sticky-stack{position:sticky;top:90px;display:grid;gap:15px}.sidebar-toc-mini a{display:inline-flex;margin-top:12px;font-size:.76rem;color:var(--color-primary);font-weight:800}.premium-related{margin-top:65px;padding-top:15px}.premium-related .section-head{margin-bottom:20px}.premium-related .blog-body{padding:18px}.premium-related .blog-meta{justify-content:space-between}.premium-related .text-link{font-size:.72rem;margin-top:13px}.premium-related .text-link svg{width:14px}.premium-article .post-toc{margin-bottom:30px}.post-pages{margin:28px 0}.post-pages a{margin:0 4px} @media(max-width:980px){.single-blog-layout{grid-template-columns:1fr;gap:35px}.single-blog-sidebar{order:2}.blog-sticky-stack{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.single-blog-cover{aspect-ratio:16/9}} @media(max-width:620px){.single-blog-hero{padding:58px 0 35px}.single-blog-kicker{flex-wrap:wrap;margin-top:22px}.single-blog-deck{font-size:.92rem}.single-blog-cover-section{padding-bottom:45px}.single-blog-cover{border-radius:17px}.blog-sticky-stack{grid-template-columns:1fr}.post-nav{grid-template-columns:1fr}.post-nav>a:last-child{text-align:left;justify-content:flex-start}.premium-article>p:first-of-type{font-size:1rem}} /* ========================================================= v5.27 — BLOG FORCE-PREMIUM / REAL PHOTO LAYER ========================================================= */ body.blog-page-force, body.blog-page-force .site-main{background:var(--bg)!important;} .rashid-real-blog-photo{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;} .blog-pro-image,.featured-blog-image{background:#111;} .blog-pro-image:after,.featured-blog-image:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.34));opacity:.7;} .blog-pro-card{position:relative;isolation:isolate;} .blog-pro-card .blog-pro-image{min-height:240px;} .blog-pro-card .blog-pro-body{position:relative;z-index:2;} .blog-pro-card.reveal{opacity:1;transform:none;} .blog-pro-card:hover .rashid-real-blog-photo{transform:scale(1.06);} @media(max-width:900px){.blog-hero-grid{grid-template-columns:1fr}.blog-hero-orbit{display:none}.blog-toolbar{flex-direction:column;align-items:stretch}.blog-search{flex-basis:auto;width:100%}.featured-blog-card{grid-template-columns:1fr}.featured-blog-image{min-height:300px}.blog-pro-grid{grid-template-columns:repeat(2,minmax(0,1fr));}} @media(max-width:620px){.blog-hero{min-height:auto;padding-bottom:35px}.blog-hero h1{font-size:2.45rem}.blog-hero-stats{gap:20px;flex-wrap:wrap}.blog-pro-grid{grid-template-columns:1fr}.featured-blog-content{padding:28px 22px}.featured-blog-bottom{align-items:flex-start;flex-direction:column}.blog-pro-card .blog-pro-image{min-height:220px}.blog-toolbar{padding:10px}.blog-categories{padding-bottom:2px}} /* ========================================================= SERVICES V5.28 — PREMIUM SERVICE EXPERIENCE Scoped to .services-v528 so the homepage/hero remains untouched. ========================================================= */ .services-v528{--sv-glow:var(--color-primary);position:relative;overflow:hidden;background:var(--bg);color:var(--text)} .services-v528 .container{position:relative;z-index:2} .services-v528 .sv-hero{position:relative;padding:118px 0 86px;min-height:690px;display:flex;align-items:center;border-bottom:1px solid var(--border);overflow:hidden} .services-v528 .sv-hero:before{content:"";position:absolute;width:720px;height:720px;right:-360px;top:-320px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--color-primary) 18%,transparent) 0,transparent 64%);filter:blur(5px);animation:svGlow 8s ease-in-out infinite alternate} .services-v528 .sv-hero-grid-pattern{position:absolute;inset:0;opacity:.22;background-image:linear-gradient(color-mix(in srgb,var(--color-primary) 10%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--color-primary) 10%,transparent) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to bottom,black,transparent 92%);animation:svGrid 26s linear infinite} .services-v528 .sv-hero-layout{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);gap:70px;align-items:center;margin-top:28px} .services-v528 .sv-eyebrow,.services-v528 .sv-label{font-size:.67rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--color-primary)} .services-v528 .sv-eyebrow{display:inline-flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid color-mix(in srgb,var(--color-primary) 28%,var(--border));border-radius:999px;background:color-mix(in srgb,var(--surface) 82%,transparent)} .services-v528 .sv-live-dot{width:7px;height:7px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 14px var(--color-primary);animation:svPulse 1.8s ease-in-out infinite} .services-v528 .sv-hero h1{font-size:clamp(3rem,6vw,5.9rem);line-height:.94;letter-spacing:-.065em;max-width:850px;margin:24px 0 24px} .services-v528 .sv-hero h1 span,.services-v528 h2 span{color:var(--color-primary)} .services-v528 .sv-hero-lead{font-size:1.04rem;line-height:1.9;max-width:690px;color:var(--muted)} .services-v528 .sv-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px} .services-v528 .sv-mini-proof{display:flex;flex-wrap:wrap;gap:16px;margin-top:22px;color:var(--muted);font-size:.74rem;font-weight:700}.services-v528 .sv-mini-proof span{display:flex;gap:6px;align-items:center}.services-v528 .sv-mini-proof svg{width:14px;height:14px;color:var(--color-primary)} .services-v528 .sv-command-card{position:relative;padding:28px;border:1px solid color-mix(in srgb,var(--color-primary) 22%,var(--border));border-radius:30px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 96%,transparent),color-mix(in srgb,var(--surface-2) 75%,transparent));box-shadow:0 35px 90px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.08);overflow:hidden} .services-v528 .sv-command-card:after{content:"";position:absolute;width:190px;height:190px;border-radius:50%;right:-90px;bottom:-100px;background:color-mix(in srgb,var(--color-primary) 13%,transparent);filter:blur(18px)} .services-v528 .sv-command-top{display:flex;justify-content:space-between;font-size:.61rem;font-weight:900;letter-spacing:.12em;color:var(--muted)}.services-v528 .sv-command-top b{color:var(--color-primary)} .services-v528 .sv-command-title{font-size:1.18rem;line-height:1.5;margin-top:24px}.services-v528 .sv-command-title strong{font-size:1.35rem} .services-v528 .sv-command-orbit{height:280px;position:relative;display:grid;place-items:center;margin:8px 0}.services-v528 .sv-orbit-ring{position:absolute;border:1px solid color-mix(in srgb,var(--color-primary) 28%,transparent);border-radius:50%;animation:svOrbit 14s linear infinite}.services-v528 .sv-orbit-ring.r1{width:190px;height:190px}.services-v528 .sv-orbit-ring.r2{width:260px;height:260px;border-style:dashed;animation-duration:22s;animation-direction:reverse}.services-v528 .sv-orbit-core{width:92px;height:92px;border-radius:28px;display:grid;place-items:center;font:900 2.7rem var(--font-heading);color:var(--color-primary);background:color-mix(in srgb,var(--surface) 86%,transparent);border:1px solid color-mix(in srgb,var(--color-primary) 38%,var(--border));box-shadow:0 0 50px color-mix(in srgb,var(--color-primary) 20%,transparent),inset 0 1px 0 rgba(255,255,255,.1);z-index:2} .services-v528 .sv-float{position:absolute;padding:8px 11px;border-radius:11px;background:var(--surface);border:1px solid var(--border);font:900 .65rem var(--font-heading);box-shadow:var(--shadow-sm);animation:svFloat 4s ease-in-out infinite}.services-v528 .f1{top:35px;left:20px}.services-v528 .f2{right:12px;top:75px;animation-delay:.8s}.services-v528 .f3{bottom:35px;left:48px;animation-delay:1.4s}.services-v528 .f4{right:48px;bottom:24px;animation-delay:2s} .services-v528 .sv-command-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border);padding-top:20px;gap:10px}.services-v528 .sv-command-stats div{display:grid;gap:3px}.services-v528 .sv-command-stats strong{font-size:1.25rem}.services-v528 .sv-command-stats span{font-size:.65rem;color:var(--muted)} .services-v528 .sv-services{padding:105px 0 90px}.services-v528 .sv-section-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:38px}.services-v528 .sv-section-head>div{max-width:760px}.services-v528 .sv-section-head h2{font-size:clamp(2.3rem,4vw,4rem);line-height:1;letter-spacing:-.045em;margin:12px 0 0}.services-v528 .sv-section-head>p{max-width:510px;margin:0;color:var(--muted);line-height:1.8;font-size:.9rem}.services-v528 .sv-section-head.center{align-items:end}.services-v528 .sv-service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .services-v528 .sv-card{position:relative;min-height:400px;padding:25px;border:1px solid var(--border);border-radius:24px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 96%,transparent),color-mix(in srgb,var(--surface-2) 58%,transparent));overflow:hidden;display:flex;flex-direction:column;transition:transform .4s var(--pro-ease),border-color .35s ease,box-shadow .4s ease}.services-v528 .sv-card:before{content:"";position:absolute;width:180px;height:180px;right:-110px;top:-110px;border-radius:50%;background:color-mix(in srgb,var(--color-primary) 10%,transparent);transition:transform .5s ease}.services-v528 .sv-card:hover{transform:translateY(-8px);border-color:color-mix(in srgb,var(--color-primary) 45%,var(--border));box-shadow:0 28px 70px rgba(0,0,0,.16)}.services-v528 .sv-card:hover:before{transform:scale(1.5)} .services-v528 .sv-card-head{display:flex;justify-content:space-between;align-items:center}.services-v528 .sv-card-no{font:900 .59rem var(--font-heading);letter-spacing:.13em;color:var(--muted)}.services-v528 .sv-card-arrow{width:30px;height:30px;border:1px solid var(--border);border-radius:9px;display:grid;place-items:center;color:var(--muted);transition:.3s}.services-v528 .sv-card-arrow svg{width:14px}.services-v528 .sv-card:hover .sv-card-arrow{color:var(--color-primary);border-color:color-mix(in srgb,var(--color-primary) 45%,var(--border));transform:translate(2px,-2px)} .services-v528 .sv-card-icon{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;margin:28px 0 20px;color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--color-primary) 25%,var(--border));box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}.services-v528 .sv-card-icon svg{width:26px;height:26px}.services-v528 .sv-card h3{font-size:1.25rem;letter-spacing:-.02em;margin-bottom:10px}.services-v528 .sv-card p{font-size:.82rem;line-height:1.75;color:var(--muted);margin-bottom:18px}.services-v528 .sv-card ul{display:grid;gap:8px;list-style:none;margin:0 0 24px;padding:0}.services-v528 .sv-card li{display:flex;gap:8px;align-items:flex-start;font-size:.72rem;color:var(--muted)}.services-v528 .sv-card li svg{width:14px;height:14px;color:var(--color-primary);flex:none;margin-top:2px}.services-v528 .sv-card-link{display:flex;align-items:center;gap:7px;margin-top:auto;font-size:.72rem;font-weight:900;color:var(--color-primary)}.services-v528 .sv-card-link svg{width:14px;transition:transform .25s}.services-v528 .sv-card:hover .sv-card-link svg{transform:translateX(4px)} .services-v528 .sv-stack{padding:95px 0;background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.services-v528 .sv-stack-shell{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}.services-v528 .sv-stack-copy h2{font-size:clamp(2.4rem,4vw,4rem);line-height:.98;letter-spacing:-.05em;margin:12px 0 18px}.services-v528 .sv-stack-copy p{font-size:.9rem;line-height:1.85;color:var(--muted);max-width:510px;margin-bottom:26px}.services-v528 .sv-stack-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.services-v528 .sv-stack-item{min-height:150px;padding:18px;border:1px solid var(--border);border-radius:18px;background:var(--bg);display:flex;flex-direction:column;justify-content:center;gap:8px;transition:.35s}.services-v528 .sv-stack-item:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--color-primary) 40%,var(--border))}.services-v528 .sv-stack-item>span{width:38px;height:38px;display:grid;place-items:center;color:var(--color-primary);border-radius:11px;background:color-mix(in srgb,var(--color-primary) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--color-primary) 22%,var(--border))}.services-v528 .sv-stack-item svg{width:19px;height:19px}.services-v528 .sv-stack-item strong{font-size:.82rem}.services-v528 .sv-stack-item small{font-size:.61rem;color:var(--muted)} .services-v528 .sv-process{padding:105px 0}.services-v528 .sv-process-track{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.services-v528 .sv-process-step{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:25px;border:1px solid var(--border);border-radius:20px;background:var(--surface);transition:.35s}.services-v528 .sv-process-step:hover{border-color:color-mix(in srgb,var(--color-primary) 40%,var(--border));transform:translateY(-4px)}.services-v528 .sv-process-step>span{font:900 .72rem var(--font-heading);color:var(--color-primary)}.services-v528 .sv-process-step h3{font-size:1rem;margin:0 0 7px}.services-v528 .sv-process-step p{font-size:.76rem;line-height:1.7;color:var(--muted);margin:0} .services-v528 .sv-quality{padding:95px 0;background:var(--surface);border-top:1px solid var(--border)}.services-v528 .sv-quality-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:70px;align-items:start}.services-v528 .sv-quality-intro{position:sticky;top:105px}.services-v528 .sv-quality-intro h2{font-size:clamp(2.2rem,3.8vw,3.6rem);line-height:1;letter-spacing:-.045em;margin:12px 0 18px}.services-v528 .sv-quality-intro p{font-size:.88rem;line-height:1.8;color:var(--muted)}.services-v528 .sv-quality-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.services-v528 .sv-quality-item{display:flex;align-items:center;gap:11px;padding:16px;border:1px solid var(--border);border-radius:14px;background:var(--bg);font-size:.76rem;font-weight:700;transition:.3s}.services-v528 .sv-quality-item:hover{transform:translateX(4px);border-color:color-mix(in srgb,var(--color-primary) 35%,var(--border))}.services-v528 .sv-quality-item span{width:27px;height:27px;display:grid;place-items:center;border-radius:8px;background:color-mix(in srgb,var(--color-primary) 11%,var(--surface));color:var(--color-primary)}.services-v528 .sv-quality-item svg{width:13px;height:13px} .services-v528 .sv-final{padding:35px 0 100px}.services-v528 .sv-final-card{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;padding:52px;border-radius:30px;background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 13%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--color-primary) 32%,var(--border));box-shadow:0 30px 80px rgba(0,0,0,.14)}.services-v528 .sv-final-card:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-110px;bottom:-160px;background:color-mix(in srgb,var(--color-primary) 16%,transparent);filter:blur(10px)}.services-v528 .sv-final-card h2{font-size:clamp(2.2rem,4vw,4rem);line-height:.98;letter-spacing:-.05em;max-width:760px;margin:12px 0}.services-v528 .sv-final-card p{max-width:620px;color:var(--muted);line-height:1.8;font-size:.9rem}.services-v528 .sv-final-actions{display:flex;flex-direction:column;gap:10px;min-width:245px;position:relative;z-index:2}.services-v528 .sv-final-actions .btn{justify-content:center} @keyframes svGlow{to{transform:scale(1.15);opacity:.75}}@keyframes svGrid{to{background-position:52px 52px}}@keyframes svPulse{50%{transform:scale(1.5);box-shadow:0 0 18px var(--color-primary)}}@keyframes svOrbit{to{transform:rotate(360deg)}}@keyframes svFloat{50%{transform:translateY(-8px)}} @media(max-width:1000px){.services-v528 .sv-hero-layout,.services-v528 .sv-stack-shell,.services-v528 .sv-quality-layout{grid-template-columns:1fr;gap:40px}.services-v528 .sv-service-grid{grid-template-columns:repeat(2,1fr)}.services-v528 .sv-process-track{grid-template-columns:repeat(2,1fr)}.services-v528 .sv-quality-intro{position:static}.services-v528 .sv-stack-grid{grid-template-columns:repeat(4,1fr)}} @media(max-width:700px){.services-v528 .sv-hero{padding:105px 0 65px;min-height:0}.services-v528 .sv-hero-layout{margin-top:20px}.services-v528 .sv-hero h1{font-size:clamp(2.65rem,13vw,4rem)}.services-v528 .sv-hero-actions .btn{width:100%;justify-content:center}.services-v528 .sv-command-card{padding:21px;border-radius:23px}.services-v528 .sv-command-orbit{height:235px}.services-v528 .sv-orbit-ring.r2{width:215px;height:215px}.services-v528 .sv-orbit-ring.r1{width:155px;height:155px}.services-v528 .sv-section-head{display:block}.services-v528 .sv-section-head>p{margin-top:18px}.services-v528 .sv-services,.services-v528 .sv-process,.services-v528 .sv-quality{padding:72px 0}.services-v528 .sv-service-grid,.services-v528 .sv-process-track{grid-template-columns:1fr}.services-v528 .sv-card{min-height:0}.services-v528 .sv-stack-grid{grid-template-columns:repeat(2,1fr)}.services-v528 .sv-stack-item{min-height:125px}.services-v528 .sv-quality-grid{grid-template-columns:1fr}.services-v528 .sv-final{padding:20px 0 70px}.services-v528 .sv-final-card{grid-template-columns:1fr;padding:30px 23px;border-radius:23px}.services-v528 .sv-final-actions{min-width:0}.services-v528 .sv-final-actions .btn{width:100%}.services-v528 .sv-mini-proof{gap:10px;flex-direction:column}} /* ========================================================= CONTACT PAGE v5.29 — PREMIUM CONVERSION EXPERIENCE ========================================================= */ .contact-v529{--cv-accent:var(--color-primary);overflow:hidden;background:var(--bg)} .contact-v529 .cv-hero{position:relative;min-height:650px;padding:105px 0 90px;background:var(--bg);isolation:isolate} .contact-v529 .cv-grid-bg{position:absolute;inset:0;opacity:.32;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to bottom,black,transparent 88%);animation:cvGridMove 18s linear infinite} .contact-v529 .cv-orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(2px);opacity:.18}.contact-v529 .cv-orb-a{width:480px;height:480px;right:-160px;top:-170px;background:radial-gradient(circle,var(--cv-accent),transparent 68%)}.contact-v529 .cv-orb-b{width:320px;height:320px;left:-180px;bottom:-120px;background:radial-gradient(circle,var(--cv-accent),transparent 68%)} .contact-v529 .cv-hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:center}.contact-v529 .cv-hero-copy{max-width:790px}.contact-v529 .cv-eyebrow{display:inline-flex;align-items:center;gap:9px;font:800 .67rem var(--font-heading);letter-spacing:.16em;color:var(--cv-accent);text-transform:uppercase}.contact-v529 .cv-eyebrow>span{display:block;width:28px;height:2px;background:var(--cv-accent);box-shadow:0 0 14px var(--cv-accent)} .contact-v529 .cv-hero h1{font-size:clamp(3.3rem,6vw,6.3rem);line-height:.92;letter-spacing:-.065em;margin:22px 0 26px;max-width:850px}.contact-v529 em{font-style:normal;color:var(--cv-accent)}.contact-v529 .cv-hero p{max-width:680px;color:var(--muted);font-size:1rem;line-height:1.9}.contact-v529 .cv-hero-actions{display:flex;align-items:center;gap:22px;margin-top:32px}.contact-v529 .cv-hero-actions .btn{min-height:52px}.contact-v529 .cv-text-link{display:inline-flex;align-items:center;gap:8px;color:var(--text);font-size:.78rem;font-weight:800}.contact-v529 .cv-text-link svg{width:18px}.contact-v529 .cv-proof{display:flex;align-items:center;gap:9px;margin-top:25px;color:var(--muted);font-size:.7rem}.contact-v529 .cv-proof strong{color:var(--text)}.contact-v529 .cv-proof-dot{width:8px;height:8px;border-radius:50%;background:#35d07f;box-shadow:0 0 14px #35d07f;animation:cvPulse 2s infinite} .contact-v529 .cv-hero-panel{position:relative;overflow:hidden;padding:34px;border:1px solid color-mix(in srgb,var(--cv-accent) 35%,var(--border));border-radius:30px;background:linear-gradient(145deg,color-mix(in srgb,var(--cv-accent) 8%,var(--surface)),var(--surface));box-shadow:0 35px 100px rgba(0,0,0,.18)}.contact-v529 .cv-hero-panel:after{content:"";position:absolute;width:190px;height:190px;right:-90px;top:-90px;border-radius:50%;background:var(--cv-accent);opacity:.09;filter:blur(10px)}.contact-v529 .cv-panel-top{display:flex;justify-content:space-between;color:var(--muted);font:800 .58rem var(--font-heading);letter-spacing:.13em}.contact-v529 .cv-live{display:flex;align-items:center;gap:7px;color:#35d07f}.contact-v529 .cv-live i{width:6px;height:6px;border-radius:50%;background:#35d07f;box-shadow:0 0 10px #35d07f}.contact-v529 .cv-panel-icon{width:62px;height:62px;display:grid;place-items:center;margin:52px 0 23px;border-radius:18px;color:var(--cv-accent);background:color-mix(in srgb,var(--cv-accent) 11%,var(--surface));border:1px solid color-mix(in srgb,var(--cv-accent) 28%,var(--border))}.contact-v529 .cv-panel-icon svg{width:28px;height:28px}.contact-v529 .cv-hero-panel h2{font-size:1.8rem;margin:0 0 10px}.contact-v529 .cv-hero-panel p{font-size:.78rem;line-height:1.75;color:var(--muted);margin:0}.contact-v529 .cv-mini-list{display:grid;gap:11px;margin:25px 0}.contact-v529 .cv-mini-list div{display:flex;align-items:center;gap:10px;font-size:.72rem;font-weight:700}.contact-v529 .cv-mini-list span{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:color-mix(in srgb,var(--cv-accent) 12%,var(--surface));color:var(--cv-accent)}.contact-v529 .cv-mini-list svg{width:11px}.contact-v529 .cv-panel-line{display:flex;align-items:center;gap:9px;color:var(--cv-accent);font:800 .6rem var(--font-heading)}.contact-v529 .cv-panel-line span{height:1px;flex:1;background:var(--border)} .contact-v529 .cv-contact-strip{position:relative;z-index:3;margin-top:-1px;padding:0 0 20px;background:var(--bg)}.contact-v529 .cv-contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.contact-v529 .cv-contact-card{display:flex;align-items:center;gap:12px;min-width:0;padding:19px;border:1px solid var(--border);border-radius:18px;background:var(--surface);transition:.3s}.contact-v529 a.cv-contact-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--cv-accent) 42%,var(--border));box-shadow:0 18px 45px rgba(0,0,0,.12)}.contact-v529 .cv-contact-icon{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--cv-accent) 10%,var(--bg));color:var(--cv-accent)}.contact-v529 .cv-contact-icon.whatsapp{color:#35d07f}.contact-v529 .cv-contact-icon svg{width:17px}.contact-v529 .cv-contact-card span:nth-child(2){min-width:0;display:flex;flex-direction:column;gap:5px}.contact-v529 .cv-contact-card small{font:800 .52rem var(--font-heading);letter-spacing:.12em;color:var(--muted)}.contact-v529 .cv-contact-card strong{font-size:.73rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contact-v529 .cv-contact-card>b{margin-left:auto;color:var(--muted);font-size:1rem} .contact-v529 .cv-form-section{padding:105px 0;background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.contact-v529 .cv-section-heading{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:40px}.contact-v529 .cv-section-heading h2{font-size:clamp(2.4rem,4vw,4rem);line-height:.98;letter-spacing:-.05em;margin:13px 0 0}.contact-v529 .cv-section-heading>p{max-width:440px;color:var(--muted);font-size:.8rem;line-height:1.8}.contact-v529 .cv-section-heading.center{display:block;text-align:center}.contact-v529 .cv-section-heading.center .cv-eyebrow{justify-content:center}.contact-v529 .cv-section-heading.center>p{margin:18px auto 0}.contact-v529 .cv-alert{display:flex;gap:13px;padding:16px 19px;margin:-12px 0 28px;border-radius:16px;border:1px solid}.contact-v529 .cv-alert.success{color:#35d07f;background:rgba(53,208,127,.08);border-color:rgba(53,208,127,.24)}.contact-v529 .cv-alert.error{color:#ff6a6a;background:rgba(255,90,90,.08);border-color:rgba(255,90,90,.22)}.contact-v529 .cv-alert svg{width:18px;flex:none}.contact-v529 .cv-alert div{display:grid;gap:3px}.contact-v529 .cv-alert strong{font-size:.78rem;color:var(--text)}.contact-v529 .cv-alert span{font-size:.68rem;color:var(--muted)} .contact-v529 .cv-form-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,.6fr);gap:18px;align-items:start}.contact-v529 .cv-form-card,.contact-v529 .cv-side-card{border:1px solid var(--border);border-radius:25px;background:var(--bg);box-shadow:0 20px 70px rgba(0,0,0,.08)}.contact-v529 .cv-form-card{padding:34px}.contact-v529 .cv-form-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:25px;border-bottom:1px solid var(--border)}.contact-v529 .cv-form-head span{font:800 .56rem var(--font-heading);letter-spacing:.14em;color:var(--cv-accent)}.contact-v529 .cv-form-head h3{margin:6px 0 0;font-size:1.45rem}.contact-v529 .cv-secure{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.6rem;font-weight:700}.contact-v529 .cv-secure svg{width:14px;color:var(--cv-accent)}.contact-v529 .cv-wizard{padding-top:28px}.contact-v529 .cv-wizard-progress{display:flex;align-items:center;gap:10px;margin-bottom:34px}.contact-v529 .cv-wizard-progress>i{height:1px;flex:1;background:var(--border)}.contact-v529 .cv-step-label{display:flex;align-items:center;gap:7px;color:var(--muted)}.contact-v529 .cv-step-label span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--border);font:800 .62rem var(--font-heading)}.contact-v529 .cv-step-label small{font-size:.58rem;font-weight:700}.contact-v529 .cv-wizard .wizard-dot{display:none}.contact-v529 .cv-wizard .wizard-progress .cv-step-label.active span,.contact-v529 .cv-wizard .wizard-progress .cv-step-label.done span{background:var(--cv-accent);border-color:var(--cv-accent);color:#fff}.contact-v529 .cv-wizard .wizard-step{display:none}.contact-v529 .cv-wizard .wizard-step.active{display:block;animation:cvFade .35s ease}.contact-v529 .cv-step-title{display:flex;gap:15px;align-items:flex-start;margin-bottom:26px}.contact-v529 .cv-step-title>span{color:var(--cv-accent);font:900 .75rem var(--font-heading);padding-top:3px}.contact-v529 .cv-step-title h4{font-size:1.12rem;margin:0 0 5px}.contact-v529 .cv-step-title p{font-size:.7rem;color:var(--muted);margin:0}.contact-v529 .cv-form-card label{font-size:.66rem;font-weight:800;color:var(--text)}.contact-v529 .cv-form-card label b{color:var(--cv-accent)}.contact-v529 .cv-form-card input,.contact-v529 .cv-form-card select,.contact-v529 .cv-form-card textarea{width:100%;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:12px;padding:13px 14px;margin-top:8px;font:500 .72rem var(--font-body);outline:none;transition:.25s}.contact-v529 .cv-form-card input:focus,.contact-v529 .cv-form-card select:focus,.contact-v529 .cv-form-card textarea:focus{border-color:color-mix(in srgb,var(--cv-accent) 55%,var(--border));box-shadow:0 0 0 4px color-mix(in srgb,var(--cv-accent) 8%,transparent)}.contact-v529 .cv-form-card textarea{resize:vertical;min-height:160px}.contact-v529 .cv-form-card .field{margin-bottom:18px}.contact-v529 .cv-form-card .form-row{gap:14px}.contact-v529 .cv-budget{margin:5px 0 22px}.contact-v529 .cv-budget>label{display:block;margin-bottom:10px}.contact-v529 .cv-budget-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.contact-v529 .cv-budget-grid label{position:relative}.contact-v529 .cv-budget-grid input{position:absolute;opacity:0;pointer-events:none}.contact-v529 .cv-budget-grid span{display:grid;place-items:center;min-height:47px;padding:8px;border:1px solid var(--border);border-radius:11px;color:var(--muted);text-align:center;font-size:.61rem;font-weight:700;cursor:pointer;transition:.25s}.contact-v529 .cv-budget-grid input:checked+span{color:var(--cv-accent);border-color:color-mix(in srgb,var(--cv-accent) 50%,var(--border));background:color-mix(in srgb,var(--cv-accent) 8%,var(--surface))}.contact-v529 .cv-form-card .wizard-actions{display:flex;gap:10px;margin-top:25px}.contact-v529 .cv-form-card .wizard-actions .btn{min-height:48px}.contact-v529 .cv-form-note{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.6rem;margin-top:16px}.contact-v529 .cv-form-note svg{width:13px;color:var(--cv-accent);flex:none}.contact-v529 .field-error{display:block;color:#ff6666;font-size:.58rem;margin-top:5px}.contact-v529 .cv-form-card .invalid{border-color:#ff6666!important} .contact-v529 .cv-side-column{display:grid;gap:18px}.contact-v529 .cv-side-card{padding:28px}.contact-v529 .cv-side-card.cv-side-dark{color:#fff;background:#101318;border-color:#20252d}.contact-v529 .cv-side-number{display:block;color:var(--cv-accent);font:900 .58rem var(--font-heading);letter-spacing:.12em}.contact-v529 .cv-side-icon{display:grid;place-items:center;width:46px;height:46px;margin:25px 0 18px;border-radius:14px;color:var(--cv-accent);background:color-mix(in srgb,var(--cv-accent) 10%,var(--surface))}.contact-v529 .cv-side-icon svg{width:19px}.contact-v529 .cv-side-card h3{font-size:1.15rem;margin:0 0 9px}.contact-v529 .cv-side-card p{font-size:.7rem;line-height:1.8;color:var(--muted);margin:0 0 20px}.contact-v529 .cv-side-card a{display:flex;align-items:center;gap:7px;color:var(--cv-accent);font-size:.67rem;font-weight:900}.contact-v529 .cv-side-card a svg{width:14px}.contact-v529 .cv-side-card form{margin-top:20px}.contact-v529 .cv-side-card .field{margin-bottom:12px}.contact-v529 .cv-side-card .form-row{gap:9px}.contact-v529 .cv-side-card input{padding:11px 12px;font-size:.65rem}.contact-v529 .cv-side-card .btn{margin-top:5px;min-height:44px}.contact-v529 .cv-booking-msg{min-height:18px!important;margin:8px 0 0!important;font-size:.6rem!important} .contact-v529 .cv-process{padding:105px 0}.contact-v529 .cv-process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.contact-v529 .cv-process-grid>div{position:relative;padding:30px;border:1px solid var(--border);border-radius:22px;background:var(--surface);transition:.35s}.contact-v529 .cv-process-grid>div:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--cv-accent) 35%,var(--border));box-shadow:0 25px 60px rgba(0,0,0,.1)}.contact-v529 .cv-process-grid b{position:absolute;right:23px;top:23px;color:var(--muted);font:900 .58rem var(--font-heading)}.contact-v529 .cv-process-grid span{display:grid;place-items:center;width:48px;height:48px;margin-bottom:24px;border-radius:14px;color:var(--cv-accent);background:color-mix(in srgb,var(--cv-accent) 10%,var(--bg))}.contact-v529 .cv-process-grid span svg{width:19px}.contact-v529 .cv-process-grid h3{font-size:1rem;margin:0 0 8px}.contact-v529 .cv-process-grid p{font-size:.7rem;line-height:1.8;color:var(--muted);margin:0} .contact-v529 .cv-map-section{padding:0 0 105px}.contact-v529 .cv-map-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:35px;align-items:stretch}.contact-v529 .cv-map-copy{padding:42px;border:1px solid var(--border);border-radius:25px;background:var(--surface)}.contact-v529 .cv-map-copy h2{font-size:clamp(2rem,3.4vw,3.4rem);line-height:1;letter-spacing:-.045em;margin:15px 0 18px}.contact-v529 .cv-map-copy p{font-size:.76rem;line-height:1.85;color:var(--muted)}.contact-v529 .cv-location-line{display:flex;align-items:center;gap:10px;padding-top:18px;margin-top:16px;border-top:1px solid var(--border);font-size:.68rem}.contact-v529 .cv-location-line svg{width:16px;color:var(--cv-accent)}.contact-v529 .cv-map{margin:0;border-radius:25px;min-height:330px}.contact-v529 .cv-map iframe{height:100%;min-height:330px;filter:grayscale(.25) contrast(1.05)} .contact-v529 .cv-final{padding:0 0 105px}.contact-v529 .cv-final-card{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr auto;align-items:center;gap:50px;padding:55px;border-radius:30px;background:linear-gradient(135deg,color-mix(in srgb,var(--cv-accent) 12%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--cv-accent) 32%,var(--border))}.contact-v529 .cv-final-card:after{content:"";position:absolute;width:350px;height:350px;right:-170px;top:-170px;border-radius:50%;background:var(--cv-accent);opacity:.08;filter:blur(8px)}.contact-v529 .cv-final-card h2{font-size:clamp(2.4rem,4vw,4.2rem);line-height:.95;letter-spacing:-.05em;margin:14px 0}.contact-v529 .cv-final-card p{font-size:.78rem;color:var(--muted);line-height:1.8;max-width:560px}.contact-v529 .cv-final-actions{display:grid;gap:10px;min-width:230px;position:relative;z-index:2}.contact-v529 .cv-final-actions .btn{justify-content:center;min-height:49px} @keyframes cvGridMove{to{background-position:54px 54px}}@keyframes cvPulse{50%{transform:scale(1.35);opacity:.65}}@keyframes cvFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @media(max-width:1000px){.contact-v529 .cv-hero-inner{grid-template-columns:1fr;gap:45px}.contact-v529 .cv-hero-panel{max-width:650px}.contact-v529 .cv-contact-grid{grid-template-columns:repeat(2,1fr)}.contact-v529 .cv-form-layout,.contact-v529 .cv-map-layout{grid-template-columns:1fr}.contact-v529 .cv-side-column{grid-template-columns:1fr 1fr}.contact-v529 .cv-map-copy{padding:32px}.contact-v529 .cv-budget-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:700px){.contact-v529 .cv-hero{padding:90px 0 65px}.contact-v529 .cv-hero h1{font-size:clamp(2.75rem,14vw,4.2rem)}.contact-v529 .cv-hero-actions{align-items:stretch;flex-direction:column;gap:15px}.contact-v529 .cv-hero-actions .btn{width:100%;justify-content:center}.contact-v529 .cv-proof{flex-wrap:wrap}.contact-v529 .cv-hero-panel{padding:25px;border-radius:22px}.contact-v529 .cv-panel-icon{margin-top:35px}.contact-v529 .cv-contact-grid{grid-template-columns:1fr}.contact-v529 .cv-section-heading{display:block;margin-bottom:30px}.contact-v529 .cv-section-heading>p{margin-top:18px}.contact-v529 .cv-form-section,.contact-v529 .cv-process{padding:72px 0}.contact-v529 .cv-form-card{padding:21px;border-radius:21px}.contact-v529 .cv-form-head{align-items:flex-start;gap:15px}.contact-v529 .cv-secure{font-size:.52rem}.contact-v529 .cv-wizard-progress{gap:5px}.contact-v529 .cv-step-label small{display:none}.contact-v529 .cv-step-label span{width:28px;height:28px}.contact-v529 .cv-budget-grid{grid-template-columns:repeat(2,1fr)}.contact-v529 .cv-side-column{grid-template-columns:1fr}.contact-v529 .cv-process-grid{grid-template-columns:1fr}.contact-v529 .cv-map-section{padding-bottom:72px}.contact-v529 .cv-map-layout{gap:15px}.contact-v529 .cv-map-copy{padding:26px}.contact-v529 .cv-map{min-height:280px}.contact-v529 .cv-map iframe{min-height:280px}.contact-v529 .cv-final{padding-bottom:72px}.contact-v529 .cv-final-card{grid-template-columns:1fr;padding:32px 24px;border-radius:23px}.contact-v529 .cv-final-actions{min-width:0}.contact-v529 .cv-final-actions .btn{width:100%}} /* ========================================================= FAQ V5.30 — PREMIUM FAQ EXPERIENCE ========================================================= */ .faq-v530{--faq-accent:var(--color-primary);background:var(--bg);color:var(--text);overflow:hidden}.faq-v530 .container{position:relative;z-index:2}.faq-v530-hero{position:relative;min-height:660px;display:flex;align-items:center;padding:110px 0 80px;border-bottom:1px solid var(--border);isolation:isolate}.faq-v530-grid{position:absolute;inset:0;opacity:.34;background-image:linear-gradient(to right,color-mix(in srgb,var(--text) 6%,transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in srgb,var(--text) 6%,transparent) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(90deg,#000,transparent 85%);animation:faqGrid 18s linear infinite}.faq-v530-orb{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none}.faq-v530-orb-a{width:390px;height:390px;right:8%;top:8%;background:color-mix(in srgb,var(--faq-accent) 10%,transparent);box-shadow:0 0 100px color-mix(in srgb,var(--faq-accent) 12%,transparent);animation:faqFloat 7s ease-in-out infinite}.faq-v530-orb-b{width:180px;height:180px;left:-80px;bottom:5%;background:color-mix(in srgb,var(--faq-accent) 8%,transparent);animation:faqFloat 9s ease-in-out infinite reverse}.faq-v530-hero-inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.65fr);gap:80px;align-items:center}.faq-v530-hero-copy .breadcrumbs{margin-bottom:34px}.faq-v530-eyebrow{display:flex;align-items:center;gap:9px;font:800 .63rem var(--font-heading);letter-spacing:.15em;color:var(--muted);margin-bottom:18px}.faq-v530-eyebrow span{width:7px;height:7px;border-radius:50%;background:var(--faq-accent);box-shadow:0 0 18px var(--faq-accent)}.faq-v530 h1{font-size:clamp(3.5rem,7vw,7rem);line-height:.87;letter-spacing:-.065em;margin:0}.faq-v530 h1 em,.faq-v530-section-head h2 em,.faq-v530-bottom-card h2 em{font-style:normal;color:var(--faq-accent)}.faq-v530-hero-copy>p{max-width:600px;color:var(--muted);font-size:.95rem;line-height:1.85;margin:25px 0 29px}.faq-v530-hero-actions{display:flex;align-items:center;gap:24px}.faq-v530-text-link{font-size:.7rem;font-weight:900;color:var(--text);display:flex;align-items:center;gap:7px}.faq-v530-text-link svg{width:14px;color:var(--faq-accent)}.faq-v530-hero-card{position:relative;padding:30px;border:1px solid var(--border);border-radius:25px;background:color-mix(in srgb,var(--surface) 84%,transparent);box-shadow:var(--shadow-lg);backdrop-filter:blur(18px);animation:faqCard 5s ease-in-out infinite}.faq-v530-card-top{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font:800 .56rem var(--font-heading);letter-spacing:.1em}.faq-v530-status{display:flex;align-items:center;gap:7px;color:var(--text)}.faq-v530-status i{width:7px;height:7px;border-radius:50%;background:#35c86f;box-shadow:0 0 12px #35c86f}.faq-v530-card-icon{display:grid;place-items:center;width:58px;height:58px;margin:82px 0 22px;border-radius:17px;color:var(--faq-accent);background:color-mix(in srgb,var(--faq-accent) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--faq-accent) 20%,var(--border))}.faq-v530-card-icon svg{width:24px}.faq-v530-hero-card>strong{font:900 1.05rem var(--font-heading)}.faq-v530-hero-card>p{font-size:.7rem;line-height:1.8;color:var(--muted);margin:9px 0 25px}.faq-v530-mini-row{display:flex;align-items:center;gap:11px;padding-top:18px;border-top:1px solid var(--border)}.faq-v530-mini-row span{font:900 1.7rem var(--font-heading);color:var(--faq-accent)}.faq-v530-mini-row small{font-size:.55rem;line-height:1.4;color:var(--muted);font-weight:800}.faq-v530-library{padding:110px 0 100px}.faq-v530-section-head{display:grid;grid-template-columns:1fr .65fr;gap:60px;align-items:end;margin-bottom:42px}.faq-v530-section-head h2{font-size:clamp(2.5rem,5vw,4.7rem);line-height:.92;letter-spacing:-.055em;margin:14px 0 0}.faq-v530-section-head>p{max-width:440px;margin:0;color:var(--muted);font-size:.76rem;line-height:1.85}.faq-v530-tools{padding:18px;border:1px solid var(--border);border-radius:20px;background:var(--surface);margin-bottom:25px}.faq-v530-search{display:flex;align-items:center;gap:12px;padding:3px 7px 15px;border-bottom:1px solid var(--border)}.faq-v530-search svg{width:17px;color:var(--faq-accent);flex:none}.faq-v530-search input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--text);font:500 .76rem var(--font-body)}.faq-v530-search input::placeholder{color:var(--muted)}.faq-v530-search>span{font-size:.58rem;font-weight:800;color:var(--muted);white-space:nowrap}.faq-v530-filters{display:flex;gap:7px;flex-wrap:wrap;padding-top:13px}.faq-v530-filter{border:1px solid var(--border);background:transparent;color:var(--muted);border-radius:999px;padding:8px 13px;font:800 .57rem var(--font-body);cursor:pointer;transition:.25s}.faq-v530-filter:hover,.faq-v530-filter.is-active{background:var(--text);color:var(--bg);border-color:var(--text)}.faq-v530-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:35px;align-items:start}.faq-v530-list{border-top:1px solid var(--border)}.faq-v530-item{border-bottom:1px solid var(--border);transition:.3s}.faq-v530-item[hidden]{display:none}.faq-v530-question{width:100%;display:grid;grid-template-columns:45px 1fr 28px;gap:17px;align-items:center;text-align:left;padding:25px 5px;background:transparent;border:0;color:var(--text);cursor:pointer}.faq-v530-index{font:800 .58rem var(--font-heading);color:var(--faq-accent)}.faq-v530-question-copy{display:grid;gap:7px}.faq-v530-question-copy small{font-size:.53rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:var(--muted)}.faq-v530-question-copy strong{font:800 .92rem var(--font-heading);line-height:1.4}.faq-v530-plus{position:relative;width:28px;height:28px;border:1px solid var(--border);border-radius:50%;transition:.3s}.faq-v530-plus i{position:absolute;left:8px;right:8px;top:13px;height:1px;background:currentColor;transition:.3s}.faq-v530-plus i:last-child{transform:rotate(90deg)}.faq-v530-question[aria-expanded=true] .faq-v530-plus{background:var(--faq-accent);border-color:var(--faq-accent);color:#fff;transform:rotate(180deg)}.faq-v530-question[aria-expanded=true] .faq-v530-plus i:last-child{transform:rotate(0)}.faq-v530-answer{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .35s ease;padding-left:62px}.faq-v530-answer>div{min-height:0;overflow:hidden;padding-right:55px}.faq-v530-answer p{font-size:.73rem;line-height:1.85;color:var(--muted);margin:0 0 18px}.faq-v530-answer a{display:inline-flex;align-items:center;gap:7px;color:var(--faq-accent);font-size:.62rem;font-weight:900;padding-bottom:25px}.faq-v530-answer a svg{width:13px}.faq-v530-sidebar{display:grid;gap:14px;position:sticky;top:92px}.faq-v530-side-card{padding:25px;border:1px solid var(--border);border-radius:20px;background:var(--surface)}.faq-v530-side-dark{background:#101318;border-color:#20252d;color:#fff}.faq-v530-side-kicker{font:800 .54rem var(--font-heading);letter-spacing:.1em;color:var(--muted)}.faq-v530-side-dark .faq-v530-side-kicker{color:#8e959f}.faq-v530-side-icon{display:grid;place-items:center;width:43px;height:43px;margin:48px 0 17px;border-radius:13px;background:color-mix(in srgb,var(--faq-accent) 12%,transparent);color:var(--faq-accent)}.faq-v530-side-icon svg{width:18px}.faq-v530-side-card h3{font:900 1rem var(--font-heading);margin:0 0 8px}.faq-v530-side-card p{font-size:.68rem;line-height:1.8;color:var(--muted);margin:0 0 17px}.faq-v530-side-card a{display:flex;align-items:center;gap:7px;color:var(--faq-accent);font-size:.61rem;font-weight:900}.faq-v530-side-card a svg{width:13px}.faq-v530-side-card ul{display:grid;gap:14px;margin:28px 0 0;padding:0;list-style:none}.faq-v530-side-card li{display:flex;align-items:center;gap:9px;font-size:.62rem;font-weight:700}.faq-v530-side-card li svg{width:16px;height:16px;color:var(--faq-accent);flex:none}.faq-v530-empty{text-align:center;padding:65px 20px;border:1px dashed var(--border);border-radius:20px;margin-top:20px}.faq-v530-empty svg{width:25px;color:var(--faq-accent);margin-bottom:12px}.faq-v530-empty strong{display:block;font:900 1rem var(--font-heading)}.faq-v530-empty p{font-size:.68rem;color:var(--muted);margin:7px 0 18px}.faq-v530-bottom{padding:0 0 105px}.faq-v530-bottom-card{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr auto;gap:45px;align-items:center;padding:55px;border:1px solid color-mix(in srgb,var(--faq-accent) 30%,var(--border));border-radius:28px;background:linear-gradient(135deg,color-mix(in srgb,var(--faq-accent) 10%,var(--surface)),var(--surface))}.faq-v530-bottom-card:after{content:"";position:absolute;width:300px;height:300px;right:-130px;bottom:-170px;border-radius:50%;background:var(--faq-accent);opacity:.08;filter:blur(8px)}.faq-v530-bottom-card h2{font-size:clamp(2.4rem,4vw,4.2rem);line-height:.93;letter-spacing:-.055em;margin:13px 0}.faq-v530-bottom-card p{max-width:560px;color:var(--muted);font-size:.73rem;line-height:1.8}.faq-v530-bottom-actions{position:relative;z-index:2;display:grid;gap:9px;min-width:210px}.faq-v530-bottom-actions .btn,.faq-v530-outline{min-height:48px;justify-content:center}.faq-v530-outline{display:flex;align-items:center;gap:7px;border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:.64rem;font-weight:900}.faq-v530-outline svg{width:15px;color:var(--faq-accent)} @keyframes faqGrid{to{background-position:54px 54px}}@keyframes faqFloat{50%{transform:translate3d(0,-18px,0)}}@keyframes faqCard{50%{transform:translateY(-6px)}} @media(max-width:950px){.faq-v530-hero-inner{grid-template-columns:1fr;gap:50px}.faq-v530-hero-card{max-width:620px}.faq-v530-section-head{grid-template-columns:1fr;gap:18px}.faq-v530-layout{grid-template-columns:1fr}.faq-v530-sidebar{position:static;grid-template-columns:1fr 1fr}.faq-v530-bottom-card{grid-template-columns:1fr}} @media(max-width:650px){.faq-v530-hero{min-height:auto;padding:75px 0 65px}.faq-v530-hero-copy .breadcrumbs{margin-bottom:25px}.faq-v530 h1{font-size:clamp(3rem,16vw,5rem)}.faq-v530-hero-copy>p{font-size:.83rem}.faq-v530-hero-actions{align-items:stretch;flex-direction:column;gap:14px}.faq-v530-hero-actions .btn{width:100%;justify-content:center}.faq-v530-text-link{justify-content:center}.faq-v530-hero-card{padding:23px}.faq-v530-card-icon{margin-top:60px}.faq-v530-library{padding:75px 0}.faq-v530-section-head h2{font-size:2.8rem}.faq-v530-tools{padding:13px;border-radius:16px}.faq-v530-search{align-items:flex-start;flex-wrap:wrap}.faq-v530-search input{flex-basis:calc(100% - 30px)}.faq-v530-search>span{width:100%;padding-left:29px}.faq-v530-filters{flex-wrap:nowrap;overflow:auto;padding-bottom:2px}.faq-v530-filter{white-space:nowrap}.faq-v530-question{grid-template-columns:28px 1fr 28px;gap:10px;padding:20px 2px}.faq-v530-question-copy strong{font-size:.78rem}.faq-v530-answer{padding-left:38px}.faq-v530-answer>div{padding-right:15px}.faq-v530-sidebar{grid-template-columns:1fr}.faq-v530-bottom{padding-bottom:70px}.faq-v530-bottom-card{padding:30px 23px;border-radius:22px}.faq-v530-bottom-actions{min-width:0}} /* ========================================================= v5.31 — PREMIUM PORTFOLIO HUB + SEPARATE CATEGORY PAGES ========================================================= */ .portfolio-v531,.portfolio-category-v531{position:relative;overflow:hidden} .portfolio-hero{position:relative;padding:150px 0 95px;background:radial-gradient(circle at 82% 25%,color-mix(in srgb,var(--color-primary) 12%,transparent),transparent 30%),var(--bg);border-bottom:1px solid var(--border)} .portfolio-grid-lines{position:absolute;inset:0;opacity:.35;background-image:linear-gradient(to right,color-mix(in srgb,var(--border) 65%,transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in srgb,var(--border) 65%,transparent) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,black,transparent 90%);pointer-events:none} .portfolio-hero-inner{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:70px;align-items:center} .portfolio-hero-copy .section-label{margin-top:20px}.portfolio-hero-copy h1{max-width:780px;font-size:clamp(3.2rem,6vw,6.4rem);line-height:.94;letter-spacing:-.055em;margin:18px 0 24px}.portfolio-hero-copy h1 em{font-style:normal;color:var(--color-primary)}.portfolio-hero-copy>p{max-width:690px;font-size:1.08rem;line-height:1.8;color:var(--text-muted)} .portfolio-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.portfolio-hero-panel{position:relative;border:1px solid var(--border);border-radius:28px;padding:28px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 95%,transparent),color-mix(in srgb,var(--surface) 72%,transparent));box-shadow:0 30px 90px rgba(0,0,0,.16);min-height:390px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.portfolio-hero-panel:after{content:"";position:absolute;width:190px;height:190px;border-radius:50%;right:-75px;top:-70px;background:color-mix(in srgb,var(--color-primary) 15%,transparent);filter:blur(5px)}.portfolio-panel-top,.portfolio-panel-bottom{display:flex;align-items:center;justify-content:space-between;font-size:.7rem;letter-spacing:.14em;color:var(--text-muted);font-weight:800}.portfolio-panel-top span:last-child{padding:6px 9px;border:1px solid var(--border);border-radius:999px}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 14px var(--color-primary);margin-right:auto}.portfolio-panel-number{font-size:clamp(6rem,13vw,10rem);line-height:.8;letter-spacing:-.08em;font-weight:900;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--color-primary) 60%,var(--border));opacity:.72}.portfolio-hero-panel>p{font-weight:800;font-size:1.05rem}.portfolio-panel-tags{display:flex;gap:8px;flex-wrap:wrap}.portfolio-panel-tags span{font-size:.72rem;padding:8px 10px;border:1px solid var(--border);border-radius:999px;color:var(--text-muted)}.portfolio-panel-bottom{padding-top:16px;border-top:1px solid var(--border)} .portfolio-category-section{padding:105px 0}.portfolio-section-head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:42px}.portfolio-section-head h2{font-size:clamp(2.2rem,4vw,4rem);letter-spacing:-.045em;margin:8px 0 0}.portfolio-section-head>p{max-width:470px;color:var(--text-muted);line-height:1.75}.portfolio-category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.portfolio-category-card{position:relative;min-height:310px;padding:28px;border:1px solid var(--border);border-radius:24px;background:var(--surface);display:flex;flex-direction:column;text-decoration:none;color:inherit;overflow:hidden;transition:transform .4s var(--pro-ease),border-color .35s ease,box-shadow .4s ease}.portfolio-category-card:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 9%,transparent),transparent 45%);opacity:0;transition:opacity .35s ease}.portfolio-category-card:hover{transform:translateY(-9px);border-color:color-mix(in srgb,var(--color-primary) 50%,var(--border));box-shadow:0 28px 70px rgba(0,0,0,.14)}.portfolio-category-card:hover:before{opacity:1}.category-card-index,.category-card-text,.category-card-title,.category-card-icon,.category-card-footer{position:relative}.category-card-index{font-size:.67rem;font-weight:900;letter-spacing:.15em;color:var(--text-muted)}.category-card-icon{width:56px;height:56px;margin:35px 0 22px;display:grid;place-items:center;border-radius:16px;background:color-mix(in srgb,var(--surface-2) 85%,transparent);border:1px solid var(--border)}.category-card-icon svg{width:31px;height:31px}.category-card-title{font-size:1.55rem;font-weight:900;letter-spacing:-.025em}.category-card-text{font-size:.92rem;line-height:1.65;color:var(--text-muted);margin-top:9px;max-width:380px}.category-card-footer{margin-top:auto;padding-top:24px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border)}.category-card-footer b{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}.category-card-footer span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border)}.category-card-footer svg{width:15px} .portfolio-feature-strip{padding:0 0 105px}.portfolio-feature-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);border-radius:24px;overflow:hidden}.portfolio-feature-item{padding:25px;display:flex;gap:15px;background:var(--surface);border-right:1px solid var(--border)}.portfolio-feature-item:last-child{border-right:0}.portfolio-feature-item>span{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--border);border-radius:11px;flex:0 0 auto}.portfolio-feature-item svg{width:19px}.portfolio-feature-item strong{display:block;font-size:.88rem}.portfolio-feature-item small{display:block;color:var(--text-muted);font-size:.74rem;line-height:1.5;margin-top:5px} .portfolio-cta-section{padding:0 0 110px}.portfolio-cta-card{position:relative;overflow:hidden;padding:52px;border:1px solid var(--border);border-radius:28px;background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 9%,var(--surface)),var(--surface));display:flex;align-items:center;justify-content:space-between;gap:40px}.portfolio-cta-card:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-110px;bottom:-150px;background:color-mix(in srgb,var(--color-primary) 18%,transparent);filter:blur(20px)}.portfolio-cta-card h2{font-size:clamp(2rem,4vw,3.5rem);letter-spacing:-.04em;margin:8px 0}.portfolio-cta-card p{color:var(--text-muted);max-width:600px}.portfolio-cta-card .cta-actions{position:relative;z-index:1;display:flex;gap:10px;flex-wrap:wrap} .category-hero-v531{position:relative;padding:145px 0 85px;background:radial-gradient(circle at 78% 35%,color-mix(in srgb,var(--color-primary) 13%,transparent),transparent 30%),var(--bg);border-bottom:1px solid var(--border)}.category-hero-glow{position:absolute;inset:0;background-image:linear-gradient(115deg,transparent 0 48%,color-mix(in srgb,var(--color-primary) 7%,transparent) 50%,transparent 52%);opacity:.45;pointer-events:none}.category-hero-inner{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:70px;align-items:center}.category-hero-copy h1{font-size:clamp(3rem,6vw,5.8rem);line-height:.95;letter-spacing:-.055em;margin:18px 0 22px}.category-hero-copy>p{max-width:690px;color:var(--text-muted);font-size:1.05rem;line-height:1.8}.category-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.category-hero-card{border:1px solid var(--border);border-radius:28px;background:var(--surface);padding:30px;box-shadow:0 30px 90px rgba(0,0,0,.14)}.category-icon-large{width:74px;height:74px;border-radius:20px;border:1px solid var(--border);display:grid;place-items:center;background:color-mix(in srgb,var(--surface-2) 85%,transparent);margin-bottom:55px}.category-icon-large svg{width:42px;height:42px}.category-hero-card>span{display:block;font-size:.66rem;font-weight:900;letter-spacing:.16em;color:var(--text-muted)}.category-hero-card>strong{display:block;font-size:1.75rem;margin:7px 0 35px}.category-stat-row{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--border);padding-top:18px;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.category-stat-row b{color:var(--color-primary);font-size:1.1rem} .category-projects-v531{padding:100px 0}.category-projects-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:38px}.category-projects-head h2{font-size:clamp(2.1rem,4vw,3.6rem);letter-spacing:-.045em;margin:8px 0 0}.text-link{display:inline-flex;align-items:center;gap:8px;font-weight:800;text-decoration:none;color:inherit}.text-link:hover{color:var(--color-primary)}.category-project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.category-project-card{overflow:hidden;border:1px solid var(--border);border-radius:24px;background:var(--surface);transition:transform .4s var(--pro-ease),box-shadow .4s ease,border-color .3s ease}.category-project-card:hover{transform:translateY(-8px);border-color:color-mix(in srgb,var(--color-primary) 48%,var(--border));box-shadow:0 28px 75px rgba(0,0,0,.15)}.category-project-media{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}.category-project-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--pro-ease),filter .4s ease}.category-project-card:hover .category-project-media img{transform:scale(1.06);filter:saturate(1.06)}.category-project-overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.28);opacity:0;transition:opacity .35s ease}.category-project-card:hover .category-project-overlay{opacity:1}.category-project-overlay span{background:#fff;color:#111;border-radius:999px;padding:10px 15px;font-size:.74rem;font-weight:900;display:flex;align-items:center;gap:8px}.category-project-overlay svg{width:14px}.category-project-media .project-cat{position:absolute;left:14px;bottom:14px}.category-project-body{padding:24px}.category-project-kicker{display:flex;justify-content:space-between;font-size:.64rem;letter-spacing:.12em;color:var(--text-muted);font-weight:900}.category-project-body h3{font-size:1.35rem;letter-spacing:-.025em;margin:13px 0 9px}.category-project-body h3 a{color:inherit;text-decoration:none}.category-project-body p{color:var(--text-muted);font-size:.88rem;line-height:1.65;min-height:48px}.category-project-body .project-tech{margin:16px 0}.category-project-body .card-link{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:900}.category-project-body .card-link svg{width:15px}.category-pagination{margin-top:45px}.category-pagination ul{display:flex;justify-content:center;gap:8px;list-style:none;padding:0;margin:0}.category-pagination a,.category-pagination span{display:grid;place-items:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--border);border-radius:10px;text-decoration:none;color:inherit;font-size:.78rem}.category-pagination .current{background:var(--color-primary);color:#111;border-color:var(--color-primary)}.category-empty{text-align:center;border:1px dashed var(--border);border-radius:24px;padding:70px 25px}.category-empty>div{margin:0 auto 20px;width:60px;height:60px;display:grid;place-items:center;border:1px solid var(--border);border-radius:16px}.category-empty svg{width:34px;height:34px}.category-empty p{max-width:550px;margin:0 auto 24px;color:var(--text-muted);line-height:1.7} .category-process-v531{padding:95px 0;background:var(--surface)}.category-process-head{text-align:center;margin-bottom:40px}.category-process-head h2{font-size:clamp(2.2rem,4vw,3.7rem);letter-spacing:-.045em;margin:8px 0}.category-process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;border:1px solid var(--border);background:var(--border);border-radius:24px;overflow:hidden}.category-process-grid>div{background:var(--surface);padding:35px}.category-process-grid span{font-size:.7rem;font-weight:900;letter-spacing:.15em;color:var(--color-primary)}.category-process-grid h3{font-size:1.35rem;margin:38px 0 8px}.category-process-grid p{color:var(--text-muted);line-height:1.7;font-size:.9rem}.category-bottom-cta-v531{padding:100px 0} @media(max-width:980px){.portfolio-hero-inner,.category-hero-inner{grid-template-columns:1fr;gap:35px}.portfolio-hero-panel{min-height:330px}.portfolio-category-grid{grid-template-columns:repeat(2,1fr)}.portfolio-feature-grid{grid-template-columns:repeat(2,1fr)}.portfolio-feature-item:nth-child(2){border-right:0}.portfolio-feature-item:nth-child(-n+2){border-bottom:1px solid var(--border)}.category-project-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:700px){.portfolio-hero,.category-hero-v531{padding:115px 0 65px}.portfolio-hero-copy h1,.category-hero-copy h1{font-size:clamp(2.6rem,13vw,4.2rem)}.portfolio-section-head,.category-projects-head,.portfolio-cta-card{display:block}.portfolio-section-head>p{margin-top:18px}.portfolio-category-grid,.category-project-grid,.category-process-grid{grid-template-columns:1fr}.portfolio-feature-grid{grid-template-columns:1fr}.portfolio-feature-item{border-right:0!important;border-bottom:1px solid var(--border)}.portfolio-feature-item:last-child{border-bottom:0}.portfolio-cta-card{padding:30px}.portfolio-cta-card .cta-actions{margin-top:25px}.category-hero-card{padding:24px}.category-icon-large{margin-bottom:35px}.category-process-grid{gap:0}.category-process-grid>div{border-bottom:1px solid var(--border)}.category-process-grid>div:last-child{border-bottom:0}.category-pagination ul{flex-wrap:wrap}} @media(prefers-reduced-motion:reduce){.portfolio-category-card,.category-project-card,.category-project-media img{transition:none!important}} /* ======================================================================== v5.32 — Portfolio Pro Visual System Large real photographic visuals + dedicated category archives. ======================================================================== */ .portfolio-v532{--p32-line:color-mix(in srgb,var(--text) 12%,transparent);background:var(--bg);color:var(--text);overflow:hidden} .portfolio-v532-hero{position:relative;min-height:780px;padding:150px 0 85px;border-bottom:1px solid var(--border);isolation:isolate}.portfolio-v532-grid{position:absolute;inset:0;opacity:.22;background-image:linear-gradient(to right,var(--p32-line) 1px,transparent 1px),linear-gradient(to bottom,var(--p32-line) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(90deg,#000,transparent 80%);animation:p32Grid 20s linear infinite}.portfolio-v532-noise{position:absolute;inset:0;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}.portfolio-v532-hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(430px,.8fr);gap:90px;align-items:center}.portfolio-v532-copy .breadcrumbs{margin-bottom:30px}.portfolio-v532-kicker,.pc532-kicker{display:flex;align-items:center;gap:9px;font:900 .61rem var(--font-heading);letter-spacing:.15em;color:var(--muted);margin-bottom:18px}.portfolio-v532-kicker span{width:7px;height:7px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 18px var(--color-primary)}.portfolio-v532-copy h1{font-size:clamp(3.6rem,6.7vw,7rem);line-height:.88;letter-spacing:-.07em;margin:0;max-width:850px}.portfolio-v532-copy h1 em,.portfolio-v532-section-head h2 em,.portfolio-v532-showcase-head h2 em,.portfolio-v532-cta-card h2 em,.pc532-process-head h2 em,.pc532-bottom-card h2 em{font-style:normal;color:var(--color-primary)}.portfolio-v532-copy>p{max-width:690px;color:var(--muted);font-size:.94rem;line-height:1.9;margin:27px 0}.portfolio-v532-actions{display:flex;gap:12px;flex-wrap:wrap}.portfolio-v532-proof{display:flex;gap:20px;flex-wrap:wrap;margin-top:28px;color:var(--muted);font-size:.58rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase}.portfolio-v532-proof span{display:flex;align-items:center;gap:8px}.portfolio-v532-proof i{width:6px;height:6px;border-radius:50%;background:#39d276;box-shadow:0 0 12px #39d276}.portfolio-v532-hero-visual{position:relative}.portfolio-v532-main-image{position:relative;overflow:hidden;aspect-ratio:1/1.05;border-radius:28px;border:1px solid var(--border);box-shadow:0 35px 100px rgba(0,0,0,.22);background:var(--surface)}.portfolio-v532-main-image img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);filter:saturate(.92);animation:p32Photo 10s ease-in-out infinite alternate}.portfolio-v532-image-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.78) 100%)}.portfolio-v532-image-label{position:absolute;left:28px;right:28px;bottom:25px;color:#fff}.portfolio-v532-image-label span{display:block;font:900 .55rem var(--font-heading);letter-spacing:.16em;opacity:.7}.portfolio-v532-image-label strong{display:block;font:900 1.5rem var(--font-heading);margin-top:4px}.portfolio-v532-image-label small{display:block;opacity:.72;font-size:.62rem;margin-top:4px}.portfolio-v532-float-card{position:absolute;left:-38px;bottom:35px;padding:19px 21px;min-width:155px;background:var(--surface);border:1px solid var(--border);border-radius:17px;box-shadow:0 20px 60px rgba(0,0,0,.2);animation:p32Float 5s ease-in-out infinite}.portfolio-v532-float-card span{display:block;font:900 .5rem var(--font-heading);letter-spacing:.12em;color:var(--muted)}.portfolio-v532-float-card strong{display:block;font:900 2.7rem var(--font-heading);line-height:1;margin:9px 0 4px}.portfolio-v532-float-card small{font-size:.58rem;color:var(--muted)} .portfolio-v532-stats{border-bottom:1px solid var(--border)}.portfolio-v532-stat-grid{display:grid;grid-template-columns:repeat(4,1fr)}.portfolio-v532-stat-grid>div{padding:25px 22px;border-right:1px solid var(--border)}.portfolio-v532-stat-grid>div:last-child{border-right:0}.portfolio-v532-stat-grid strong{display:block;font:900 1.65rem var(--font-heading);letter-spacing:-.04em}.portfolio-v532-stat-grid span{font-size:.58rem;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.1em} .portfolio-v532-collections{padding:125px 0 115px}.portfolio-v532-section-head,.portfolio-v532-showcase-head{display:grid;grid-template-columns:1fr .62fr;gap:70px;align-items:end;margin-bottom:48px}.portfolio-v532-section-head h2,.portfolio-v532-showcase-head h2{font-size:clamp(2.8rem,5vw,5rem);line-height:.92;letter-spacing:-.06em;margin:12px 0 0}.portfolio-v532-section-head>p,.portfolio-v532-showcase-head>p{font-size:.76rem;line-height:1.9;color:var(--muted);margin:0}.portfolio-v532-grid-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}.portfolio-v532-card{display:block;color:inherit;text-decoration:none;border:1px solid var(--border);border-radius:27px;overflow:hidden;background:var(--surface);transition:transform .45s var(--pro-ease),box-shadow .45s ease,border-color .3s ease}.portfolio-v532-card:last-child{grid-column:1/-1;display:grid;grid-template-columns:1.05fr 1fr}.portfolio-v532-card:hover{transform:translateY(-9px);border-color:color-mix(in srgb,var(--color-primary) 48%,var(--border));box-shadow:0 32px 85px rgba(0,0,0,.16)}.portfolio-v532-card-image{position:relative;aspect-ratio:1.55/1;overflow:hidden;background:var(--surface-2)}.portfolio-v532-card:last-child .portfolio-v532-card-image{aspect-ratio:auto;min-height:350px}.portfolio-v532-card-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--pro-ease),filter .5s ease}.portfolio-v532-card:hover .portfolio-v532-card-image img{transform:scale(1.07);filter:saturate(1.08)}.portfolio-v532-card-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.42));pointer-events:none}.portfolio-v532-card-number{position:absolute;z-index:2;left:20px;top:20px;padding:7px 10px;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(0,0,0,.3);backdrop-filter:blur(10px);color:#fff;font:900 .57rem var(--font-heading)}.portfolio-v532-card-arrow{position:absolute;z-index:2;right:18px;top:18px;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#111;transition:transform .3s}.portfolio-v532-card:hover .portfolio-v532-card-arrow{transform:rotate(45deg)}.portfolio-v532-card-arrow svg{width:16px}.portfolio-v532-card-body{padding:28px}.portfolio-v532-card-top{display:flex;justify-content:space-between;gap:15px;align-items:center;color:var(--muted);font-size:.54rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase}.portfolio-v532-card-top span{display:flex;align-items:center;gap:7px}.portfolio-v532-card-top span svg{width:17px;height:17px}.portfolio-v532-card-top b{white-space:nowrap}.portfolio-v532-card-body h3{font-size:2rem;letter-spacing:-.045em;margin:30px 0 9px}.portfolio-v532-card-body p{font-size:.77rem;line-height:1.8;color:var(--muted);max-width:560px;margin:0}.portfolio-v532-card-link{display:inline-flex;align-items:center;gap:8px;margin-top:25px;font-size:.64rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.portfolio-v532-card-link svg{width:14px;transition:transform .25s}.portfolio-v532-card:hover .portfolio-v532-card-link svg{transform:translateX(4px)} .portfolio-v532-showcase{padding:0 0 120px}.portfolio-v532-showcase-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:15px}.portfolio-v532-showcase-image{position:relative;overflow:hidden;min-height:360px;border-radius:22px;background:var(--surface-2);border:1px solid var(--border)}.portfolio-v532-showcase-image:nth-child(2),.portfolio-v532-showcase-image:nth-child(3){min-height:300px;margin-top:70px}.portfolio-v532-showcase-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s}.portfolio-v532-showcase-image:hover img{transform:scale(1.05)}.portfolio-v532-showcase-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55))}.portfolio-v532-showcase-image span{position:absolute;z-index:2;left:18px;bottom:17px;color:#fff;font:900 .55rem var(--font-heading);letter-spacing:.13em} .portfolio-v532-standard{padding:105px 0;background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.portfolio-v532-standard-head{margin-bottom:38px}.portfolio-v532-standard-head h2{font-size:clamp(2.4rem,4vw,4rem);letter-spacing:-.05em;margin:9px 0}.portfolio-v532-standard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border:1px solid var(--border);background:var(--border);border-radius:24px;overflow:hidden}.portfolio-v532-standard-grid>div{padding:30px;background:var(--surface)}.portfolio-v532-standard-grid>div>span{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--border);border-radius:12px}.portfolio-v532-standard-grid svg{width:19px}.portfolio-v532-standard-grid h3{font-size:1rem;margin:45px 0 8px}.portfolio-v532-standard-grid p{font-size:.72rem;line-height:1.7;color:var(--muted);margin:0} .portfolio-v532-cta{padding:110px 0}.portfolio-v532-cta-card{position:relative;overflow:hidden;padding:58px;border:1px solid var(--border);border-radius:30px;background:radial-gradient(circle at 85% 20%,color-mix(in srgb,var(--color-primary) 14%,transparent),transparent 32%),var(--surface);display:flex;justify-content:space-between;align-items:end;gap:50px}.portfolio-v532-cta-card:after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;right:-140px;bottom:-180px;background:color-mix(in srgb,var(--color-primary) 15%,transparent);filter:blur(25px)}.portfolio-v532-cta-card h2{position:relative;z-index:1;font-size:clamp(2.5rem,5vw,5rem);line-height:.92;letter-spacing:-.06em;margin:10px 0}.portfolio-v532-cta-card p{position:relative;z-index:1;color:var(--muted);max-width:570px;font-size:.8rem;line-height:1.8}.portfolio-v532-cta-actions{position:relative;z-index:2;display:flex;gap:10px;flex-wrap:wrap} /* Dedicated category pages */ .portfolio-category-v532{background:var(--bg);color:var(--text);overflow:hidden}.pc532-hero{position:relative;min-height:700px;padding:150px 0 90px;isolation:isolate;border-bottom:1px solid var(--border)}.pc532-hero-photo{position:absolute;inset:0;z-index:-2}.pc532-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.78);}.pc532-hero-photo>div{position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 92%,transparent) 43%,color-mix(in srgb,var(--bg) 48%,transparent) 75%,color-mix(in srgb,var(--bg) 70%,transparent) 100%)}.pc532-hero-inner{display:grid;grid-template-columns:minmax(0,1.05fr) 350px;gap:80px;align-items:end}.pc532-copy .breadcrumbs{margin-bottom:30px}.pc532-kicker b{color:var(--color-primary)}.pc532-copy h1{font-size:clamp(3.4rem,6.5vw,6.5rem);line-height:.9;letter-spacing:-.065em;margin:0 0 20px;max-width:850px}.pc532-copy>p{max-width:700px;color:var(--muted);font-size:.9rem;line-height:1.85}.pc532-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.pc532-info{padding:25px;border:1px solid var(--border);border-radius:25px;background:color-mix(in srgb,var(--surface) 84%,transparent);backdrop-filter:blur(18px);box-shadow:0 25px 70px rgba(0,0,0,.18)}.pc532-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:16px;border:1px solid var(--border);background:color-mix(in srgb,var(--surface-2) 80%,transparent);margin-bottom:75px}.pc532-icon svg{width:30px}.pc532-info>span{display:block;font:900 .51rem var(--font-heading);letter-spacing:.13em;color:var(--muted)}.pc532-info>strong{display:block;font:900 3.4rem var(--font-heading);line-height:1;margin:8px 0 2px}.pc532-info>small{color:var(--muted);font-size:.6rem}.pc532-info-bottom{display:flex;justify-content:space-between;border-top:1px solid var(--border);margin-top:24px;padding-top:15px;font-size:.5rem;font-weight:900;letter-spacing:.1em;color:var(--muted)}.pc532-projects{padding:120px 0}.pc532-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:42px}.pc532-head h2{font-size:clamp(2.4rem,4.5vw,4.5rem);line-height:.95;letter-spacing:-.055em;margin:9px 0}.pc532-back{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none;font-size:.65rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.pc532-back:hover{color:var(--color-primary)}.pc532-back svg{width:14px}.pc532-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.pc532-card{overflow:hidden;border:1px solid var(--border);border-radius:25px;background:var(--surface);transition:transform .45s var(--pro-ease),box-shadow .45s ease,border-color .3s}.pc532-card:hover{transform:translateY(-9px);box-shadow:0 30px 80px rgba(0,0,0,.16);border-color:color-mix(in srgb,var(--color-primary) 45%,var(--border))}.pc532-media{position:relative;display:block;aspect-ratio:1.3/1;overflow:hidden;background:var(--surface-2)}.pc532-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--pro-ease),filter .4s}.pc532-card:hover .pc532-media img{transform:scale(1.07);filter:saturate(1.08)}.pc532-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.5));pointer-events:none}.pc532-media-overlay{position:absolute;z-index:3;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;color:#111;opacity:0;transition:.35s}.pc532-card:hover .pc532-media-overlay{opacity:1}.pc532-media-overlay b{padding:11px 15px;border-radius:999px;background:#fff;font-size:.65rem}.pc532-media-overlay svg{width:15px;color:#fff}.pc532-media-index{position:absolute;z-index:3;top:15px;left:15px;color:#fff;font:900 .56rem var(--font-heading);letter-spacing:.12em}.pc532-original{position:absolute;z-index:3;right:14px;bottom:14px;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);color:#fff;border:1px solid rgba(255,255,255,.2);padding:7px 9px;border-radius:999px;font-size:.46rem;font-weight:900}.pc532-body{padding:24px}.pc532-meta{display:flex;justify-content:space-between;color:var(--muted);font:900 .54rem var(--font-heading);letter-spacing:.11em}.pc532-body h3{font-size:1.35rem;letter-spacing:-.03em;margin:13px 0 9px}.pc532-body h3 a{color:inherit;text-decoration:none}.pc532-body p{color:var(--muted);font-size:.75rem;line-height:1.75;min-height:53px;margin:0}.pc532-tech{display:flex;gap:6px;flex-wrap:wrap;margin:17px 0}.pc532-tech span{padding:6px 8px;border:1px solid var(--border);border-radius:999px;font-size:.5rem;font-weight:800;color:var(--muted)}.pc532-link{display:inline-flex;align-items:center;gap:7px;color:inherit;text-decoration:none;font-size:.61rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;margin-top:4px}.pc532-link svg{width:14px}.pc532-empty{text-align:center;padding:85px 25px;border:1px dashed var(--border);border-radius:25px}.pc532-empty>div{width:62px;height:62px;display:grid;place-items:center;margin:0 auto 18px;border:1px solid var(--border);border-radius:17px}.pc532-empty svg{width:32px}.pc532-empty>span{font:900 .54rem var(--font-heading);letter-spacing:.15em;color:var(--muted)}.pc532-empty h3{font-size:1.7rem;margin:10px 0}.pc532-empty p{max-width:520px;margin:0 auto 24px;color:var(--muted);font-size:.75rem;line-height:1.8}.pc532-process{padding:105px 0;background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.pc532-process-head{text-align:center;margin-bottom:42px}.pc532-process-head h2{font-size:clamp(2.5rem,4.5vw,4.5rem);line-height:.93;letter-spacing:-.055em;margin:9px 0}.pc532-process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:24px;overflow:hidden}.pc532-process-grid>div{background:var(--surface);padding:35px}.pc532-process-grid b{font:900 .6rem var(--font-heading);letter-spacing:.14em;color:var(--color-primary)}.pc532-process-grid h3{font-size:1.25rem;margin:48px 0 8px}.pc532-process-grid p{color:var(--muted);font-size:.75rem;line-height:1.75}.pc532-bottom{padding:105px 0}.pc532-bottom-card{padding:55px;border:1px solid var(--border);border-radius:29px;background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 9%,var(--surface)),var(--surface));display:grid;grid-template-columns:1fr .65fr;gap:60px;align-items:end}.pc532-bottom-card h2{font-size:clamp(2.6rem,5vw,4.8rem);line-height:.9;letter-spacing:-.06em;margin:9px 0}.pc532-bottom-card p{font-size:.77rem;line-height:1.8;color:var(--muted);margin:0 0 22px} @keyframes p32Grid{to{background-position:72px 72px}}@keyframes p32Photo{from{transform:scale(1.04)}to{transform:scale(1.09)}}@keyframes p32Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} @media(max-width:980px){.portfolio-v532-hero-inner,.pc532-hero-inner{grid-template-columns:1fr}.portfolio-v532-hero{min-height:auto}.portfolio-v532-hero-visual{max-width:650px;margin:0 auto;width:100%}.portfolio-v532-float-card{left:15px}.portfolio-v532-stat-grid{grid-template-columns:repeat(2,1fr)}.portfolio-v532-stat-grid>div:nth-child(2){border-right:0}.portfolio-v532-stat-grid>div:nth-child(-n+2){border-bottom:1px solid var(--border)}.portfolio-v532-standard-grid{grid-template-columns:repeat(2,1fr)}.pc532-info{max-width:400px}.pc532-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:700px){.portfolio-v532-hero,.pc532-hero{padding:115px 0 65px}.portfolio-v532-copy h1,.pc532-copy h1{font-size:clamp(2.8rem,14vw,4.5rem)}.portfolio-v532-main-image{border-radius:20px}.portfolio-v532-float-card{bottom:18px;left:10px}.portfolio-v532-section-head,.portfolio-v532-showcase-head,.portfolio-v532-cta-card,.pc532-bottom-card{display:block}.portfolio-v532-section-head>p,.portfolio-v532-showcase-head>p{margin-top:20px}.portfolio-v532-grid-cards{grid-template-columns:1fr}.portfolio-v532-card:last-child{display:block;grid-column:auto}.portfolio-v532-card:last-child .portfolio-v532-card-image{min-height:0}.portfolio-v532-showcase-grid{grid-template-columns:1fr}.portfolio-v532-showcase-image,.portfolio-v532-showcase-image:nth-child(2),.portfolio-v532-showcase-image:nth-child(3){min-height:280px;margin-top:0}.portfolio-v532-standard-grid{grid-template-columns:1fr}.portfolio-v532-stat-grid>div{padding:20px 15px}.portfolio-v532-cta-card{padding:32px}.portfolio-v532-cta-actions{margin-top:25px}.pc532-hero-photo>div{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 78%,transparent),var(--bg) 75%)}.pc532-head{display:block}.pc532-back{margin-top:18px}.pc532-grid{grid-template-columns:1fr}.pc532-process-grid{grid-template-columns:1fr}.pc532-process-grid>div{border-bottom:1px solid var(--border)}.pc532-process-grid>div:last-child{border-bottom:0}.pc532-bottom-card{padding:32px}.pc532-bottom-card>div:last-child{margin-top:24px}} @media(prefers-reduced-motion:reduce){.portfolio-v532-grid,.portfolio-v532-main-image img,.portfolio-v532-float-card{animation:none!important}.portfolio-v532-card,.portfolio-v532-card-image img,.pc532-card,.pc532-media img{transition:none!important}} /* v5.33 — Dedicated premium service detail pages */ .service-detail-v533{background:var(--bg);color:var(--text);overflow:hidden}.sd533-hero{position:relative;min-height:760px;padding:145px 0 90px;isolation:isolate;border-bottom:1px solid var(--border)}.sd533-hero-photo{position:absolute;inset:0;z-index:-2;overflow:hidden}.sd533-hero-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.72);animation:sd533Photo 16s ease-in-out infinite alternate}.sd533-hero-photo>span{position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 96%,transparent) 35%,color-mix(in srgb,var(--bg) 68%,transparent) 65%,color-mix(in srgb,var(--bg) 75%,transparent) 100%)}.sd533-breadcrumb{margin-bottom:38px}.sd533-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:75px;align-items:end}.sd533-kicker{display:flex;align-items:center;gap:9px;font:900 .57rem var(--font-heading);letter-spacing:.16em;color:var(--muted)}.sd533-dot{width:7px;height:7px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 16px var(--color-primary);animation:sd533Pulse 1.8s infinite}.sd533-copy h1{font-size:clamp(3.5rem,7vw,7.2rem);line-height:.86;letter-spacing:-.07em;max-width:900px;margin:17px 0 24px}.sd533-copy>p{max-width:710px;color:var(--muted);font-size:1rem;line-height:1.9}.sd533-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.sd533-proof{display:flex;gap:18px;flex-wrap:wrap;margin-top:24px}.sd533-proof span{display:flex;align-items:center;gap:6px;font-size:.62rem;font-weight:800;color:var(--muted)}.sd533-proof svg{width:13px;color:var(--color-primary)}.sd533-hero-card{padding:25px;border:1px solid var(--border);border-radius:26px;background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(18px);box-shadow:0 35px 90px rgba(0,0,0,.2);animation:sd533Float 5s ease-in-out infinite}.sd533-icon{width:62px;height:62px;border-radius:17px;display:grid;place-items:center;background:color-mix(in srgb,var(--color-primary) 11%,var(--surface));border:1px solid color-mix(in srgb,var(--color-primary) 30%,var(--border));color:var(--color-primary);margin-bottom:80px}.sd533-icon svg{width:30px;height:30px}.sd533-hero-card small{font:900 .51rem var(--font-heading);letter-spacing:.13em;color:var(--muted)}.sd533-hero-card>strong{display:block;font-size:2rem;line-height:1;letter-spacing:-.045em;margin:9px 0 30px}.sd533-card-line{display:flex;justify-content:space-between;border-top:1px solid var(--border);padding:13px 0;font-size:.67rem;font-weight:800}.sd533-card-line b{color:var(--color-primary)}.sd533-overview{padding:115px 0}.sd533-overview-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:90px}.sd533-label{font:900 .55rem var(--font-heading);letter-spacing:.16em;color:var(--color-primary)}.sd533-overview h2,.sd533-showcase h2,.sd533-fit h2,.sd533-process h2{font-size:clamp(2.6rem,5vw,5rem);line-height:.92;letter-spacing:-.06em;margin:12px 0 20px}.sd533-overview h2{max-width:550px}.sd533-overview p,.sd533-showcase-head>p{color:var(--muted);font-size:.82rem;line-height:1.85}.sd533-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.sd533-feature{display:grid;grid-template-columns:auto 1fr;gap:15px;padding:24px;border:1px solid var(--border);border-radius:20px;background:var(--surface);transition:.35s}.sd533-feature:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--color-primary) 42%,var(--border));box-shadow:0 20px 50px rgba(0,0,0,.1)}.sd533-feature>span,.sd533-fit-card>b{font:900 .6rem var(--font-heading);color:var(--color-primary)}.sd533-feature h3{font-size:.96rem;margin:0 0 6px}.sd533-feature p{font-size:.67rem;margin:0}.sd533-showcase{padding:110px 0;background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.sd533-showcase-head{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:38px}.sd533-showcase-head>p{max-width:470px}.sd533-image-wrap{position:relative;border-radius:30px;overflow:hidden;border:1px solid var(--border);box-shadow:0 35px 100px rgba(0,0,0,.18)}.sd533-image-wrap img{display:block;width:100%;aspect-ratio:16/8;object-fit:cover;transition:transform 1s var(--pro-ease)}.sd533-image-wrap:hover img{transform:scale(1.035)}.sd533-image-caption{position:absolute;left:20px;right:20px;bottom:20px;display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border:1px solid rgba(255,255,255,.22);border-radius:13px;background:rgba(0,0,0,.5);backdrop-filter:blur(12px);color:#fff;font-size:.65rem;font-weight:900}.sd533-image-caption b{font-size:.5rem;letter-spacing:.12em}.sd533-fit{padding:110px 0}.sd533-fit-head{text-align:center;margin-bottom:40px}.sd533-fit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.sd533-fit-card{min-height:220px;padding:25px;border:1px solid var(--border);border-radius:20px;background:var(--surface);transition:.35s}.sd533-fit-card:hover{transform:translateY(-7px);box-shadow:0 25px 65px rgba(0,0,0,.12);border-color:color-mix(in srgb,var(--color-primary) 40%,var(--border))}.sd533-fit-card h3{font-size:1.05rem;margin:55px 0 9px}.sd533-fit-card p{font-size:.68rem;color:var(--muted);line-height:1.7;margin:0}.sd533-process{padding:110px 0;background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.sd533-process-head{text-align:center;margin-bottom:42px}.sd533-process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:25px;overflow:hidden}.sd533-process-grid>div{padding:38px;background:var(--surface)}.sd533-process-grid b{font:900 .62rem var(--font-heading);color:var(--color-primary)}.sd533-process-grid h3{font-size:1.35rem;margin:65px 0 9px}.sd533-process-grid p{font-size:.73rem;line-height:1.8;color:var(--muted);margin:0}.sd533-stack{padding:100px 0}.sd533-stack-card{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;padding:52px;border:1px solid var(--border);border-radius:28px;background:radial-gradient(circle at 90% 0%,color-mix(in srgb,var(--color-primary) 12%,transparent),transparent 34%),var(--surface)}.sd533-stack-card h2{font-size:clamp(2.5rem,4vw,4rem);margin:10px 0}.sd533-stack-card p{max-width:500px;color:var(--muted);font-size:.78rem;line-height:1.8}.sd533-checks{display:grid;grid-template-columns:1fr 1fr;gap:9px}.sd533-checks span{display:flex;align-items:center;gap:9px;padding:14px;border:1px solid var(--border);border-radius:13px;font-size:.65rem;font-weight:800}.sd533-checks svg{width:14px;color:var(--color-primary)}.sd533-final{padding:20px 0 105px}.sd533-final-card{display:grid;grid-template-columns:1fr auto;gap:50px;align-items:end;padding:58px;border-radius:30px;border:1px solid color-mix(in srgb,var(--color-primary) 35%,var(--border));background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 12%,var(--surface)),var(--surface));box-shadow:0 30px 90px rgba(0,0,0,.14)}.sd533-final-card h2{font-size:clamp(2.6rem,5vw,5rem);line-height:.9;letter-spacing:-.06em;margin:10px 0 15px}.sd533-final-card p{color:var(--muted);font-size:.8rem;line-height:1.8;max-width:600px}.sd533-final-actions{display:flex;flex-direction:column;gap:10px;min-width:245px}.sd533-final-actions .btn{justify-content:center}@keyframes sd533Photo{from{transform:scale(1.03)}to{transform:scale(1.09)}}@keyframes sd533Float{50%{transform:translateY(-8px)}}@keyframes sd533Pulse{50%{transform:scale(1.5);box-shadow:0 0 22px var(--color-primary)}} @media(max-width:980px){.sd533-hero-grid,.sd533-overview-grid,.sd533-stack-card,.sd533-final-card{grid-template-columns:1fr;gap:40px}.sd533-hero-card{max-width:430px}.sd533-fit-grid{grid-template-columns:1fr 1fr}.sd533-process-grid{grid-template-columns:1fr}.sd533-final-actions{flex-direction:row;flex-wrap:wrap}.sd533-final-actions .btn{flex:1}} @media(max-width:700px){.sd533-hero{padding:112px 0 65px;min-height:0}.sd533-hero-grid{gap:35px}.sd533-copy h1{font-size:clamp(2.9rem,14vw,4.6rem)}.sd533-actions .btn{width:100%;justify-content:center}.sd533-proof{gap:10px;display:grid}.sd533-hero-card{padding:21px}.sd533-icon{margin-bottom:55px}.sd533-overview,.sd533-fit,.sd533-process,.sd533-stack{padding:75px 0}.sd533-feature-grid,.sd533-fit-grid,.sd533-checks{grid-template-columns:1fr}.sd533-showcase{padding:75px 0}.sd533-showcase-head{display:block}.sd533-showcase-head>p{margin-top:20px}.sd533-image-wrap{border-radius:20px}.sd533-image-wrap img{aspect-ratio:1/1;min-height:330px}.sd533-image-caption{left:10px;right:10px;bottom:10px}.sd533-fit-card{min-height:170px}.sd533-fit-card h3{margin-top:40px}.sd533-process-grid>div{padding:28px}.sd533-stack-card,.sd533-final-card{padding:30px}.sd533-final{padding-bottom:75px}.sd533-final-actions{display:grid}.sd533-final-actions .btn{width:100%}.sd533-hero-photo>span{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 78%,transparent),var(--bg) 72%)}} @media(prefers-reduced-motion:reduce){.sd533-hero-photo img,.sd533-hero-card{animation:none!important}.sd533-feature,.sd533-fit-card,.sd533-image-wrap img{transition:none!important}} /* v5.37 premium dedicated service pages */ .service-pro-page{background:var(--bg);color:var(--text);overflow:hidden}.sp-hero{position:relative;min-height:800px;padding:145px 0 90px;border-bottom:1px solid var(--border);isolation:isolate}.sp-hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}.sp-hero-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.65);transform:scale(1.04);animation:spZoom 18s ease-in-out infinite alternate}.sp-hero-bg>div{position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 96%,transparent) 38%,color-mix(in srgb,var(--bg) 62%,transparent) 72%,color-mix(in srgb,var(--bg) 76%,transparent) 100%)}.sp-breadcrumb{margin-bottom:45px}.sp-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:80px;align-items:end}.sp-eyebrow{display:flex;align-items:center;gap:10px;color:var(--muted);font:900 .58rem var(--font-heading);letter-spacing:.18em}.sp-eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 18px var(--color-primary);animation:spPulse 1.8s infinite}.sp-hero-copy h1{font-size:clamp(3.7rem,8vw,8rem);line-height:.84;letter-spacing:-.075em;max-width:980px;margin:20px 0 27px}.sp-hero-copy>p{max-width:740px;color:var(--muted);font-size:1.02rem;line-height:1.9}.sp-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}.sp-trust{display:flex;gap:20px;flex-wrap:wrap;margin-top:26px}.sp-trust span{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.62rem;font-weight:800}.sp-trust svg{width:13px;color:var(--color-primary)}.sp-hero-panel{padding:27px;border:1px solid var(--border);border-radius:28px;background:color-mix(in srgb,var(--surface) 80%,transparent);backdrop-filter:blur(22px);box-shadow:0 35px 100px rgba(0,0,0,.25);animation:spFloat 5s ease-in-out infinite}.sp-panel-top{display:flex;justify-content:space-between;color:var(--muted);font:900 .5rem var(--font-heading);letter-spacing:.14em}.sp-panel-top b{color:var(--color-primary)}.sp-panel-icon{width:72px;height:72px;display:grid;place-items:center;border-radius:20px;margin:75px 0 18px;color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--color-primary) 28%,var(--border))}.sp-panel-icon svg{width:34px;height:34px}.sp-hero-panel small{color:var(--muted);font:900 .5rem var(--font-heading);letter-spacing:.16em}.sp-hero-panel h2{font-size:2.15rem;line-height:1;letter-spacing:-.05em;margin:10px 0 28px}.sp-panel-list{border-top:1px solid var(--border)}.sp-panel-list span{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--border);font-size:.67rem;font-weight:800}.sp-panel-list b{color:var(--color-primary)}.sp-intro{padding:120px 0}.sp-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}.sp-label{font:900 .55rem var(--font-heading);letter-spacing:.17em;color:var(--color-primary)}.sp-intro h2,.sp-heading h2,.sp-showcase h2,.sp-fit h2,.sp-quality h2,.sp-final h2{font-size:clamp(2.7rem,5vw,5.2rem);line-height:.9;letter-spacing:-.065em;margin:13px 0 22px}.sp-intro p,.sp-heading>p,.sp-showcase-head p,.sp-fit-shell p,.sp-quality p,.sp-final p{color:var(--muted);font-size:.82rem;line-height:1.9}.sp-metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.sp-metric-grid div{padding:27px;border:1px solid var(--border);border-radius:20px;background:var(--surface);transition:.35s}.sp-metric-grid div:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--color-primary) 45%,var(--border))}.sp-metric-grid strong{display:block;color:var(--color-primary);font:900 2.2rem var(--font-heading)}.sp-metric-grid span{font-size:.68rem;font-weight:800;color:var(--muted)}.sp-features{padding:120px 0;background:var(--surface);border-block:1px solid var(--border)}.sp-heading{display:flex;justify-content:space-between;align-items:end;gap:60px;margin-bottom:48px}.sp-heading>p{max-width:470px}.sp-heading em,.sp-showcase em,.sp-final em{font-style:normal;color:var(--color-primary)}.sp-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.sp-feature{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:30px;border:1px solid var(--border);border-radius:22px;background:var(--bg);transition:.35s}.sp-feature:hover{transform:translateY(-6px);box-shadow:0 25px 60px rgba(0,0,0,.12);border-color:color-mix(in srgb,var(--color-primary) 40%,var(--border))}.sp-feature>span{font:900 .6rem var(--font-heading);color:var(--color-primary)}.sp-feature h3{margin:0 0 7px;font-size:1rem}.sp-feature p{margin:0;color:var(--muted);font-size:.68rem;line-height:1.7}.sp-showcase{padding:120px 0}.sp-showcase-head{max-width:850px;margin-bottom:40px}.sp-showcase-head h2{margin-bottom:18px}.sp-showcase-head p{max-width:650px}.sp-image{position:relative;border:1px solid var(--border);border-radius:32px;overflow:hidden;box-shadow:0 35px 110px rgba(0,0,0,.18)}.sp-image img{display:block;width:100%;aspect-ratio:16/8;object-fit:cover;transition:1s var(--pro-ease)}.sp-image:hover img{transform:scale(1.04)}.sp-image-badge{position:absolute;left:22px;right:22px;bottom:22px;display:flex;justify-content:space-between;align-items:center;padding:14px 17px;border:1px solid rgba(255,255,255,.2);border-radius:14px;background:rgba(0,0,0,.55);backdrop-filter:blur(14px);color:#fff;font-size:.65rem;font-weight:900}.sp-image-badge b{font-size:.5rem;letter-spacing:.14em}.sp-deliver{padding:120px 0;background:var(--surface);border-block:1px solid var(--border)}.sp-heading.center{text-align:center;display:block}.sp-heading.center>p{max-width:620px;margin:0 auto}.sp-deliver-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:48px}.sp-deliver-card{padding:27px;border:1px solid var(--border);border-radius:22px;background:var(--bg);min-height:190px;transition:.35s}.sp-deliver-card:hover{transform:translateY(-7px);box-shadow:0 25px 65px rgba(0,0,0,.12)}.sp-deliver-card>div{display:flex;justify-content:space-between;color:var(--color-primary)}.sp-deliver-card>div b{font:900 .6rem var(--font-heading)}.sp-deliver-card>div svg{width:17px}.sp-deliver-card h3{font-size:1rem;margin:55px 0 8px}.sp-deliver-card p{font-size:.66rem;color:var(--muted);line-height:1.7;margin:0}.sp-fit{padding:120px 0}.sp-fit-shell{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;align-items:start}.sp-fit-list{border-top:1px solid var(--border)}.sp-fit-list div{display:grid;grid-template-columns:45px 1fr auto;align-items:center;gap:12px;padding:20px 0;border-bottom:1px solid var(--border)}.sp-fit-list span{color:var(--color-primary);font:900 .6rem var(--font-heading)}.sp-fit-list strong{font-size:1rem}.sp-fit-list svg{width:16px;color:var(--muted)}.sp-process{padding:120px 0;background:var(--surface);border-block:1px solid var(--border)}.sp-process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:25px;overflow:hidden;margin-top:48px}.sp-process-grid>div{padding:32px;background:var(--surface);min-height:240px}.sp-process-grid b{color:var(--color-primary);font:900 .6rem var(--font-heading)}.sp-process-grid h3{margin:70px 0 8px;font-size:1.25rem}.sp-process-grid p{margin:0;color:var(--muted);font-size:.68rem;line-height:1.8}.sp-quality{padding:110px 0}.sp-quality-shell{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;padding:55px;border:1px solid var(--border);border-radius:30px;background:radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--color-primary) 13%,transparent),transparent 35%),var(--surface)}.sp-check-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.sp-check-grid span{display:flex;align-items:center;gap:9px;padding:15px;border:1px solid var(--border);border-radius:14px;font-size:.65rem;font-weight:800}.sp-check-grid svg{width:14px;color:var(--color-primary)}.sp-other{padding:105px 0;background:var(--surface);border-top:1px solid var(--border)}.sp-other-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:35px}.sp-other-head h2{font-size:clamp(2.3rem,4vw,4rem);margin:8px 0 0;letter-spacing:-.06em}.sp-other-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.sp-other-grid a{display:flex;justify-content:space-between;align-items:center;padding:22px;border:1px solid var(--border);border-radius:17px;background:var(--bg);font-size:.72rem;font-weight:900;transition:.3s;color:var(--text)}.sp-other-grid a:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--color-primary) 45%,var(--border));color:var(--color-primary)}.sp-other-grid svg{width:16px}.sp-final{padding:25px 0 115px;background:var(--surface)}.sp-final-card{display:grid;grid-template-columns:1fr auto;gap:60px;align-items:end;padding:62px;border:1px solid color-mix(in srgb,var(--color-primary) 35%,var(--border));border-radius:32px;background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 12%,var(--surface)),var(--surface));box-shadow:0 35px 100px rgba(0,0,0,.14)}.sp-final h2{margin-bottom:16px}.sp-final p{max-width:650px}.sp-final-actions{display:flex;flex-direction:column;gap:10px;min-width:250px}.sp-final-actions .btn{justify-content:center}@keyframes spZoom{from{transform:scale(1.04)}to{transform:scale(1.1)}}@keyframes spFloat{50%{transform:translateY(-9px)}}@keyframes spPulse{50%{transform:scale(1.5);box-shadow:0 0 24px var(--color-primary)}} @media(max-width:1000px){.sp-hero-grid,.sp-intro-grid,.sp-fit-shell,.sp-quality-shell,.sp-final-card{grid-template-columns:1fr;gap:45px}.sp-deliver-grid{grid-template-columns:1fr 1fr}.sp-process-grid{grid-template-columns:1fr 1fr}.sp-other-grid{grid-template-columns:1fr 1fr}.sp-final-actions{flex-direction:row;flex-wrap:wrap}.sp-final-actions .btn{flex:1}} @media(max-width:700px){.sp-hero{padding:112px 0 65px;min-height:0}.sp-hero-grid{gap:35px}.sp-hero-copy h1{font-size:clamp(3rem,15vw,5rem)}.sp-actions .btn{width:100%;justify-content:center}.sp-trust{display:grid;gap:10px}.sp-hero-panel{padding:21px}.sp-panel-icon{margin-top:55px}.sp-intro,.sp-features,.sp-showcase,.sp-deliver,.sp-fit,.sp-process,.sp-quality{padding:75px 0}.sp-heading{display:block}.sp-heading>p{margin-top:22px}.sp-feature-grid,.sp-deliver-grid,.sp-process-grid,.sp-check-grid,.sp-other-grid,.sp-metric-grid{grid-template-columns:1fr}.sp-image{border-radius:20px}.sp-image img{aspect-ratio:1/1;min-height:330px}.sp-image-badge{left:10px;right:10px;bottom:10px}.sp-quality-shell,.sp-final-card{padding:30px}.sp-final{padding-bottom:75px}.sp-final-actions{display:grid}.sp-final-actions .btn{width:100%}.sp-other-head{display:block}.sp-other-head h2{margin-top:10px}} @media(prefers-reduced-motion:reduce){.sp-hero-bg img,.sp-hero-panel{animation:none!important}.sp-feature,.sp-deliver-card,.sp-metric-grid div,.sp-image img,.sp-other-grid a{transition:none!important}} /* ========================================================================= v5.38 — PREMIUM SERVICES SYSTEM Services hub (.svh538) + 12 dedicated service pages (.sd538) ========================================================================= */ /* ---------- shared bits ---------- */ .svh538,.sd538{background:var(--bg);color:var(--text);overflow-x:clip} .svh538-label,.sd538-label{display:inline-block;font:900 .56rem/1 var(--font-heading);letter-spacing:.17em;color:var(--color-primary);text-transform:uppercase} .svh538 h2 em,.sd538 h2 em,.svh538 h1 em,.sd538 h1 em{font-style:normal;color:var(--color-primary)} .svh538-head,.sd538-head{display:grid;grid-template-columns:1fr .62fr;gap:70px;align-items:end;margin-bottom:46px} .svh538-head h2,.sd538-head h2{font-size:clamp(2.4rem,4.8vw,4.6rem);line-height:.93;letter-spacing:-.055em;margin:13px 0 0} .svh538-head>p,.sd538-head>p{margin:0;font-size:.82rem;line-height:1.9;color:var(--muted)} .svh538-head.center,.sd538-head.center{display:block;text-align:center;max-width:800px;margin:0 auto 48px} .svh538-head.center>p,.sd538-head.center>p{margin:18px auto 0;max-width:620px} .btn-ghost{background:transparent;border:1px dashed var(--border);color:var(--muted)} .btn-ghost:hover{color:var(--text);border-color:var(--color-primary)} /* ========================================================================= SERVICES HUB ========================================================================= */ .svh538-hero{position:relative;padding:150px 0 90px;border-bottom:1px solid var(--border);isolation:isolate;overflow:hidden} .svh538-hero-grid{position:absolute;inset:0;z-index:-2;opacity:.2;background-image:linear-gradient(to right,color-mix(in srgb,var(--text) 11%,transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in srgb,var(--text) 11%,transparent) 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(160deg,#000,transparent 78%)} .svh538-orb{position:absolute;z-index:-1;border-radius:50%;filter:blur(90px);opacity:.45;pointer-events:none} .svh538-orb.a{width:440px;height:440px;top:-140px;right:-90px;background:color-mix(in srgb,var(--color-primary) 40%,transparent)} .svh538-orb.b{width:360px;height:360px;bottom:-160px;left:-120px;background:color-mix(in srgb,var(--color-primary) 22%,transparent)} .svh538-hero-inner .breadcrumbs{margin-bottom:30px} .svh538-hero-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(370px,.78fr);gap:80px;align-items:center} .svh538-kicker{display:flex;align-items:center;gap:10px;font:900 .6rem var(--font-heading);letter-spacing:.15em;color:var(--muted);margin-bottom:20px} .svh538-kicker i{width:8px;height:8px;border-radius:50%;background:#39d276;box-shadow:0 0 16px #39d276;animation:svh538Pulse 1.9s infinite} .svh538-hero-copy h1{font-size:clamp(3rem,6.4vw,6.4rem);line-height:.89;letter-spacing:-.065em;margin:0;max-width:880px} .svh538-hero-copy>p{max-width:680px;color:var(--muted);font-size:.95rem;line-height:1.9;margin:26px 0 0} .svh538-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px} .svh538-proof{list-style:none;display:flex;gap:22px;flex-wrap:wrap;margin:26px 0 0;padding:0} .svh538-proof li{display:flex;align-items:center;gap:8px;font-size:.6rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)} .svh538-proof svg{width:13px;color:var(--color-primary)} .svh538-hero-card{position:relative;padding:30px;border:1px solid var(--border);border-radius:28px;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(20px);box-shadow:0 35px 95px rgba(0,0,0,.2)} .svh538-card-top{display:flex;justify-content:space-between;align-items:center;font:900 .52rem var(--font-heading);letter-spacing:.13em;color:var(--muted)} .svh538-live{display:flex;align-items:center;gap:6px;color:#39d276} .svh538-live i{width:6px;height:6px;border-radius:50%;background:#39d276;box-shadow:0 0 12px #39d276;animation:svh538Pulse 1.9s infinite} .svh538-card-title{font:900 1.35rem/1.25 var(--font-heading);letter-spacing:-.035em;margin:24px 0 0} .svh538-card-title strong{color:var(--color-primary)} .svh538-orbit{position:relative;height:190px;margin:22px 0;display:grid;place-items:center} .svh538-orbit .ring{position:absolute;border:1px dashed var(--border);border-radius:50%} .svh538-orbit .r1{width:135px;height:135px;animation:svh538Spin 22s linear infinite} .svh538-orbit .r2{width:185px;height:185px;animation:svh538Spin 34s linear infinite reverse} .svh538-orbit .core{width:62px;height:62px;display:grid;place-items:center;border-radius:50%;background:var(--color-primary);color:#fff;font:900 1.5rem var(--font-heading)} .svh538-orbit .f{position:absolute;padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface);font:900 .52rem var(--font-heading);letter-spacing:.06em} .svh538-orbit .f1{top:6px;left:12%}.svh538-orbit .f2{bottom:14px;right:8%}.svh538-orbit .f3{top:34%;right:2%}.svh538-orbit .f4{bottom:32%;left:0} .svh538-card-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border);padding-top:18px} .svh538-card-stats div{text-align:center} .svh538-card-stats b{display:block;font:900 1.45rem var(--font-heading);letter-spacing:-.04em} .svh538-card-stats span{font-size:.5rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)} /* ---------- sticky toggle bar (real page links) ---------- */ .svh538-toggle{position:sticky;top:72px;z-index:40;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(18px)} .svh538-toggle-inner{display:flex;align-items:center;gap:18px;padding:11px 0} .svh538-toggle-label{display:flex;align-items:center;gap:7px;flex:none;font:900 .55rem var(--font-heading);letter-spacing:.12em;color:var(--muted);text-transform:uppercase} .svh538-toggle-label svg{width:14px} .svh538-toggle-scroll{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0} .svh538-toggle-scroll::-webkit-scrollbar{display:none} .svh538-chip{display:inline-flex;align-items:center;gap:8px;flex:none;padding:8px 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);text-decoration:none;font-size:.66rem;font-weight:800;white-space:nowrap;transition:.25s} .svh538-chip:hover{border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-2px)} .svh538-chip-icon{display:grid;place-items:center;width:18px;height:18px} .svh538-chip-icon svg{width:16px;height:16px} /* ---------- directory ---------- */ .svh538-directory{padding:105px 0 110px} .svh538-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px} .svh538-filter{padding:9px 17px;border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--muted);font:800 .65rem var(--font-heading);letter-spacing:.03em;cursor:pointer;transition:.25s} .svh538-filter:hover{color:var(--text);border-color:var(--color-primary)} .svh538-filter.is-active{background:var(--color-primary);border-color:var(--color-primary);color:#fff} .svh538-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .svh538-card{position:relative;display:flex;flex-direction:column;padding:28px;border:1px solid var(--border);border-radius:24px;background:var(--surface);transition:transform .45s var(--pro-ease),box-shadow .45s ease,border-color .3s} .svh538-card:hover{transform:translateY(-8px);border-color:color-mix(in srgb,var(--color-primary) 46%,var(--border));box-shadow:0 30px 78px rgba(0,0,0,.16)} .svh538-card.is-hidden{display:none} .svh538-card-link-wrap{position:absolute;inset:0;z-index:3;border-radius:24px} .svh538-card-head{display:flex;justify-content:space-between;align-items:center} .svh538-card-no{font:900 .53rem var(--font-heading);letter-spacing:.13em;color:var(--muted)} .svh538-card-arrow{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--border);border-radius:50%;transition:.3s} .svh538-card-arrow svg{width:14px} .svh538-card:hover .svh538-card-arrow{background:var(--color-primary);border-color:var(--color-primary);color:#fff;transform:rotate(45deg)} .svh538-card-icon{width:54px;height:54px;display:grid;place-items:center;margin:38px 0 0;border:1px solid var(--border);border-radius:15px;background:var(--surface-2)} .svh538-card-icon svg{width:27px;height:27px} .svh538-card h3{font-size:1.22rem;letter-spacing:-.03em;margin:20px 0 9px} .svh538-card>p{font-size:.73rem;line-height:1.8;color:var(--muted);margin:0 0 18px} .svh538-card-points{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:8px} .svh538-card-points li{display:flex;align-items:flex-start;gap:9px;font-size:.68rem;color:var(--muted)} .svh538-card-points svg{width:13px;flex:none;margin-top:3px;color:var(--color-primary)} .svh538-card-cta{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font:900 .61rem var(--font-heading);letter-spacing:.08em;text-transform:uppercase;color:var(--color-primary)} .svh538-card-cta svg{width:14px;transition:transform .25s} .svh538-card:hover .svh538-card-cta svg{transform:translateX(4px)} /* ---------- chooser ---------- */ .svh538-chooser{padding:105px 0;background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .svh538-chooser-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .svh538-chooser-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 24px;border:1px solid var(--border);border-radius:16px;background:var(--bg);color:inherit;text-decoration:none;transition:.3s} .svh538-chooser-row:hover{border-color:var(--color-primary);transform:translateX(5px)} .svh538-chooser-q{display:flex;align-items:center;gap:11px;font-size:.8rem;font-weight:700} .svh538-chooser-q svg{width:15px;color:var(--color-primary);flex:none} .svh538-chooser-a{display:flex;align-items:center;gap:7px;flex:none;font:900 .6rem var(--font-heading);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);white-space:nowrap} .svh538-chooser-a svg{width:13px} .svh538-chooser-row:hover .svh538-chooser-a{color:var(--color-primary)} /* ---------- stack / process / quality / faq / final ---------- */ .svh538-stack{padding:110px 0} .svh538-stack-shell{display:grid;grid-template-columns:.82fr 1.18fr;gap:70px;align-items:center;padding:52px;border:1px solid var(--border);border-radius:30px;background:radial-gradient(circle at 92% 6%,color-mix(in srgb,var(--color-primary) 13%,transparent),transparent 36%),var(--surface)} .svh538-stack-copy h2{font-size:clamp(2.2rem,4vw,3.8rem);line-height:.95;letter-spacing:-.05em;margin:13px 0 16px} .svh538-stack-copy p{color:var(--muted);font-size:.8rem;line-height:1.85;margin:0 0 26px;max-width:470px} .svh538-stack-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} .svh538-stack-item{padding:18px 14px;text-align:center;border:1px solid var(--border);border-radius:16px;background:var(--bg);transition:.3s} .svh538-stack-item:hover{transform:translateY(-5px);border-color:var(--color-primary)} .svh538-stack-item>span{display:grid;place-items:center;height:30px} .svh538-stack-item svg{width:26px;height:26px} .svh538-stack-item strong{display:block;font-size:.7rem;margin-top:11px} .svh538-stack-item small{display:block;font-size:.5rem;color:var(--muted);letter-spacing:.07em;text-transform:uppercase;margin-top:3px} .svh538-process{padding:105px 0;background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .svh538-process-track{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:26px;overflow:hidden} .svh538-step{padding:36px;background:var(--surface)} .svh538-step b{font:900 .62rem var(--font-heading);letter-spacing:.14em;color:var(--color-primary)} .svh538-step h3{font-size:1.3rem;letter-spacing:-.03em;margin:52px 0 9px} .svh538-step p{font-size:.73rem;line-height:1.8;color:var(--muted);margin:0} .svh538-quality{padding:110px 0} .svh538-quality-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px} .svh538-quality-intro h2{font-size:clamp(2.2rem,4vw,3.8rem);line-height:.95;letter-spacing:-.05em;margin:13px 0 16px} .svh538-quality-intro p{color:var(--muted);font-size:.8rem;line-height:1.85} .svh538-quality-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px} .svh538-quality-item{display:flex;align-items:center;gap:10px;padding:15px;border:1px solid var(--border);border-radius:13px;font-size:.68rem;font-weight:700;background:var(--surface)} .svh538-quality-item span{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:color-mix(in srgb,var(--color-primary) 14%,transparent)} .svh538-quality-item svg{width:12px;color:var(--color-primary)} .svh538-faq{padding:0 0 105px} .svh538-faq-list,.sd538-faq-list{max-width:860px;margin:0 auto;display:grid;gap:10px} .svh538-final{padding:0 0 105px} .svh538-final-card{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr auto;gap:45px;align-items:center;padding:54px;border-radius:30px;border:1px solid color-mix(in srgb,var(--color-primary) 32%,var(--border));background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 13%,var(--surface)),var(--surface));box-shadow:0 30px 85px rgba(0,0,0,.14)} .svh538-final-card h2{font-size:clamp(2.2rem,4.2vw,4rem);line-height:.95;letter-spacing:-.055em;margin:12px 0;max-width:760px} .svh538-final-card p{max-width:620px;color:var(--muted);font-size:.84rem;line-height:1.85;margin:0} .svh538-final-actions{display:flex;flex-direction:column;gap:10px;min-width:250px} .svh538-final-actions .btn{justify-content:center} /* ========================================================================= SERVICE DETAIL PAGES ========================================================================= */ .sd538-hero{position:relative;padding:148px 0 88px;border-bottom:1px solid var(--border);isolation:isolate;overflow:hidden} .sd538-hero-media{position:absolute;inset:0;z-index:-2} .sd538-hero-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.7);animation:sd538Zoom 20s ease-in-out infinite alternate} .sd538-hero-veil{position:absolute;inset:0;background:linear-gradient(95deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 95%,transparent) 38%,color-mix(in srgb,var(--bg) 58%,transparent) 76%,color-mix(in srgb,var(--bg) 72%,transparent) 100%)} .sd538-hero-grid{position:absolute;inset:0;opacity:.16;background-image:linear-gradient(to right,color-mix(in srgb,var(--text) 12%,transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in srgb,var(--text) 12%,transparent) 1px,transparent 1px);background-size:66px 66px;mask-image:linear-gradient(120deg,#000,transparent 72%)} .sd538-crumbs{margin-bottom:34px} .sd538-hero-layout{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:72px;align-items:end} .sd538-kicker{display:flex;align-items:center;gap:9px;font:900 .57rem var(--font-heading);letter-spacing:.16em;color:var(--muted)} .sd538-kicker i{width:7px;height:7px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 16px var(--color-primary);animation:svh538Pulse 1.9s infinite} .sd538-hero-copy h1{font-size:clamp(2.9rem,6.5vw,6.6rem);line-height:.87;letter-spacing:-.07em;margin:17px 0 22px;max-width:900px} .sd538-lead{max-width:700px;color:var(--muted);font-size:.96rem;line-height:1.9;margin:0} .sd538-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px} .sd538-proof{list-style:none;display:flex;gap:20px;flex-wrap:wrap;margin:24px 0 0;padding:0} .sd538-proof li{display:flex;align-items:center;gap:7px;font-size:.62rem;font-weight:800;color:var(--muted)} .sd538-proof svg{width:13px;color:var(--color-primary)} .sd538-hero-card{padding:26px;border:1px solid var(--border);border-radius:26px;background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:blur(20px);box-shadow:0 35px 92px rgba(0,0,0,.2);animation:sd538Float 6s ease-in-out infinite} .sd538-card-top{display:flex;justify-content:space-between;align-items:center;font:900 .51rem var(--font-heading);letter-spacing:.13em;color:var(--muted)} .sd538-card-top b{color:var(--color-primary)} .sd538-card-icon{width:62px;height:62px;display:grid;place-items:center;border-radius:17px;margin:26px 0 58px;border:1px solid color-mix(in srgb,var(--color-primary) 28%,var(--border));background:color-mix(in srgb,var(--color-primary) 10%,var(--surface))} .sd538-card-icon svg{width:30px;height:30px} .sd538-hero-card small{font:900 .5rem var(--font-heading);letter-spacing:.13em;color:var(--muted)} .sd538-hero-card>strong{display:block;font:900 1.4rem/1.2 var(--font-heading);letter-spacing:-.04em;margin:9px 0 22px} .sd538-card-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-top:1px solid var(--border);padding-top:17px} .sd538-card-stats b{display:block;font:900 1.15rem var(--font-heading);letter-spacing:-.04em} .sd538-card-stats span{font-size:.47rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)} .sd538-card-cta{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding-top:15px;border-top:1px solid var(--border);font:900 .62rem var(--font-heading);letter-spacing:.07em;text-transform:uppercase;color:var(--color-primary);text-decoration:none} .sd538-card-cta svg{width:14px;transition:transform .25s} .sd538-card-cta:hover svg{transform:translateX(4px)} /* ---------- sticky in-page nav ---------- */ .sd538-subnav{position:sticky;top:72px;z-index:40;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(18px)} .sd538-subnav-inner{display:flex;align-items:center;gap:20px;padding:10px 0} .sd538-subnav-label{flex:none;font:900 .58rem var(--font-heading);letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary)} .sd538-subnav ul{list-style:none;display:flex;gap:6px;margin:0;padding:0;overflow-x:auto;scrollbar-width:none;flex:1} .sd538-subnav ul::-webkit-scrollbar{display:none} .sd538-subnav a{display:block;flex:none;padding:8px 14px;border-radius:999px;color:var(--muted);text-decoration:none;font-size:.66rem;font-weight:800;white-space:nowrap;transition:.25s} .sd538-subnav a:hover{color:var(--text);background:var(--surface)} .sd538-subnav a.is-current{color:#fff;background:var(--color-primary)} .sd538-subnav-cta{flex:none} /* ---------- overview ---------- */ .sd538-overview{padding:105px 0} .sd538-overview-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:70px} .sd538-overview h2,.sd538-included h2,.sd538-showcase h2,.sd538-process h2,.sd538-deliver h2,.sd538-fit h2,.sd538-quality h2,.sd538-faq h2,.sd538-other h2{font-size:clamp(2.3rem,4.6vw,4.4rem);line-height:.93;letter-spacing:-.055em;margin:13px 0 20px} .sd538-overview-copy p{color:var(--muted);font-size:.86rem;line-height:1.95;margin:0 0 18px;max-width:640px} .sd538-stack-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:26px} .sd538-stack-chips span{padding:7px 13px;border:1px solid var(--border);border-radius:999px;font-size:.6rem;font-weight:800;color:var(--muted)} .sd538-summary-card{padding:30px;border:1px solid var(--border);border-radius:24px;background:var(--surface);position:sticky;top:150px} .sd538-summary-card>p{font-size:.86rem;line-height:1.8;margin:13px 0 24px} .sd538-summary-rows{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:22px} .sd538-summary-rows div{display:flex;justify-content:space-between;gap:14px;padding:13px 15px;background:var(--surface)} .sd538-summary-rows span{font-size:.62rem;color:var(--muted);font-weight:700} .sd538-summary-rows b{font-size:.66rem;text-align:right} /* ---------- included ---------- */ .sd538-included{padding:105px 0;background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .sd538-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .sd538-feature{padding:28px;border:1px solid var(--border);border-radius:20px;background:var(--bg);transition:.35s} .sd538-feature:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--color-primary) 44%,var(--border));box-shadow:0 22px 58px rgba(0,0,0,.12)} .sd538-feature-no{font:900 .62rem var(--font-heading);letter-spacing:.12em;color:var(--color-primary)} .sd538-feature h3{font-size:1.05rem;letter-spacing:-.025em;margin:34px 0 9px} .sd538-feature p{font-size:.72rem;line-height:1.8;color:var(--muted);margin:0} /* ---------- showcase ---------- */ .sd538-showcase{padding:105px 0} .sd538-showcase-head{display:grid;grid-template-columns:1fr .6fr;gap:60px;align-items:end;margin-bottom:38px} .sd538-showcase-head>p{color:var(--muted);font-size:.8rem;line-height:1.9;margin:0} .sd538-showcase-image{position:relative;margin:0;border-radius:28px;overflow:hidden;border:1px solid var(--border);box-shadow:0 35px 95px rgba(0,0,0,.18)} .sd538-showcase-image img{display:block;width:100%;aspect-ratio:16/7.6;object-fit:cover;transition:transform 1s var(--pro-ease)} .sd538-showcase-image:hover img{transform:scale(1.035)} .sd538-showcase-image figcaption{position:absolute;left:20px;right:20px;bottom:20px;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 17px;border:1px solid rgba(255,255,255,.2);border-radius:13px;background:rgba(0,0,0,.52);backdrop-filter:blur(12px);color:#fff} .sd538-showcase-image span{font:900 .78rem var(--font-heading)} .sd538-showcase-image b{font-size:.5rem;letter-spacing:.13em} /* ---------- process timeline ---------- */ .sd538-process{padding:105px 0;background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .sd538-timeline{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:0;padding:0;background:var(--border);border:1px solid var(--border);border-radius:26px;overflow:hidden} .sd538-timeline li{padding:34px;background:var(--surface)} .sd538-timeline b{font:900 .62rem var(--font-heading);letter-spacing:.14em;color:var(--color-primary)} .sd538-timeline h3{font-size:1.2rem;letter-spacing:-.03em;margin:48px 0 9px} .sd538-timeline p{font-size:.72rem;line-height:1.8;color:var(--muted);margin:0} /* ---------- deliverables ---------- */ .sd538-deliver{padding:105px 0} .sd538-deliver-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .sd538-deliver-card{padding:28px;border:1px solid var(--border);border-radius:20px;background:var(--surface);transition:.35s} .sd538-deliver-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--color-primary) 44%,var(--border));box-shadow:0 22px 58px rgba(0,0,0,.12)} .sd538-deliver-top{display:flex;justify-content:space-between;align-items:center} .sd538-deliver-top b{font:900 .78rem var(--font-heading);color:var(--color-primary)} .sd538-deliver-top svg{width:15px;color:var(--muted)} .sd538-deliver-card h3{font-size:1.02rem;letter-spacing:-.025em;margin:32px 0 8px} .sd538-deliver-card p{font-size:.72rem;line-height:1.8;color:var(--muted);margin:0} /* ---------- good fit ---------- */ .sd538-fit{padding:105px 0;background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .sd538-fit-shell{display:grid;grid-template-columns:.78fr 1.22fr;gap:70px;align-items:center} .sd538-fit-copy p{color:var(--muted);font-size:.8rem;line-height:1.9;margin:0 0 26px;max-width:440px} .sd538-fit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} .sd538-fit-card{padding:26px;border:1px solid var(--border);border-radius:20px;background:var(--bg);transition:.35s} .sd538-fit-card:hover{transform:translateY(-6px);border-color:var(--color-primary)} .sd538-fit-card b{font:900 .6rem var(--font-heading);letter-spacing:.12em;color:var(--color-primary)} .sd538-fit-card h3{font-size:1.02rem;margin:28px 0 8px} .sd538-fit-card p{font-size:.71rem;line-height:1.75;color:var(--muted);margin:0} /* ---------- quality ---------- */ .sd538-quality{padding:105px 0} .sd538-quality-shell{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center} .sd538-quality-shell p{color:var(--muted);font-size:.8rem;line-height:1.9;max-width:430px} .sd538-check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px} .sd538-check-grid span{display:flex;align-items:center;gap:9px;padding:15px;border:1px solid var(--border);border-radius:13px;font-size:.67rem;font-weight:700;background:var(--surface)} .sd538-check-grid svg{width:13px;flex:none;color:var(--color-primary)} /* ---------- faq ---------- */ .sd538-faq{padding:105px 0;background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .sd538-faq-more{text-align:center;margin-top:34px} .sd538-faq-more p{color:var(--muted);font-size:.76rem;margin:0 0 14px} /* ---------- other services + pager ---------- */ .sd538-other{padding:105px 0} .sd538-other-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} .sd538-other-card{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:18px 22px;border:1px solid var(--border);border-radius:17px;background:var(--surface);color:inherit;text-decoration:none;transition:.3s} .sd538-other-card:hover{border-color:var(--color-primary);transform:translateX(5px)} .sd538-other-icon{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--border);border-radius:12px;background:var(--bg)} .sd538-other-icon svg{width:21px;height:21px} .sd538-other-card b{display:block;font-size:.82rem;letter-spacing:-.01em} .sd538-other-card small{display:block;font-size:.66rem;line-height:1.6;color:var(--muted);margin-top:3px} .sd538-other-card>svg{width:15px;color:var(--muted)} .sd538-other-card:hover>svg{color:var(--color-primary)} .sd538-pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:40px;padding-top:34px;border-top:1px solid var(--border)} .sd538-pager-link{padding:22px 26px;border:1px solid var(--border);border-radius:18px;background:var(--surface);color:inherit;text-decoration:none;transition:.3s} .sd538-pager-link:hover{border-color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 7%,var(--surface))} .sd538-pager-link span{display:flex;align-items:center;gap:8px;font:900 .53rem var(--font-heading);letter-spacing:.13em;color:var(--muted)} .sd538-pager-link svg{width:13px} .sd538-pager-link.prev svg{transform:rotate(180deg)} .sd538-pager-link b{display:block;font-size:1.05rem;letter-spacing:-.03em;margin-top:9px} .sd538-pager-link.next{text-align:right} .sd538-pager-link.next span{justify-content:flex-end} /* ---------- final ---------- */ .sd538-final{padding:0 0 105px} .sd538-final-card{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;padding:54px;border-radius:30px;border:1px solid color-mix(in srgb,var(--color-primary) 32%,var(--border));background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 13%,var(--surface)),var(--surface));box-shadow:0 30px 85px rgba(0,0,0,.14)} .sd538-final-card h2{font-size:clamp(2.2rem,4.4vw,4.2rem);line-height:.93;letter-spacing:-.055em;margin:12px 0 14px} .sd538-final-card p{color:var(--muted);font-size:.84rem;line-height:1.85;max-width:620px;margin:0} .sd538-final-meta{display:flex;gap:20px;flex-wrap:wrap;margin-top:22px} .sd538-final-meta span{display:flex;align-items:center;gap:8px;font-size:.62rem;font-weight:800;color:var(--muted)} .sd538-final-meta svg{width:14px;color:var(--color-primary)} .sd538-final-actions{display:flex;flex-direction:column;gap:10px;min-width:255px} .sd538-final-actions .btn{justify-content:center} /* ---------- animations ---------- */ @keyframes svh538Pulse{50%{transform:scale(1.45);opacity:.65}} @keyframes svh538Spin{to{transform:rotate(360deg)}} @keyframes sd538Zoom{from{transform:scale(1.02)}to{transform:scale(1.09)}} @keyframes sd538Float{50%{transform:translateY(-8px)}} /* ---------- responsive ---------- */ @media(max-width:1100px){ .svh538-grid,.sd538-feature-grid,.sd538-deliver-grid{grid-template-columns:repeat(2,1fr)} .sd538-timeline{grid-template-columns:repeat(2,1fr)} .svh538-process-track{grid-template-columns:repeat(2,1fr)} } @media(max-width:980px){ .svh538-hero-layout,.sd538-hero-layout,.svh538-stack-shell,.svh538-quality-layout,.sd538-overview-grid,.sd538-fit-shell,.sd538-quality-shell,.sd538-showcase-head,.svh538-head,.sd538-head{grid-template-columns:1fr;gap:38px} .svh538-head>p,.sd538-head>p,.sd538-showcase-head>p{max-width:640px} .svh538-hero-card,.sd538-hero-card{max-width:430px} .svh538-chooser-grid,.sd538-other-grid{grid-template-columns:1fr} .svh538-quality-grid,.sd538-check-grid{grid-template-columns:repeat(2,1fr)} .svh538-stack-grid{grid-template-columns:repeat(3,1fr)} .sd538-summary-card{position:static} .svh538-final-card,.sd538-final-card{grid-template-columns:1fr;gap:32px} .svh538-final-actions,.sd538-final-actions{flex-direction:row;flex-wrap:wrap} .svh538-final-actions .btn,.sd538-final-actions .btn{flex:1} .svh538-toggle,.sd538-subnav{top:68px} } @media(max-width:700px){ .svh538-hero,.sd538-hero{padding:112px 0 62px} .svh538-hero-copy h1{font-size:clamp(2.4rem,12vw,3.9rem)} .sd538-hero-copy h1{font-size:clamp(2.4rem,12vw,4rem)} .svh538-hero-actions .btn,.sd538-actions .btn{width:100%;justify-content:center} .svh538-proof,.sd538-proof{display:grid;gap:10px} .svh538-hero-card,.sd538-hero-card{padding:22px;max-width:none} .sd538-card-icon{margin-bottom:40px} .svh538-directory,.svh538-chooser,.svh538-stack,.svh538-process,.svh538-quality,.sd538-overview,.sd538-included,.sd538-showcase,.sd538-process,.sd538-deliver,.sd538-fit,.sd538-quality,.sd538-faq,.sd538-other{padding:70px 0} .svh538-grid,.sd538-feature-grid,.sd538-deliver-grid,.sd538-fit-grid,.svh538-quality-grid,.sd538-check-grid,.svh538-process-track,.sd538-timeline,.svh538-chooser-grid,.sd538-pager{grid-template-columns:1fr} .svh538-stack-grid{grid-template-columns:repeat(2,1fr)} .svh538-stack-shell,.svh538-final-card,.sd538-final-card{padding:28px} .svh538-chooser-row{flex-direction:column;align-items:flex-start;gap:12px} .sd538-pager-link.next{text-align:left} .sd538-pager-link.next span{justify-content:flex-start} .sd538-subnav-cta{display:none} .svh538-toggle-label{display:none} .sd538-showcase-image figcaption{flex-direction:column;align-items:flex-start;gap:6px} .svh538-orbit{height:150px} } @media(prefers-reduced-motion:reduce){ .sd538-hero-media img,.sd538-hero-card,.svh538-orbit .ring,.svh538-kicker i,.sd538-kicker i,.svh538-live i{animation:none!important} .svh538-card,.sd538-feature,.sd538-deliver-card,.sd538-fit-card,.svh538-chooser-row,.sd538-other-card{transition:none!important} } /* ---------- v5.38 scoped FAQ accordion (services hub + service pages) ---------- */ .svh538-faq-item,.sd538-faq-item{border:1px solid var(--border)!important;border-radius:17px!important;background:var(--bg)!important;overflow:hidden;transition:border-color .3s,box-shadow .3s} .svh538-faq-item::before,.sd538-faq-item::before{display:none!important} .sd538-faq .sd538-faq-item{background:var(--bg)!important} .svh538-faq-item:hover,.sd538-faq-item:hover{border-color:color-mix(in srgb,var(--color-primary) 45%,var(--border))!important} .svh538-faq-item.open,.sd538-faq-item.open{border-color:var(--color-primary)!important;box-shadow:0 18px 50px rgba(0,0,0,.1)} .svh538-faq-item .faq-question,.sd538-faq-item .faq-question{display:flex!important;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:21px 24px!important;background:transparent!important;border:0!important;color:inherit;cursor:pointer;text-align:left;font:800 .88rem/1.45 var(--font-body,inherit)} .svh538-faq-item .faq-question::before,.sd538-faq-item .faq-question::before{display:none!important} .svh538-faq-item .faq-question i,.sd538-faq-item .faq-question i{position:relative;flex:none;width:24px;height:24px;border:1px solid var(--border);border-radius:50%;transition:.3s} .svh538-faq-item .faq-question i::before,.svh538-faq-item .faq-question i::after,.sd538-faq-item .faq-question i::before,.sd538-faq-item .faq-question i::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:currentColor;border-radius:2px} .svh538-faq-item .faq-question i::before,.sd538-faq-item .faq-question i::before{width:10px;height:2px} .svh538-faq-item .faq-question i::after,.sd538-faq-item .faq-question i::after{width:2px;height:10px;transition:transform .3s} .svh538-faq-item.open .faq-question i,.sd538-faq-item.open .faq-question i{background:var(--color-primary);border-color:var(--color-primary);color:#fff;transform:rotate(180deg)} .svh538-faq-item.open .faq-question i::after,.sd538-faq-item.open .faq-question i::after{transform:translate(-50%,-50%) scaleY(0)} .svh538-faq-item .faq-answer,.sd538-faq-item .faq-answer{max-height:0;overflow:hidden;transition:max-height .4s var(--pro-ease,ease)} .svh538-faq-item .faq-answer p,.sd538-faq-item .faq-answer p{margin:0;padding:0 24px 23px;font-size:.78rem;line-height:1.9;color:var(--muted)} /* ---------- v5.38 navigation: Services dropdown now holds 12 real pages ---------- */ @media(min-width:981px){ .main-nav .menu-item-has-children > .sub-menu{max-height:min(72vh,540px);overflow-y:auto;scrollbar-width:thin} .main-nav .menu-item-has-children > .sub-menu::-webkit-scrollbar{width:5px} .main-nav .menu-item-has-children > .sub-menu::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px} .main-nav .sub-menu a{white-space:nowrap} } @media(max-width:980px){ /* 12 items no longer get clipped by the old 400px cap */ .main-nav li.menu-item-has-children.sub-menu-open > .sub-menu{max-height:900px} } /* ========================================================= v5.39 — MOBILE HEADER & FOOTER: FINAL, AUTHORITATIVE FIX Several redesign passes (v5.22 x2, v5.24, v5.25) left overlapping !important rules for the same header/footer elements at different breakpoints, fighting each other depending on source order. This block is intentionally last in the file so it always wins, and it is the ONLY place mobile header/footer sizing should be edited going forward. ========================================================= */ /* ---------- Header shell: one predictable size at every width ---------- */ .site-header{position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:9999!important;} body.admin-bar .site-header{top:32px!important;} @media screen and (max-width:782px){body.admin-bar .site-header{top:46px!important;}} .header-inner{display:flex!important;align-items:center!important;justify-content:space-between!important;flex-wrap:nowrap!important;} @media (max-width:960px){ .site-header{height:64px!important;padding:0!important;} .header-inner{min-height:64px!important;width:calc(100% - 28px)!important;gap:10px!important;} .site-logo{min-width:0!important;flex:1 1 auto!important;overflow:hidden!important;} .site-logo .word{min-width:0!important;overflow:hidden!important;} .site-logo .name{font-size:.86rem!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;} .site-logo .role{font-size:.44rem!important;white-space:nowrap!important;} .logo-mark{width:36px!important;height:36px!important;flex:0 0 36px!important;} /* The desktop inline menu is fully hidden; only the off-canvas panel matters below. */ .header-actions{flex:0 0 auto!important;padding-left:8px!important;gap:6px!important;} .search-toggle{width:36px!important;height:36px!important;} .theme-toggle{width:36px!important;min-width:36px!important;height:36px!important;padding:0!important;justify-content:center!important;} .theme-toggle-copy,.theme-toggle-status{display:none!important;} .theme-toggle-track{margin:0 auto!important;} .hamburger{display:flex!important;align-items:center!important;justify-content:center!important;width:36px!important;height:36px!important;flex:0 0 36px!important;} /* One definitive off-canvas panel width — replaces the 8% / 12% / 18% inset values that were fighting each other at this same breakpoint. */ .main-nav{ position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:auto!important; width:min(86vw,380px)!important;max-width:86vw!important; background:var(--bg)!important;border-left:1px solid var(--border)!important; padding:84px 24px 28px!important; transform:translateX(100%)!important; transition:transform .35s ease!important; overflow-y:auto!important; z-index:9500!important; } .main-nav.is-open{transform:translateX(0)!important;} .main-nav ul{flex-direction:column!important;align-items:stretch!important;width:100%!important;gap:2px!important;} .main-nav>ul>li>a{width:100%!important;padding:13px 14px!important;font-size:.88rem!important;justify-content:flex-start!important;} .main-nav .nav-cta{width:100%!important;justify-content:center!important;margin:18px 0 0!important;} .nav-backdrop{position:fixed!important;inset:0!important;background:rgba(0,0,0,.5)!important;z-index:9400!important;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;} .nav-backdrop.is-open{opacity:1!important;visibility:visible!important;} body.menu-open{overflow:hidden!important;} } @media (max-width:380px){ .site-logo .role{display:none!important;} .main-nav{width:88vw!important;max-width:88vw!important;padding:78px 18px 24px!important;} } /* ---------- Footer: one consistent, left-aligned mobile layout ---------- */ @media (max-width:640px){ .footer-grid{grid-template-columns:1fr!important;text-align:left!important;row-gap:36px!important;gap:36px!important;} .footer-brand p{margin-left:0!important;margin-right:0!important;max-width:100%!important;} .footer-social{justify-content:flex-start!important;} .footer-contact li{justify-content:flex-start!important;} .footer-bottom{flex-direction:column!important;align-items:flex-start!important;text-align:left!important;} /* Fix the double bottom-padding bug: .site-footer and .footer-bottom were both reserving space for the mobile CTA bar, stacking into a large, empty gap under the footer. Reserve the space in exactly one place. */ .site-footer{padding-bottom:0!important;} .footer-bottom{padding:20px 0 24px!important;} } @media (max-width:700px){ /* This is the only rule that should reserve room for .mobile-cta-bar. */ .site-footer{padding-bottom:78px!important;} } /* ========================================================= v5.40 — SERVICE PAGE HERO REDESIGN Premium split-screen hero for all dedicated service pages. ========================================================= */ .sd538-hero-pro{ position:relative; padding:112px 0 0; min-height:clamp(650px,calc(100vh - 72px),860px); border-bottom:1px solid var(--border); isolation:isolate; overflow:hidden; background: radial-gradient(circle at 76% 18%, color-mix(in srgb,var(--color-primary) 10%,transparent), transparent 28%), linear-gradient(135deg,var(--bg) 0%,color-mix(in srgb,var(--surface) 35%,var(--bg)) 100%); } .sd538-hero-pro::before{ content:""; position:absolute;inset:0;z-index:-3;pointer-events:none; background-image:linear-gradient(to right,color-mix(in srgb,var(--text) 5%,transparent) 1px,transparent 1px), linear-gradient(to bottom,color-mix(in srgb,var(--text) 5%,transparent) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(110deg,#000 0%,transparent 82%); } .sd538-hero-orb{ position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none;z-index:-1; border:1px solid color-mix(in srgb,var(--color-primary) 18%,transparent); } .sd538-hero-orb-a{width:360px;height:360px;right:-130px;top:80px;box-shadow:0 0 120px color-mix(in srgb,var(--color-primary) 10%,transparent)} .sd538-hero-orb-b{width:180px;height:180px;left:-90px;bottom:50px;opacity:.5} .sd538-hero-pro .sd538-crumbs{margin-bottom:30px} .sd538-hero-pro-grid{ display:grid;grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr); gap:70px;align-items:center; } .sd538-hero-pro-copy{position:relative;padding:18px 0 54px} .sd538-hero-pro-copy .sd538-kicker{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .sd538-hero-pro-copy .sd538-kicker span{color:var(--muted)} .sd538-hero-pro-copy .sd538-kicker b{ margin-left:4px;padding:7px 10px;border:1px solid color-mix(in srgb,var(--color-primary) 25%,var(--border)); border-radius:999px;color:var(--color-primary);font-size:.47rem;letter-spacing:.11em; } .sd538-hero-index{ margin-top:34px;color:color-mix(in srgb,var(--color-primary) 85%,var(--text)); font:900 .75rem var(--font-heading);letter-spacing:.08em; } .sd538-hero-index span{color:var(--muted);font-size:.55rem;margin-left:3px} .sd538-hero-pro-copy h1{ position:relative;font-size:clamp(3.4rem,6.2vw,6.9rem);line-height:.84; letter-spacing:-.075em;margin:12px 0 25px;max-width:760px; } .sd538-hero-pro-copy h1::after{ content:"";display:block;width:72px;height:4px;margin-top:25px;border-radius:10px; background:var(--color-primary);box-shadow:0 0 24px color-mix(in srgb,var(--color-primary) 45%,transparent); } .sd538-hero-pro .sd538-lead{max-width:650px;font-size:.92rem;line-height:1.9} .sd538-hero-pro .sd538-actions{margin-top:28px} .sd538-hero-pro .sd538-proof{margin-top:22px} .sd538-hero-pro-visual{position:relative;min-height:530px;padding:0 24px 42px 0} .sd538-hero-image-frame{ position:absolute;inset:0 24px 40px 0;overflow:hidden;border-radius:30px; border:1px solid color-mix(in srgb,var(--text) 12%,var(--border)); background:var(--surface);box-shadow:0 35px 90px rgba(0,0,0,.22); transform:perspective(1200px) rotateY(-3deg) rotateX(1deg); transition:transform .5s ease,box-shadow .5s ease; } .sd538-hero-image-frame:hover{transform:perspective(1200px) rotateY(0) rotateX(0) translateY(-4px);box-shadow:0 45px 110px rgba(0,0,0,.28)} .sd538-hero-image-frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.03);animation:sd540HeroZoom 16s ease-in-out infinite alternate} .sd538-image-shade{ position:absolute;inset:0; background:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.78) 100%), linear-gradient(110deg,rgba(0,0,0,.18),transparent 55%); } .sd538-image-caption{ position:absolute;left:24px;right:24px;bottom:22px;display:flex;align-items:end;justify-content:space-between;gap:15px;color:#fff; } .sd538-image-caption span{font:900 1.15rem var(--font-heading);letter-spacing:-.03em} .sd538-image-caption small{font:900 .47rem var(--font-heading);letter-spacing:.15em;color:rgba(255,255,255,.7)} .sd538-hero-pro-card{ position:absolute;right:-2px;bottom:0;width:min(370px,82%);padding:22px; display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start; border:1px solid color-mix(in srgb,var(--color-primary) 24%,var(--border));border-radius:22px; background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(20px); box-shadow:0 25px 70px rgba(0,0,0,.25);animation:sd540Float 6s ease-in-out infinite; } .sd538-hero-pro-card .sd538-card-icon{ width:48px;height:48px;margin:0;border-radius:14px; } .sd538-hero-pro-card .sd538-card-icon svg{width:23px;height:23px} .sd538-hero-pro-card small{display:block;font:900 .46rem var(--font-heading);letter-spacing:.13em;color:var(--muted)} .sd538-hero-pro-card strong{display:block;font:900 .92rem/1.25 var(--font-heading);letter-spacing:-.025em;margin-top:6px} .sd538-hero-pro-card .sd538-card-stats{ grid-column:1/-1;width:100%;margin-top:2px;padding-top:15px; } .sd538-hero-pro-card .sd538-card-stats b{font-size:1rem} .sd538-hero-pro-card .sd538-card-stats span{font-size:.43rem} .sd538-hero-bottom{ display:flex;align-items:center;gap:15px;padding:19px 0;border-top:1px solid var(--border); color:var(--muted);font:900 .48rem var(--font-heading);letter-spacing:.14em; } .sd538-hero-bottom i{width:4px;height:4px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 10px var(--color-primary)} @keyframes sd540HeroZoom{from{transform:scale(1.02)}to{transform:scale(1.07)}} @keyframes sd540Float{50%{transform:translateY(-8px)}} @media(max-width:980px){ .sd538-hero-pro{padding-top:100px;min-height:auto} .sd538-hero-pro-grid{grid-template-columns:1fr;gap:20px} .sd538-hero-pro-copy{padding-bottom:30px} .sd538-hero-pro-visual{min-height:520px} .sd538-hero-bottom{margin-top:4px} } @media(max-width:700px){ .sd538-hero-pro{padding:94px 0 0} .sd538-hero-pro .sd538-crumbs{margin-bottom:20px} .sd538-hero-pro-copy{padding:5px 0 20px} .sd538-hero-pro-copy .sd538-kicker b{display:none} .sd538-hero-index{margin-top:25px} .sd538-hero-pro-copy h1{font-size:clamp(2.7rem,13vw,4.3rem);line-height:.88;margin-bottom:20px} .sd538-hero-pro-copy h1::after{width:52px;height:3px;margin-top:19px} .sd538-hero-pro .sd538-lead{font-size:.84rem;line-height:1.8} .sd538-hero-pro .sd538-actions .btn{width:100%;justify-content:center} .sd538-hero-pro .sd538-proof{display:grid;gap:9px} .sd538-hero-pro-visual{min-height:390px;padding:0 10px 48px 0} .sd538-hero-image-frame{inset:0 10px 43px 0;border-radius:22px;transform:none} .sd538-hero-image-frame:hover{transform:none} .sd538-hero-pro-card{right:0;width:92%;padding:17px;border-radius:18px} .sd538-hero-pro-card .sd538-card-icon{width:42px;height:42px} .sd538-hero-pro-card strong{font-size:.78rem} .sd538-hero-bottom{gap:9px;overflow:hidden;white-space:nowrap;font-size:.4rem} .sd538-hero-bottom span:nth-of-type(2),.sd538-hero-bottom i:nth-of-type(2){display:none} } /* ========================================================= v5.42 — PREMIUM ABSTRACT SERVICE HERO VISUALS Replaces all service-page screenshots with animated UI art. No project image, no repeated CORE PROMISE card. ========================================================= */ .sd538-hero-pro .sd538-hero-pro-visual{ min-height:510px; position:relative; isolation:isolate; overflow:hidden; border:1px solid color-mix(in srgb,var(--text) 11%,var(--border)); border-radius:34px; background: radial-gradient(circle at 30% 22%,color-mix(in srgb,var(--service-accent,var(--color-primary)) 18%,transparent),transparent 48%), linear-gradient(150deg,color-mix(in srgb,var(--service-accent,var(--color-primary)) 6%,var(--surface)) 0%,var(--bg) 100%); box-shadow:0 35px 90px rgba(0,0,0,.18); } .sd538-hero-pro .sd538-hero-pro-visual::before{ content:"";position:absolute;inset:0;z-index:-3; background: linear-gradient(color-mix(in srgb,var(--text) 6%,transparent) 1px,transparent 1px), linear-gradient(90deg,color-mix(in srgb,var(--text) 6%,transparent) 1px,transparent 1px); background-size:34px 34px; mask-image:linear-gradient(90deg,#000,transparent 92%); } .sd538-hero-pro .sd538-hero-pro-visual::after{ content:"";position:absolute;z-index:-2;inset:14%; border:1px solid color-mix(in srgb,var(--text) 9%,transparent); border-radius:28px; pointer-events:none; } .sd538-visual-topline{ position:absolute!important;left:24px;right:24px;top:21px;z-index:8; display:flex;justify-content:space-between;align-items:center; color:color-mix(in srgb,var(--text) 58%,transparent)!important; font:800 .46rem var(--font-heading)!important;letter-spacing:.16em!important; } .sd538-visual-topline b{color:var(--color-primary);font-weight:900} .sd538-art-core{ position:absolute;left:50%;top:50%;z-index:5; width:156px;height:156px;margin:-78px 0 0 -78px; border-radius:50%;display:flex;align-items:center;justify-content:center; border:1px solid color-mix(in srgb,var(--color-primary) 55%,white 4%); background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.12),transparent 34%),rgba(10,12,16,.72); box-shadow:0 0 0 12px rgba(255,255,255,.025),0 0 70px color-mix(in srgb,var(--color-primary) 22%,transparent); backdrop-filter:blur(12px); animation:sd542CoreFloat 5s ease-in-out infinite; } .sd538-art-core-glow{ position:absolute;inset:18px;border-radius:50%; background:color-mix(in srgb,var(--color-primary) 13%,transparent); filter:blur(18px);animation:sd542Glow 3.5s ease-in-out infinite; } .sd538-art-icon{ position:relative;z-index:2;width:62px;height:62px;border-radius:18px; display:grid;place-items:center; color:var(--color-primary); background:color-mix(in srgb,var(--color-primary) 12%,var(--surface) 88%); border:1px solid color-mix(in srgb,var(--color-primary) 38%,transparent); box-shadow:inset 0 0 20px color-mix(in srgb,var(--color-primary) 9%,transparent); } .sd538-art-icon svg{width:30px;height:30px} .sd538-art-core-label{ position:absolute;bottom:-31px;left:50%;transform:translateX(-50%); white-space:nowrap;color:rgba(255,255,255,.58); font:900 .43rem var(--font-heading);letter-spacing:.2em; } .sd538-art-orbit{ position:absolute;left:50%;top:50%;border-radius:50%; border:1px solid color-mix(in srgb,var(--color-primary) 20%,transparent); transform:translate(-50%,-50%) rotate(-12deg); } .sd538-art-orbit-a{width:300px;height:300px;animation:sd542Orbit 13s linear infinite} .sd538-art-orbit-b{width:405px;height:405px;opacity:.55;transform:translate(-50%,-50%) rotate(32deg);animation:sd542OrbitReverse 18s linear infinite} .sd538-art-orbit-a::before,.sd538-art-orbit-b::before{ content:"";position:absolute;width:7px;height:7px;border-radius:50%; background:var(--color-primary);box-shadow:0 0 18px var(--color-primary); } .sd538-art-orbit-a::before{left:14%;top:9%} .sd538-art-orbit-b::before{right:13%;bottom:15%} .sd538-art-node{ position:absolute;width:10px;height:10px;border-radius:50%;z-index:4; background:var(--color-primary);box-shadow:0 0 22px var(--color-primary); animation:sd542Node 4s ease-in-out infinite; } .sd538-art-node-a{left:17%;top:30%} .sd538-art-node-b{right:19%;top:24%;animation-delay:1.1s} .sd538-art-node-c{right:15%;bottom:25%;animation-delay:2s} .sd538-art-panel{ position:absolute;z-index:6;width:138px;padding:14px 15px; border:1px solid color-mix(in srgb,var(--text) 10%,transparent);border-radius:15px; background:color-mix(in srgb,var(--surface) 78%,transparent);backdrop-filter:blur(12px); box-shadow:0 18px 40px rgba(0,0,0,.18); color:var(--text);animation:sd542Panel 5.5s ease-in-out infinite; } .sd538-art-panel span{display:block;color:var(--color-primary);font:900 .42rem var(--font-heading);letter-spacing:.12em} .sd538-art-panel b{display:block;margin:6px 0 10px;font:900 .58rem var(--font-heading);letter-spacing:.08em} .sd538-art-panel i,.sd538-art-panel em{display:block;height:4px;border-radius:10px;background:rgba(255,255,255,.12);margin-top:6px} .sd538-art-panel i:nth-of-type(1){width:82%;background:color-mix(in srgb,var(--color-primary) 72%,transparent)} .sd538-art-panel i:nth-of-type(2){width:61%} .sd538-art-panel i:nth-of-type(3){width:42%} .sd538-art-panel em:nth-of-type(1){width:76%} .sd538-art-panel em:nth-of-type(2){width:48%} .sd538-art-panel-a{left:7%;bottom:15%} .sd538-art-panel-b{right:7%;top:17%;animation-delay:1.4s} .sd538-art-scan{ position:absolute;left:8%;right:8%;height:1px;top:18%; background:linear-gradient(90deg,transparent,var(--color-primary),transparent); opacity:.35;box-shadow:0 0 20px var(--color-primary); animation:sd542Scan 5s ease-in-out infinite; } @keyframes sd542CoreFloat{50%{transform:translateY(-8px) scale(1.025)}} @keyframes sd542Glow{50%{transform:scale(1.28);opacity:.45}} @keyframes sd542Orbit{to{transform:translate(-50%,-50%) rotate(348deg)}} @keyframes sd542OrbitReverse{to{transform:translate(-50%,-50%) rotate(-328deg)}} @keyframes sd542Node{50%{transform:scale(1.7);opacity:.55}} @keyframes sd542Panel{50%{transform:translateY(-7px)}} @keyframes sd542Scan{0%,100%{top:18%;opacity:.12}50%{top:80%;opacity:.5}} /* WordPress: architecture / code */ .sd538-hero-wordpress-development .sd538-hero-pro-visual{ --service-accent:#4da3ff; } .sd538-hero-wordpress-development .sd538-art-core{border-radius:22px} .sd538-hero-wordpress-development .sd538-art-orbit-a{border-style:dashed} /* Business: boardroom dashboard */ .sd538-hero-business-websites .sd538-hero-pro-visual{ --service-accent:#f4aa3c; } .sd538-hero-business-websites .sd538-art-panel-a{transform:rotate(-4deg)} .sd538-hero-business-websites .sd538-art-panel-b{transform:rotate(4deg)} /* Elementor: creative layers */ .sd538-hero-elementor-development .sd538-hero-pro-visual{ --service-accent:#ff65a9; } .sd538-hero-elementor-development .sd538-art-orbit-a{border-radius:35%;transform:translate(-50%,-50%) rotate(12deg)} .sd538-hero-elementor-development .sd538-art-orbit-b{border-radius:28%;transform:translate(-50%,-50%) rotate(-20deg)} /* WooCommerce: product system */ .sd538-hero-woocommerce-stores .sd538-hero-pro-visual{ --service-accent:#8ed14a; } .sd538-hero-woocommerce-stores .sd538-art-node{border-radius:3px} .sd538-hero-woocommerce-stores .sd538-art-core{border-radius:28px} /* Maintenance & security: protected system */ .sd538-hero-maintenance-security .sd538-hero-pro-visual{ --service-accent:#5fdfa0; } .sd538-hero-maintenance-security .sd538-art-orbit-a{border-style:dashed} .sd538-hero-maintenance-security .sd538-art-scan{animation-duration:3.4s} /* Bug fixing: terminal diagnostics */ .sd538-hero-bug-fixing .sd538-hero-pro-visual{ --service-accent:#ff6570; } .sd538-hero-bug-fixing .sd538-art-panel-a,.sd538-hero-bug-fixing .sd538-art-panel-b{ font-family:monospace;border-color:rgba(255,101,112,.2) } .sd538-hero-bug-fixing .sd538-art-panel-a::after{content:"✓ SYSTEM CHECK";display:block;margin-top:9px;color:#71e6a8;font-size:.42rem} .sd538-hero-bug-fixing .sd538-art-panel-b::after{content:"// FIX READY";display:block;margin-top:9px;color:var(--color-primary);font-size:.42rem} /* Landing: funnel / conversion path */ .sd538-hero-landing-pages .sd538-hero-pro-visual{ --service-accent:#ff9b3d; } .sd538-hero-landing-pages .sd538-art-orbit-a{width:270px;height:170px;border-radius:50%;transform:translate(-50%,-50%)} .sd538-hero-landing-pages .sd538-art-orbit-b{width:370px;height:245px;border-radius:50%;transform:translate(-50%,-50%)} .sd538-hero-landing-pages .sd538-art-panel-a{bottom:12%;left:8%} .sd538-hero-landing-pages .sd538-art-panel-b{top:14%;right:8%} /* SEO: rising signal */ .sd538-hero-seo-development .sd538-hero-pro-visual{ --service-accent:#54d995; } .sd538-hero-seo-development .sd538-art-orbit-a{border-bottom-color:var(--color-primary);border-left-color:transparent;transform:translate(-50%,-50%) rotate(-25deg)} .sd538-hero-seo-development .sd538-art-orbit-b{border-top-color:var(--color-primary);border-right-color:transparent;transform:translate(-50%,-50%) rotate(-25deg)} .sd538-hero-seo-development .sd538-art-node-a{left:23%;top:67%} .sd538-hero-seo-development .sd538-art-node-b{left:42%;top:48%} .sd538-hero-seo-development .sd538-art-node-c{left:67%;top:25%} /* Mobile: device frame without a screenshot */ .sd538-hero-mobile-optimization .sd538-hero-pro-visual{ --service-accent:#9073ff; } .sd538-hero-mobile-optimization .sd538-art-core{ width:142px;height:225px;margin:-112px 0 0 -71px;border-radius:28px; box-shadow:inset 0 0 0 5px rgba(255,255,255,.035),0 0 65px rgba(144,115,255,.2); } .sd538-hero-mobile-optimization .sd538-art-icon{border-radius:50%} .sd538-hero-mobile-optimization .sd538-art-core-label{bottom:-24px} /* Conversion: connected flow */ .sd538-hero-conversion-optimization .sd538-hero-pro-visual{ --service-accent:#ffbd54; } .sd538-hero-conversion-optimization .sd538-art-orbit-a{width:330px;height:120px;border-radius:50%} .sd538-hero-conversion-optimization .sd538-art-orbit-b{width:440px;height:165px;border-radius:50%} .sd538-hero-conversion-optimization .sd538-art-node-a{left:12%;top:50%} .sd538-hero-conversion-optimization .sd538-art-node-b{left:50%;top:22%} .sd538-hero-conversion-optimization .sd538-art-node-c{right:12%;top:50%} /* Redesign: split transformation */ .sd538-hero-website-redesign .sd538-hero-pro-visual{ --service-accent:#f2a43d; background:linear-gradient(90deg,var(--surface) 0 49.5%,color-mix(in srgb,var(--service-accent) 16%,var(--surface)) 50% 100%); } .sd538-hero-website-redesign .sd538-hero-pro-visual::after{inset:8% 50%;border-radius:0;border-color:var(--color-primary);box-shadow:0 0 28px var(--color-primary);animation:sd542Divider 3.5s ease-in-out infinite} .sd538-hero-website-redesign .sd538-art-orbit-a{width:210px;height:210px;left:27%} .sd538-hero-website-redesign .sd538-art-orbit-b{width:210px;height:210px;left:73%} .sd538-hero-website-redesign .sd538-art-core{background:transparent;border:0;box-shadow:none} .sd538-hero-website-redesign .sd538-art-core-glow{display:none} @keyframes sd542Divider{50%{transform:scaleY(1.12);opacity:.55}} /* Speed: performance telemetry */ .sd538-hero-speed-optimization .sd538-hero-pro-visual{ --service-accent:#57b9ff; } .sd538-hero-speed-optimization .sd538-art-orbit-a{border-style:dashed;animation-duration:9s} .sd538-hero-speed-optimization .sd538-art-orbit-b{border-style:dotted;animation-duration:12s} .sd538-hero-speed-optimization .sd538-art-scan{animation-duration:2.8s} /* Mobile / reduced motion */ @media(max-width:980px){ .sd538-hero-pro-visual{min-height:430px} } @media(max-width:700px){ .sd538-hero-pro-visual{min-height:350px;border-radius:24px} .sd538-art-orbit-a{width:230px;height:230px} .sd538-art-orbit-b{width:310px;height:310px} .sd538-art-core{width:126px;height:126px;margin:-63px 0 0 -63px} .sd538-art-icon{width:52px;height:52px;border-radius:15px} .sd538-art-icon svg{width:25px;height:25px} .sd538-art-panel{width:112px;padding:11px;border-radius:12px} .sd538-art-panel-a{left:4%;bottom:11%} .sd538-art-panel-b{right:4%;top:14%} .sd538-art-node-a{left:10%} .sd538-art-node-b{right:12%} .sd538-art-node-c{right:9%;bottom:20%} .sd538-art-core-label{font-size:.36rem} .sd538-visual-topline{left:17px!important;right:17px!important;top:16px!important} } @media(prefers-reduced-motion:reduce){ .sd538-art-core,.sd538-art-orbit,.sd538-art-node,.sd538-art-panel,.sd538-art-scan{animation:none!important} } /* ========================================================= v5.43 — SERVICE HERO MOTION UPGRADE Premium orange/black motion system. CSS-only, no layout changes. ========================================================= */ .sd538-hero-pro{ position:relative; isolation:isolate; overflow:hidden; background: radial-gradient(circle at 78% 42%, color-mix(in srgb,var(--color-primary) 10%,transparent), transparent 30%), radial-gradient(circle at 18% 20%, color-mix(in srgb,var(--color-primary) 5%,transparent), transparent 28%), var(--bg); } /* fine technical grid */ .sd538-hero-pro::before{ content:""; position:absolute; inset:-15%; z-index:-3; opacity:.32; background-image: linear-gradient(90deg,color-mix(in srgb,var(--color-primary) 7%,transparent) 1px,transparent 1px), linear-gradient(0deg,color-mix(in srgb,var(--color-primary) 7%,transparent) 1px,transparent 1px); background-size:58px 58px; transform:perspective(700px) rotateX(58deg) translateY(8%); transform-origin:center bottom; mask-image:linear-gradient(to top,black 0%,transparent 76%); animation:sd543GridMove 18s linear infinite; } /* soft atmospheric light */ .sd538-hero-pro::after{ content:""; position:absolute; width:760px; height:760px; right:-210px; top:-240px; z-index:-4; border-radius:50%; background: radial-gradient(circle, color-mix(in srgb,var(--color-primary) 18%,transparent) 0%, color-mix(in srgb,var(--color-primary) 8%,transparent) 28%, transparent 67%); filter:blur(12px); animation:sd543Atmosphere 8s ease-in-out infinite alternate; } .sd538-hero-orb{ filter:blur(70px)!important; opacity:.22!important; background:var(--color-primary)!important; } .sd538-hero-orb-a{ width:420px!important;height:420px!important; right:3%!important;top:2%!important; animation:sd543OrbA 9s ease-in-out infinite!important; } .sd538-hero-orb-b{ width:280px!important;height:280px!important; left:34%!important;bottom:-160px!important; animation:sd543OrbB 11s ease-in-out infinite!important; } /* hero visual becomes the main animated focal point */ .sd538-hero-pro-visual{ position:relative!important; min-height:480px; display:grid!important; place-items:center!important; isolation:isolate; overflow:visible!important; filter:drop-shadow(0 25px 70px rgba(0,0,0,.22)); } /* large halo behind the artwork */ .sd538-hero-pro-visual::before{ content:""; position:absolute; width:330px;height:330px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb,var(--service-accent,var(--color-primary)) 16%,transparent) 0%, color-mix(in srgb,var(--service-accent,var(--color-primary)) 7%,transparent) 35%, transparent 70%); filter:blur(4px); animation:sd543Halo 4.8s ease-in-out infinite; } /* moving light beam */ .sd538-hero-pro-visual::after{ content:""; position:absolute; width:155%; height:2px; left:-28%; top:50%; background:linear-gradient(90deg, transparent 0%, color-mix(in srgb,var(--service-accent,var(--color-primary)) 0%,transparent) 20%, color-mix(in srgb,var(--service-accent,var(--color-primary)) 70%,transparent) 50%, color-mix(in srgb,var(--service-accent,var(--service-accent,var(--color-primary))) 0%,transparent) 80%, transparent 100%); box-shadow:0 0 22px color-mix(in srgb,var(--service-accent,var(--color-primary)) 35%,transparent); transform:rotate(-18deg); opacity:.55; animation:sd543Beam 5.5s ease-in-out infinite; } /* concentric technical rings */ .sd538-art-orbit{ border:1px solid color-mix(in srgb,var(--service-accent,var(--color-primary)) 28%,var(--border))!important; box-shadow: inset 0 0 25px color-mix(in srgb,var(--service-accent,var(--color-primary)) 5%,transparent), 0 0 22px color-mix(in srgb,var(--service-accent,var(--color-primary)) 5%,transparent); } .sd538-art-orbit-a{ width:300px!important;height:300px!important; animation:sd543OrbitA 16s linear infinite!important; } .sd538-art-orbit-b{ width:390px!important;height:390px!important; border-style:dashed!important; border-color:color-mix(in srgb,var(--service-accent,var(--color-primary)) 16%,var(--border))!important; animation:sd543OrbitB 25s linear infinite!important; } /* bright orbit accents */ .sd538-art-orbit-a::before, .sd538-art-orbit-b::before{ content:""; position:absolute; width:7px;height:7px; border-radius:50%; background:var(--service-accent,var(--color-primary)); box-shadow: 0 0 8px var(--service-accent,var(--color-primary)), 0 0 24px color-mix(in srgb,var(--service-accent,var(--color-primary)) 75%,transparent); } .sd538-art-orbit-a::before{top:18px;left:50%;transform:translateX(-50%);} .sd538-art-orbit-b::before{right:28px;top:50%;} /* center icon/core */ .sd538-art-core{ width:132px!important;height:132px!important; border:1px solid color-mix(in srgb,var(--service-accent,var(--color-primary)) 55%,var(--border))!important; border-radius:32px!important; background: linear-gradient(145deg, color-mix(in srgb,var(--service-accent,var(--color-primary)) 16%,var(--surface)), color-mix(in srgb,var(--surface) 96%,transparent))!important; box-shadow: 0 0 0 1px color-mix(in srgb,var(--service-accent,var(--color-primary)) 7%,transparent), 0 0 35px color-mix(in srgb,var(--service-accent,var(--color-primary)) 16%,transparent), 0 22px 55px rgba(0,0,0,.28)!important; animation:sd543CoreFloat 4s ease-in-out infinite!important; } .sd538-art-core::before{ content:""; position:absolute; inset:10px; border-radius:24px; border:1px solid color-mix(in srgb,var(--service-accent,var(--color-primary)) 18%,transparent); animation:sd543CorePulse 2.8s ease-in-out infinite; } .sd538-art-core-glow{ background:radial-gradient(circle, color-mix(in srgb,var(--service-accent,var(--color-primary)) 42%,transparent), transparent 68%)!important; filter:blur(18px)!important; animation:sd543Glow 2.8s ease-in-out infinite!important; } .sd538-art-icon{ position:relative; z-index:2; color:var(--service-accent,var(--color-primary))!important; filter:drop-shadow(0 0 10px color-mix(in srgb,var(--service-accent,var(--color-primary)) 48%,transparent)); } .sd538-art-icon svg{width:44px!important;height:44px!important;} .sd538-art-core-label{ position:relative; z-index:2; color:var(--text)!important; letter-spacing:.16em!important; } /* floating system panels */ .sd538-art-panel{ border:1px solid color-mix(in srgb,var(--service-accent,var(--color-primary)) 25%,var(--border))!important; background:color-mix(in srgb,var(--surface) 82%,transparent)!important; box-shadow:0 16px 40px rgba(0,0,0,.18)!important; backdrop-filter:blur(14px)!important; animation:sd543PanelA 5s ease-in-out infinite!important; } .sd538-art-panel-b{animation:sd543PanelB 6.5s ease-in-out infinite!important;} .sd538-art-panel i,.sd538-art-panel em{ background:color-mix(in srgb,var(--service-accent,var(--color-primary)) 30%,var(--border))!important; } .sd538-art-panel b{color:var(--service-accent,var(--color-primary))!important;} /* nodes become glowing data points */ .sd538-art-node{ width:8px!important;height:8px!important; border-radius:50%!important; background:var(--service-accent,var(--color-primary))!important; box-shadow: 0 0 8px var(--service-accent,var(--color-primary)), 0 0 22px color-mix(in srgb,var(--service-accent,var(--color-primary)) 65%,transparent)!important; animation:sd543Node 2.4s ease-in-out infinite!important; } .sd538-art-node-b{animation-delay:.55s!important;} .sd538-art-node-c{animation-delay:1.1s!important;} /* scanning line */ .sd538-art-scan{ background:linear-gradient(90deg,transparent,var(--service-accent,var(--color-primary)),transparent)!important; box-shadow:0 0 18px color-mix(in srgb,var(--service-accent,var(--color-primary)) 55%,transparent)!important; opacity:.8!important; animation:sd543Scan 3.8s ease-in-out infinite!important; } /* subtle entrance motion */ .sd538-hero-pro-copy{ animation:sd543CopyIn .8s cubic-bezier(.2,.75,.25,1) both; } .sd538-hero-pro-visual{ animation:sd543VisualIn 1s cubic-bezier(.2,.75,.25,1) .08s both; } .sd538-hero-bottom{ animation:sd543BottomIn .8s ease .2s both; } /* animations */ @keyframes sd543GridMove{ from{transform:perspective(700px) rotateX(58deg) translateY(8%) translateX(0);} to{transform:perspective(700px) rotateX(58deg) translateY(8%) translateX(-58px);} } @keyframes sd543Atmosphere{ from{transform:translate3d(0,0,0) scale(1);} to{transform:translate3d(-45px,35px,0) scale(1.12);} } @keyframes sd543OrbA{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-35px,28px) scale(1.08);} } @keyframes sd543OrbB{ 0%,100%{transform:translate(0,0);} 50%{transform:translate(35px,-25px);} } @keyframes sd543Halo{ 0%,100%{transform:scale(.94);opacity:.65;} 50%{transform:scale(1.08);opacity:1;} } @keyframes sd543Beam{ 0%,100%{transform:translateX(-18%) rotate(-18deg);opacity:0;} 25%{opacity:.5;} 55%{opacity:.8;} 100%{transform:translateX(18%) rotate(-18deg);opacity:0;} } @keyframes sd543OrbitA{to{transform:rotate(360deg);}} @keyframes sd543OrbitB{to{transform:rotate(-360deg);}} @keyframes sd543CoreFloat{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);} } @keyframes sd543CorePulse{ 0%,100%{opacity:.35;transform:scale(1);} 50%{opacity:.9;transform:scale(1.035);} } @keyframes sd543Glow{ 0%,100%{opacity:.45;transform:scale(.9);} 50%{opacity:.9;transform:scale(1.1);} } @keyframes sd543PanelA{ 0%,100%{transform:translate3d(0,0,0) rotate(-1deg);} 50%{transform:translate3d(8px,-10px,0) rotate(1deg);} } @keyframes sd543PanelB{ 0%,100%{transform:translate3d(0,0,0) rotate(1deg);} 50%{transform:translate3d(-9px,8px,0) rotate(-1deg);} } @keyframes sd543Node{ 0%,100%{transform:scale(.7);opacity:.55;} 50%{transform:scale(1.35);opacity:1;} } @keyframes sd543Scan{ 0%{transform:translateY(-125px);opacity:0;} 18%{opacity:.8;} 82%{opacity:.8;} 100%{transform:translateY(125px);opacity:0;} } @keyframes sd543CopyIn{ from{opacity:0;transform:translate3d(-22px,0,0);} to{opacity:1;transform:none;} } @keyframes sd543VisualIn{ from{opacity:0;transform:translate3d(24px,0,0) scale(.96);} to{opacity:1;transform:none;} } @keyframes sd543BottomIn{ from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:none;} } @media(max-width:700px){ .sd538-hero-pro-visual{min-height:360px!important;} .sd538-art-orbit-a{width:220px!important;height:220px!important;} .sd538-art-orbit-b{width:285px!important;height:285px!important;} .sd538-art-core{width:104px!important;height:104px!important;border-radius:26px!important;} .sd538-art-icon svg{width:36px!important;height:36px!important;} .sd538-hero-pro::before{background-size:42px 42px;} .sd538-hero-pro::after{width:520px;height:520px;right:-260px;} } @media(prefers-reduced-motion:reduce){ .sd538-hero-pro::before,.sd538-hero-pro::after, .sd538-hero-orb,.sd538-hero-pro-visual::before,.sd538-hero-pro-visual::after, .sd538-art-orbit,.sd538-art-core,.sd538-art-core-glow, .sd538-art-core::before,.sd538-art-panel,.sd538-art-node, .sd538-art-scan,.sd538-hero-pro-copy,.sd538-hero-pro-visual, .sd538-hero-bottom{animation:none!important;} } /* ========================================================= v5.44 — PREMIUM SERVICE HERO / LIGHT + DARK ADAPTIVE Replaces the basic orbit feel with a layered "digital glass" system: perspective grid, moving signal path, data nodes, depth rings, floating glass cards and adaptive light theme. ========================================================= */ .sd538-hero-pro{min-height:690px;display:flex;align-items:center;} .sd538-hero-pro .container{position:relative;z-index:2;} .sd538-hero-pro::before{opacity:.24;background-size:72px 72px;transform:perspective(900px) rotateX(62deg) scale(1.15) translateY(9%);animation:sd544Grid 20s linear infinite;} .sd538-hero-pro::after{width:900px;height:900px;right:-330px;top:-330px;opacity:.7;animation:sd544Atmos 10s ease-in-out infinite alternate;} .sd538-hero-orb-a{opacity:.16!important;filter:blur(90px)!important;} .sd538-hero-orb-b{opacity:.10!important;filter:blur(75px)!important;} .sd538-hero-pro-visual{min-height:520px!important;perspective:1000px;transform-style:preserve-3d;} .sd538-hero-pro-visual::before{width:410px;height:410px;opacity:.8;filter:blur(2px);background:radial-gradient(circle,color-mix(in srgb,var(--service-accent,var(--color-primary)) 13%,transparent),transparent 66%);animation:sd544Pulse 5s ease-in-out infinite;} .sd538-hero-pro-visual::after{height:1px;width:145%;left:-22%;top:52%;opacity:.65;transform:rotate(-27deg);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--service-accent,var(--color-primary)) 85%,transparent),transparent);box-shadow:0 0 18px color-mix(in srgb,var(--service-accent,var(--color-primary)) 38%,transparent);animation:sd544Signal 4.8s ease-in-out infinite;} .sd538-art-orbit-a,.sd538-art-orbit-b{border-color:color-mix(in srgb,var(--service-accent,var(--color-primary)) 30%,var(--border))!important;} .sd538-art-orbit-a{width:320px!important;height:320px!important;border-width:1px!important;border-style:solid!important;animation:sd544RingA 14s linear infinite!important;} .sd538-art-orbit-b{width:430px!important;height:260px!important;border-width:1px!important;border-style:dashed!important;transform:translate(-50%,-50%) rotate(-18deg)!important;animation:sd544RingB 18s linear infinite!important;} .sd538-art-orbit-a::after,.sd538-art-orbit-b::after{content:"";position:absolute;inset:10px;border-radius:inherit;border:1px solid color-mix(in srgb,var(--service-accent,var(--color-primary)) 7%,transparent);} .sd538-art-core{width:148px!important;height:148px!important;border-radius:36px!important;backdrop-filter:blur(16px);transform:translateZ(35px);animation:sd544Core 4.5s ease-in-out infinite!important;} .sd538-art-core::after{content:"";position:absolute;inset:-18px;border-radius:42px;border:1px solid color-mix(in srgb,var(--service-accent,var(--color-primary)) 13%,transparent);animation:sd544CoreRing 3.8s ease-in-out infinite;} .sd538-art-icon svg{width:48px!important;height:48px!important;} .sd538-art-panel{backdrop-filter:blur(18px)!important;border-color:color-mix(in srgb,var(--service-accent,var(--color-primary)) 22%,var(--border))!important;box-shadow:0 18px 55px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.07)!important;} .sd538-art-panel-a{animation:sd544CardA 5.5s ease-in-out infinite!important;} .sd538-art-panel-b{animation:sd544CardB 6.2s ease-in-out infinite!important;} .sd538-art-node{width:6px!important;height:6px!important;animation:sd544Node 2.1s ease-in-out infinite!important;} .sd538-art-scan{opacity:.55;animation:sd544Scan 3.8s ease-in-out infinite!important;} .sd538-hero-bottom{opacity:.8;letter-spacing:.16em;} /* Light theme: clean cream/glass treatment, not a dark visual pasted onto light mode. */ [data-theme="light"] .sd538-hero-pro{ background:radial-gradient(circle at 78% 35%,rgba(232,143,37,.11),transparent 31%),linear-gradient(135deg,#fffdf8 0%,#f7f2e9 55%,#fffaf2 100%); } [data-theme="light"] .sd538-hero-pro::before{opacity:.16;background-image:linear-gradient(90deg,rgba(80,64,42,.09) 1px,transparent 1px),linear-gradient(0deg,rgba(80,64,42,.09) 1px,transparent 1px);} [data-theme="light"] .sd538-hero-pro::after{opacity:.38;} [data-theme="light"] .sd538-art-core{background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(247,241,231,.82))!important;box-shadow:0 22px 55px rgba(74,55,30,.13),0 0 35px rgba(230,140,35,.13)!important;} [data-theme="light"] .sd538-art-panel{background:rgba(255,255,255,.72)!important;box-shadow:0 18px 45px rgba(74,55,30,.10),inset 0 1px 0 rgba(255,255,255,.95)!important;} [data-theme="light"] .sd538-art-orbit-a,[data-theme="light"] .sd538-art-orbit-b{border-color:rgba(120,90,45,.20)!important;} [data-theme="light"] .sd538-art-orbit-a::after,[data-theme="light"] .sd538-art-orbit-b::after{border-color:rgba(120,90,45,.08);} [data-theme="light"] .sd538-hero-bottom{color:#665d51;} @keyframes sd544Grid{from{background-position:0 0;transform:perspective(900px) rotateX(62deg) scale(1.15) translateY(9%)}to{background-position:0 72px;transform:perspective(900px) rotateX(62deg) scale(1.15) translateY(9%)}} @keyframes sd544Atmos{from{transform:translate3d(0,0,0) scale(.96)}to{transform:translate3d(-55px,45px,0) scale(1.05)}} @keyframes sd544Pulse{0%,100%{transform:scale(.94);opacity:.65}50%{transform:scale(1.08);opacity:1}} @keyframes sd544Signal{0%{transform:translateX(-18%) rotate(-27deg);opacity:0}25%{opacity:.7}75%{opacity:.7}100%{transform:translateX(18%) rotate(-27deg);opacity:0}} @keyframes sd544RingA{to{transform:translate(-50%,-50%) rotate(360deg)}} @keyframes sd544RingB{to{transform:translate(-50%,-50%) rotate(-360deg)}} @keyframes sd544Core{0%,100%{transform:translateZ(35px) translateY(0) rotateX(0)}50%{transform:translateZ(55px) translateY(-9px) rotateX(2deg)}} @keyframes sd544CoreRing{0%,100%{transform:scale(.94);opacity:.25}50%{transform:scale(1.08);opacity:.65}} @keyframes sd544CardA{0%,100%{transform:translate3d(0,0,25px) rotate(-4deg)}50%{transform:translate3d(-9px,-13px,35px) rotate(-2deg)}} @keyframes sd544CardB{0%,100%{transform:translate3d(0,0,15px) rotate(4deg)}50%{transform:translate3d(10px,12px,28px) rotate(6deg)}} @keyframes sd544Node{0%,100%{transform:scale(.65);opacity:.35}50%{transform:scale(1.5);opacity:1}} @keyframes sd544Scan{0%{transform:translateY(-115%);opacity:0}20%{opacity:.65}80%{opacity:.65}100%{transform:translateY(115%);opacity:0}} @media(max-width:900px){ .sd538-hero-pro{min-height:auto;padding-top:34px;padding-bottom:28px} .sd538-hero-pro-visual{min-height:390px!important;margin-top:18px} .sd538-art-orbit-a{width:240px!important;height:240px!important} .sd538-art-orbit-b{width:310px!important;height:190px!important} .sd538-art-core{width:120px!important;height:120px!important} } @media(prefers-reduced-motion:reduce){.sd538-hero-pro *,.sd538-hero-pro::before,.sd538-hero-pro::after{animation:none!important;transition:none!important}} /* ========================================================= v5.45 — REAL LOGO IMAGE + REAL PHOTOS ========================================================= */ .site-logo .logo-img{display:block;flex:0 0 auto;width:44px;height:44px;border-radius:13px;box-shadow:0 8px 26px color-mix(in srgb,var(--color-primary) 22%,transparent);transition:transform .35s var(--pro-ease,ease)} .site-logo:hover .logo-img{transform:rotate(-6deg) scale(1.05)} .site-logo .custom-logo{display:block;width:auto;height:auto;max-height:46px;max-width:190px} .footer-brand-lockup .logo-img{display:block;flex:0 0 auto;width:46px;height:46px;border-radius:14px} .footer-brand-lockup .custom-logo{display:block;width:auto;height:auto;max-height:52px;max-width:200px} @media(max-width:700px){.site-logo .logo-img{width:38px;height:38px;border-radius:11px}.site-logo .custom-logo{max-height:38px;max-width:150px}} @media(max-width:380px){.site-logo .logo-img{width:35px;height:35px;border-radius:10px}} .rashid-real-photo{display:block;width:100%;height:100%;object-fit:cover} .svh538-card-photo{position:relative;margin:-28px -28px 22px;height:172px;overflow:hidden;border-radius:23px 23px 0 0;background:var(--surface-2)} .svh538-card-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--pro-ease,ease)} .svh538-card-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 48%,rgba(0,0,0,.38));pointer-events:none} .svh538-card:hover .svh538-card-photo img{transform:scale(1.07)} .svh538-card-photo ~ .svh538-card-icon{margin-top:18px} @media(max-width:700px){.svh538-card-photo{height:190px}} @media(prefers-reduced-motion:reduce){.svh538-card-photo img,.site-logo .logo-img{transition:none!important}.svh538-card:hover .svh538-card-photo img,.site-logo:hover .logo-img{transform:none!important}} /* ========================================================= v5.46 — MOBILE HEADER / MENU DRAWER FIX Root cause: .site-header had backdrop-filter + transform. Both turn the header into the containing block of every position:fixed child, so the mobile menu drawer and its dark backdrop were clipped to the 64px-tall header (only ~2 links visible, the rest cut off) instead of covering the screen. The blur now lives on a pseudo-element, and the header only gets a transform while it is hidden on scroll. ========================================================= */ @media (max-width:960px){ .site-header{transform:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;filter:none!important;will-change:auto!important;contain:none!important;} .site-header:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;-webkit-backdrop-filter:blur(18px) saturate(130%);backdrop-filter:blur(18px) saturate(130%);} .site-header.header-hidden{transform:translateY(-110%)!important;} body.menu-open .site-header.header-hidden{transform:none!important;} /* keep logo + buttons above the drawer so the menu can always be closed */ .site-logo,.header-actions{position:relative;z-index:9700;} /* drawer: full height, scrollable, room for the WhatsApp button */ .main-nav{height:100vh!important;height:100dvh!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;box-shadow:-18px 0 60px rgba(0,0,0,.28);} .main-nav:not(.is-open){visibility:hidden;pointer-events:none;box-shadow:none;transition:transform .35s ease,visibility 0s linear .35s!important;} .main-nav.is-open{visibility:visible;pointer-events:auto;} .main-nav .sub-menu{white-space:normal;} .main-nav .sub-menu a{white-space:normal!important;padding:11px 14px!important;font-size:.84rem!important;} .main-nav li.menu-item-has-children.sub-menu-open>.sub-menu{max-height:none!important;overflow:visible!important;padding-bottom:6px!important;} /* proper expand chevron on parent items (it used to render as a stray dash) */ .main-nav>ul>li.menu-item-has-children>a{display:flex!important;align-items:center!important;justify-content:space-between!important;} .main-nav>ul>li.menu-item-has-children>a:after{content:""!important;position:static!important;left:auto!important;right:auto!important;bottom:auto!important;width:8px!important;height:8px!important;border-radius:0!important;background:none!important;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)!important;margin:-3px 4px 0 auto!important;opacity:.7;transition:transform .25s ease!important;} .main-nav>ul>li.menu-item-has-children.sub-menu-open>a:after{transform:rotate(-135deg)!important;margin-top:3px!important;} .main-nav .nav-cta{font-size:.9rem!important;padding:15px 18px!important;gap:8px!important;color:#0B0B0D!important;background:var(--color-primary)!important;font-weight:800!important;} .main-nav .nav-cta:hover{color:#0B0B0D!important;background:var(--color-primary)!important;} /* logged-in admin bar sits above the fixed drawer */ body.admin-bar .main-nav,body.admin-bar .nav-backdrop{top:32px!important;} } @media screen and (max-width:782px){ body.admin-bar .main-nav,body.admin-bar .nav-backdrop{top:46px!important;} } /* v5.46 — the home "Limited-Time Offer" bar was hidden behind the fixed header (its text and the dismiss button were covered). Start it below the header. */ .offer-bar{margin-top:72px;} @media (max-width:960px){.offer-bar{margin-top:64px;}} body.admin-bar .offer-bar{margin-top:104px;} @media (max-width:960px){body.admin-bar .offer-bar{margin-top:96px;}} @media screen and (max-width:782px){body.admin-bar .offer-bar{margin-top:110px;}} @media (max-width:700px){ .offer-bar-inner{gap:8px!important;padding:10px 38px 10px 14px!important;} .offer-bar-text{display:block!important;text-align:center;line-height:1.55;font-size:.8rem;} .offer-bar-text svg{display:inline-block;vertical-align:-3px;margin-right:4px;} .offer-countdown{display:inline-block;margin-left:2px;} } /* v5.48 — real imagery completion pass * Adds a real project/service photograph to templates that previously had * no visible photograph. Images use the central rashid_photo_img() system, * with a bundled local fallback, so missing remote images do not break layout. */ .page-hero .container{position:relative} .page-real-visual{ margin:28px 0 0; max-width:520px; position:relative; z-index:2; } .page-real-photo{ display:block; width:100%; height:260px; object-fit:cover; border-radius:22px; border:1px solid rgba(255,255,255,.10); box-shadow:0 20px 60px rgba(0,0,0,.22); } .faq-v530-real-photo{margin:18px 0 20px} .faq-real-img,.cv-real-img{ display:block; width:100%; height:180px; object-fit:cover; border-radius:16px; } .cv-real-photo{margin:14px 0 18px} .error-real-img{ display:block; width:min(700px,100%); height:260px; object-fit:cover; margin:30px auto 0; border-radius:22px; border:1px solid rgba(255,255,255,.10); box-shadow:0 20px 60px rgba(0,0,0,.22); } @media (min-width:900px){ .page-hero .container{ padding-right:560px; min-height:330px; } .page-real-visual{ position:absolute; right:0; top:50%; transform:translateY(-50%); width:470px; margin:0; } .page-real-photo{height:270px} } @media (max-width:899px){ .page-real-visual{margin-top:24px} .page-real-photo{height:220px} } @media (max-width:600px){ .page-real-photo,.error-real-img{height:200px;border-radius:16px} .faq-real-img,.cv-real-img{height:150px} } /* ========================================================= v5.49 — HOMEPAGE PROJECT + BLOG PREMIUM CARD REFRESH ========================================================= */ .featured-projects .project-slider{padding:8px 2px 34px;} .featured-projects .project-slider-track{align-items:stretch;} .featured-projects .project-slide{padding:8px 7px 14px;} .project-card-pro{position:relative;height:100%;display:flex;flex-direction:column;background:var(--surface)!important;border:1px solid color-mix(in srgb,var(--border) 88%,transparent)!important;border-radius:24px!important;overflow:hidden;box-shadow:0 18px 55px rgba(0,0,0,.07)!important;} .project-card-pro:hover{transform:translateY(-9px)!important;box-shadow:0 30px 80px color-mix(in srgb,var(--color-primary) 13%,transparent)!important;} .project-thumb-pro{aspect-ratio:16/9!important;min-height:0;position:relative;background:var(--surface-2);overflow:hidden;border-radius:0!important;} .project-thumb-pro img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .75s cubic-bezier(.2,.7,.2,1),filter .45s ease!important;} .project-card-pro:hover .project-thumb-pro img{transform:scale(1.07)!important;filter:saturate(1.08) contrast(1.02);} .project-image-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.06) 20%,rgba(0,0,0,.64) 100%);pointer-events:none;} .project-topline{position:absolute;left:17px;right:17px;top:16px;display:flex;align-items:center;justify-content:space-between;z-index:2;} .project-topline .project-cat{position:static;display:inline-flex!important;padding:7px 11px!important;border-radius:999px!important;background:var(--color-primary)!important;color:#111!important;font-size:.64rem!important;font-weight:850!important;letter-spacing:.04em;box-shadow:0 8px 20px rgba(0,0,0,.16);} .project-open{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.9);color:#111;transform:translateY(-4px);opacity:0;transition:.3s ease;} .project-open svg{width:15px;height:15px;}.project-card-pro:hover .project-open{opacity:1;transform:translateY(0);} .project-number{position:absolute;right:18px;bottom:13px;color:rgba(255,255,255,.72);font-size:.7rem;font-weight:800;letter-spacing:.12em;z-index:2;} .project-body-pro{padding:21px 22px 22px!important;} .project-meta-line{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:.64rem;text-transform:uppercase;letter-spacing:.07em;margin-bottom:9px;} .project-body-pro h3{font-size:1.15rem!important;line-height:1.22!important;letter-spacing:-.025em!important;margin:0 0 9px!important;} .project-body-pro p{font-size:.82rem;line-height:1.65;color:var(--muted);margin:0;min-height:2.7em;} .project-view-link{display:inline-flex;align-items:center;gap:6px;margin-top:17px;padding-top:13px;border-top:1px solid var(--border);width:100%;font-size:.7rem;font-weight:800;color:var(--text);} .project-view-link svg{width:15px;height:15px;transition:transform .25s ease;}.project-card-pro:hover .project-view-link svg{transform:translateX(4px);} .home-blog-pro-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;} .home-blog-pro-card{overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:22px;box-shadow:0 16px 50px rgba(0,0,0,.055);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;animation-delay:calc(var(--card-index) * 55ms);} .home-blog-pro-card:hover{transform:translateY(-8px);box-shadow:0 28px 75px color-mix(in srgb,var(--color-primary) 11%,transparent);border-color:color-mix(in srgb,var(--color-primary) 38%,var(--border));} .home-blog-pro-image{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2);} .home-blog-pro-image img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .35s ease!important;} .home-blog-pro-card:hover .home-blog-pro-image img{transform:scale(1.065);filter:saturate(1.07);} .home-blog-pro-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.48) 100%);pointer-events:none;} .home-blog-pro-arrow{position:absolute;right:15px;bottom:15px;width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:var(--text);color:var(--bg);opacity:0;transform:translateY(8px);transition:.3s ease;} .home-blog-pro-arrow svg{width:16px;height:16px;}.home-blog-pro-card:hover .home-blog-pro-arrow{opacity:1;transform:translateY(0);} .home-blog-pro-body{padding:20px 21px 18px;} .home-blog-pro-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;color:var(--muted);font-size:.65rem;text-transform:uppercase;letter-spacing:.07em;} .home-blog-pro-meta span{color:var(--color-primary);font-weight:800;} .home-blog-pro-body h3{font-size:1.16rem;line-height:1.25;letter-spacing:-.02em;margin:0 0 9px;} .home-blog-pro-body h3 a{color:var(--text);} .home-blog-pro-body p{font-size:.82rem;line-height:1.65;color:var(--muted);margin:0;min-height:2.7em;} .home-blog-pro-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:17px;padding-top:13px;border-top:1px solid var(--border);font-size:.68rem;color:var(--muted);} .home-blog-pro-footer span,.home-blog-pro-footer a{display:inline-flex;align-items:center;gap:5px;}.home-blog-pro-footer svg{width:14px;height:14px;}.home-blog-pro-footer a{color:var(--text);font-weight:800;}.home-blog-pro-footer a svg{transition:transform .25s ease;}.home-blog-pro-footer a:hover svg{transform:translateX(4px);} @media(max-width:900px){.home-blog-pro-grid{grid-template-columns:repeat(2,minmax(0,1fr));}} @media(max-width:620px){.home-blog-pro-grid{grid-template-columns:1fr;gap:16px;}.project-body-pro{padding:18px!important;}.project-topline{left:13px;right:13px;top:13px;}.project-open{opacity:1;transform:none;}.home-blog-pro-arrow{opacity:1;transform:none;}} @media(prefers-reduced-motion:reduce){.project-card-pro,.project-thumb-pro img,.home-blog-pro-card,.home-blog-pro-image img,.project-open,.home-blog-pro-arrow{transition:none!important;}} /* v5.49 — premium homepage project + blog cards */ .featured-projects .project-slider{padding:8px 2px 34px}.featured-projects .project-slide{padding:8px 7px 14px} .project-card-pro{position:relative;height:100%;display:flex;flex-direction:column;background:var(--surface)!important;border:1px solid color-mix(in srgb,var(--border) 88%,transparent)!important;border-radius:24px!important;overflow:hidden;box-shadow:0 18px 55px rgba(0,0,0,.07)!important}.project-card-pro:hover{transform:translateY(-9px)!important;box-shadow:0 30px 80px color-mix(in srgb,var(--color-primary) 13%,transparent)!important}.project-thumb-pro{aspect-ratio:16/9!important;min-height:0;position:relative;background:var(--surface-2);overflow:hidden;border-radius:0!important}.project-thumb-pro img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .75s cubic-bezier(.2,.7,.2,1),filter .45s ease!important}.project-card-pro:hover .project-thumb-pro img{transform:scale(1.07)!important;filter:saturate(1.08) contrast(1.02)}.project-image-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.06) 20%,rgba(0,0,0,.64) 100%);pointer-events:none}.project-topline{position:absolute;left:17px;right:17px;top:16px;display:flex;align-items:center;justify-content:space-between;z-index:2}.project-topline .project-cat{position:static;display:inline-flex!important;padding:7px 11px!important;border-radius:999px!important;background:var(--color-primary)!important;color:#111!important;font-size:.64rem!important;font-weight:850!important;box-shadow:0 8px 20px rgba(0,0,0,.16)}.project-open{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.9);color:#111;transform:translateY(-4px);opacity:0;transition:.3s ease}.project-open svg{width:15px;height:15px}.project-card-pro:hover .project-open{opacity:1;transform:translateY(0)}.project-number{position:absolute;right:18px;bottom:13px;color:rgba(255,255,255,.72);font-size:.7rem;font-weight:800;letter-spacing:.12em;z-index:2}.project-body-pro{padding:21px 22px 22px!important}.project-meta-line{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:.64rem;text-transform:uppercase;letter-spacing:.07em;margin-bottom:9px}.project-body-pro h3{font-size:1.15rem!important;line-height:1.22!important;letter-spacing:-.025em!important;margin:0 0 9px!important}.project-body-pro p{font-size:.82rem;line-height:1.65;color:var(--muted);margin:0;min-height:2.7em}.project-view-link{display:inline-flex;align-items:center;gap:6px;margin-top:17px;padding-top:13px;border-top:1px solid var(--border);width:100%;font-size:.7rem;font-weight:800;color:var(--text)}.project-view-link svg{width:15px;height:15px;transition:transform .25s ease}.project-card-pro:hover .project-view-link svg{transform:translateX(4px)} .home-blog-pro-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.home-blog-pro-card{overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:22px;box-shadow:0 16px 50px rgba(0,0,0,.055);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;animation-delay:calc(var(--card-index) * 55ms)}.home-blog-pro-card:hover{transform:translateY(-8px);box-shadow:0 28px 75px color-mix(in srgb,var(--color-primary) 11%,transparent);border-color:color-mix(in srgb,var(--color-primary) 38%,var(--border))}.home-blog-pro-image{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}.home-blog-pro-image img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .35s ease!important}.home-blog-pro-card:hover .home-blog-pro-image img{transform:scale(1.065);filter:saturate(1.07)}.home-blog-pro-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.48) 100%);pointer-events:none}.home-blog-pro-arrow{position:absolute;right:15px;bottom:15px;width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:var(--text);color:var(--bg);opacity:0;transform:translateY(8px);transition:.3s ease}.home-blog-pro-arrow svg{width:16px;height:16px}.home-blog-pro-card:hover .home-blog-pro-arrow{opacity:1;transform:translateY(0)}.home-blog-pro-body{padding:20px 21px 18px}.home-blog-pro-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;color:var(--muted);font-size:.65rem;text-transform:uppercase;letter-spacing:.07em}.home-blog-pro-meta span{color:var(--color-primary);font-weight:800}.home-blog-pro-body h3{font-size:1.16rem;line-height:1.25;letter-spacing:-.02em;margin:0 0 9px}.home-blog-pro-body h3 a{color:var(--text)}.home-blog-pro-body p{font-size:.82rem;line-height:1.65;color:var(--muted);margin:0;min-height:2.7em}.home-blog-pro-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:17px;padding-top:13px;border-top:1px solid var(--border);font-size:.68rem;color:var(--muted)}.home-blog-pro-footer span,.home-blog-pro-footer a{display:inline-flex;align-items:center;gap:5px}.home-blog-pro-footer svg{width:14px;height:14px}.home-blog-pro-footer a{color:var(--text);font-weight:800}.home-blog-pro-footer a svg{transition:transform .25s ease}.home-blog-pro-footer a:hover svg{transform:translateX(4px)} @media(max-width:900px){.home-blog-pro-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.home-blog-pro-grid{grid-template-columns:1fr;gap:16px}.project-body-pro{padding:18px!important}.project-topline{left:13px;right:13px;top:13px}.project-open{opacity:1;transform:none}.home-blog-pro-arrow{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.project-card-pro,.project-thumb-pro img,.home-blog-pro-card,.home-blog-pro-image img,.project-open,.home-blog-pro-arrow{transition:none!important}} /* v5.50 — premium single blog article refresh */ .pro-single-hero{padding:68px 0 48px;background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--color-primary) 9%,transparent),transparent 48%);} .pro-single-hero-inner{max-width:980px;margin:0 auto;text-align:center;} .pro-single-breadcrumb .breadcrumbs{justify-content:center;margin-bottom:24px;} .pro-single-hero h1{max-width:980px;font-weight:850;} .pro-author-row{margin-top:26px;} .pro-single-content-section{padding-bottom:110px;} .pro-single-layout{grid-template-columns:minmax(0,790px) 300px;gap:58px;} .pro-article{background:var(--surface);border:1px solid var(--border);border-radius:26px;padding:clamp(24px,4vw,52px);box-shadow:0 22px 70px rgba(0,0,0,.045);} .pro-article-topbar{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid var(--border);} .pro-article>p:first-of-type{font-size:1.18rem;line-height:1.85;font-weight:500;} .pro-article p{font-size:1rem;line-height:1.9;} .pro-article h2{font-size:clamp(1.5rem,3vw,2.15rem);line-height:1.15;margin-top:48px;padding-top:6px;letter-spacing:-.025em;} .pro-article h3{font-size:1.28rem;line-height:1.25;margin-top:34px;} .pro-article blockquote{margin:36px 0;padding:25px 28px;border:1px solid var(--border);border-left:4px solid var(--color-primary);border-radius:16px;background:color-mix(in srgb,var(--color-primary) 5%,var(--surface));font-size:1.08rem;line-height:1.75;} .pro-article img{box-shadow:0 15px 40px rgba(0,0,0,.08);} .pro-tags{display:flex;align-items:center;flex-wrap:wrap;gap:8px!important;padding-top:28px;border-top:1px solid var(--border);} .pro-tags-label{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-right:4px;} .pro-tags a{padding:7px 11px;border:1px solid var(--border);border-radius:999px;font-size:.7rem;color:var(--text);background:var(--bg);} .pro-tags a:hover{border-color:var(--color-primary);color:var(--color-primary);} .pro-share{display:flex;align-items:center;gap:10px!important;flex-wrap:wrap;padding:22px 0!important;} .pro-share strong{font-size:.85rem;margin-right:2px;}.pro-share .share-label{font-size:.72rem;color:var(--muted);margin-right:auto;} .pro-share>a,.pro-share>button{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--border);border-radius:11px;background:var(--bg);color:var(--text);padding:0;position:relative;cursor:pointer;} .pro-share>a:hover,.pro-share>button:hover{border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-2px);} .pro-share svg{width:17px;height:17px;} .pro-post-author-card{display:flex;gap:17px;align-items:center;margin-top:30px;padding:22px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(135deg,var(--bg),color-mix(in srgb,var(--color-primary) 4%,var(--surface)));} .pro-post-author-avatar{width:52px;height:52px;flex:0 0 52px;border-radius:50%;display:grid;place-items:center;background:var(--text);color:var(--bg);font-weight:850;font-size:1.05rem;} .pro-post-author-card h3{margin:3px 0 3px;font-size:1rem;}.pro-post-author-card p{margin:0;color:var(--muted);font-size:.78rem;line-height:1.6;} .pro-post-author-card .section-label{font-size:.63rem;} .pro-post-author-card>div:last-child{min-width:0;} .post-nav{margin-top:30px!important;} .post-nav>a{background:var(--bg);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;} .post-nav>a:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--color-primary) 45%,var(--border));box-shadow:0 12px 30px rgba(0,0,0,.05);} .post-nav small{display:block;color:var(--color-primary);font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px;} .pro-related{margin-top:70px!important;padding-top:35px!important;border-top:1px solid var(--border);} .pro-related .section-head{align-items:end;}.pro-related .section-head h2{margin:5px 0 0;font-size:1.55rem;} .pro-related-card{box-shadow:0 10px 35px rgba(0,0,0,.04)!important;}.pro-related-card .blog-thumb{position:relative;}.pro-related-arrow{position:absolute;right:12px;bottom:12px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--surface);color:var(--text);box-shadow:0 8px 25px rgba(0,0,0,.18);}.pro-related-arrow svg{width:15px;} .pro-single-sidebar .blog-sticky-stack{top:105px;gap:14px;}.pro-side-widget{border-radius:20px!important;padding:22px!important;overflow:hidden;}.pro-side-widget h3{font-size:1.05rem;line-height:1.3;margin:8px 0;}.pro-side-widget p{font-size:.78rem;line-height:1.65;color:var(--muted);margin:0 0 16px;}.pro-toc-widget{min-height:90px;}.pro-toc-widget .sidebar-toc-mini a{display:flex;justify-content:space-between;align-items:center;gap:8px;}.pro-help-widget{background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--color-primary) 8%,var(--surface)));}.pro-help-widget .side-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:color-mix(in srgb,var(--color-primary) 14%,transparent);color:var(--color-primary);}.pro-help-widget .side-icon svg{width:18px;}.pro-share-widget .section-label{display:block;margin-bottom:13px;}.side-share-links{display:grid;gap:8px;}.side-share-links a{display:flex;align-items:center;gap:9px;padding:10px 11px;border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:.73rem;background:var(--bg);}.side-share-links a:hover{border-color:var(--color-primary);color:var(--color-primary);}.side-share-links svg{width:16px;height:16px;} .single-blog-cover-section{padding-bottom:58px;}.single-blog-cover{box-shadow:0 28px 90px rgba(0,0,0,.1);} @media(max-width:980px){.pro-single-layout{grid-template-columns:1fr;gap:35px}.pro-single-sidebar{order:2}.pro-single-sidebar .blog-sticky-stack{grid-template-columns:repeat(2,minmax(0,1fr));position:static}.pro-share-widget{grid-column:1/-1;}} @media(max-width:620px){.pro-single-hero{padding:48px 0 32px}.pro-single-hero h1{font-size:2.35rem}.pro-single-content-section{padding-bottom:70px}.pro-article{padding:22px 18px;border-radius:18px}.pro-article p{font-size:.94rem}.pro-article>p:first-of-type{font-size:1.03rem}.pro-post-author-card{align-items:flex-start;padding:18px}.pro-single-sidebar .blog-sticky-stack{grid-template-columns:1fr}.pro-share-widget{grid-column:auto}.pro-related .section-head{align-items:flex-start;gap:12px;flex-direction:column}.pro-related .grid{grid-template-columns:1fr}.single-blog-cover{border-radius:16px;aspect-ratio:16/10;}.pro-share strong{width:100%;}.pro-share .share-label{display:none;}} /* v5.51 — refined single post: cleaner hero, no oversized cover image, subtle motion */ .single-blog-hero.pro-single-hero{position:relative;overflow:hidden;padding:58px 0 38px;background:radial-gradient(circle at 50% -15%,color-mix(in srgb,var(--color-primary) 12%,transparent),transparent 48%);} .single-blog-hero.pro-single-hero:before{content:"";position:absolute;left:50%;top:0;width:1px;height:100%;background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--color-primary) 22%,transparent),transparent);opacity:.45;} .pro-single-hero-inner{position:relative;z-index:1;} .pro-single-hero h1{font-size:clamp(2.6rem,5.2vw,4.8rem);line-height:.98;letter-spacing:-.055em;max-width:900px;margin:12px auto 0;text-wrap:balance;} .single-blog-deck{max-width:650px!important;margin:22px auto 0!important;font-size:.98rem!important;line-height:1.75!important;color:var(--muted)!important;} .pro-author-row{justify-content:center;} .single-hero-accent{display:flex;align-items:center;justify-content:center;gap:9px;margin:28px auto 0;height:8px;} .single-hero-accent span{width:34px;height:1px;background:var(--border);} .single-hero-accent i{width:7px;height:7px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 0 6px color-mix(in srgb,var(--color-primary) 10%,transparent);animation:singlePulse 2.2s ease-in-out infinite;} @keyframes singlePulse{0%,100%{transform:scale(.8);opacity:.7}50%{transform:scale(1.15);opacity:1}} .pro-single-content-section{padding-top:18px;} .pro-single-layout{align-items:start;} .pro-article{position:relative;overflow:hidden;} .pro-article:before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--color-primary),transparent);opacity:.75;} .pro-article-topbar{margin-bottom:30px;} .pro-article h2,.pro-article h3{scroll-margin-top:120px;} .pro-article img{border-radius:14px;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease;} .pro-article img:hover{transform:translateY(-3px);box-shadow:0 22px 55px rgba(0,0,0,.12);} .pro-single-sidebar{position:relative;} .pro-side-widget{transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;} .pro-side-widget:hover{transform:translateY(-4px);box-shadow:0 18px 45px rgba(0,0,0,.06);border-color:color-mix(in srgb,var(--color-primary) 25%,var(--border));} .pro-related-card{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease!important;} .pro-related-card:hover{transform:translateY(-7px)!important;box-shadow:0 22px 55px rgba(0,0,0,.09)!important;border-color:color-mix(in srgb,var(--color-primary) 30%,var(--border));} .pro-related-card .blog-thumb img{transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .4s ease;} .pro-related-card:hover .blog-thumb img{transform:scale(1.06);filter:saturate(1.06);} .single-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);} .single-reveal.is-visible{opacity:1;transform:none;} .pro-related-card:nth-child(2){transition-delay:.08s!important}.pro-related-card:nth-child(3){transition-delay:.16s!important} @media(max-width:980px){.pro-single-hero h1{font-size:clamp(2.5rem,7vw,4rem)}.pro-single-layout{gap:30px}.pro-single-content-section{padding-top:5px;}} @media(max-width:620px){.single-blog-hero.pro-single-hero{padding:42px 0 30px}.pro-single-hero h1{font-size:2.35rem;line-height:1.02}.single-blog-deck{font-size:.9rem!important}.single-hero-accent{margin-top:22px}.pro-article{box-shadow:0 14px 40px rgba(0,0,0,.045)} } @media(prefers-reduced-motion:reduce){.single-reveal,.single-hero-accent i,.pro-related-card,.pro-related-card .blog-thumb img,.pro-side-widget,.pro-article img{transition:none!important;animation:none!important}.single-reveal{opacity:1;transform:none!important}} /* v5.55 — final single-post navigation rebuild */ .premium-article .post-nav{ display:flex!important; width:100%!important; max-width:none!important; box-sizing:border-box!important; gap:18px!important; margin:42px 0 0!important; padding:30px 0 0!important; border-top:1px solid var(--border)!important; align-items:stretch!important; justify-content:stretch!important; } .premium-article .post-nav-item{ position:relative!important; isolation:isolate!important; overflow:hidden!important; display:flex!important; align-items:center!important; flex:1 1 0!important; width:auto!important; max-width:none!important; min-width:0!important; min-height:112px!important; box-sizing:border-box!important; margin:0!important; padding:20px 22px!important; gap:16px!important; border:1px solid var(--border)!important; border-radius:18px!important; background:linear-gradient(145deg,var(--surface),var(--bg))!important; color:var(--text)!important; text-decoration:none!important; box-shadow:0 10px 28px rgba(0,0,0,.035)!important; transition:transform .45s cubic-bezier(.2,.75,.2,1),box-shadow .45s ease,border-color .35s ease!important; animation:postNavIn .7s cubic-bezier(.2,.75,.2,1) both; } .premium-article .post-nav-item:before{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(110deg,transparent 15%,color-mix(in srgb,var(--color-primary) 12%,transparent) 50%,transparent 85%); transform:translateX(-120%);transition:transform .8s ease; } .premium-article .post-nav-item:hover:before{transform:translateX(120%)} .premium-article .post-nav-item:hover{ transform:translateY(-6px)!important; border-color:color-mix(in srgb,var(--color-primary) 50%,var(--border))!important; box-shadow:0 22px 48px color-mix(in srgb,var(--color-primary) 10%,transparent)!important; } .premium-article .post-nav-prev{justify-content:flex-start!important;text-align:left!important} .premium-article .post-nav-next{justify-content:flex-end!important;text-align:right!important;animation-delay:.08s} .premium-article .post-nav-arrow{ width:44px!important;height:44px!important;min-width:44px!important;flex:0 0 44px!important; display:grid!important;place-items:center!important;border-radius:50%!important; background:color-mix(in srgb,var(--color-primary) 12%,var(--surface))!important; color:var(--color-primary)!important; border:1px solid color-mix(in srgb,var(--color-primary) 22%,var(--border))!important; transition:transform .4s cubic-bezier(.2,.75,.2,1),background .3s ease,color .3s ease!important; } .premium-article .post-nav-arrow svg{width:17px!important;height:17px!important} .premium-article .post-nav-prev:hover .post-nav-arrow{transform:translateX(-6px);background:var(--color-primary)!important;color:#111!important} .premium-article .post-nav-next:hover .post-nav-arrow{transform:translateX(6px);background:var(--color-primary)!important;color:#111!important} .premium-article .post-nav-copy{ min-width:0!important;width:auto!important;flex:1 1 auto!important; display:flex!important;flex-direction:column!important;gap:6px!important; } .premium-article .post-nav-copy small{display:block!important;margin:0!important;color:var(--color-primary)!important;font-size:.62rem!important;font-weight:850!important;letter-spacing:.12em!important;text-transform:uppercase!important;line-height:1.2!important} .premium-article .post-nav-copy b{display:block!important;width:100%!important;max-width:none!important;color:var(--text)!important;font-size:1rem!important;line-height:1.4!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important} .premium-article .post-nav-empty{flex:1 1 0!important;min-height:112px!important} @keyframes postNavIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} @media(max-width:620px){ .premium-article .post-nav{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;padding-top:24px!important;margin-top:30px!important} .premium-article .post-nav-item{min-height:88px!important;padding:16px!important;border-radius:15px!important} .premium-article .post-nav-next{justify-content:flex-start!important;text-align:left!important} .premium-article .post-nav-copy b{font-size:.9rem!important} .premium-article .post-nav-empty{display:none!important} } @media(prefers-reduced-motion:reduce){ .premium-article .post-nav-item,.premium-article .post-nav-item:before,.premium-article .post-nav-arrow{animation:none!important;transition:none!important} } /* v5.56 — NEW single-post reading navigation: rebuilt from scratch */ .single-story-nav{margin:58px 0 0;padding:34px 0 0;border-top:1px solid var(--border);position:relative;} .single-story-nav-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px;} .single-story-nav-head h2{margin:5px 0 0;font-size:clamp(1.45rem,3vw,2rem);letter-spacing:-.035em;} .single-story-all{display:inline-flex;align-items:center;gap:8px;color:var(--text);font-weight:800;font-size:.75rem;text-decoration:none;white-space:nowrap;transition:color .25s ease,transform .3s ease;} .single-story-all svg{width:15px;height:15px;transition:transform .3s ease;} .single-story-all:hover{color:var(--color-primary);transform:translateX(2px)} .single-story-all:hover svg{transform:translateX(4px)} .single-story-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:100%;} .single-story-card{position:relative;display:flex!important;flex-direction:column!important;justify-content:space-between!important;min-width:0!important;min-height:168px!important;padding:22px!important;border:1px solid var(--border)!important;border-radius:20px!important;background:linear-gradient(145deg,var(--surface),var(--bg))!important;color:var(--text)!important;text-decoration:none!important;overflow:hidden!important;box-sizing:border-box!important;box-shadow:0 12px 32px rgba(0,0,0,.035)!important;transition:transform .45s cubic-bezier(.2,.75,.2,1),box-shadow .45s ease,border-color .35s ease!important;animation:storyCardIn .65s cubic-bezier(.2,.75,.2,1) both;} .single-story-card:nth-child(2){animation-delay:.1s} .single-story-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 10% 0%,color-mix(in srgb,var(--color-primary) 15%,transparent),transparent 45%);opacity:.65;pointer-events:none;} .single-story-card:after{content:"";position:absolute;top:0;bottom:0;width:80px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--color-primary) 12%,transparent),transparent);transform:translateX(-140%);transition:transform .8s ease;pointer-events:none;} .single-story-card-prev:after{left:0}.single-story-card-next:after{right:0;transform:translateX(140%)} .single-story-card:hover{transform:translateY(-7px)!important;border-color:color-mix(in srgb,var(--color-primary) 48%,var(--border))!important;box-shadow:0 24px 55px color-mix(in srgb,var(--color-primary) 10%,transparent)!important;} .single-story-card:hover:after{transform:translateX(180%)} .single-story-card-next:hover:after{transform:translateX(-180%)} .single-story-card-top,.single-story-card-bottom{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted);font-size:.65rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;} .single-story-card-top>span:not(.single-story-arrow){color:var(--color-primary)} .single-story-arrow{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--color-primary) 11%,var(--surface));border:1px solid color-mix(in srgb,var(--color-primary) 22%,var(--border));color:var(--color-primary);transition:transform .4s cubic-bezier(.2,.75,.2,1),background .3s ease,color .3s ease;} .single-story-arrow svg{width:15px;height:15px} .single-story-card:hover .single-story-arrow{background:var(--color-primary);color:#111;} .single-story-card-prev:hover .single-story-arrow{transform:translateX(-5px)} .single-story-card-next:hover .single-story-arrow{transform:translateX(5px)} .single-story-card strong{position:relative;z-index:1;display:block;margin:25px 0;font-size:clamp(1rem,1.7vw,1.22rem);line-height:1.35;letter-spacing:-.02em;max-width:100%;} .single-story-card-bottom{font-size:.62rem;letter-spacing:.05em;text-transform:none;font-weight:600;} .single-story-card-bottom i{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 8%,var(--surface));font-style:normal;} .single-story-card-bottom svg{width:13px;height:13px} .single-story-empty{grid-column:1/-1;padding:24px;border:1px dashed var(--border);border-radius:18px;color:var(--muted);text-align:center;} @keyframes storyCardIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} @media(max-width:620px){ .single-story-nav{margin-top:42px;padding-top:28px} .single-story-nav-head{align-items:flex-start;flex-direction:column;gap:12px} .single-story-grid{grid-template-columns:1fr;gap:12px} .single-story-card{min-height:148px!important;padding:18px!important;border-radius:16px!important} .single-story-card strong{font-size:1rem;margin:20px 0} } @media(prefers-reduced-motion:reduce){.single-story-card,.single-story-card:after,.single-story-arrow,.single-story-all,.single-story-all svg{animation:none!important;transition:none!important}.single-story-card{transform:none!important}} /* v5.57 — premium single-post Continue Reading rebuilt with isolated classes */ .rs-blog-next{position:relative;margin:64px 0 8px;padding:38px 0 6px;border-top:1px solid var(--border);overflow:hidden;} .rs-blog-next:before{content:"";position:absolute;top:-1px;left:0;width:96px;height:2px;background:var(--color-primary);transform-origin:left;animation:rsLineIn .9s cubic-bezier(.2,.8,.2,1) both;} .rs-blog-next-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:24px;} .rs-blog-next-title>span{display:block;color:var(--color-primary);font-size:.62rem;font-weight:900;letter-spacing:.18em;} .rs-blog-next-title h2{margin:7px 0 4px;font-size:clamp(1.55rem,3vw,2.15rem);letter-spacing:-.045em;line-height:1.05;} .rs-blog-next-title p{margin:0;color:var(--muted);font-size:.78rem;line-height:1.6;} .rs-blog-all{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--border);border-radius:999px;color:var(--text);font-size:.72rem;font-weight:850;text-decoration:none;transition:.3s ease;white-space:nowrap;} .rs-blog-all svg{width:14px;height:14px;transition:transform .35s ease;} .rs-blog-all:hover{border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-2px);box-shadow:0 10px 25px color-mix(in srgb,var(--color-primary) 10%,transparent);} .rs-blog-all:hover svg{transform:translateX(4px);} .rs-blog-next-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;width:100%;} .rs-blog-next-card{position:relative;display:flex!important;flex-direction:column!important;justify-content:space-between!important;min-width:0!important;min-height:190px!important;padding:24px!important;box-sizing:border-box!important;border:1px solid var(--border)!important;border-radius:22px!important;background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--bg) 86%,var(--surface)))!important;color:var(--text)!important;text-decoration:none!important;overflow:hidden!important;box-shadow:0 14px 40px rgba(0,0,0,.045)!important;opacity:0;transform:translateY(24px);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease,border-color .35s ease,opacity .65s ease!important;} .rs-blog-next-card.is-visible{opacity:1;transform:none;} .rs-blog-next-card:nth-child(2){transition-delay:.12s;} .rs-blog-next-card:hover{transform:translateY(-8px)!important;border-color:color-mix(in srgb,var(--color-primary) 55%,var(--border))!important;box-shadow:0 28px 65px color-mix(in srgb,var(--color-primary) 12%,transparent)!important;} .rs-card-glow{position:absolute;width:220px;height:220px;border-radius:50%;top:-120px;left:-90px;background:radial-gradient(circle,color-mix(in srgb,var(--color-primary) 18%,transparent),transparent 68%);opacity:.75;transition:transform .7s ease,opacity .4s ease;pointer-events:none;} .rs-blog-next-next .rs-card-glow{left:auto;right:-90px;} .rs-blog-next-card:hover .rs-card-glow{transform:scale(1.35);opacity:1;} .rs-card-line{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--color-primary),transparent);transform:scaleX(.2);opacity:.5;transition:transform .65s ease;} .rs-blog-next-card:hover .rs-card-line{transform:scaleX(1);} .rs-card-meta,.rs-card-foot{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:14px;} .rs-card-meta{color:var(--color-primary);font-size:.6rem;font-weight:900;letter-spacing:.15em;} .rs-card-arrow,.rs-card-go{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:50%;border:1px solid color-mix(in srgb,var(--color-primary) 25%,var(--border));background:color-mix(in srgb,var(--color-primary) 8%,var(--surface));color:var(--color-primary);transition:transform .4s cubic-bezier(.2,.8,.2,1),background .3s ease,color .3s ease;} .rs-card-arrow svg,.rs-card-go svg{width:15px;height:15px;} .rs-blog-next-card:hover .rs-card-arrow{background:var(--color-primary);color:#111;} .rs-blog-next-prev:hover .rs-card-arrow{transform:translateX(-6px);} .rs-blog-next-next:hover .rs-card-arrow{transform:translateX(6px);} .rs-blog-next-card strong{position:relative;z-index:2;display:block;margin:28px 0 30px;font-size:clamp(1.05rem,1.9vw,1.42rem);line-height:1.25;letter-spacing:-.035em;overflow-wrap:anywhere;} .rs-card-foot{color:var(--muted);font-size:.66rem;font-weight:750;} .rs-card-go{width:32px;height:32px;flex-basis:32px;background:transparent;color:var(--text);transition:transform .35s ease,background .3s ease,color .3s ease;} .rs-blog-next-card:hover .rs-card-go{transform:translateX(5px);background:var(--color-primary);color:#111;} @keyframes rsLineIn{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}} @media(max-width:720px){.rs-blog-next{margin-top:48px;padding-top:30px}.rs-blog-next-head{align-items:flex-start;flex-direction:column;gap:16px}.rs-blog-next-grid{grid-template-columns:1fr;gap:12px}.rs-blog-next-card{min-height:155px!important;padding:20px!important;border-radius:18px!important}.rs-blog-next-card strong{font-size:1.05rem;margin:22px 0}.rs-blog-all{font-size:.68rem}} @media(prefers-reduced-motion:reduce){.rs-blog-next:before,.rs-blog-next-card,.rs-card-glow,.rs-card-line,.rs-card-arrow,.rs-card-go,.rs-blog-all,.rs-blog-all svg{animation:none!important;transition:none!important}.rs-blog-next-card{opacity:1!important;transform:none!important}} /* ========================================================= v5.59 — Single Blog Complete Pro Rebuild Unique namespace so legacy single-post CSS cannot collide. ========================================================= */ .rs-single-v59{--rs-card:var(--surface);--rs-line:var(--border);--rs-soft:color-mix(in srgb,var(--color-primary) 6%,var(--surface));position:relative;overflow:clip;background:var(--bg);} .rs-reading-progress{position:fixed;left:0;top:0;width:100%;height:3px;background:transparent;z-index:99999;pointer-events:none}.rs-reading-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--color-primary),color-mix(in srgb,var(--color-primary) 50%,#fff));box-shadow:0 0 14px color-mix(in srgb,var(--color-primary) 45%,transparent);transition:width .08s linear} .rs-v59-hero{position:relative;padding:72px 0 48px;text-align:center;isolation:isolate;background:radial-gradient(circle at 50% -15%,color-mix(in srgb,var(--color-primary) 12%,transparent),transparent 48%)} .rs-v59-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 49.95%,color-mix(in srgb,var(--color-primary) 9%,transparent) 50%,transparent 50.05%);opacity:.5;pointer-events:none}.rs-v59-hero:after{content:"";position:absolute;width:460px;height:460px;border-radius:50%;right:-240px;top:-240px;background:color-mix(in srgb,var(--color-primary) 5%,transparent);filter:blur(8px);z-index:-1} .rs-v59-hero-inner{position:relative;max-width:980px;margin:auto}.rs-v59-breadcrumb .breadcrumbs{justify-content:center;margin-bottom:22px}.rs-v59-meta{display:flex;justify-content:center;align-items:center;gap:9px;flex-wrap:wrap;margin:18px 0 14px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.rs-v59-meta a{color:var(--color-primary)} .rs-v59-hero h1{max-width:920px;margin:0 auto;font-size:clamp(2.7rem,5.5vw,5.1rem);line-height:.96;letter-spacing:-.065em;text-wrap:balance}.rs-v59-deck{max-width:680px;margin:22px auto 22px;color:var(--muted);font-size:1rem;line-height:1.75}.rs-v59-authorline{display:inline-flex;align-items:center;gap:10px;text-align:left}.rs-v59-avatar,.rs-v59-author-big{display:grid;place-items:center;border-radius:50%;background:var(--text);color:var(--bg);font-weight:900}.rs-v59-avatar{width:34px;height:34px;font-size:12px}.rs-v59-authorline span:last-child{display:flex;flex-direction:column;gap:2px}.rs-v59-authorline strong{font-size:11px}.rs-v59-authorline small{font-size:9px;color:var(--muted)}.rs-v59-hero-rule{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:25px}.rs-v59-hero-rule i{display:block;width:30px;height:1px;background:var(--border)}.rs-v59-hero-rule b{display:block;width:7px;height:7px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 0 5px color-mix(in srgb,var(--color-primary) 10%,transparent)} .rs-v59-main{padding:20px 0 110px}.rs-v59-layout{display:grid;grid-template-columns:minmax(0,820px) 290px;gap:54px;align-items:start;max-width:1160px;margin:0 auto}.rs-v59-article{min-width:0;padding:34px 44px 52px;border:1px solid var(--rs-line);border-radius:28px;background:linear-gradient(145deg,var(--rs-card),color-mix(in srgb,var(--color-primary) 2%,var(--rs-card)));box-shadow:0 20px 70px rgba(0,0,0,.055)} .rs-v59-article-head{display:flex;gap:30px;padding-bottom:20px;margin-bottom:30px;border-bottom:1px solid var(--rs-line)}.rs-v59-article-head div{display:flex;flex-direction:column;gap:4px}.rs-v59-article-head span{font-size:9px;text-transform:uppercase;letter-spacing:.14em;font-weight:900;color:var(--color-primary)}.rs-v59-article-head strong{font-size:12px}.rs-v59-content{font-size:1rem;line-height:1.9;color:var(--text)}.rs-v59-content>p:first-child{font-size:1.18rem;line-height:1.75;font-weight:520}.rs-v59-content p{margin:0 0 1.35em}.rs-v59-content h2{font-size:clamp(1.55rem,3vw,2.1rem);line-height:1.15;letter-spacing:-.035em;margin:2.1em 0 .65em;scroll-margin-top:100px}.rs-v59-content h3{font-size:1.28rem;line-height:1.25;margin:1.8em 0 .6em;scroll-margin-top:100px}.rs-v59-content ul,.rs-v59-content ol{padding-left:1.25em;margin:0 0 1.4em}.rs-v59-content li{margin-bottom:.55em}.rs-v59-content blockquote{margin:2em 0;padding:22px 24px;border-left:3px solid var(--color-primary);border-radius:0 16px 16px 0;background:var(--rs-soft);font-size:1.08rem}.rs-v59-content img{display:block;max-width:100%;height:auto;border-radius:18px;margin:28px auto;box-shadow:0 15px 45px rgba(0,0,0,.08);transition:transform .45s ease,box-shadow .45s ease}.rs-v59-content img:hover{transform:translateY(-3px);box-shadow:0 22px 60px rgba(0,0,0,.12)}.rs-v59-content a{color:var(--color-primary);font-weight:700}.rs-v59-content code{padding:.15em .4em;border-radius:6px;background:var(--rs-soft)} .rs-v59-tags{display:flex;gap:15px;align-items:flex-start;margin-top:38px;padding-top:24px;border-top:1px solid var(--rs-line)}.rs-v59-tags>span{font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:7px}.rs-v59-tags>div{display:flex;gap:7px;flex-wrap:wrap}.rs-v59-tags a{padding:6px 10px;border:1px solid var(--rs-line);border-radius:999px;color:var(--text);font-size:10px;text-decoration:none;transition:.3s ease}.rs-v59-tags a:hover{border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-2px)} .rs-v59-share{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:28px;padding:20px 0;border-top:1px solid var(--rs-line);border-bottom:1px solid var(--rs-line)}.rs-v59-share>div:first-child{display:flex;flex-direction:column;gap:3px}.rs-v59-share strong{font-size:12px}.rs-v59-share small{color:var(--muted);font-size:10px}.rs-v59-share-buttons{display:flex;gap:7px}.rs-v59-share-buttons a,.rs-v59-share-buttons button{position:relative;width:38px;height:38px;display:grid;place-items:center;padding:0;border:1px solid var(--rs-line);border-radius:11px;background:var(--bg);color:var(--text);cursor:pointer;transition:.3s ease}.rs-v59-share-buttons a:hover,.rs-v59-share-buttons button:hover{transform:translateY(-3px);border-color:var(--color-primary);color:var(--color-primary);box-shadow:0 8px 22px color-mix(in srgb,var(--color-primary) 12%,transparent)}.rs-v59-share-buttons svg{width:16px;height:16px}.rs-v59-share-buttons em{display:none;position:absolute;bottom:calc(100% + 7px);right:0;padding:5px 8px;border-radius:6px;background:var(--text);color:var(--bg);font-size:9px;font-style:normal;white-space:nowrap}.rs-v59-share-buttons em.show{display:block} .rs-v59-author-card{display:flex;align-items:center;gap:17px;margin-top:30px;padding:22px;border:1px solid var(--rs-line);border-radius:20px;background:linear-gradient(135deg,var(--bg),var(--rs-soft))}.rs-v59-author-big{width:54px;height:54px;flex:0 0 54px}.rs-v59-author-card>div:last-child{min-width:0}.rs-v59-author-card span{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.14em;color:var(--color-primary)}.rs-v59-author-card h3{margin:4px 0 3px;font-size:1rem}.rs-v59-author-card p{margin:0;color:var(--muted);font-size:.76rem;line-height:1.6} .rs-v59-section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:22px}.rs-v59-section-head>div>span{display:block;color:var(--color-primary);font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.rs-v59-section-head h2{margin:7px 0 5px;font-size:clamp(1.8rem,4vw,2.5rem);line-height:1;letter-spacing:-.045em}.rs-v59-section-head p{margin:0;color:var(--muted);font-size:12px}.rs-v59-section-head>a{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:10px 14px;border:1px solid var(--rs-line);border-radius:999px;color:var(--text);font-size:11px;font-weight:800;text-decoration:none;transition:.3s ease}.rs-v59-section-head>a:hover{color:var(--color-primary);border-color:var(--color-primary);transform:translateY(-2px)} .rs-v59-next{margin-top:58px;padding-top:35px;border-top:1px solid var(--rs-line)}.rs-v59-next-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.rs-v59-next-card{position:relative;min-width:0;min-height:190px;padding:24px!important;box-sizing:border-box;border:1px solid var(--rs-line)!important;border-radius:20px!important;background:linear-gradient(145deg,var(--rs-card),var(--rs-soft))!important;color:var(--text)!important;text-decoration:none!important;overflow:hidden;display:flex!important;flex-direction:column!important;justify-content:space-between!important;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease,border-color .3s ease!important}.rs-v59-next-card:before{content:"";position:absolute;left:0;top:0;width:70px;height:2px;background:var(--color-primary);transform:scaleX(.25);transform-origin:left;transition:transform .45s ease}.rs-v59-next-card:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,color-mix(in srgb,var(--color-primary) 10%,transparent),transparent 65%);transform:translateX(-120%);transition:transform .8s ease;pointer-events:none}.rs-v59-next-card:hover{transform:translateY(-7px)!important;border-color:color-mix(in srgb,var(--color-primary) 45%,var(--rs-line))!important;box-shadow:0 20px 50px rgba(0,0,0,.08)!important}.rs-v59-next-card:hover:before{transform:scaleX(1)}.rs-v59-next-card:hover:after{transform:translateX(120%)}.rs-v59-next-kicker{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;color:var(--color-primary);font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.13em}.rs-v59-next-kicker b{font-size:18px;line-height:1}.rs-v59-next-card strong{position:relative;z-index:1;display:block;max-width:100%;margin:20px 0;font-size:clamp(1rem,2vw,1.35rem);line-height:1.2;letter-spacing:-.025em;overflow-wrap:anywhere}.rs-v59-next-foot{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;color:var(--muted)}.rs-v59-next-foot small{font-size:9px}.rs-v59-next-foot i{width:31px;height:31px;display:grid;place-items:center;border:1px solid var(--rs-line);border-radius:50%;font-style:normal;transition:.35s ease}.rs-v59-next-card:hover .rs-v59-next-foot i{background:var(--color-primary);border-color:var(--color-primary);color:#111;transform:translate(4px,-3px)} .rs-v59-related{margin-top:62px;padding-top:38px;border-top:1px solid var(--rs-line)}.rs-v59-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.rs-v59-related-card{min-width:0;border:1px solid var(--rs-line);border-radius:18px;overflow:hidden;background:var(--rs-card);transition:transform .4s ease,box-shadow .4s ease,border-color .3s ease}.rs-v59-related-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--color-primary) 40%,var(--rs-line));box-shadow:0 18px 45px rgba(0,0,0,.08)}.rs-v59-related-image{display:block;position:relative;aspect-ratio:1.5;overflow:hidden;background:var(--rs-soft)}.rs-v59-related-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}.rs-v59-related-card:hover .rs-v59-related-image img{transform:scale(1.06)}.rs-v59-related-image>span{position:absolute;right:10px;bottom:10px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.9);color:#111;transition:.35s ease}.rs-v59-related-card:hover .rs-v59-related-image>span{background:var(--color-primary);transform:rotate(10deg)}.rs-v59-related-body{padding:16px}.rs-v59-related-body>div{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.08em}.rs-v59-related-body h3{margin:12px 0 18px;font-size:1rem;line-height:1.2}.rs-v59-related-body h3 a{color:var(--text);text-decoration:none}.rs-v59-read{display:inline-flex;align-items:center;gap:5px;color:var(--text);font-size:10px;font-weight:800;text-decoration:none}.rs-v59-read:hover{color:var(--color-primary)}.rs-v59-read svg{width:13px} .rs-v59-sidebar{min-width:0}.rs-v59-side-stack{position:sticky;top:100px;display:grid;gap:13px}.rs-v59-side-card{padding:20px;border:1px solid var(--rs-line);border-radius:20px;background:var(--rs-card);box-shadow:0 10px 35px rgba(0,0,0,.035)}.rs-v59-side-card>span{display:block;color:var(--color-primary);font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.rs-v59-toc-card{min-height:92px}.rs-v59-toc-card #rs-v59-toc{margin-top:12px}.rs-v59-toc-card #rs-v59-toc>div{display:grid;gap:8px}.rs-v59-toc-card a{color:var(--text);font-size:10px;line-height:1.45;text-decoration:none}.rs-v59-toc-card a:hover{color:var(--color-primary)}.rs-v59-toc-card em{font-style:normal;color:var(--muted);font-size:10px}.rs-v59-cta{background:linear-gradient(145deg,var(--rs-card),var(--rs-soft))}.rs-v59-side-icon{width:36px!important;height:36px!important;display:grid!important;place-items:center;border-radius:11px;background:color-mix(in srgb,var(--color-primary) 13%,transparent);color:var(--color-primary);margin-bottom:13px}.rs-v59-side-icon svg{width:17px}.rs-v59-cta small{display:block;color:var(--color-primary);font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.rs-v59-cta h3{margin:8px 0;font-size:1.05rem;line-height:1.3}.rs-v59-cta p{margin:0 0 15px;color:var(--muted);font-size:.74rem;line-height:1.65}.rs-v59-cta>a{display:flex;justify-content:center;align-items:center;gap:7px;padding:11px 14px;border-radius:10px;background:var(--color-primary);color:#111;text-decoration:none;font-size:11px;font-weight:900;transition:.3s ease}.rs-v59-cta>a:hover{transform:translateY(-2px);box-shadow:0 12px 25px color-mix(in srgb,var(--color-primary) 25%,transparent)}.rs-v59-side-share>span{margin-bottom:12px}.rs-v59-side-share>a{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--rs-line);border-radius:9px;color:var(--text);font-size:10px;text-decoration:none;margin-top:7px;transition:.3s ease}.rs-v59-side-share>a:hover{border-color:var(--color-primary);color:var(--color-primary);transform:translateX(3px)}.rs-v59-side-share svg{width:15px;height:15px} .rs-v59-reveal{opacity:0;transform:translateY(22px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.75,.2,1)}.rs-v59-reveal.is-visible{opacity:1;transform:none} .rs-single-v59 .comments-area{margin-top:55px;padding-top:35px;border-top:1px solid var(--rs-line)}.rs-single-v59 .comments-area textarea,.rs-single-v59 .comments-area input{border:1px solid var(--rs-line);border-radius:12px;background:var(--bg);padding:12px}.rs-single-v59 .comments-area .submit{border:0;border-radius:10px;background:var(--color-primary);color:#111;padding:11px 17px;font-weight:800} @media(max-width:980px){.rs-v59-layout{grid-template-columns:1fr;gap:28px}.rs-v59-sidebar{order:2}.rs-v59-side-stack{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.rs-v59-side-share{grid-column:1/-1}.rs-v59-related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:680px){.rs-v59-hero{padding:48px 0 34px}.rs-v59-hero h1{font-size:2.45rem}.rs-v59-deck{font-size:.9rem}.rs-v59-main{padding-bottom:70px}.rs-v59-article{padding:24px 18px 38px;border-radius:20px}.rs-v59-article-head{gap:18px}.rs-v59-content{font-size:.95rem;line-height:1.8}.rs-v59-content>p:first-child{font-size:1.05rem}.rs-v59-share{align-items:flex-start;flex-direction:column}.rs-v59-share-buttons{width:100%}.rs-v59-share-buttons a,.rs-v59-share-buttons button{flex:1}.rs-v59-section-head{align-items:flex-start;flex-direction:column}.rs-v59-next-grid{grid-template-columns:1fr}.rs-v59-next-card{min-height:165px}.rs-v59-related-grid{grid-template-columns:1fr}.rs-v59-side-stack{grid-template-columns:1fr}.rs-v59-side-share{grid-column:auto}.rs-v59-author-card{align-items:flex-start}.rs-v59-tags{flex-direction:column;gap:8px}} @media(prefers-reduced-motion:reduce){.rs-v59-reveal,.rs-v59-next-card,.rs-v59-next-card:after,.rs-v59-next-foot i,.rs-v59-related-card,.rs-v59-related-image img,.rs-v59-related-image>span,.rs-v59-share-buttons a,.rs-v59-share-buttons button,.rs-v59-content img{transition:none!important}.rs-v59-reveal{opacity:1;transform:none}.rs-v59-next-card:after{display:none}} /* ========================================================= Rashid Theme — Complete Premium Single Blog v6.0 Isolated namespace: rs-v60 ========================================================= */ .rs-v60-page{--v60-card:var(--surface);--v60-soft:color-mix(in srgb,var(--color-primary) 6%,var(--surface));--v60-line:var(--border);position:relative;overflow:clip;background:var(--bg);color:var(--text)} .rs-v60-progress{position:fixed;z-index:9999;left:0;top:0;width:100%;height:3px;background:transparent;pointer-events:none}.rs-v60-progress span{display:block;width:0;height:100%;background:var(--color-primary);box-shadow:0 0 16px color-mix(in srgb,var(--color-primary) 55%,transparent);transition:width .08s linear} .rs-v60-hero{position:relative;isolation:isolate;padding:72px 0 38px;overflow:hidden;background:radial-gradient(circle at 50% -20%,color-mix(in srgb,var(--color-primary) 14%,transparent),transparent 50%),linear-gradient(180deg,var(--bg),color-mix(in srgb,var(--color-primary) 2%,var(--bg)))} .rs-v60-hero:before{content:"";position:absolute;inset:0;opacity:.45;background-image:linear-gradient(color-mix(in srgb,var(--color-primary) 8%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--color-primary) 8%,transparent) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,black,transparent 85%);pointer-events:none}.rs-v60-orb{position:absolute;border:1px solid color-mix(in srgb,var(--color-primary) 18%,transparent);border-radius:50%;pointer-events:none}.rs-v60-orb-a{width:300px;height:300px;left:-180px;top:20px;box-shadow:0 0 80px color-mix(in srgb,var(--color-primary) 8%,transparent);animation:rs60Float 9s ease-in-out infinite}.rs-v60-orb-b{width:210px;height:210px;right:-110px;top:130px;animation:rs60Float 11s ease-in-out -2s infinite}.rs-v60-hero-inner{max-width:1000px;margin:auto;text-align:center}.rs-v60-breadcrumb{margin-bottom:22px}.rs-v60-breadcrumb .breadcrumbs{justify-content:center}.rs-v60-category-row{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px;font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.rs-v60-category-row a{color:var(--color-primary);text-decoration:none}.rs-v60-category-row i{width:3px;height:3px;border-radius:50%;background:var(--color-primary)}.rs-v60-hero h1{max-width:930px;margin:0 auto;font-size:clamp(2.8rem,6.5vw,6rem);line-height:.93;letter-spacing:-.075em;text-wrap:balance}.rs-v60-excerpt{max-width:680px;margin:24px auto 23px;color:var(--muted);font-size:1rem;line-height:1.75}.rs-v60-authorline{display:inline-flex;align-items:center;gap:10px;text-align:left}.rs-v60-avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--text);color:var(--bg);font-weight:900}.rs-v60-authorline span:last-child{display:flex;flex-direction:column;gap:2px}.rs-v60-authorline strong{font-size:11px}.rs-v60-authorline small{font-size:9px;color:var(--muted)}.rs-v60-hero-bottom{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:38px;color:var(--muted);font-size:9px;font-weight:900;letter-spacing:.15em;text-transform:uppercase}.rs-v60-hero-bottom b{width:44px;height:1px;background:var(--color-primary);position:relative;overflow:hidden}.rs-v60-hero-bottom b:after{content:"";position:absolute;width:12px;height:1px;left:-12px;background:var(--text);animation:rs60Scan 2.2s ease-in-out infinite} .rs-v60-main{padding:25px 0 110px}.rs-v60-layout{display:grid;grid-template-columns:minmax(0,820px) 300px;gap:52px;max-width:1170px;margin:auto;align-items:start}.rs-v60-content-column{min-width:0}.rs-v60-article{padding:36px 46px 52px;border:1px solid var(--v60-line);border-radius:28px;background:linear-gradient(145deg,var(--v60-card),var(--v60-soft));box-shadow:0 22px 75px rgba(0,0,0,.055)}.rs-v60-article-top{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-bottom:22px;margin-bottom:34px;border-bottom:1px solid var(--v60-line)}.rs-v60-article-top div{display:flex;flex-direction:column;gap:5px}.rs-v60-article-top small{font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.15em;color:var(--color-primary)}.rs-v60-article-top strong{font-size:11px}.rs-v60-body{font-size:1rem;line-height:1.9}.rs-v60-body>p:first-child{font-size:1.2rem;line-height:1.75;font-weight:520}.rs-v60-body p{margin:0 0 1.35em}.rs-v60-body h2{font-size:clamp(1.55rem,3vw,2.2rem);line-height:1.12;letter-spacing:-.04em;margin:2.2em 0 .65em;scroll-margin-top:100px}.rs-v60-body h3{font-size:1.28rem;line-height:1.25;margin:1.8em 0 .6em;scroll-margin-top:100px}.rs-v60-body h4{font-size:1.08rem;margin:1.6em 0 .5em}.rs-v60-body ul,.rs-v60-body ol{padding-left:1.3em;margin:0 0 1.45em}.rs-v60-body li{margin-bottom:.55em}.rs-v60-body blockquote{position:relative;margin:2.2em 0;padding:26px 28px;border:1px solid var(--v60-line);border-left:3px solid var(--color-primary);border-radius:0 18px 18px 0;background:var(--v60-soft);font-size:1.08rem}.rs-v60-body blockquote:before{content:"“";position:absolute;right:18px;top:-13px;font-size:70px;line-height:1;color:color-mix(in srgb,var(--color-primary) 20%,transparent)}.rs-v60-body img{display:block;max-width:100%;height:auto;margin:30px auto;border-radius:18px;box-shadow:0 16px 50px rgba(0,0,0,.08);transition:transform .5s ease,box-shadow .5s ease}.rs-v60-body img:hover{transform:translateY(-4px);box-shadow:0 25px 65px rgba(0,0,0,.12)}.rs-v60-body a{color:var(--color-primary);font-weight:750}.rs-v60-body code{padding:.16em .42em;border-radius:6px;background:var(--v60-soft)}.rs-v60-body pre{padding:18px;border-radius:14px;overflow:auto;background:#111;color:#eee}.rs-v60-body hr{border:0;border-top:1px solid var(--v60-line);margin:2.4em 0} .rs-v60-topics{display:flex;align-items:flex-start;gap:16px;padding-top:26px;margin-top:35px;border-top:1px solid var(--v60-line)}.rs-v60-topics>span{padding-top:7px;color:var(--muted);font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.rs-v60-topics>div{display:flex;flex-wrap:wrap;gap:7px}.rs-v60-topics a{padding:7px 11px;border:1px solid var(--v60-line);border-radius:999px;color:var(--text);font-size:10px;text-decoration:none;transition:.3s ease}.rs-v60-topics a:hover{transform:translateY(-2px);border-color:var(--color-primary);color:var(--color-primary)} .rs-v60-sharebar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;margin-top:28px;border-top:1px solid var(--v60-line);border-bottom:1px solid var(--v60-line)}.rs-v60-sharebar>div:first-child{display:flex;flex-direction:column;gap:3px}.rs-v60-sharebar strong{font-size:12px}.rs-v60-sharebar small{font-size:10px;color:var(--muted)}.rs-v60-share-buttons{display:flex;gap:7px}.rs-v60-share-buttons a,.rs-v60-share-buttons button{position:relative;width:40px;height:40px;display:grid;place-items:center;padding:0;border:1px solid var(--v60-line);border-radius:12px;background:var(--bg);color:var(--text);cursor:pointer;transition:.3s ease}.rs-v60-share-buttons a:hover,.rs-v60-share-buttons button:hover{transform:translateY(-3px);border-color:var(--color-primary);color:var(--color-primary);box-shadow:0 10px 25px color-mix(in srgb,var(--color-primary) 14%,transparent)}.rs-v60-share-buttons svg{width:16px;height:16px}.rs-v60-share-buttons em{display:none;position:absolute;bottom:calc(100% + 8px);right:0;padding:6px 9px;border-radius:7px;background:var(--text);color:var(--bg);font-size:9px;font-style:normal;white-space:nowrap}.rs-v60-share-buttons em.show{display:block} .rs-v60-author-card{display:flex;align-items:center;gap:17px;margin-top:30px;padding:22px;border:1px solid var(--v60-line);border-radius:20px;background:linear-gradient(135deg,var(--bg),var(--v60-soft))}.rs-v60-author-mark{display:grid;place-items:center;width:58px;height:58px;flex:0 0 58px;border-radius:18px;background:var(--text);color:var(--bg);font-weight:900}.rs-v60-author-card span{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.14em;color:var(--color-primary)}.rs-v60-author-card h3{margin:4px 0 3px;font-size:1rem}.rs-v60-author-card p{margin:0;color:var(--muted);font-size:.76rem;line-height:1.6} .rs-v60-explore,.rs-v60-related{margin-top:62px;padding-top:38px;border-top:1px solid var(--v60-line)}.rs-v60-section-title{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:22px}.rs-v60-section-title span{display:block;color:var(--color-primary);font-size:9px;font-weight:900;letter-spacing:.17em;text-transform:uppercase}.rs-v60-section-title h2{margin:7px 0 5px;font-size:clamp(1.8rem,4vw,2.65rem);line-height:.98;letter-spacing:-.055em}.rs-v60-section-title p{margin:0;color:var(--muted);font-size:11px}.rs-v60-section-title>a{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;border:1px solid var(--v60-line);border-radius:999px;color:var(--text);font-size:10px;font-weight:900;text-decoration:none;white-space:nowrap;transition:.3s ease}.rs-v60-section-title>a:hover{transform:translateY(-2px);border-color:var(--color-primary);color:var(--color-primary)} .rs-v60-nav-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.rs-v60-nav-card{position:relative;display:flex!important;flex-direction:column!important;justify-content:space-between!important;min-width:0;min-height:205px;box-sizing:border-box;padding:25px!important;border:1px solid var(--v60-line)!important;border-radius:22px!important;background:linear-gradient(145deg,var(--v60-card),var(--v60-soft))!important;color:var(--text)!important;text-decoration:none!important;overflow:hidden;isolation:isolate;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease,border-color .35s ease!important}.rs-v60-nav-card:before{content:"";position:absolute;z-index:-1;inset:auto 0 0 0;height:3px;background:linear-gradient(90deg,var(--color-primary),transparent);transform:scaleX(.25);transform-origin:left;transition:transform .5s ease}.rs-v60-nav-card:after{content:"";position:absolute;z-index:-1;inset:-50% -20%;background:linear-gradient(110deg,transparent 42%,color-mix(in srgb,var(--color-primary) 13%,transparent) 50%,transparent 58%);transform:translateX(-65%) rotate(8deg);transition:transform .9s ease}.rs-v60-nav-card:hover{transform:translateY(-8px)!important;border-color:color-mix(in srgb,var(--color-primary) 48%,var(--v60-line))!important;box-shadow:0 25px 60px rgba(0,0,0,.09)!important}.rs-v60-nav-card:hover:before{transform:scaleX(1)}.rs-v60-nav-card:hover:after{transform:translateX(65%) rotate(8deg)}.rs-v60-nav-label{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--color-primary);font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.13em}.rs-v60-nav-label b{font-size:18px;line-height:1}.rs-v60-nav-card strong{display:block;max-width:100%;margin:18px 0;font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.22;letter-spacing:-.025em;overflow-wrap:anywhere}.rs-v60-nav-meta{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:9px}.rs-v60-nav-meta i{display:grid;place-items:center;width:33px;height:33px;border:1px solid var(--v60-line);border-radius:50%;font-style:normal;transition:.35s ease}.rs-v60-nav-card:hover .rs-v60-nav-meta i{background:var(--color-primary);border-color:var(--color-primary);color:#111;transform:translate(4px,-3px)} .rs-v60-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.rs-v60-related-card{min-width:0;overflow:hidden;border:1px solid var(--v60-line);border-radius:20px;background:var(--v60-card);transition:transform .4s ease,box-shadow .4s ease,border-color .3s ease}.rs-v60-related-card:hover{transform:translateY(-7px);border-color:color-mix(in srgb,var(--color-primary) 42%,var(--v60-line));box-shadow:0 20px 50px rgba(0,0,0,.08)}.rs-v60-related-media{position:relative;display:block;aspect-ratio:1.48;overflow:hidden;background:var(--v60-soft)}.rs-v60-related-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.8,.2,1)}.rs-v60-related-card:hover .rs-v60-related-media img{transform:scale(1.07)}.rs-v60-related-media>span{position:absolute;right:11px;bottom:11px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);color:#111;transition:.35s ease}.rs-v60-related-card:hover .rs-v60-related-media>span{background:var(--color-primary);transform:rotate(12deg)}.rs-v60-related-copy{padding:16px}.rs-v60-related-copy>div{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:8px;text-transform:uppercase;letter-spacing:.08em}.rs-v60-related-copy h3{margin:12px 0 18px;font-size:1rem;line-height:1.2}.rs-v60-related-copy h3 a{color:var(--text);text-decoration:none}.rs-v60-read{display:inline-flex;align-items:center;gap:5px;color:var(--text);font-size:10px;font-weight:900;text-decoration:none}.rs-v60-read:hover{color:var(--color-primary)}.rs-v60-read svg{width:13px} .rs-v60-sidebar{min-width:0}.rs-v60-sticky{position:sticky;top:100px;display:grid;gap:13px}.rs-v60-side-card{padding:20px;border:1px solid var(--v60-line);border-radius:20px;background:var(--v60-card);box-shadow:0 10px 35px rgba(0,0,0,.035)}.rs-v60-side-card>span{display:block;color:var(--color-primary);font-size:9px;font-weight:900;letter-spacing:.15em;text-transform:uppercase}.rs-v60-toc #rs-v60-toc-list{margin-top:13px}.rs-v60-toc #rs-v60-toc-list>div{display:grid;gap:8px}.rs-v60-toc a{color:var(--text);font-size:10px;line-height:1.45;text-decoration:none;transition:.25s ease}.rs-v60-toc a:hover{color:var(--color-primary);transform:translateX(3px)}.rs-v60-toc em{font-style:normal;color:var(--muted);font-size:10px}.rs-v60-cta{background:linear-gradient(145deg,var(--v60-card),var(--v60-soft))}.rs-v60-cta-icon{display:grid;place-items:center;width:38px;height:38px;margin-bottom:13px;border-radius:12px;background:color-mix(in srgb,var(--color-primary) 13%,transparent);color:var(--color-primary)}.rs-v60-cta-icon svg{width:17px}.rs-v60-cta>span{display:block;font-size:9px;font-weight:900;color:var(--color-primary);letter-spacing:.14em;text-transform:uppercase}.rs-v60-cta h3{margin:8px 0;font-size:1.05rem;line-height:1.3}.rs-v60-cta p{margin:0 0 15px;color:var(--muted);font-size:.74rem;line-height:1.65}.rs-v60-cta>a{display:flex;justify-content:center;align-items:center;gap:7px;padding:12px 14px;border-radius:10px;background:var(--color-primary);color:#111;text-decoration:none;font-size:10px;font-weight:900;transition:.3s ease}.rs-v60-cta>a:hover{transform:translateY(-2px);box-shadow:0 13px 28px color-mix(in srgb,var(--color-primary) 24%,transparent)}.rs-v60-side-share>a{display:flex;align-items:center;gap:8px;margin-top:7px;padding:10px;border:1px solid var(--v60-line);border-radius:10px;color:var(--text);font-size:10px;text-decoration:none;transition:.3s ease}.rs-v60-side-share>a:hover{transform:translateX(3px);border-color:var(--color-primary);color:var(--color-primary)}.rs-v60-side-share svg{width:15px;height:15px} .rs-v60-reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.75,.2,1)}.rs-v60-reveal.is-visible{opacity:1;transform:none}.rs-v60-page .comments-area{margin-top:60px;padding:38px 0 0;border-top:1px solid var(--v60-line)}.rs-v60-page .comments-area textarea,.rs-v60-page .comments-area input{border:1px solid var(--v60-line);border-radius:12px;background:var(--bg);padding:12px}.rs-v60-page .comments-area .submit{border:0;border-radius:10px;background:var(--color-primary);color:#111;padding:11px 18px;font-weight:900} @keyframes rs60Float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(12px,-14px,0)}}@keyframes rs60Scan{0%{left:-12px}55%,100%{left:55px}} @media(max-width:1000px){.rs-v60-layout{grid-template-columns:minmax(0,1fr);gap:28px}.rs-v60-sidebar{order:2}.rs-v60-sticky{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.rs-v60-side-share{grid-column:1/-1}.rs-v60-related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:680px){.rs-v60-hero{padding:48px 0 30px}.rs-v60-hero h1{font-size:2.55rem}.rs-v60-excerpt{font-size:.9rem}.rs-v60-main{padding-bottom:70px}.rs-v60-article{padding:24px 18px 38px;border-radius:20px}.rs-v60-article-top{grid-template-columns:1fr 1fr;gap:16px}.rs-v60-article-top div:last-child{grid-column:1/-1}.rs-v60-body{font-size:.95rem;line-height:1.8}.rs-v60-body>p:first-child{font-size:1.05rem}.rs-v60-sharebar{align-items:flex-start;flex-direction:column}.rs-v60-share-buttons{width:100%}.rs-v60-share-buttons a,.rs-v60-share-buttons button{flex:1}.rs-v60-section-title{align-items:flex-start;flex-direction:column}.rs-v60-nav-grid,.rs-v60-related-grid{grid-template-columns:1fr}.rs-v60-nav-card{min-height:175px}.rs-v60-sticky{grid-template-columns:1fr}.rs-v60-side-share{grid-column:auto}.rs-v60-topics{flex-direction:column;gap:8px}.rs-v60-author-card{align-items:flex-start}.rs-v60-orb-a{left:-230px}.rs-v60-orb-b{right:-150px}} @media(prefers-reduced-motion:reduce){.rs-v60-orb-a,.rs-v60-orb-b,.rs-v60-hero-bottom b:after{animation:none}.rs-v60-reveal{opacity:1;transform:none;transition:none}.rs-v60-nav-card,.rs-v60-nav-card:after,.rs-v60-nav-meta i,.rs-v60-related-card,.rs-v60-related-media img,.rs-v60-related-media>span,.rs-v60-body img{transition:none!important}.rs-v60-nav-card:after{display:none}} /* v6.0 — first 50 pro blog features */ .rs-v60-reading-tools{display:flex;justify-content:flex-end;gap:7px;margin:0 0 22px}.rs-v60-reading-tools button{border:1px solid var(--v60-line);background:var(--bg);color:var(--text);border-radius:9px;padding:7px 10px;font-size:10px;font-weight:800;cursor:pointer;transition:.25s}.rs-v60-reading-tools button:hover{border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-2px)} .rs-v60-content-divider{height:1px;background:var(--v60-line);margin:30px 0}.rs-v60-helpful{display:flex;align-items:center;gap:9px;padding:18px;border:1px solid var(--v60-line);border-radius:16px;background:var(--v60-soft);margin:24px 0}.rs-v60-helpful strong{margin-right:auto;font-size:11px}.rs-v60-helpful button{border:1px solid var(--v60-line);background:var(--bg);color:var(--text);border-radius:9px;padding:8px 10px;font-size:9px;font-weight:800;cursor:pointer}.rs-v60-helpful button:hover:not(:disabled){border-color:var(--color-primary);color:var(--color-primary)}.rs-v60-helpful span{font-size:9px;color:var(--color-primary);font-weight:800} .rs-v60-body .rs-v60-media-figure{margin:28px 0;border-radius:18px;overflow:hidden;background:var(--v60-soft);cursor:zoom-in;border:1px solid var(--v60-line)}.rs-v60-body .rs-v60-media-img{display:block;width:100%;height:auto;max-height:680px;object-fit:cover;transition:transform .65s ease}.rs-v60-body .rs-v60-media-figure:hover .rs-v60-media-img{transform:scale(1.025)}.rs-v60-body .rs-v60-media-figure figcaption{padding:9px 13px;font-size:9px;color:var(--muted);font-style:italic}.rs-v60-code-wrap{position:relative;margin:24px 0}.rs-v60-code-wrap pre{margin:0!important;max-height:520px;overflow:auto}.rs-v60-code-wrap.is-collapsed pre{max-height:190px;overflow:hidden}.rs-v60-code-lang{position:absolute;top:9px;left:12px;font-size:8px;font-weight:900;letter-spacing:.1em;color:var(--color-primary)}.rs-v60-code-copy,.rs-v60-code-more{position:absolute;top:7px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;border-radius:7px;padding:6px 8px;font-size:8px;cursor:pointer}.rs-v60-code-copy{right:10px}.rs-v60-code-more{right:60px}.rs-v60-kbd{padding:2px 6px;border:1px solid var(--v60-line);border-bottom-width:2px;border-radius:5px;background:var(--v60-soft);font-size:.8em}.rs-v60-content-heading{scroll-margin-top:110px}.rs-v60-content-heading:after{content:'';display:block;width:38px;height:2px;margin-top:9px;background:var(--color-primary);transform:scaleX(0);transform-origin:left;transition:.5s}.rs-v60-content-heading:hover:after{transform:scaleX(1)} .rs-v60-lightbox{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;padding:30px;background:rgba(5,5,7,.92);opacity:0;visibility:hidden;transition:.3s}.rs-v60-lightbox.is-open{opacity:1;visibility:visible}.rs-v60-lightbox figure{max-width:min(1100px,94vw);max-height:90vh;margin:0}.rs-v60-lightbox img{display:block;max-width:100%;max-height:78vh;object-fit:contain;border-radius:12px}.rs-v60-lightbox figcaption{color:#fff;text-align:center;font-size:11px;margin-top:10px}.rs-v60-lightbox>button{position:absolute;right:25px;top:20px;width:42px;height:42px;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:25px;cursor:pointer}.rs-v60-lock{overflow:hidden} .rs-v60-newsletter{margin-top:62px;padding:34px;border-radius:24px;background:linear-gradient(135deg,var(--v60-card),var(--v60-soft));border:1px solid var(--v60-line);text-align:center}.rs-v60-newsletter>span{font-size:9px;font-weight:900;color:var(--color-primary);letter-spacing:.16em;text-transform:uppercase}.rs-v60-newsletter h2{margin:8px 0 6px;font-size:clamp(1.7rem,4vw,2.4rem)}.rs-v60-newsletter p{margin:0 auto 18px;color:var(--muted);font-size:11px}.rs-v60-newsletter form{display:flex;max-width:480px;margin:auto;gap:8px}.rs-v60-newsletter input{min-width:0;flex:1;border:1px solid var(--v60-line);border-radius:10px;background:var(--bg);color:var(--text);padding:12px}.rs-v60-newsletter button{border:0;border-radius:10px;background:var(--color-primary);color:#111;font-weight:900;padding:0 17px;cursor:pointer}.rs-v60-focus-mode .rs-v60-sidebar{display:none}.rs-v60-focus-mode .rs-v60-layout{display:block;max-width:900px;margin:auto}.rs-v60-focus-mode .rs-v60-content-column{max-width:900px;margin:auto} @media(max-width:680px){.rs-v60-helpful{align-items:flex-start;flex-wrap:wrap}.rs-v60-helpful strong{width:100%}.rs-v60-newsletter form{flex-direction:column}.rs-v60-newsletter button{padding:12px}.rs-v60-code-copy{right:8px}.rs-v60-code-more{right:58px}.rs-v60-reading-tools{justify-content:flex-start}} @media(prefers-reduced-motion:reduce){.rs-v60-body .rs-v60-media-img,.rs-v60-lightbox,.rs-v60-reading-tools button,.rs-v60-content-heading:after{transition:none}.rs-v60-body .rs-v60-media-figure:hover .rs-v60-media-img{transform:none}} /* v6.2 — Blog features 51-100 */ .rs-v60-page{--rs-shadow:0 18px 60px rgba(0,0,0,.08)} .rs-v60-page,.rs-v60-page *{scroll-behavior:smooth} body{transition:background-color .35s ease,color .35s ease} .rs-v60-hero-progress-label{position:absolute;right:0;bottom:8px;font-size:10px;font-weight:900;letter-spacing:.12em;color:var(--color-primary)} .rs-v60-category-nav a{position:relative}.rs-v60-category-nav a:after{content:'↗';margin-left:5px;font-size:9px} .rs-v60-actionbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 24px;padding:10px;border:1px solid var(--v60-line);border-radius:14px;background:var(--v60-soft)} .rs-v60-actionbar button,.rs-v60-comment-count{border:1px solid var(--v60-line);background:var(--bg);color:var(--text);border-radius:9px;padding:8px 11px;font-size:9px;font-weight:900;cursor:pointer;transition:.25s ease}.rs-v60-actionbar button:hover,.rs-v60-actionbar button.is-active{border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-1px)}.rs-v60-actionbar button b{font-size:8px;margin-left:3px}.rs-v60-comment-count{margin-left:auto;cursor:default} .rs-v60-sharebar{position:relative}.rs-v60-share-buttons{flex-wrap:wrap}.rs-v60-share-buttons a,.rs-v60-share-buttons button{display:inline-flex!important;align-items:center;justify-content:center;min-height:34px;padding:8px 11px!important;border:1px solid var(--v60-line);border-radius:9px;background:var(--bg);color:var(--text);font-size:9px;font-weight:900;text-decoration:none;cursor:pointer;transition:.25s ease}.rs-v60-share-buttons a:hover,.rs-v60-share-buttons button:hover{border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-2px)}.rs-v60-share-buttons em{display:none;font-style:normal}.rs-v60-share-buttons em.show{display:inline;margin-left:5px}.rs-v60-share-count{display:block;margin-top:8px;font-size:9px;color:var(--muted)} .rs-v60-author-pro{display:grid!important;grid-template-columns:72px minmax(0,1fr) auto;gap:16px;align-items:center}.rs-v60-author-pro>img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:2px solid var(--color-primary);background:var(--v60-soft)}.rs-v60-author-main>span,.rs-v60-mini-heading>span{font-size:8px;color:var(--color-primary);font-weight:900;text-transform:uppercase;letter-spacing:.14em}.rs-v60-author-main h3{margin:4px 0 2px}.rs-v60-author-main>strong{font-size:9px;color:var(--muted)}.rs-v60-author-main p{margin:7px 0;color:var(--muted);font-size:10px;line-height:1.6}.rs-v60-author-links{display:flex;gap:7px;flex-wrap:wrap}.rs-v60-author-links a{font-size:8px;font-weight:900;color:var(--text);text-decoration:none;padding:6px 8px;border:1px solid var(--v60-line);border-radius:7px}.rs-v60-author-links a:hover{border-color:var(--color-primary);color:var(--color-primary)}.rs-v60-author-count{display:grid;justify-items:center;padding-left:14px;border-left:1px solid var(--v60-line)}.rs-v60-author-count b{font-size:20px}.rs-v60-author-count span{font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}.rs-v60-author-latest{margin-top:18px;padding-top:18px;border-top:1px solid var(--v60-line)}.rs-v60-mini-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.rs-v60-mini-heading a{font-size:9px;color:var(--text);font-weight:900;text-decoration:none}.rs-v60-author-latest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.rs-v60-author-latest-grid a{padding:12px;border:1px solid var(--v60-line);border-radius:10px;text-decoration:none;color:var(--text);transition:.25s}.rs-v60-author-latest-grid a:hover{transform:translateY(-2px);border-color:var(--color-primary)}.rs-v60-author-latest-grid small{display:block;color:var(--muted);font-size:7px}.rs-v60-author-latest-grid strong{display:block;margin-top:6px;font-size:9px;line-height:1.4} .rs-v60-toc-toggle{float:right;margin-top:-3px;border:1px solid var(--v60-line);background:var(--bg);color:var(--text);border-radius:7px;padding:5px 7px;font-size:8px;cursor:pointer}.rs-v60-toc a{display:block;padding:4px 6px;border-left:2px solid transparent}.rs-v60-toc a.is-active{color:var(--color-primary);border-left-color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 7%,transparent);border-radius:0 6px 6px 0}.rs-v60-back-blog{display:flex;align-items:center;justify-content:center;padding:11px;border:1px solid var(--v60-line);border-radius:12px;color:var(--text);text-decoration:none;font-size:9px;font-weight:900;background:var(--v60-card);transition:.25s}.rs-v60-back-blog:hover{border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-2px)} .rs-v60-category-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:26px;padding:14px;border:1px solid var(--v60-line);border-radius:14px}.rs-v60-category-links>span{font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-right:auto}.rs-v60-category-links a{font-size:9px;font-weight:900;color:var(--text);text-decoration:none}.rs-v60-category-links a:hover{color:var(--color-primary)} .rs-v60-end-message{display:flex;justify-content:center;gap:7px;align-items:center;margin-top:38px;padding:16px;border-radius:14px;border:1px dashed var(--v60-line);color:var(--muted);font-size:9px}.rs-v60-end-message strong{color:var(--text)}.rs-v60-end-message.is-ended{border-color:var(--color-primary);box-shadow:0 0 0 1px color-mix(in srgb,var(--color-primary) 10%,transparent)} .rs-v60-service-cta{margin-top:30px;padding:28px;border-radius:20px;background:linear-gradient(135deg,var(--v60-card),var(--v60-soft));border:1px solid var(--v60-line);text-align:center}.rs-v60-service-cta span{font-size:8px;font-weight:900;color:var(--color-primary);letter-spacing:.14em;text-transform:uppercase}.rs-v60-service-cta h2{margin:7px 0 15px;font-size:clamp(1.4rem,4vw,2rem)}.rs-v60-service-cta a{display:inline-flex;padding:11px 16px;border-radius:9px;background:var(--color-primary);color:#111;text-decoration:none;font-size:9px;font-weight:900} .rs-v60-floating-share{position:fixed;right:18px;bottom:90px;z-index:900;display:grid;gap:7px;opacity:0;transform:translateY(12px);pointer-events:none;transition:.3s}.rs-v60-floating-share.is-visible{opacity:1;transform:none;pointer-events:auto}.rs-v60-floating-share button{width:40px;height:40px;border-radius:50%;border:1px solid var(--v60-line);background:var(--v60-card);color:var(--text);font-weight:900;cursor:pointer;box-shadow:var(--rs-shadow)}.rs-v60-floating-share button:hover{border-color:var(--color-primary);color:var(--color-primary)} .rs-v60-mobile-bottom{display:none}.rs-v60-page .comments-area{padding-top:34px}.rs-v60-page .comment-list{list-style:none;margin:20px 0;padding:0}.rs-v60-page .comment-list .comment{padding:18px;margin:10px 0;border:1px solid var(--v60-line);border-radius:14px;background:var(--v60-card)}.rs-v60-page .comment-author{display:flex;align-items:center;gap:9px}.rs-v60-page .comment-author img{border-radius:50%}.rs-v60-page .comment-metadata{font-size:8px;color:var(--muted);margin:5px 0 10px}.rs-v60-page .comment-content{font-size:10px;line-height:1.7}.rs-v60-page .reply a{display:inline-block;padding:6px 9px;border:1px solid var(--v60-line);border-radius:7px;color:var(--text);font-size:8px;text-decoration:none;font-weight:900}.rs-v60-page .reply a:hover{border-color:var(--color-primary);color:var(--color-primary)} @media(max-width:680px){.rs-v60-actionbar{gap:5px}.rs-v60-comment-count{width:100%;margin-left:0;text-align:center}.rs-v60-author-pro{grid-template-columns:54px 1fr}.rs-v60-author-pro>img{width:54px;height:54px}.rs-v60-author-count{grid-column:1/-1;border-left:0;border-top:1px solid var(--v60-line);padding:12px 0 0;display:flex;gap:6px;justify-content:center}.rs-v60-author-latest-grid{grid-template-columns:1fr}.rs-v60-share-buttons{display:grid!important;grid-template-columns:repeat(2,1fr);width:100%}.rs-v60-share-buttons a,.rs-v60-share-buttons button{width:100%}.rs-v60-category-links>span{width:100%;margin-right:0}.rs-v60-floating-share{display:none}.rs-v60-mobile-bottom{position:fixed;left:10px;right:10px;bottom:10px;z-index:9990;display:grid;grid-template-columns:1fr 1fr 1.4fr 1fr;gap:4px;padding:5px;border:1px solid var(--v60-line);border-radius:15px;background:color-mix(in srgb,var(--v60-card) 92%,transparent);backdrop-filter:blur(16px);box-shadow:var(--rs-shadow)}.rs-v60-mobile-bottom a,.rs-v60-mobile-bottom button{border:0;background:transparent;color:var(--text);padding:9px 5px;font-size:9px;font-weight:900;text-decoration:none;border-radius:9px}.rs-v60-mobile-bottom a:hover,.rs-v60-mobile-bottom button:hover{background:var(--v60-soft);color:var(--color-primary)}.rs-v60-page{padding-bottom:65px}.rs-v60-hero-progress-label{right:12px}} @media(prefers-reduced-motion:reduce){html,.rs-v60-page,.rs-v60-page *{scroll-behavior:auto!important}.rs-v60-page *,body{transition:none!important;animation:none!important}.rs-v60-floating-share,.rs-v60-reveal{transform:none!important;opacity:1!important}} /* v6.2.2 — premium article sharing panel */ .rs-v60-sharebar{position:relative!important;display:grid!important;grid-template-columns:minmax(210px,1fr) auto auto!important;align-items:center!important;gap:22px!important;margin:32px 0!important;padding:22px 24px!important;border:1px solid var(--v60-line)!important;border-radius:22px!important;background:linear-gradient(135deg,var(--v60-card),var(--v60-soft))!important;box-shadow:0 16px 45px rgba(0,0,0,.055),inset 0 1px 0 rgba(255,255,255,.45)!important;overflow:hidden!important;isolation:isolate!important} .rs-v60-sharebar:before{content:"";position:absolute;inset:-60% -10%;background:radial-gradient(circle at 25% 50%,color-mix(in srgb,var(--color-primary) 13%,transparent),transparent 28%);pointer-events:none;z-index:-1;animation:rsShareGlow 7s ease-in-out infinite alternate} .rs-v60-sharebar:after{content:"";position:absolute;left:0;top:0;width:34%;height:2px;background:linear-gradient(90deg,var(--color-primary),transparent);animation:rsShareLine 4.5s ease-in-out infinite} .rs-v60-share-intro{min-width:0;display:flex!important;flex-direction:column!important;gap:3px!important} .rs-v60-share-intro .rs-v60-share-kicker{font-size:8px!important;font-weight:900!important;letter-spacing:.16em!important;text-transform:uppercase!important;color:var(--color-primary)!important} .rs-v60-share-intro strong{font-size:16px!important;line-height:1.25!important;letter-spacing:-.02em!important;color:var(--text)!important} .rs-v60-share-intro small{font-size:9px!important;line-height:1.5!important;color:var(--muted)!important} .rs-v60-share-buttons{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:7px!important;flex-wrap:nowrap!important} .rs-v60-share-buttons a,.rs-v60-share-buttons button{position:relative!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;min-width:42px!important;height:43px!important;padding:0 11px!important;border:1px solid var(--v60-line)!important;border-radius:12px!important;background:color-mix(in srgb,var(--v60-card) 88%,transparent)!important;color:var(--text)!important;font-size:8px!important;font-weight:900!important;letter-spacing:.01em!important;text-decoration:none!important;cursor:pointer!important;overflow:hidden!important;transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s,background .3s!important} .rs-v60-share-buttons a:before,.rs-v60-share-buttons button:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.32) 48%,transparent 72%);transform:translateX(-130%);transition:transform .55s ease} .rs-v60-share-buttons a i,.rs-v60-share-buttons button i{position:relative;display:grid;place-items:center;width:21px;height:21px;border-radius:7px;background:var(--v60-soft);color:var(--color-primary);font-style:normal;font-size:8px;font-weight:950;line-height:1;transition:transform .3s,background .3s,color .3s} .rs-v60-share-buttons a span,.rs-v60-share-buttons button span{position:relative} .rs-v60-share-buttons a:hover,.rs-v60-share-buttons button:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--color-primary) 60%,var(--v60-line));background:var(--v60-card);box-shadow:0 10px 24px rgba(0,0,0,.09),0 0 0 3px color-mix(in srgb,var(--color-primary) 8%,transparent);color:var(--text)!important} .rs-v60-share-buttons a:hover:before,.rs-v60-share-buttons button:hover:before{transform:translateX(130%)} .rs-v60-share-buttons a:hover i,.rs-v60-share-buttons button:hover i{transform:rotate(-8deg) scale(1.08);background:var(--color-primary);color:#111} .rs-v60-share-buttons a:active,.rs-v60-share-buttons button:active{transform:translateY(-1px) scale(.97)} .rs-v60-share-buttons button{font-family:inherit} .rs-v60-share-buttons em{position:absolute!important;inset:0!important;display:grid!important;place-items:center!important;background:var(--color-primary)!important;color:#111!important;font-style:normal!important;font-size:8px!important;font-weight:950!important;opacity:0!important;transform:translateY(8px)!important;transition:.28s ease!important;z-index:3!important} .rs-v60-share-buttons em.show{opacity:1!important;transform:none!important} .rs-v60-share-count{display:flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;min-width:54px!important;padding-left:16px!important;border-left:1px solid var(--v60-line)!important;color:var(--muted)!important;font-size:8px!important;font-weight:800!important;white-space:nowrap!important} .rs-v60-share-count b{color:var(--text)!important;font-size:13px!important} .rs-v60-share-count small{font-size:8px!important;color:var(--muted)!important} @keyframes rsShareGlow{from{transform:translate3d(-3%,0,0) scale(1)}to{transform:translate3d(12%,3%,0) scale(1.08)}} @keyframes rsShareLine{0%,100%{width:18%;opacity:.45}50%{width:52%;opacity:1}} @media(max-width:1050px){.rs-v60-sharebar{grid-template-columns:1fr!important;gap:15px!important}.rs-v60-share-buttons{justify-content:flex-start!important;flex-wrap:wrap!important}.rs-v60-share-count{justify-content:flex-start!important;border-left:0!important;border-top:1px solid var(--v60-line)!important;padding:12px 0 0!important}} @media(max-width:680px){.rs-v60-sharebar{padding:18px!important;border-radius:18px!important}.rs-v60-share-intro strong{font-size:14px!important}.rs-v60-share-buttons{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}.rs-v60-share-buttons a,.rs-v60-share-buttons button{width:100%!important;height:44px!important}.rs-v60-share-count{margin-top:1px!important}.rs-v60-sharebar:after{width:45%}} @media(prefers-reduced-motion:reduce){.rs-v60-sharebar:before,.rs-v60-sharebar:after{animation:none!important}.rs-v60-share-buttons a,.rs-v60-share-buttons button,.rs-v60-share-buttons a i,.rs-v60-share-buttons button i{transition:none!important}.rs-v60-share-buttons a:before,.rs-v60-share-buttons button:before{display:none!important}} /* v6.2.3 — extra premium share motion */ .rs-v60-sharebar.rs-share-animated{--share-glow:color-mix(in srgb,var(--color-primary) 18%,transparent)} .rs-v60-sharebar.rs-share-animated:before{animation:rsShareAmbient 8s ease-in-out infinite alternate,rsShareBreath 5s ease-in-out infinite} .rs-v60-sharebar.rs-share-animated:after{animation:rsShareLine 4s ease-in-out infinite,rsShareSweep 6s linear infinite} .rs-v60-sharebar.rs-share-animated .rs-v60-share-intro{opacity:0;transform:translateX(-18px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)} .rs-v60-sharebar.rs-share-animated .rs-v60-share-buttons{opacity:0;transform:translateY(14px);transition:opacity .7s .12s ease,transform .8s .12s cubic-bezier(.2,.8,.2,1)} .rs-v60-sharebar.rs-share-animated .rs-v60-share-count{opacity:0;transform:translateX(12px);transition:opacity .6s .3s ease,transform .7s .3s cubic-bezier(.2,.8,.2,1)} .rs-v60-sharebar.rs-share-animated.is-in .rs-v60-share-intro,.rs-v60-sharebar.rs-share-animated.is-in .rs-v60-share-buttons,.rs-v60-sharebar.rs-share-animated.is-in .rs-v60-share-count{opacity:1;transform:none} .rs-v60-sharebar.rs-share-animated .rs-v60-share-buttons a,.rs-v60-sharebar.rs-share-animated .rs-v60-share-buttons button{transform:translateY(10px) scale(.96);opacity:0;animation:none;will-change:transform;box-shadow:0 0 0 0 transparent} .rs-v60-sharebar.rs-share-animated.is-in .rs-v60-share-buttons a,.rs-v60-sharebar.rs-share-animated.is-in .rs-v60-share-buttons button{animation:rsShareButtonIn .65s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--share-i,0) * 70ms + 180ms)} .rs-v60-sharebar.rs-share-animated .rs-v60-share-buttons a:nth-child(1),.rs-v60-sharebar.rs-share-animated .rs-v60-share-buttons button:nth-child(1){--share-i:0}.rs-v60-sharebar.rs-share-animated .rs-v60-share-buttons a:nth-child(2),.rs-v60-sharebar.rs-share-animated .rs-v60-share-buttons button:nth-child(2){--share-i:1}.rs-v60-sharebar.rs-share-animated .rs-v60-share-buttons a:nth-child(3),.rs-v60-sharebar.rs-share-animated .rs-v60-share-buttons button:nth-child(3){--share-i:2}.rs-v60-sharebar.rs-share-animated .rs-v60-share-buttons a:nth-child(4),.rs-v60-sharebar.rs-share-animated .rs-v60-share-buttons button:nth-child(4){--share-i:3}.rs-v60-sharebar.rs-share-animated .rs-v60-share-buttons a:nth-child(5),.rs-v60-sharebar.rs-share-animated .rs-v60-share-buttons button:nth-child(5){--share-i:4}.rs-v60-sharebar.rs-share-animated .rs-v60-share-buttons a:nth-child(6),.rs-v60-sharebar.rs-share-animated .rs-v60-share-buttons button:nth-child(6){--share-i:5}.rs-v60-sharebar.rs-share-animated .rs-v60-share-buttons a:hover,.rs-v60-sharebar.rs-share-animated .rs-v60-share-buttons button:hover{transform:translate(calc(var(--mx,0) * 4px),calc(-4px + var(--my,0) * 3px)) scale(1.035);box-shadow:0 16px 32px color-mix(in srgb,var(--color-primary) 13%,transparent),0 0 0 4px color-mix(in srgb,var(--color-primary) 6%,transparent)} .rs-v60-sharebar.rs-share-animated .rs-v60-share-buttons a:hover i,.rs-v60-sharebar.rs-share-animated .rs-v60-share-buttons button:hover i{animation:rsShareIconBounce .65s ease-in-out} .rs-v60-sharebar.rs-share-animated .rs-v60-share-buttons a:focus-visible,.rs-v60-sharebar.rs-share-animated .rs-v60-share-buttons button:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px} .rs-v60-sharebar.rs-share-animated .rs-v60-share-buttons a.rs-share-pop,.rs-v60-sharebar.rs-share-animated .rs-v60-share-buttons button.rs-share-pop{animation:rsSharePop .5s cubic-bezier(.2,.8,.2,1)!important} .rs-v60-sharebar.rs-share-animated .rs-v60-share-count.rs-count-pop{animation:rsShareCount .55s cubic-bezier(.2,.8,.2,1)} .rs-v60-sharebar.rs-share-animated .rs-v60-share-kicker{position:relative;display:inline-block;overflow:hidden} .rs-v60-sharebar.rs-share-animated .rs-v60-share-kicker:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.8) 50%,transparent 75%);transform:translateX(-120%);animation:rsShareTextShine 5s 1.5s ease-in-out infinite} .rs-v60-sharebar.rs-share-animated .rs-v60-share-count b{display:inline-block;min-width:1ch;text-align:center} @keyframes rsShareButtonIn{0%{opacity:0;transform:translateY(14px) scale(.94)}70%{opacity:1;transform:translateY(-3px) scale(1.015)}100%{opacity:1;transform:translateY(0) scale(1)}} @keyframes rsShareIconBounce{0%,100%{transform:rotate(0) scale(1)}35%{transform:rotate(-12deg) scale(1.16)}65%{transform:rotate(7deg) scale(1.04)}} @keyframes rsSharePop{0%{transform:scale(1)}35%{transform:scale(.91)}65%{transform:scale(1.08)}100%{transform:scale(1)}} @keyframes rsShareCount{0%{transform:translateY(0);opacity:1}45%{transform:translateY(-5px) scale(1.08);opacity:.55}100%{transform:translateY(0);opacity:1}} @keyframes rsShareAmbient{from{transform:translate3d(-4%,0,0) scale(1)}to{transform:translate3d(10%,4%,0) scale(1.1)}} @keyframes rsShareBreath{0%,100%{opacity:.7}50%{opacity:1}} @keyframes rsShareSweep{0%,72%{opacity:1}78%{opacity:.45}86%,100%{opacity:1}} @keyframes rsShareTextShine{0%,55%{transform:translateX(-120%)}70%,100%{transform:translateX(120%)}} @media(max-width:680px){.rs-v60-sharebar.rs-share-animated .rs-v60-share-intro{transform:translateY(10px)}.rs-v60-sharebar.rs-share-animated .rs-v60-share-count{transform:translateY(8px)}.rs-v60-sharebar.rs-share-animated .rs-v60-share-buttons a:hover,.rs-v60-sharebar.rs-share-animated .rs-v60-share-buttons button:hover{transform:translateY(-3px) scale(1.02)} } @media(prefers-reduced-motion:reduce){.rs-v60-sharebar.rs-share-animated .rs-v60-share-intro,.rs-v60-sharebar.rs-share-animated .rs-v60-share-buttons,.rs-v60-sharebar.rs-share-animated .rs-v60-share-count{opacity:1!important;transform:none!important;transition:none!important}.rs-v60-sharebar.rs-share-animated .rs-v60-share-buttons a,.rs-v60-sharebar.rs-share-animated .rs-v60-share-buttons button{opacity:1!important;transform:none!important;animation:none!important}.rs-v60-sharebar.rs-share-animated:before,.rs-v60-sharebar.rs-share-animated:after,.rs-v60-sharebar.rs-share-animated .rs-v60-share-kicker:after{animation:none!important}} /* v6.2.4 — complete single-post flow + premium comments */ .rs-v60-page .rs-v60-category-links{ margin-top:30px;padding:22px 24px;border:1px solid var(--v60-line);border-radius:22px; background:linear-gradient(135deg,var(--v60-card),var(--v60-soft));display:flex;align-items:center; justify-content:space-between;gap:20px;position:relative;overflow:hidden } .rs-v60-page .rs-v60-category-links:before{content:"";position:absolute;inset:auto -10% -70% -10%;height:130%;background:radial-gradient(circle,color-mix(in srgb,var(--color-primary) 12%,transparent),transparent 65%);pointer-events:none;animation:rs624Glow 7s ease-in-out infinite alternate} .rs-v60-category-links>span{position:relative;color:var(--color-primary);font-size:9px;font-weight:950;letter-spacing:.16em;text-transform:uppercase} .rs-v60-category-actions{position:relative;display:flex;flex-wrap:wrap;gap:8px} .rs-v60-category-actions a{display:inline-flex;align-items:center;gap:7px;padding:10px 13px;border:1px solid var(--v60-line);border-radius:999px;color:var(--text);text-decoration:none;font-size:10px;font-weight:900;background:var(--v60-card);transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease} .rs-v60-category-actions a:hover{transform:translateY(-3px);border-color:var(--color-primary);box-shadow:0 12px 28px color-mix(in srgb,var(--color-primary) 12%,transparent);color:var(--text)} .rs-v60-category-actions b{color:var(--color-primary);font-size:13px;transition:transform .3s ease}.rs-v60-category-actions a:hover b{transform:translateX(3px)} .rs-v60-page .rs-v60-comments-wrap{margin-top:62px} .rs-v60-page .rs-comments-area{margin:0;padding:0;border:0} .rs-comments-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--v60-line)} .rs-comments-kicker{display:block;color:var(--color-primary);font-size:9px;font-weight:950;letter-spacing:.17em;text-transform:uppercase;margin-bottom:7px} .rs-comments-head h2{margin:0;font-size:clamp(1.65rem,3vw,2.35rem);line-height:1;letter-spacing:-.045em} .rs-comments-head p{margin:8px 0 0;color:var(--muted);font-size:11px;line-height:1.6} .rs-comments-status{padding:7px 10px;border:1px solid color-mix(in srgb,var(--color-primary) 30%,var(--v60-line));border-radius:999px;color:var(--color-primary);font-size:8px;font-weight:900;white-space:nowrap} .rs-v60-page .rs-comment-list{list-style:none!important;margin:0 0 20px!important;padding:0!important;display:grid;gap:12px} .rs-v60-page .rs-comment-list .comment{margin:0!important;padding:20px!important;border:1px solid var(--v60-line);border-radius:18px;background:var(--v60-card);box-shadow:0 12px 35px rgba(0,0,0,.035);transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease} .rs-v60-page .rs-comment-list .comment:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--color-primary) 30%,var(--v60-line));box-shadow:0 18px 42px rgba(0,0,0,.07)} .rs-v60-page .rs-comment-list .children{list-style:none;margin:12px 0 0 28px;padding:0} .rs-v60-page .comment-author{display:flex;align-items:center;gap:11px}.rs-v60-page .comment-author img{width:44px;height:44px;border-radius:50%;object-fit:cover} .rs-v60-page .comment-author .fn{font-size:11px;font-weight:900;color:var(--text)} .rs-v60-page .comment-metadata{font-size:8px!important;color:var(--muted)!important;margin:4px 0 12px 55px!important}.rs-v60-page .comment-metadata a{color:var(--muted);text-decoration:none} .rs-v60-page .comment-content{font-size:11px!important;line-height:1.75!important;color:var(--text)}.rs-v60-page .comment-content p:last-child{margin-bottom:0} .rs-v60-page .reply{margin-top:13px}.rs-v60-page .reply a{padding:7px 10px!important;border-radius:999px!important;background:var(--v60-soft);font-size:8px!important;transition:.3s ease}.rs-v60-page .reply a:hover{transform:translateX(3px);background:var(--color-primary);color:#111!important} .rs-comment-form-card{margin-top:20px;padding:24px;border:1px solid var(--v60-line);border-radius:22px;background:linear-gradient(145deg,var(--v60-card),var(--v60-soft));position:relative;overflow:hidden} .rs-comment-form-card:after{content:"";position:absolute;width:240px;height:240px;right:-100px;top:-150px;border-radius:50%;background:color-mix(in srgb,var(--color-primary) 10%,transparent);filter:blur(8px);pointer-events:none} .rs-comment-form .comment-reply-title{margin:0 0 7px;font-size:1.35rem;letter-spacing:-.035em}.rs-comment-note{margin:0 0 18px;color:var(--muted);font-size:9px} .rs-comment-form label{display:block;margin:0 0 7px;font-size:9px;font-weight:900;color:var(--text)} .rs-comment-form textarea,.rs-comment-form input{width:100%;box-sizing:border-box;border:1px solid var(--v60-line)!important;border-radius:12px!important;background:var(--bg)!important;color:var(--text)!important;padding:12px 13px!important;outline:none;transition:border-color .3s,box-shadow .3s,transform .3s} .rs-comment-form textarea{min-height:145px;resize:vertical}.rs-comment-form textarea:focus,.rs-comment-form input:focus{border-color:var(--color-primary)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--color-primary) 9%,transparent);transform:translateY(-1px)} .rs-comment-form .form-submit{margin:14px 0 0}.rs-comment-form .rs-comment-submit{display:inline-flex!important;align-items:center;gap:8px;border:0!important;border-radius:11px!important;background:var(--color-primary)!important;color:#111!important;padding:12px 16px!important;font-weight:950!important;cursor:pointer;transition:transform .3s,box-shadow .3s} .rs-comment-form .rs-comment-submit:hover{transform:translateY(-3px);box-shadow:0 14px 30px color-mix(in srgb,var(--color-primary) 24%,transparent)}.rs-comment-form .rs-comment-submit span{transition:transform .3s}.rs-comment-form .rs-comment-submit:hover span{transform:translateX(4px)} .rs-comments-closed{padding:18px;border:1px dashed var(--v60-line);border-radius:16px;color:var(--muted);font-size:10px} .rs-v60-page .comments-pagination{margin-top:18px} .rs-v60-page .rs-v60-related{margin-top:62px}.rs-v60-page .rs-v60-explore{margin-top:62px} .rs-v60-page .rs-v60-related-card,.rs-v60-page .rs-v60-nav-card,.rs-v60-page .rs-comment-form-card,.rs-v60-page .rs-comments-head,.rs-v60-page .rs-v60-category-links{animation:rs624Rise .8s cubic-bezier(.2,.8,.2,1) both} @keyframes rs624Rise{from{opacity:.0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}} @keyframes rs624Glow{from{transform:translateX(-2%) scale(.96);opacity:.55}to{transform:translateX(5%) scale(1.05);opacity:1}} @media(max-width:680px){ .rs-v60-page .rs-v60-category-links{display:block;padding:18px}.rs-v60-category-actions{margin-top:12px}.rs-v60-category-actions a{font-size:9px} .rs-comments-head{display:block}.rs-comments-status{display:inline-flex;margin-top:13px}.rs-comment-form-card{padding:18px}.rs-v60-page .rs-comment-list .children{margin-left:12px} } @media(prefers-reduced-motion:reduce){ .rs-v60-page .rs-v60-category-links:before,.rs-v60-page .rs-v60-related-card,.rs-v60-page .rs-v60-nav-card,.rs-v60-page .rs-comment-form-card,.rs-v60-page .rs-comments-head,.rs-v60-page .rs-v60-category-links{animation:none!important} .rs-v60-page .rs-v60-related-card,.rs-v60-page .rs-v60-nav-card,.rs-v60-page .rs-comment-form-card{transition:none!important} } /* ========================================================= v6.2.5 PRO PATCH — consistent hover colors + static cards ========================================================= */ a.btn, button, input[type="button"], input[type="submit"], input[type="reset"] { transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease; } a.btn:hover, a.btn:focus-visible, button:hover, button:focus-visible, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover { background-color: var(--color-primary); color: #0B0B0D; text-decoration: none; } a.btn.btn-outline:hover, a.btn.btn-outline:focus-visible { background-color: var(--surface, var(--color-dark-card)); color: var(--color-primary); border-color: var(--color-primary); } a.btn.btn-whatsapp:hover, a.btn.btn-whatsapp:focus-visible { background-color: #1ebc59; color: #fff; } a.btn.btn-primary:hover, a.btn.btn-primary:focus-visible { background-color: var(--color-accent); color: #0B0B0D; } /* Remove hover motion from portfolio, pricing, and content cards. */ .project-card, .pricing-card, .testimonial-card, .blog-card, .service-card, .portfolio-card, .category-card, .feature-card, .case-study-card, .tilt-card, [class*="portfolio"] .card, [class*="project"] .card, [class*="pricing"] .card { transform: none !important; animation: none; transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease !important; } .project-card:hover, .pricing-card:hover, .testimonial-card:hover, .blog-card:hover, .service-card:hover, .portfolio-card:hover, .category-card:hover, .feature-card:hover, .case-study-card:hover, .tilt-card:hover, [class*="portfolio"] .card:hover, [class*="project"] .card:hover, [class*="pricing"] .card:hover { transform: none !important; animation: none !important; box-shadow: none !important; } .project-card *, .pricing-card *, .testimonial-card *, .blog-card *, .service-card *, .portfolio-card *, .category-card *, .feature-card *, .case-study-card *, .tilt-card * { transition-property: color, background-color, border-color, box-shadow !important; } .project-card:hover .card-link svg, .blog-card:hover .card-link svg, .project-card:hover svg, .pricing-card:hover svg { transform: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ========================================================= v6.2.6 HOTFIX — prevent cards disappearing on hover + button states ========================================================= */ .project-card, .project-card-pro, .pricing-card, .testimonial-card, .trust-card, .blog-card, .blog-pro-card, .home-blog-pro-card, .service-card, .feature-card, .case-study-card, .portfolio-card, .category-card, .tilt-card, .home-pro-section .card, .home-pro-section .project-card, .home-pro-section .testimonial-card { opacity: 1 !important; visibility: visible !important; transform: none !important; filter: none !important; animation: none !important; transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease !important; } .project-card:hover, .project-card-pro:hover, .pricing-card:hover, .testimonial-card:hover, .trust-card:hover, .blog-card:hover, .blog-pro-card:hover, .home-blog-pro-card:hover, .service-card:hover, .feature-card:hover, .case-study-card:hover, .portfolio-card:hover, .category-card:hover, .tilt-card:hover, .home-pro-section .card:hover, .home-pro-section .project-card:hover, .home-pro-section .testimonial-card:hover { opacity: 1 !important; visibility: visible !important; transform: none !important; filter: none !important; animation: none !important; box-shadow: var(--shadow-sm) !important; } /* Keep images static too, so hover cannot crop/zoom the card unexpectedly. */ .project-card:hover img, .project-card-pro:hover img, .blog-card:hover img, .blog-pro-card:hover img, .home-blog-pro-card:hover img, .portfolio-card:hover img { transform: none !important; filter: none !important; } /* Predictable button colors: no white-on-white hover state. */ a.btn, a.btn:visited, button, input[type="button"], input[type="submit"], input[type="reset"] { transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease !important; } a.btn-primary, button.btn-primary, input[type="submit"], button[type="submit"] { background-color: var(--color-primary) !important; color: #0B0B0D !important; border-color: var(--color-primary) !important; } a.btn-primary:hover, button.btn-primary:hover, input[type="submit"]:hover, button[type="submit"]:hover { background-color: var(--color-accent) !important; color: #0B0B0D !important; border-color: var(--color-accent) !important; transform: none !important; } a.btn-outline, a.btn-outline:visited { background-color: transparent !important; color: var(--text) !important; border: 1px solid var(--border) !important; } a.btn-outline:hover, a.btn-outline:focus-visible { background-color: var(--surface) !important; color: var(--color-primary) !important; border-color: var(--color-primary) !important; transform: none !important; } button:hover, input[type="button"]:hover, input[type="reset"]:hover { background-color: var(--color-primary) !important; color: #0B0B0D !important; border-color: var(--color-primary) !important; transform: none !important; } /* ========================================================= v6.3.0 — Professional homepage project planner Static card hover states are intentional: entrance motion only. ========================================================= */ .pro-home-planner{position:relative;isolation:isolate;overflow:hidden;padding:clamp(58px,8vw,104px) 0;background:var(--surface,rgba(128,128,128,.035))} .pro-planner-head{max-width:760px;margin:0 auto 34px;text-align:center} .pro-planner-head h2{margin:10px 0 12px;font-size:clamp(2rem,4vw,3.25rem);line-height:1.08;letter-spacing:-.045em} .pro-planner-head p{max-width:620px;margin:0 auto;color:var(--muted);line-height:1.75} .pro-planner-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:22px;align-items:stretch;max-width:1050px;margin:0 auto} .pro-planner-card,.pro-planner-summary{min-width:0;border:1px solid var(--border,rgba(128,128,128,.22));border-radius:24px;background:var(--bg,#fff);padding:clamp(20px,3vw,32px);box-shadow:0 16px 48px rgba(0,0,0,.055)} .pro-planner-card{display:flex;flex-direction:column;gap:9px} .pro-planner-card label{margin-top:7px;color:var(--text);font-size:.9rem;font-weight:750} .pro-planner-card label span{color:var(--muted);font-weight:500} .pro-planner-card select,.pro-planner-card textarea{width:100%;min-height:46px;box-sizing:border-box;border:1px solid var(--border,rgba(128,128,128,.3));border-radius:12px;background:var(--bg,#fff);color:var(--text);padding:12px 13px;font:inherit;line-height:1.45} .pro-planner-card textarea{resize:vertical;min-height:95px} .pro-planner-card select:focus-visible,.pro-planner-card textarea:focus-visible{outline:3px solid color-mix(in srgb,var(--color-primary,#e5b94b) 38%,transparent);outline-offset:2px;border-color:var(--color-primary,#e5b94b)} .pro-brief-button{width:100%;justify-content:center;margin-top:8px;min-height:48px} .pro-planner-note{margin:3px 0 0;color:var(--muted);font-size:.78rem;line-height:1.55} .pro-planner-summary{position:relative;overflow:hidden;background:linear-gradient(145deg,var(--bg,#fff),var(--surface,rgba(128,128,128,.055)))} .pro-summary-icon{display:grid;place-items:center;width:46px;height:46px;margin-bottom:18px;border-radius:14px;background:var(--color-primary,#e5b94b);color:#101114;font-size:1.5rem} .pro-planner-summary h3{font-size:clamp(1.35rem,2.2vw,1.8rem);letter-spacing:-.03em;margin:8px 0 22px} .pro-planner-summary ul{display:grid;gap:18px;list-style:none;margin:0;padding:0} .pro-planner-summary li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start} .pro-planner-summary li>span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--surface,rgba(128,128,128,.1));font-size:.75rem;font-weight:850;color:var(--color-primary,#b88b25)} .pro-planner-summary li strong,.pro-planner-summary li small{display:block} .pro-planner-summary li strong{font-size:.95rem;margin:1px 0 4px} .pro-planner-summary li small{font-size:.84rem;line-height:1.55;color:var(--muted)} .pro-planner-contact{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:26px;padding-top:18px;border-top:1px solid var(--border,rgba(128,128,128,.2));font-weight:750;text-decoration:none} .pro-planner-contact:hover,.pro-planner-contact:focus-visible{color:var(--color-primary,#b88b25);text-decoration:underline} /* Stable, legible hover behavior: no opacity, visibility, filter, or position changes. */ .pro-planner-card,.pro-planner-summary{opacity:1;visibility:visible;transform:none;filter:none;transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease} .pro-planner-card:hover,.pro-planner-summary:hover{opacity:1;visibility:visible;transform:none;filter:none;box-shadow:0 16px 48px rgba(0,0,0,.055)} .pro-motion-in{opacity:1;visibility:visible;animation:proPlannerEnter .55s cubic-bezier(.2,.7,.2,1) both} @keyframes proPlannerEnter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}} @media(max-width:760px){.pro-planner-grid{grid-template-columns:1fr}.pro-planner-card,.pro-planner-summary{border-radius:18px}.pro-planner-head{text-align:left}.pro-planner-head p{margin-left:0}} @media(prefers-reduced-motion:reduce){.pro-motion-in{animation:none!important}.pro-planner-card,.pro-planner-summary{transition:none!important}} /* ===== v6.3.2 — Single project (case study) layout ===== */ .project-hero .project-hero-lead{max-width:720px;margin:14px auto 0;color:var(--muted);font-size:1.05rem;line-height:1.7} .project-single{padding:10px 0 90px} .project-cover{position:relative;margin:0 auto 52px;max-width:880px;aspect-ratio:16/8;max-height:420px;border-radius:22px;overflow:hidden;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-lg)} .project-cover.is-zoomable{cursor:zoom-in} .project-cover img{display:block;width:100%;height:100%;max-width:100%;object-fit:cover;object-position:center top} .project-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:44px;align-items:start} .project-body{min-width:0} .project-lead p{font-size:1.18rem;line-height:1.8;color:var(--text);margin:0 0 1em} .project-ps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:30px 0} .project-block,.project-result{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:24px} .project-block p,.project-result p{margin:0 0 .8em;line-height:1.75;color:var(--muted)} .project-block p:last-child,.project-result p:last-child{margin-bottom:0} .project-block-tag{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--color-primary);margin-bottom:12px} .project-block-solution{border-color:color-mix(in srgb,var(--color-primary) 45%,var(--border))} .project-section{margin:40px 0 0} .project-section h2{font-size:1.4rem;margin:0 0 18px} .project-section p{line-height:1.8;color:var(--muted)} .project-checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none} .project-checklist li{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:12px;font-size:.95rem;line-height:1.5} .project-checklist svg{width:18px;height:18px;flex-shrink:0;margin-top:2px;color:var(--color-primary)} .project-chips{display:flex;flex-wrap:wrap;gap:10px} .project-chips span{padding:8px 16px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-size:.85rem;font-weight:600} .project-result{margin-top:40px;border-left:4px solid var(--color-primary)} .project-result p{color:var(--text);font-size:1.05rem} .project-aside{position:sticky;top:100px} .project-aside-card h3{margin:0 0 6px} .project-meta{list-style:none;margin:10px 0 22px;padding:0} .project-meta li{display:flex;flex-direction:column;gap:4px;padding:14px 0;border-bottom:1px dashed var(--border)} .project-meta li:last-child{border-bottom:0} .project-meta span{display:flex;align-items:center;gap:8px;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .project-meta svg{width:15px;height:15px;color:var(--color-primary)} .project-meta strong{font-size:.95rem;line-height:1.5} .project-nav{margin-top:60px} .project-nav span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media (max-width:900px){ .project-layout{grid-template-columns:1fr;gap:32px} .project-aside{position:static} .project-cover{aspect-ratio:16/10;max-height:320px;border-radius:16px;margin-bottom:36px} } @media (max-width:640px){ .project-ps,.project-checklist{grid-template-columns:1fr} .project-lead p{font-size:1.05rem} }