:root {
  --accent:#247dcf;
  --accent-light:#247dcf12;
  --accent-mid:#5a9fe0;
  --dark:#2d2d3a;
  --text:#555566;
  --text-light:#999aab;
  --border:#eeeff2;
  --bg:#f8f9fb;
  --white:#ffffff;
  --green:#22c55e;
  --radius:20px;
  --ease:cubic-bezier(0.4,0,0.2,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;color:var(--text);background:var(--white);overflow-x:hidden;}
a{text-decoration:none;color:inherit;}

/* &#x2500;&#x2500;&#x2500; NAV &#x2500;&#x2500;&#x2500; */
.nav{position:fixed;top:0;left:0;right:0;z-index:1002;padding:0.8rem 2rem;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid transparent;}
.nav.scrolled{border-bottom:1px solid var(--border);}
.nav-brand{display:flex;align-items:center;gap:0.3rem;text-decoration:none;}
.nav-brand img{height:36px;}
.nav-home{display:inline-flex;align-items:center;}
.nav-home svg{transition:color 0.3s;}
.nav-links{display:flex;gap:2.2rem;align-items:center;}
.nav-links a{font-size:0.88rem;font-weight:500;color:var(--text);}
.nav-links a:hover{color:var(--accent);}
.nav-cta{background:var(--accent);color:white !important;padding:0.55rem 1.4rem;border-radius:100px;font-size:0.82rem;font-weight:600;}
.nav-cta:hover{opacity:0.9;}
.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:none;border:none;position:relative;z-index:1003;}
.nav-hamburger span{width:24px;height:2.5px;background:var(--dark);border-radius:2px;display:block;}
.nav-hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.nav-hamburger.open span:nth-child(2){display:none;}
.nav-hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}
.brand-prefix{color:#343434;}

/* ─── LANG SWITCHER ─── */
.nav-lang-switcher{position:relative;}
.nav-lang-btn{display:inline-flex;align-items:center;gap:0.3rem;font-family:inherit;font-size:0.82rem;font-weight:600;color:var(--text);background:transparent;border:1.5px solid var(--border);border-radius:8px;padding:0.35rem 0.6rem;cursor:pointer;transition:all 0.2s var(--ease);}
.nav-lang-btn:hover{border-color:var(--accent);color:var(--accent);}
.nav-lang-btn svg{transition:transform 0.2s var(--ease);}
.nav-lang-switcher:hover .nav-lang-btn svg{transform:rotate(180deg);}
.nav-lang-dropdown{position:absolute;top:calc(100% + 0.4rem);right:0;background:var(--white);border:1px solid var(--border);border-radius:10px;padding:0.3rem;min-width:56px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:all 0.2s var(--ease);box-shadow:0 4px 16px rgba(0,0,0,0.08);z-index:10;}
.nav-lang-switcher:hover .nav-lang-dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.nav-lang-dropdown a{display:block;padding:0.4rem 0.7rem;font-size:0.8rem;font-weight:500;color:var(--text);border-radius:7px;text-align:center;transition:all 0.15s;}
.nav-lang-dropdown a:hover{background:var(--bg);color:var(--accent);}
.nav-lang-dropdown a.active{color:var(--accent);font-weight:700;}

/* &#x2500;&#x2500;&#x2500; HERO &#x2500;&#x2500;&#x2500; */
.hero{min-height:100vh;display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:2rem;max-width:1300px;margin:0 auto;padding:5.5rem 3rem 4rem;position:relative;overflow:visible;}
.hero-blob-1{position:absolute;top:-5%;right:-10%;width:700px;height:700px;background:radial-gradient(circle,rgba(36,125,207,0.07) 0%,transparent 65%);border-radius:50%;pointer-events:none;animation:blobFloat 8s ease-in-out infinite alternate;}
.hero-blob-2{position:absolute;bottom:0%;left:-10%;width:450px;height:450px;background:radial-gradient(circle,rgba(36,125,207,0.04) 0%,transparent 65%);border-radius:50%;pointer-events:none;animation:blobFloat 10s ease-in-out 1s infinite alternate-reverse;}
@keyframes blobFloat{0%{transform:translate(0,0) scale(1);}100%{transform:translate(20px,-15px) scale(1.08);}}

.hero-text{position:relative;z-index:2;}
.hero-pill{display:inline-flex;align-items:center;gap:0.5rem;padding:0.35rem 0.9rem 0.35rem 0.5rem;background:var(--bg);border:1px solid var(--border);border-radius:100px;font-size:0.75rem;font-weight:600;color:var(--accent);margin-bottom:1.8rem;animation:fadeUp 0.7s var(--ease) 0.1s both;}
.hero h1{font-size:clamp(2.4rem,4.5vw,4.2rem);font-weight:800;line-height:1.12;color:var(--dark);letter-spacing:-0.03em;animation:fadeUp 0.7s var(--ease) 0.2s both;}
.hero h1 .highlight{color:var(--accent);}
.hero-desc{font-size:1.12rem;line-height:1.75;color:var(--text-light);max-width:480px;margin:1.5rem 0 2.2rem;animation:fadeUp 0.7s var(--ease) 0.3s both;}
.hero-actions{display:flex;gap:0.8rem;flex-wrap:wrap;animation:fadeUp 0.7s var(--ease) 0.4s both;}
.btn-accent{background:var(--accent);color:white;padding:0.85rem 2rem;border-radius:14px;font-size:0.9rem;font-weight:600;border:none;cursor:pointer;transition:all 0.3s var(--ease);}
.btn-accent:hover{transform:translateY(-2px);opacity:0.9;}
.btn-outline{background:transparent;color:var(--dark);padding:0.85rem 2rem;border-radius:14px;font-size:0.9rem;font-weight:600;border:1.5px solid var(--border);cursor:pointer;transition:all 0.3s var(--ease);}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);}
.hero-trust{display:flex;align-items:center;gap:0.5rem;margin-top:1.5rem;font-size:0.78rem;color:var(--text-light);animation:fadeUp 0.7s var(--ease) 0.5s both;}
.hero-trust svg{width:14px;height:14px;fill:var(--green);}



@keyframes fadeUp{from{opacity:0;transform:translateY(25px);}to{opacity:1;transform:translateY(0);}}

/* Hero visual */
.hero-visual{position:relative;z-index:2;display:flex;justify-content:center;animation:fadeUp 0.9s var(--ease) 0.3s both;}
.hero-mockup-wrap{position:relative;width:100%;max-width:520px;}
.hero-mockup-wrap::before{content:'';position:absolute;top:-30px;right:-40px;bottom:-20px;left:-40px;background:linear-gradient(145deg,rgba(36,125,207,0.07) 0%,rgba(90,159,224,0.04) 50%,transparent 100%);border-radius:40px;z-index:0;transform:rotate(-2deg);}
.hero-svg{width:100%;height:auto;position:relative;z-index:1;}

/* Float cards */
.float-card{position:absolute;background:white;border-radius:18px;padding:0.85rem 1.1rem;border:1px solid var(--border);z-index:5;}
.float-card-1{top:-15px;right:-30px;display:flex;align-items:center;gap:0.5rem;}
.float-card-2{bottom:20px;left:-40px;display:flex;align-items:center;gap:0.5rem;}
.float-card-3{bottom:20px;right:-20px;}
.fc-icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;}
.fc-title{font-size:0.8rem;font-weight:700;color:var(--dark);}
.fc-sub{font-size:0.65rem;color:var(--text-light);}

/* &#x2500;&#x2500;&#x2500; SECTIONS &#x2500;&#x2500;&#x2500; */
section{padding:5rem 0;}
.container{max-width:1200px;margin:0 auto;padding:0 2rem;}
.section-label{font-size:0.7rem;text-transform:uppercase;letter-spacing:0.15em;font-weight:700;color:var(--accent);margin-bottom:1rem;}
.section-title{font-size:clamp(1.9rem,3.5vw,2.8rem);font-weight:800;color:var(--dark);letter-spacing:-0.02em;line-height:1.2;}
.section-desc{font-size:0.95rem;line-height:1.7;color:var(--text-light);margin-top:0.8rem;max-width:550px;}

/* &#x2500;&#x2500;&#x2500; ABOUT &#x2500;&#x2500;&#x2500; */
.about{background:var(--white);}
.about .container{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;}
.about-text .section-desc{max-width:100%;}
.about-highlights{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem;}
.about-highlight{background:var(--bg);border-radius:16px;padding:1.3rem;border:1px solid var(--border);}
.about-highlight h4{font-size:0.85rem;font-weight:700;color:var(--dark);margin-bottom:0.3rem;display:flex;align-items:center;gap:0.5rem;}
.about-highlight p{font-size:0.78rem;color:var(--text-light);line-height:1.5;}
.about-highlight svg{width:16px;height:16px;flex-shrink:0;}
.about-visual{display:flex;justify-content:center;position:relative;}

/* &#x2500;&#x2500;&#x2500; FEATURES GRID &#x2500;&#x2500;&#x2500; */
.features{background:var(--bg);}
.features-header{text-align:center;margin-bottom:4rem;}
.features-header .section-desc{margin-left:auto;margin-right:auto;}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.feature-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;transition:all 0.3s var(--ease);}
.feature-card:hover{transform:translateY(-3px);border-color:var(--accent);}
.feature-icon{width:48px;height:48px;border-radius:14px;background:var(--accent-light);display:grid;place-items:center;margin-bottom:1.2rem;}
.feature-card h3{font-size:1rem;font-weight:700;color:var(--dark);margin-bottom:0.5rem;}
.feature-card p{font-size:0.85rem;line-height:1.6;color:var(--text-light);}

/* &#x2500;&#x2500;&#x2500; SVG SHOWCASE SECTIONS &#x2500;&#x2500;&#x2500; */
.svg-showcase{background:var(--white);overflow:hidden;}
.svg-showcase.alt-bg{background:var(--bg);}
.svg-showcase .container{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;}
.svg-showcase.reverse .container{direction:rtl;}
.svg-showcase.reverse .container > *{direction:ltr;}
.svg-showcase-visual{display:flex;justify-content:center;align-items:center;}
.svg-showcase-visual img,.svg-showcase-visual svg{width:100%;max-width:500px;height:auto;}
.svg-showcase-features{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem;}
.svg-feat{display:flex;align-items:flex-start;gap:0.8rem;}
.svg-feat-icon{width:36px;height:36px;border-radius:10px;background:var(--accent-light);display:grid;place-items:center;flex-shrink:0;}
.svg-feat h4{font-size:0.9rem;font-weight:700;color:var(--dark);}
.svg-feat p{font-size:0.82rem;color:var(--text-light);line-height:1.5;margin-top:2px;}

/* &#x2500;&#x2500;&#x2500; GALLERY &#x2500;&#x2500;&#x2500; */
.gallery{background:var(--white);overflow:hidden;}
.gallery-header{text-align:center;margin-bottom:3rem;}
.gallery-header .section-desc{margin-left:auto;margin-right:auto;}
.gallery-swiper-wrap{position:relative;margin-top:3rem;}
.gallery-track{display:flex;gap:1.2rem;transition:transform 0.6s var(--ease);padding:0.5rem 0;user-select:none;}
.gallery-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:all 0.3s var(--ease);cursor:pointer;min-width:340px;max-width:340px;flex-shrink:0;}
.gallery-card:hover{transform:translateY(-3px);border-color:var(--accent);}
.gallery-card svg{width:100%;display:block;}
.gallery-label{padding:0.8rem 1rem;font-size:0.78rem;font-weight:600;color:var(--dark);text-align:center;background:var(--white);border-top:1px solid var(--border);}
.gallery-controls{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:2rem;}
.gallery-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--white);cursor:pointer;display:grid;place-items:center;transition:all 0.2s;color:var(--text);}
.gallery-btn:hover{border-color:var(--accent);color:var(--accent);}
.gallery-btn svg{width:16px;height:16px;}
.gallery-dots{display:flex;gap:6px;}
.gallery-dot{width:8px;height:8px;border-radius:50%;background:var(--border);cursor:pointer;transition:all 0.3s;}
.gallery-dot.active{background:var(--accent);width:24px;border-radius:4px;}

/* &#x2500;&#x2500;&#x2500; HOW IT WORKS &#x2500;&#x2500;&#x2500; */
.how-it-works{background:var(--bg);}
.hiw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:3rem;}
.hiw-step{text-align:center;position:relative;padding:2rem 1.5rem;}
.hiw-step::after{content:'';position:absolute;top:2.5rem;right:-1rem;width:2rem;height:1px;background:var(--border);}
.hiw-step:last-child::after{display:none;}
.hiw-num{width:48px;height:48px;border-radius:14px;background:var(--accent);color:white;display:grid;place-items:center;font-size:1.1rem;font-weight:800;margin:0 auto 1rem;}
.hiw-step h3{font-size:1rem;font-weight:700;color:var(--dark);margin-bottom:0.5rem;}
.hiw-step p{font-size:0.85rem;color:var(--text-light);line-height:1.6;}

/* &#x2500;&#x2500;&#x2500; PRICING &#x2500;&#x2500;&#x2500; */
.pricing-section{background:var(--white);}
.pricing-header{text-align:center;margin-bottom:3rem;}
.pricing-header .section-desc{margin-left:auto;margin-right:auto;}
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;max-width:1100px;margin:0 auto;}
.pricing-compact + .pricing-grid{display:flex;justify-content:center;}
.pricing-compact + .pricing-grid .pricing-card{width:100%;max-width:320px;}
.pricing-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:2rem 1.5rem;text-align:center;transition:all 0.3s var(--ease);}
.pricing-card:hover{transform:translateY(-3px);border-color:var(--accent);}
.pricing-card.popular{border-color:var(--accent);position:relative;}
.pricing-card.popular::before{content:'Most Popular';position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent);color:white;padding:0.2rem 0.8rem;border-radius:100px;font-size:0.65rem;font-weight:700;white-space:nowrap;}
.pricing-name{font-size:0.85rem;font-weight:700;color:var(--text-light);text-transform:uppercase;letter-spacing:0.08em;}
.pricing-price{font-size:1.6rem;font-weight:800;color:var(--dark);margin:0.5rem 0;}
.pricing-price span{font-size:0.85rem;font-weight:500;color:var(--text-light);}
.pricing-desc{font-size:0.78rem;color:var(--text-light);margin-bottom:1.5rem;line-height:1.4;}
.pricing-features{list-style:none;text-align:left;margin-bottom:1.5rem;}
.pricing-features li{font-size:0.78rem;color:var(--text);padding:0.35rem 0;display:flex;align-items:center;gap:0.5rem;}
.pricing-features li::before{content:'';width:16px;height:16px;border-radius:50%;background:var(--accent-light);flex-shrink:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23247dcf' stroke-width='3' stroke-linecap='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-size:10px;background-repeat:no-repeat;background-position:center;}
.pricing-capacity{background:#f4f6f9;border-radius:8px;padding:0.45rem 0.6rem !important;font-weight:600;color:var(--dark) !important;margin-bottom:0.1rem;}
.pricing-capacity::before{background:#e0eaf7 !important;}
.pricing-divider{font-size:0;padding:0;margin-top:0.5rem;border-top:none;list-style:none;display:block;height:0;}
.pricing-divider::before{display:none !important;}
/* Compact pricing banner (entry-level plan) */
.pricing-compact{max-width:620px;margin:0 auto 2rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:1.3rem 1.8rem;transition:all 0.3s var(--ease);}
.pricing-compact:hover{border-color:var(--accent);}
.pricing-compact-main{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;}
.pricing-compact-left{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;}
.pricing-compact-name{font-size:0.85rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--accent);}
.pricing-compact-price{font-size:1.1rem;font-weight:800;color:var(--dark);}
.pricing-compact-price small{font-size:0.8rem;font-weight:500;color:var(--text-light);}
.pricing-compact-capacity{font-size:0.82rem;font-weight:600;color:var(--text);background:var(--white);border:1px solid var(--border);border-radius:8px;padding:0.25rem 0.7rem;}
.pricing-compact-desc{font-size:0.78rem;color:var(--text-light);margin-top:0.6rem;}
.pricing-compact .pricing-btn{display:inline-block;width:auto;padding:0.55rem 1.4rem;flex-shrink:0;}

.pricing-btn{display:block;width:100%;padding:0.7rem;border-radius:12px;font-size:0.82rem;font-weight:700;border:1.5px solid var(--accent);color:var(--accent);background:transparent;cursor:pointer;transition:all 0.3s;}
.pricing-btn:hover,.pricing-card.popular .pricing-btn{background:var(--accent);color:white;}

/* &#x2500;&#x2500;&#x2500; TESTIMONIALS SWIPER &#x2500;&#x2500;&#x2500; */
.testimonials{background:var(--bg);overflow:hidden;}
.test-swiper-wrap{position:relative;margin-top:3rem;}
.test-track{display:flex;gap:1.5rem;transition:transform 0.6s var(--ease);padding:0.5rem 0;user-select:none;}
.test-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:1.8rem;min-width:360px;max-width:360px;flex-shrink:0;}
.test-stars{display:flex;gap:2px;margin-bottom:0.8rem;}
.test-title{font-size:0.9rem;font-weight:700;color:var(--dark);margin-bottom:0.5rem;}
.test-quote{font-size:0.82rem;color:var(--text);line-height:1.65;margin-bottom:1.2rem;}
.test-author{display:flex;align-items:center;gap:0.7rem;}
.test-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;}
.test-name{font-size:0.82rem;font-weight:700;color:var(--dark);}
.test-role{font-size:0.7rem;color:var(--text-light);}
.test-controls{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:2rem;}
.test-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--white);cursor:pointer;display:grid;place-items:center;transition:all 0.2s;color:var(--text);}
.test-btn:hover{border-color:var(--accent);color:var(--accent);}
.test-btn svg{width:16px;height:16px;}
.test-dots{display:flex;gap:6px;}
.test-dot{width:8px;height:8px;border-radius:50%;background:var(--border);cursor:pointer;transition:all 0.3s;}
.test-dot.active{background:var(--accent);width:24px;border-radius:4px;}

/* &#x2500;&#x2500;&#x2500; CTA &#x2500;&#x2500;&#x2500; */
.cta-section{background:var(--bg);text-align:center;padding:5rem 2rem;}
.cta-section .section-title{margin-bottom:1rem;}
.cta-section .section-desc{margin:0 auto 2rem;max-width:500px;}

/* &#x2500;&#x2500;&#x2500; CONTACT &#x2500;&#x2500;&#x2500; */
.contact-section{background:var(--white);}
.contact-section .container{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;}
.contact-info{display:flex;flex-direction:column;gap:1.5rem;}
.contact-item{display:flex;align-items:flex-start;gap:1rem;}
.contact-item-icon{width:44px;height:44px;border-radius:12px;background:var(--accent-light);display:grid;place-items:center;flex-shrink:0;}
.contact-item h4{font-size:0.88rem;font-weight:700;color:var(--dark);}
.contact-item p,.contact-item a{font-size:0.82rem;color:var(--text-light);line-height:1.5;}
.contact-item a:hover{color:var(--accent);}
.contact-chat{display:flex;gap:0.8rem;margin-top:0.3rem;}
.contact-chat a{display:inline-flex;align-items:center;gap:0.4rem;padding:0.4rem 0.9rem;border-radius:8px;font-size:0.78rem;font-weight:600;border:1px solid var(--border);transition:all 0.2s;}
.contact-chat a:hover{border-color:var(--accent);color:var(--accent);}
.contact-form{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;}
.contact-form h3{font-size:1.1rem;font-weight:700;color:var(--dark);margin-bottom:1.2rem;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0.8rem;margin-bottom:0.8rem;}
.form-group{display:flex;flex-direction:column;gap:0.3rem;}
.form-group.full{grid-column:1/-1;}
.form-group label{font-size:0.72rem;font-weight:600;color:var(--text);text-transform:uppercase;letter-spacing:0.05em;}
.form-group input,.form-group textarea,.form-group select{font-family:inherit;font-size:0.85rem;padding:0.65rem 0.9rem;border:1px solid var(--border);border-radius:10px;background:var(--white);color:var(--dark);transition:border-color 0.2s;outline:none;}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--accent);}
.form-group textarea{resize:vertical;min-height:90px;}
.form-submit{margin-top:1rem;}

/* &#x2500;&#x2500;&#x2500; PORTFOLIO &#x2500;&#x2500;&#x2500; */
.portfolio-section{background:var(--bg);overflow:hidden;}
.portfolio-header{text-align:center;margin-bottom:3rem;}
.portfolio-header .section-desc{margin-left:auto;margin-right:auto;}
.portfolio-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;}
.portfolio-card{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:2rem;text-align:left;transition:all 0.4s var(--ease);cursor:pointer;position:relative;overflow:hidden;display:flex;flex-direction:column;}
.portfolio-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--card-color,var(--accent));transform:scaleX(0);transition:transform 0.4s var(--ease);transform-origin:left;}
.portfolio-card:hover::before{transform:scaleX(1);}
.portfolio-card:hover{border-color:var(--card-color,var(--accent));box-shadow:0 8px 24px rgba(0,0,0,0.06);}
.portfolio-card img{height:52px;width:52px;object-fit:contain;padding:10px;background:var(--bg);border-radius:14px;margin-bottom:1.2rem;display:block;}
.portfolio-card h4{font-size:1.05rem;font-weight:600;margin-bottom:0.15rem;}
.portfolio-card .brand-prefix{color:var(--dark);}
.portfolio-card .brand-suffix{color:var(--card-color,var(--accent));}
.portfolio-category{font-size:0.68rem;font-weight:700;color:var(--card-color,var(--accent));text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.4rem;}
.portfolio-card p{font-size:0.8rem;color:var(--text-light);line-height:1.6;flex-grow:1;}
.portfolio-card .portfolio-link{display:inline-flex;align-items:center;gap:0.3rem;font-size:0.8rem;font-weight:600;color:var(--card-color,var(--accent));margin-top:1.2rem;opacity:1;transform:none;}

/* &#x2500;&#x2500;&#x2500; PORTFOLIO FEATURED &#x2500;&#x2500;&#x2500; */
.portfolio-featured{grid-column:span 2;}
.portfolio-featured h4{font-size:1.3rem;}
.portfolio-featured p{font-size:0.88rem;}
.portfolio-featured .portfolio-link{font-size:0.88rem;}

/* &#x2500;&#x2500;&#x2500; FOOTER &#x2500;&#x2500;&#x2500; */
footer{background:var(--dark);color:rgba(255,255,255,0.6);padding:4rem 2rem 2rem;}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem;max-width:1200px;margin:0 auto;}
.footer-brand{font-size:1.1rem;font-weight:800;color:white;margin-bottom:0.8rem;}
.footer-brand-desc{font-size:0.8rem;line-height:1.6;max-width:280px;}
.footer-col h4{font-size:0.75rem;text-transform:uppercase;letter-spacing:0.12em;color:white;margin-bottom:1rem;font-weight:700;}
.footer-col a{display:block;font-size:0.82rem;margin-bottom:0.5rem;transition:color 0.2s;}
.footer-col a:hover{color:var(--accent-mid);}
.footer-bottom{max-width:1200px;margin:3rem auto 0;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,0.08);display:flex;justify-content:space-between;font-size:0.72rem;}

/* &#x2500;&#x2500;&#x2500; RESPONSIVE &#x2500;&#x2500;&#x2500; */
@media(max-width:900px){
  .nav-links{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;flex-direction:column;align-items:center;justify-content:center;gap:2rem;z-index:1001;}
  .nav-links.open{display:flex;}
  .nav-links a{font-size:1.2rem;color:var(--dark);}
  .nav-links .nav-cta{margin-top:0.5rem;font-size:1rem;}
  .nav-hamburger{display:flex !important;z-index:1003;transition:none;}
  .nav-hamburger span{transition:none;}
  .nav-links{transition:none;animation:none;}
  .nav-links a{transition:none;animation:none;}
  .nav-lang-switcher{width:100%;}
  .nav-lang-btn{display:none;}
  .nav-lang-dropdown{position:static;opacity:1;visibility:visible;transform:none;display:flex;flex-wrap:wrap;justify-content:center;gap:0.3rem;padding:0;border:none;box-shadow:none;background:transparent;min-width:auto;}
  .nav-lang-dropdown a{padding:0.4rem 0.8rem;border:1px solid var(--border);border-radius:8px;}
  .nav-lang-dropdown a.active{border-color:var(--accent);}
  .hero{grid-template-columns:1fr;text-align:center;padding:7rem 1.5rem 3rem;}
  .hero-desc{max-width:100%;margin-left:auto;margin-right:auto;}
  .hero-actions{justify-content:center;}
  .hero-trust{justify-content:center;}
  
  .hero-mockup-wrap{max-width:380px;margin:0 auto;}
  .float-card-1{right:-10px;}
  .float-card-2{left:-10px;}
  .features-grid{grid-template-columns:1fr;}
  .about .container{grid-template-columns:1fr;}
  .about-highlights{grid-template-columns:1fr;}
  .about-visual{margin-bottom:2rem;}
  .test-card{min-width:300px;max-width:300px;}
  .hiw-grid{grid-template-columns:1fr;}
  .hiw-step::after{display:none;}
  .gallery-card{min-width:300px;max-width:300px;}
  .svg-showcase .container{grid-template-columns:1fr;gap:2rem;}
  .svg-showcase.reverse .container{direction:ltr;}
  .svg-showcase-visual img,.svg-showcase-visual svg{max-width:360px;margin:0 auto;}
  .pricing-compact-main{flex-direction:column;align-items:flex-start;gap:0.8rem;}
  .pricing-compact-left{gap:0.8rem;}
  .pricing-compact .pricing-btn{width:100%;}
  .pricing-grid{grid-template-columns:1fr 1fr;max-width:500px;}
  .test-grid{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr 1fr;}
  .contact-section .container{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .portfolio-grid{grid-template-columns:1fr 1fr;}
  .portfolio-featured{grid-column:span 2;}
}
@media(max-width:550px){
  .hero h1{font-size:clamp(1.6rem,6vw,2.2rem);}
  .hero-svg{max-width:100%;overflow:hidden;}
  .float-card{display:none;}
  .section-title{font-size:clamp(1.2rem,4vw,1.6rem);}
  .pricing-grid{grid-template-columns:1fr;max-width:360px;}
  .footer-top{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;gap:0.4rem;text-align:center;}
  .portfolio-grid{grid-template-columns:1fr;}
  .portfolio-featured{grid-column:span 1;}
  .svg-showcase-visual svg{max-width:100%;}
}

/* &#x2500;&#x2500;&#x2500; REVEAL ANIMATION &#x2500;&#x2500;&#x2500; */
.reveal{opacity:0;transform:translateY(30px);transition:all 0.7s var(--ease);}
.reveal.visible{opacity:1;transform:translateY(0);}

/* &#x2500;&#x2500;&#x2500; CONTACT FORM STATUS &#x2500;&#x2500;&#x2500; */
.contact-form .form-captcha { display:flex; justify-content:center; margin:1.5rem 0; }
.contact-form .form-status { text-align:center; margin-bottom:1rem; font-size:0.85rem; }
.contact-form .form-loading { color:var(--text-light); padding:0.75rem; }
.contact-form .form-error {
    color:#D32F2F; background:#FFEBEE; border:1px solid #FFCDD2;
    border-radius:10px; padding:0.75rem 1rem; font-size:0.85rem;
}
.contact-form .form-success {
    color:#2E7D32; background:#E8F5E9; border:1px solid #C8E6C9;
    border-radius:10px; padding:0.75rem 1rem; font-size:0.85rem;
}

/* &#x2500;&#x2500;&#x2500; COOKIE BANNER &#x2500;&#x2500;&#x2500; */
.cookie-banner {
    position:fixed; bottom:0; left:0; right:0; z-index:200;
    background:#2d2d3a; color:#ccc;
    padding:1.2rem 2rem;
    display:flex; align-items:center; justify-content:center; gap:2rem;
    font-size:0.85rem;
    box-shadow:0 -4px 20px rgba(0,0,0,0.15);
}
.cookie-text { max-width:600px; }
.cookie-text strong { color:white; font-size:0.9rem; display:block; margin-bottom:0.3rem; }
.cookie-text p { line-height:1.55; margin:0; }
.cookie-text a { color:var(--accent); text-decoration:underline; }
.cookie-text a:hover { color:white; }
.cookie-actions { display:flex; gap:0.6rem; flex-shrink:0; }
.cookie-btn-decline {
    font-family:inherit; font-size:0.82rem; font-weight:600;
    padding:0.55rem 1.2rem; border-radius:100px;
    background:transparent; color:#ccc; border:1px solid #555;
    cursor:pointer; transition:all 0.3s var(--ease);
}
.cookie-btn-decline:hover { border-color:#999; color:white; }
.cookie-btn-accept {
    font-family:inherit; font-size:0.82rem; font-weight:600;
    padding:0.55rem 1.2rem; border-radius:100px;
    background:var(--accent); color:white; border:none;
    cursor:pointer; transition:all 0.3s var(--ease);
}
.cookie-btn-accept:hover { transform:translateY(-1px); }
@media(max-width:900px) {
    .cookie-banner { flex-direction:column; text-align:center; gap:1rem; padding:1.2rem 1.5rem; }
}

/* &#x2500;&#x2500;&#x2500; DARK MODE &#x2500;&#x2500;&#x2500; */
@media(prefers-color-scheme:dark){
  :root{--accent:#5a9fe0;--accent-light:#5a9fe018;--accent-mid:#7ab4e8;--dark:#eeeef0;--text:#b0b0be;--text-light:#88889a;--border:#2a2a35;--bg:#141418;--white:#1c1c24;--green:#4ade80;}

  body{background:#111115;}

  /* Nav */
  .nav{background:rgba(17,17,21,0.85);border-bottom:1px solid var(--border);}
  .nav.scrolled{background:rgba(17,17,21,0.92);border-bottom:1px solid var(--border);}
  .nav-brand img{filter:none;background:#dadada;border-radius:8px;padding:4px 7px;}
  .nav-links a{color:var(--text);}
  .nav-links a:hover{color:var(--dark);}
  .nav-hamburger span{background:var(--dark);}
  .brand-prefix{color:#b0b0be;}

  /* Lang switcher */
  .nav-lang-btn{color:var(--text);border-color:var(--border);}
  .nav-lang-btn:hover{border-color:var(--accent);color:var(--accent);}
  .nav-lang-dropdown{background:var(--white);border-color:var(--border);box-shadow:0 4px 16px rgba(0,0,0,0.3);}
  .nav-lang-dropdown a{color:var(--text);}
  .nav-lang-dropdown a:hover{background:var(--bg);color:var(--accent);}

  /* Hero */
  .hero-pill{background:var(--white);border-color:var(--border);color:var(--text);}
  .float-card{background:var(--white);border-color:var(--border);}
  .hero-mockup-wrap::before{background:linear-gradient(145deg,rgba(90,159,224,0.08) 0%,transparent 100%);}

  /* Buttons */
  .btn-outline{border-color:var(--border);color:var(--dark);}
  .btn-outline:hover{border-color:var(--accent);color:var(--accent);}

  /* Feature cards */
  .feature-card{background:var(--white);border-color:var(--border);}
  .feature-card:hover{border-color:var(--accent);}
  .feature-icon{background:var(--accent-light) !important;}

  /* Gallery */
  .gallery-card{background:var(--white);border-color:var(--border);}
  .gallery-card:hover{border-color:var(--accent);}
  .gallery-label{background:var(--bg);border-top-color:var(--border);}
  .gallery-btn{background:var(--white);border-color:var(--border);color:var(--text);}
  .gallery-btn:hover{border-color:var(--accent);color:var(--accent);}

  /* SVG showcases */
  .svg-showcase{background:var(--bg);}
  .svg-showcase.alt-bg{background:var(--white);}

  /* Pricing */
  .pricing-compact{background:var(--white);border-color:var(--border);}
  .pricing-compact-capacity{background:var(--bg);border-color:var(--border);}
  .pricing-card{background:var(--white);border-color:var(--border);}
  .pricing-card:hover{border-color:var(--accent);}
  .pricing-card.popular::before{background:var(--accent);}
  .pricing-capacity{background:#242430;color:var(--text) !important;}
  .pricing-capacity::before{background:#2a2a3a !important;}
  .pricing-features li::before{background-color:var(--accent-light);}

  /* Testimonials */
  .test-card{background:var(--white);border-color:var(--border);}
  .test-btn{background:var(--white);border-color:var(--border);color:var(--text);}
  .test-btn:hover{border-color:var(--accent);color:var(--accent);}

  /* CTA */
  .cta-section{background:var(--bg);}

  /* Portfolio cards */
  .portfolio-card{background:#242430;border-color:#3a3a48;}
  .portfolio-card:hover{border-color:var(--accent);box-shadow:0 8px 24px rgba(0,0,0,0.2);}
  .portfolio-card img{filter:none;background:#dadada;}

  /* Contact form */
  .contact-form{background:var(--white);border-color:var(--border);}
  .form-group input,.form-group textarea,.form-group select{background:var(--bg);color:var(--dark);border-color:var(--border);}
  .form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(90,159,224,0.15);}
  .form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-light);}
  .contact-form .form-error{color:#ef5350;background:#2a1a1a;border-color:#5a2020;}
  .contact-form .form-success{color:#66bb6a;background:#1a2a1a;border-color:#205a20;}
  .contact-form .form-captcha iframe{color-scheme:dark;}
  .contact-section{background:#111115;}

  /* Footer — keep it dark like light-mode */
  footer{background:#1c1c24;color:rgba(255,255,255,0.6);}
  .footer-brand{color:white;}
  .footer-brand-desc{color:rgba(255,255,255,0.5);}
  .footer-col h4{color:white;}
  .footer-col a{color:rgba(255,255,255,0.5);}
  .footer-col a:hover{color:var(--accent);}
  .footer-bottom{border-top-color:rgba(255,255,255,0.08);color:rgba(255,255,255,0.4);}
  .footer-bottom a{color:var(--accent);}
  .footer-bottom img{filter:none;opacity:1;}

  /* How it works */
  .how-it-works{background:var(--white);}

  /* Scrollbar */
  ::-webkit-scrollbar{width:8px;}
  ::-webkit-scrollbar-track{background:#111115;}
  ::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
}

/* Mobile nav dark mode */
@media(prefers-color-scheme:dark) and (max-width:900px){
  .nav-links{background:#111115;}
  .nav-links a{color:var(--dark);}
}
