/* === Etherize Design System — "The Digital Architect" === */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{background:#0b1326;color:#dae2fd;font-family:'Inter',sans-serif;overflow-x:hidden}
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24}
::selection{background:#00dce5;color:#003739}

/* --- Glass --- */
.glass-panel{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:rgba(61,71,89,.55)}
.glass-border{border:1px solid rgba(69,71,76,.15)}
.glass-nav{backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);background:rgba(11,19,38,.82)}

/* --- Shadows & Glows --- */
.ambient-shadow{box-shadow:0 8px 40px rgba(218,226,253,.06)}
.glow-primary{box-shadow:0 0 20px rgba(0,220,229,.15)}
.glow-primary-hover:hover{box-shadow:0 0 30px rgba(0,220,229,.25)}

/* --- Buttons --- */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:#00dce5;color:#003739;font-family:'Inter',sans-serif;font-weight:600;padding:.75rem 1.75rem;border-radius:.75rem;transition:all .3s ease;border:none;cursor:pointer;font-size:.875rem;letter-spacing:.01em;text-decoration:none}
.btn-primary:hover{background:#33e5ec;box-shadow:0 0 24px rgba(0,220,229,.3);transform:translateY(-1px)}
.btn-glass{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:rgba(61,71,89,.45);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#dae2fd;font-family:'Inter',sans-serif;font-weight:500;padding:.75rem 1.75rem;border-radius:.75rem;border:1px solid rgba(69,71,76,.15);cursor:pointer;transition:all .3s ease;font-size:.875rem;text-decoration:none}
.btn-glass:hover{background:rgba(61,71,89,.65);border-color:rgba(0,220,229,.2);transform:translateY(-1px)}

/* --- Typography --- */
.display-lg{font-family:'Manrope',sans-serif;font-weight:800;font-size:clamp(2.2rem,5vw,3.5rem);letter-spacing:-.02em;line-height:1.08}
.headline-lg{font-family:'Manrope',sans-serif;font-weight:700;font-size:clamp(1.6rem,3.5vw,2.25rem);letter-spacing:-.015em;line-height:1.15}
.headline-md{font-family:'Manrope',sans-serif;font-weight:700;font-size:clamp(1.2rem,2.5vw,1.5rem);letter-spacing:-.01em;line-height:1.25}
.label-lg{font-family:'Inter',sans-serif;font-weight:600;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:#00dce5}
.body-md{font-family:'Inter',sans-serif;font-weight:400;font-size:.875rem;line-height:1.65;color:#c5c6cc}
.body-sm{font-family:'Inter',sans-serif;font-weight:400;font-size:.8rem;line-height:1.6;color:#c5c6cc}

/* --- Cards --- */
.card{background:#222a3d;border-radius:.75rem;transition:all .4s ease;overflow:hidden}
.card:hover{background:#2d3449;box-shadow:0 0 30px rgba(0,220,229,.08)}

/* --- Layout --- */
.arch-container{width:100%;max-width:1320px;margin:0 auto;padding:0 clamp(1.25rem,3vw,3rem)}
.section-gap{padding:clamp(4rem,8vw,7rem) 0}

/* --- Counters --- */
.counter-num{font-family:'Manrope',sans-serif;font-weight:800;font-size:clamp(1.8rem,3vw,2.5rem);color:#00dce5;line-height:1}

/* --- FAQ --- */
.faq-item{background:#131b2e;border-radius:.75rem;overflow:hidden;transition:background .3s}
.faq-item.active{background:#171f33}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .4s ease;padding:0 1.5rem}
.faq-item.active .faq-answer{max-height:500px;padding:0 1.5rem 1.5rem}
.faq-chevron{transition:transform .3s ease}
.faq-item.active .faq-chevron{transform:rotate(180deg)}

/* --- Image placeholders --- */
.img-placeholder{background:linear-gradient(135deg,#131b2e 0%,#222a3d 50%,#171f33 100%);position:relative;overflow:hidden}
.img-placeholder::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,220,229,.05) 0%,transparent 60%)}
.img-placeholder img{width:100%;height:100%;object-fit:cover;display:block}

/* --- Pricing --- */
.pricing-highlight{background:linear-gradient(135deg,#00282a,#131b2e);position:relative}
.pricing-highlight::before{content:'';position:absolute;inset:-1px;border-radius:.75rem;padding:1px;background:linear-gradient(135deg,#00dce5,transparent 60%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}

/* --- Reveal animations --- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
.reveal-delay-4{transition-delay:.4s}

/* --- Scrollbar --- */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:#0b1326}
::-webkit-scrollbar-thumb{background:#222a3d;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#2d3449}

/* --- Mobile nav --- */
.mobile-menu{transform:translateX(100%);transition:transform .35s ease}
.mobile-menu.open{transform:translateX(0)}

/* --- Filter tabs --- */
.filter-tab{padding:.5rem 1.25rem;border-radius:.75rem;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .3s;background:transparent;color:#c5c6cc;border:none;font-family:'Inter',sans-serif}
.filter-tab.active{background:#00dce5;color:#003739}
.filter-tab:not(.active):hover{background:rgba(61,71,89,.4)}

/* --- Partners --- */
.partner-logo{opacity:.4;transition:opacity .4s;font-family:'Manrope',sans-serif;font-weight:700;font-size:1.1rem;letter-spacing:.04em;color:#c5c6cc}
.partner-logo:hover{opacity:.8}

/* --- HUD card --- */
@keyframes pulse-glow{0%,100%{box-shadow:0 0 20px rgba(0,220,229,.1)}50%{box-shadow:0 0 35px rgba(0,220,229,.2)}}
.hud-card{animation:pulse-glow 4s ease-in-out infinite}

/* --- Icon containers --- */
.cap-icon{width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;border-radius:.5rem;background:rgba(0,220,229,.08);color:#00dce5;transition:all .3s}
.card:hover .cap-icon{background:rgba(0,220,229,.15);box-shadow:0 0 16px rgba(0,220,229,.15)}

/* --- Form inputs --- */
.form-input{background:#060e20;border:none;border-radius:.5rem;padding:.875rem 1.25rem;color:#dae2fd;font-family:'Inter',sans-serif;font-size:.875rem;width:100%;outline:none;transition:box-shadow .3s}
.form-input::placeholder{color:rgba(197,198,204,.4)}
.form-input:focus{box-shadow:0 2px 0 0 #00dce5}

/* --- Hero mesh --- */
.hero-mesh{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-mesh::before{content:'';position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(0,220,229,.07) 0%,transparent 70%);top:-10%;right:-5%;animation:float-orb 12s ease-in-out infinite}
.hero-mesh::after{content:'';position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(143,219,0,.04) 0%,transparent 70%);bottom:10%;left:-5%;animation:float-orb 15s ease-in-out infinite reverse}
@keyframes float-orb{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-20px)}}

/* --- Noise overlay --- */
.noise-overlay{position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.018;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-repeat:repeat;background-size:256px 256px}

/* --- Badges --- */
.eco-badge{background:rgba(143,219,0,.1);color:#8fdb00;font-size:.7rem;font-weight:600;padding:.25rem .75rem;border-radius:1rem;letter-spacing:.03em;display:inline-block}
.badge-cyan{background:rgba(0,220,229,.12);color:#00dce5;font-size:.7rem;font-weight:600;padding:.25rem .75rem;border-radius:1rem;letter-spacing:.03em;display:inline-block}

/* --- Page hero (inner pages) --- */
.page-hero{padding-top:7rem;padding-bottom:clamp(3rem,5vw,5rem);position:relative;overflow:hidden}
.page-hero .hero-mesh::before{width:400px;height:400px;top:-20%;right:10%}
.page-hero .hero-mesh::after{width:300px;height:300px;bottom:-10%;left:5%}

/* --- Breadcrumbs --- */
.breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:#c5c6cc;margin-bottom:1.5rem}
.breadcrumb a{color:#c5c6cc;text-decoration:none;transition:color .2s}
.breadcrumb a:hover{color:#00dce5}
.breadcrumb .sep{opacity:.3}

/* --- Catalog cards --- */
.catalog-card{background:#222a3d;border-radius:.75rem;overflow:hidden;transition:all .4s}
.catalog-card:hover{background:#2d3449;box-shadow:0 0 24px rgba(0,220,229,.1);transform:translateY(-2px)}
.catalog-card .card-img{height:200px;background:linear-gradient(135deg,#131b2e,#222a3d,#171f33);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.catalog-card .card-img img{width:100%;height:100%;object-fit:cover}

/* --- Blog cards --- */
.blog-card{background:#222a3d;border-radius:.75rem;overflow:hidden;transition:all .4s}
.blog-card:hover{background:#2d3449;box-shadow:0 0 24px rgba(0,220,229,.1)}
.blog-card .blog-img{height:220px;background:linear-gradient(135deg,#131b2e,#1a2636,#171f33);position:relative;overflow:hidden}
.blog-card .blog-img img{width:100%;height:100%;object-fit:cover;display:block}

/* --- Active nav link --- */
nav a.active-link{color:#00dce5 !important}

/* --- Select / dropdown --- */
.form-select{background:#060e20;border:none;border-radius:.5rem;padding:.75rem 1rem;color:#dae2fd;font-family:'Inter',sans-serif;font-size:.8rem;outline:none;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c5c6cc' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center}

/* --- Map placeholder --- */
.map-placeholder{background:#131b2e;border-radius:.75rem;overflow:hidden;position:relative;min-height:300px;display:flex;align-items:center;justify-content:center}
.map-placeholder::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,220,229,.03),transparent 50%)}

/* --- Timeline --- */
.timeline-item{position:relative;padding-left:2.5rem}
.timeline-item::before{content:'';position:absolute;left:.5rem;top:.5rem;width:8px;height:8px;border-radius:50%;background:#00dce5}
.timeline-item::after{content:'';position:absolute;left:.75rem;top:1.5rem;width:1px;height:calc(100% - 1rem);background:rgba(69,71,76,.2)}
.timeline-item:last-child::after{display:none}

/* --- Configurator --- */
.cfg-type-tab{color:#c5c6cc;background:transparent}
.cfg-type-tab.active{background:#2d3449;color:#00dce5;box-shadow:0 4px 20px rgba(0,0,0,.2)}
.cfg-type-tab:not(.active):hover{background:rgba(61,71,89,.3)}
.cfg-check{background:#2d3449;color:transparent}
