/* spidnfactory.com — Lightweight UX-First. Minimal UI, max clarity */
:root{ --bg:#fff; --text:#111; --soft:#444; --line:#ddd; --link:#0066cc; }
*{box-sizing:border-box;}
html{min-height:100%;}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;font-family:system-ui,-apple-system,sans-serif;font-size:1rem;line-height:1.6;color:var(--text);background-color:var(--bg);}
body::before{content:'';position:fixed;inset:0;z-index:-1;background-image:url('../img/bg-spidnfactory.jpg');background-size:cover;background-position:center;background-attachment:fixed;filter:blur(6px);box-shadow:inset 0 0 120px rgba(255,255,255,0.06),inset 0 0 200px rgba(0,0,0,0.1);}
.b{background:#f5f5f5;padding:0.35rem 1rem;font-size:0.8rem;color:var(--soft);text-align:center;} .b a{color:var(--link);}
.h{max-width:900px;margin:0 auto;padding:1rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.75rem;border:1px solid var(--line);border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.06);background:#fff;}
.h .logo{font-size:1.25rem;font-weight:700;color:var(--text);text-decoration:none;display:inline-flex;align-items:center;gap:0.4rem;order:2;} .h .logo-icon{width:26px;height:26px;} .h .logo-icon svg{width:100%;height:100%;stroke:var(--link);} .h .ln{display:flex;gap:0.5rem;order:1;} .h .ln a{color:var(--soft);text-decoration:none;padding:0.3rem 0.5rem;border-radius:4px;} .h .ln a:hover{color:var(--link);background:rgba(0,102,204,0.08);} .h .a18{font-size:0.7rem;color:var(--soft);background:var(--line);padding:0.2rem 0.45rem;border-radius:4px;}
.m{flex:1 0 auto;max-width:900px;margin:0 auto;width:100%;padding:1.5rem 1rem;background:rgba(255,255,255,0.94);border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,0.06);}
.lead-m{margin-bottom:1.5rem;} .lead-m h1{font-size:1.5rem;font-weight:700;margin:0 0 0.35rem;} .lead-m p{color:var(--soft);font-size:0.95rem;margin:0;}
.hero-m{padding:2.5rem 1rem;} .hero-m .hero-lead{margin-bottom:1.25rem;} .hero-blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1.25rem;text-align:left;} .hero-block{background:#f9f9f9;border:1px solid var(--line);padding:1rem;border-radius:6px;} .hero-block h3{font-size:0.95rem;margin:0 0 0.35rem;color:var(--text);} .hero-block p{margin:0;font-size:0.875rem;color:var(--soft);}
.content-sec{padding:1.25rem 0;border-top:1px solid var(--line);} .sec-title{font-size:1.15rem;margin:0 0 0.5rem;} .content-sec p{margin:0;font-size:0.95rem;color:var(--soft);} .content-sec a{color:var(--link);} .v-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);}
.ul-m{list-style:none;padding:0;margin:0;}
.ul-m li{border-bottom:1px solid var(--line);padding:1rem;display:grid;grid-template-columns:80px 1fr 90px;gap:1rem;align-items:center;} @media(max-width:550px){.ul-m li{grid-template-columns:1fr;}}
.ul-m li img{width:72px;height:36px;object-fit:contain;} .ul-m li .t{font-weight:600;margin:0 0 0.2rem;} .ul-m li .d{font-size:0.875rem;color:var(--soft);margin:0;} .ul-m li .lic{font-size:0.75rem;color:var(--soft);} .ul-m li .a18{font-size:0.7rem;color:var(--soft);}
.ul-m li .go a{display:inline-block;padding:0.4rem 0.8rem;background:var(--text);color:var(--bg);text-decoration:none;font-size:0.875rem;} .ul-m li .go a:hover{opacity:0.85;}
.reg-m{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--line);font-size:0.9rem;color:var(--soft);text-align:center;} .reg-m a{color:var(--link);} .reg-m .x{margin-top:0.4rem;display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;}
.ft{flex-shrink:0;margin-top:auto;background:#f5f5f5;padding:1.25rem 1rem;font-size:0.85rem;color:var(--soft);border-top:1px solid var(--line);} .ft .i{max-width:900px;margin:0 auto;} .ft a{color:var(--link);} .ft .reg-logos-m{margin-top:0.5rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;} .ft .reg-logos-m img{height:30px;width:auto;object-fit:contain;}
.ft-columns .ft-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1.5rem;margin-bottom:1.25rem;} .ft .ft-block .ft-title{font-size:0.9rem;margin:0 0 0.5rem;color:var(--text);} .ft .ft-block a{text-decoration:none;} .ft .ft-block a:hover{text-decoration:underline;} .ft .ft-block .ft-company{margin:0;font-size:0.8rem;line-height:1.5;}
.pt{font-size:1.35rem;font-weight:700;margin-bottom:0.75rem;} .pb p{margin:0 0 0.6rem;}
.cook-m{position:fixed;bottom:0;left:0;right:0;background:var(--text);color:var(--bg);padding:0.7rem 1rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.5rem;z-index:1000;font-size:0.85rem;} .cook-m.h{display:none;} .cook-m button{background:var(--bg);color:var(--text);border:1px solid var(--line);padding:0.35rem 0.7rem;cursor:pointer;font-size:0.85rem;}
.cook-m.cook-minimal{padding:0.6rem 1rem;font-size:0.8rem;}
.disclaimer-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:1rem;box-sizing:border-box;}
.disclaimer-modal--hidden{display:none!important;}
.disclaimer-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.75);}
.disclaimer-modal__box{position:relative;background:#fff;color:#1a1a1a;max-width:420px;width:100%;padding:1.75rem;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,0.3);}
.disclaimer-modal__title{margin:0 0 0.75rem;font-size:1.35rem;}
.disclaimer-modal__text{margin:0 0 1rem;font-size:0.95rem;line-height:1.5;}
.disclaimer-modal__links{margin:0 0 1.25rem;font-size:0.9rem;} .disclaimer-modal__links a{color:var(--link);text-decoration:underline;}
.disclaimer-modal__btn{display:block;width:100%;padding:0.75rem 1rem;font-size:1rem;font-weight:600;cursor:pointer;background:var(--text);color:var(--bg);border:none;border-radius:6px;}
.disclaimer-modal__btn:hover{opacity:0.9;}
@media(prefers-reduced-motion:no-preference){
@keyframes sf-pulse{0%,100%{box-shadow:0 2px 8px rgba(0,0,0,0.06);}50%{box-shadow:0 4px 16px rgba(0,102,204,0.15);}}
@keyframes sf-fade{from{opacity:0;}to{opacity:1;}}
.h{animation:sf-pulse 3s ease-in-out infinite;}
.ul-m li,.hero-block{animation:sf-fade 0.5s ease-out backwards;}
.ul-m li:nth-child(1){animation-delay:0.05s;} .ul-m li:nth-child(2){animation-delay:0.1s;} .ul-m li:nth-child(3){animation-delay:0.15s;}
.ul-m li .go a{transition:transform 0.25s ease;}
.ul-m li .go a:hover{transform:translateY(-2px);}
.h .ln a{transition:background 0.2s ease,color 0.2s ease;}
}