html{color-scheme:dark}
html{color-scheme:dark;--muted:#b6bfcc;--line:#ffffff20;--glass-fill:#ffffff0a;--glass-border:1px solid #ffffff20;background:#17191d;color:#f5f6f8}
html body{background:linear-gradient(145deg,#17191d,#252b35 55%,#1b1f26);color:#f5f6f8}
html .site-shell{background:linear-gradient(145deg,#1b1f26ed,#2b3240ed 55%,#202630f5);border-color:#ffffff20}
html .site-shell:before{background:radial-gradient(ellipse at 95% 12%,#ffcc000a,transparent 50%)}
html :is(.island,.studio-header,.phone-island){background:#242a34b8;border-color:#ffffff26;box-shadow:0 10px 35px #0002,inset 0 1px 0 #ffffff0a}
html :is(.possibility,.service-card,.faq-list,.catalog-tile,.control-panel,.key-controls,.modal,.social-dialog,.mobile-dialog,.history-index,.office-info,.brand-strip,.steps,.story-date,.store-button){background:#ffffff08;border-color:#ffffff24;box-shadow:inset 0 1px 0 #ffffff0a;color:#f5f6f8}
html :is(.modal,.social-dialog,.mobile-dialog){background:#242a34f5}
html :is(h1,h2,h3,.key-title,.page-intro h1,.service-body h2,.faq-list summary,.key-controls summary,.section-heading,.product-heading,.breadcrumb button,.catalog-note strong,.social-links strong){color:#f5f6f8}
html :is(p,.eyebrow,.review-bar,.breadcrumb,.hero-footnote,.visual-caption,.visual-bottom,.tile-copy,.chapter-label,.service-examples,.service-number,.service-note,.small-label,.hint,.microcopy,.key-disclaimer,.key-validation,.key-color-count,.key-logo-color,.key-fixed,.key-measure,.key-view-note,.key-view-top,.key-view-controls,footer,.history-index a,.back-link,.story-signature span,.social-footnote,.intro-aside>span,.availability,.upcoming-note,.tile-details){color:#b9c3d2}
html :is(.hero h1>span,.page-intro h1>span,.contact-banner h2>span){color:#ffcc00}
html :is(.nav-cta,.yellow,.primary,.header-contact,.whatsapp-button,.skip-link){color:#17191d;background:#ffcc00}
html :is(.nav-cta,.yellow,.primary,.header-contact,.whatsapp-button) :is(span,p,svg){color:#17191d}
html :is(.outline-button,.pill,.icon-button,.carousel-arrows button,.close-dialog,.social-close,.shape-choice,.background-choice,.product-picker button,.view-bar,.selected-color,.visual-dimension){background:#ffffff0b;border-color:#ffffff30;color:#f5f6f8}
html :is(.studio-nav a,.desktop-nav a):hover,html .desktop-nav a[aria-current]{background:#ffffff12}
html :is(input:not([type=color]):not([type=range]):not([type=checkbox]),textarea,select){background:#171c25;color:#f5f6f8;border:1px solid #ffffff30}
html :is(input,textarea)::placeholder{color:#a8b3c4}
html :is(.key-upload,.upload-zone,.logo-preview,.comparison-images,.plate-preview,.key-comparison canvas){background:#ffffff08;border-color:#ffffff30;color:#f5f6f8}
html :is(.key-segments,.segmented){background:#0f131a66}
html :is(.key-segments,.segmented) button[aria-pressed=true]{background:#ffffff18;color:#f5f6f8;box-shadow:none}
html :is(.key-error,.warning){color:#ffc5b8}
html .key-ok{color:#9ed7b6}
html :is(.category-shortcuts a,.history-index a):hover{background:#ffffff12}
html :is(.section-link,.text-link,.back-link,.reset-link):hover{color:#ffcc00}
html :is(.key-controls details,.control-section,.key-quote,.faq-list details+details,footer,.brand-strip){border-color:#ffffff20}
html .product-illustration{color:#b5c1d2}
html .availability.available{color:#17191d}
html :is(.key-view-top>span,.key-measure,.key-view-controls,.visual-top,.visual-bottom,.viewer-status){color:#263142}
html .key-view-controls{background:#d6dce5e8;border-radius:20px}
html .key-view-note{color:#b9c3d2;background:#17191dd9;border-radius:8px;padding:4px}
html :is(.key-view-top>span,.key-measure){background:#f5f6f8d9}
/* Rama’s — Industrial premium. One visual identity, no theme selector. */
html{--glass-edge:#e7edf04a;--glass-panel:linear-gradient(130deg,#dbe7f314,#8596ac06 45%,#ffcc0008);--muted:#b9c3ce;--line:#e7edf02b;background:#101216;color:#f5f6f8}
html body{position:relative;isolation:isolate;background:#101216;color:#f5f6f8}
html body:before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at 95% 35%,#ffcc000b,transparent 52%),radial-gradient(ellipse at 0 0,#647c991b,transparent 60%),url('/brand/ribbons.svg') center top / cover no-repeat}
html body:after{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}
html .site-shell{background:transparent;border:0;border-radius:0;overflow:clip}
html .site-shell:before{display:none}
html .review-bar{display:none}
html :is(.island,.studio-header){background:linear-gradient(115deg,#dbe7f31b,#151a21a6 58%,#ffcc0010);border:1px solid #e7edf04d;border-top-color:#f5f6f88c;border-bottom-color:#e5c36750;box-shadow:0 16px 45px #0005,inset 0 1px 1px #fff5,inset 0 -1px 1px #ffe7aa24;backdrop-filter:blur(26px) saturate(1.3);-webkit-backdrop-filter:blur(26px) saturate(1.3);border-radius:32px}
html :is(.brand,.wordmark,.footer-brand,.footer-brand>a){background:transparent;border:0;box-shadow:none}
html :is(.hero-visual,.possibility,.brand-strip>span,.service-card,.story-date,.faq-list details,.history-text section,.history-index,.office-info,.control-section,.key-controls details,.key-quote,.catalog-tile,.modal,.social-dialog,.step){background:var(--glass-panel);border:1px solid var(--glass-edge);border-top-color:#eff5fc6b;border-bottom-color:#e5c3673b;border-radius:30px;box-shadow:0 14px 35px #0003,inset 0 1px 1px #ffffff29,inset 0 -1px 1px #d9e6ff12;backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2)}
html :is(.hero-visual,.possibility,.service-card,.catalog-tile){position:relative;overflow:hidden}
html .hero{gap:7%;padding-top:75px;padding-bottom:55px;align-items:center}
html .hero h1{font-size:clamp(64px,6.8vw,94px);font-weight:800;letter-spacing:-3px;line-height:1.02;text-shadow:0 2px 15px #0002}
html .hero h1>span{color:#f5f6f8}
html .hero h1>span:after{bottom:-9px;height:6px;border-radius:8px;background:linear-gradient(90deg,#ffcc00,#ffe15c);box-shadow:0 0 18px #ffcc001c}
html .hero-copy>p{margin-top:34px;max-width:430px;line-height:1.9;color:#ced5df}
html .hero-visual{min-height:490px;background:linear-gradient(125deg,#c3d7ed15,#1b202681 55%,#ffcc000b);border-radius:42px}
html .hero-actions{gap:14px 22px}
html :is(.nav-cta,.yellow,.primary,.header-contact,.whatsapp-button){background:linear-gradient(135deg,#ffdc42,#ffcc00 60%,#efb900);color:#17191d;border:1px solid #fff1a8a6;box-shadow:inset 0 1px 2px #fff9,inset 0 -2px 3px #ad7c0038,0 6px 22px #ffcc0012}
html :is(.store-button,.outline-button,.pill,.carousel-arrows button,.icon-button,.category-shortcuts a,.key-segments,.view-bar,.selected-color,.shape-choice,.background-choice){background:linear-gradient(135deg,#f5f6f817,#1b20264d);border:1px solid #edf2f44d;border-top-color:#f5f6f875;box-shadow:inset 0 1px 1px #ffffff26,0 6px 16px #0002;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#f5f6f8}
html :is(.nav-cta,.yellow,.primary,.header-contact):hover{filter:brightness(1.06)}
html :is(.store-button,.outline-button,.category-shortcuts a):hover{background:#ffffff1c;border-color:#f5f6f8a6}
html :is(.create-section,.story-teaser,.faq-list,.contact-banner,.control-panel,.key-controls){background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
html .create-section{padding:0;gap:24px;align-items:stretch}
html .create-intro{padding:38px;border:1px solid var(--glass-edge);border-top-color:#eff5fc6b;background:var(--glass-panel);border-radius:30px;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:inset 0 1px 1px #ffffff29,0 14px 35px #0003}
html .steps{display:grid;gap:14px}
html .steps li{border:1px solid var(--glass-edge);background:var(--glass-panel);border-radius:25px;padding:26px;box-shadow:inset 0 1px 1px #ffffff29;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
html .steps li:last-child{border:1px solid var(--glass-edge)}
html .story-teaser{gap:40px}
html .story-copy{padding:30px;border:1px solid var(--glass-edge);background:var(--glass-panel);border-radius:30px;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:inset 0 1px 1px #ffffff29}
html .faq-list{padding:0;display:grid;gap:12px}
html .faq-list details{padding:0 24px}
html .faq-list details+details{border-top:1px solid #eff5fc6b}
html .contact-banner{padding:0;gap:24px;margin:0 6% 35px;align-items:stretch}
html .contact-banner>div{padding:36px;background:var(--glass-panel);border:1px solid var(--glass-edge);border-top-color:#eff5fc6b;border-radius:30px;box-shadow:inset 0 1px 1px #ffffff29,0 14px 35px #0003;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
html .contact-details{border-left:1px solid var(--glass-edge);gap:22px}
html :is(.section-heading h2 span,.create-intro h2>span,.page-intro h1>span){color:#d5dce6}
html :is(.tile-top,.history-index>a>span,.story-date>span,.story-signature span,.breadcrumb-right,.steps li>span){color:#bfc9d6}
html :is(.tile-copy>a,.service-body>a,.section-link,.text-link,.footer-links a,.social-trigger,.contact-social){color:#f5f6f8}
html :is(.tile-copy>a,.service-body>a,.footer-links a,.section-link,.text-link):hover{color:#ffcc00}
html :is(p,.hint,.key-controls label,.key-controls summary,.control-section label,.logo-studio,.check-line,.part-picker,.small-label,.product-heading,.key-color-count){color:#c8d1dd}
html :is(h1,h2,h3,.key-controls summary,.faq-list summary,.key-title){color:#f5f6f8}
html .key-controls{padding:0;display:grid;gap:18px}
html .key-controls details{padding:0 25px 12px;margin:0}
html .key-quote{margin:0;padding:25px}
html .key-quote label{display:grid;gap:8px;margin:15px 0}
html .key-quote input{width:100%;padding:12px 15px;border-radius:14px}
html .control-panel{padding:0}
html .control-section{margin-bottom:18px;padding:24px}
html :is(.upload-zone,.key-upload){border:1px dashed #f5f6f86b;background:#ffffff05;border-radius:20px}
html :is(input:not([type=color]):not([type=range]):not([type=checkbox]),textarea,select){background:#12171ee0;color:#f5f6f8;border:1px solid #e7edf04a;border-radius:14px}
html :is(.key-viewer,.visual-panel){border:1px solid #f5f6f86b;border-radius:32px;box-shadow:0 20px 45px #0005,inset 0 1px 0 #fff3;overflow:hidden}
html .key-view-top>span,html .key-measure{color:#263142;background:#f5f6f8dc}
html .key-validation p.key-ok{color:#a6ddbe}
html .key-validation p.key-error,html .key-error{color:#ffc4b3}
html .history-text section{padding:30px;margin-bottom:20px}
html .history-index{padding:0 20px}
html .office-info{margin:0 6% 40px;padding:30px;gap:30px}
html .social-dialog,html .modal,html dialog{background:linear-gradient(135deg,#343b47ed,#171c24f5);border:1px solid #f5f6f875;color:#f5f6f8;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px)}
html .social-links a{background:#ffffff0b;border-color:#f5f6f83d;color:#f5f6f8}
html footer{padding-top:25px;border-top:1px solid #f5f6f82b;margin-top:25px;color:#bec8d5;gap:20px}
html footer>span:last-child{color:#bec8d5}
html :is(a,button,input,textarea,select,summary):focus-visible{outline:2px solid #ffcc00;outline-offset:5px}
@media(max-width:760px){
 html body:before{background-position:60% top;background-size:auto 125vh}
 html .island{margin:16px 5% 0;top:10px;padding:14px 16px 7px;border-radius:28px;gap:12px}
 html .desktop-nav{border-top-color:#f5f6f826;padding-top:6px;font-size:11px}
 html .hero{padding:38px 6% 32px;gap:30px}
 html .hero h1{font-size:clamp(51px,13.5vw,76px);letter-spacing:-1.8px;line-height:1.04;margin-top:24px}
 html .hero-copy>p{font-size:14px;line-height:1.85;margin-top:32px}
 html .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
 html .hero-actions .button{padding:14px 16px;font-size:10px;min-height:48px;gap:8px;white-space:nowrap}
 html .hero-actions .text-link{grid-column:1/-1;font-size:12px;justify-self:start}
 html .hero-visual{min-height:345px;border-radius:32px;padding:25px}
 html .create-intro,html .story-copy{padding:27px 24px;border-radius:27px}
 html .steps li{padding:23px;border-radius:25px}
 html .possibility-grid{gap:18px}
 html .contact-banner{margin:0 6% 25px;gap:18px}
 html .contact-banner>div{padding:28px 24px;border-radius:28px}
 html .contact-details{border-top:1px solid var(--glass-edge)}
 html .history-index{padding:0 8px;gap:8px}
 html .history-index>a{padding:16px 5px}
 html .history-text section{padding:25px 22px;border-radius:25px}
 html .key-controls details{padding:0 20px 10px;border-radius:26px}
 html .key-controls summary{font-size:16px}
 html .studio-header{border-radius:26px}
 html .brand-strip{gap:12px}
 html footer{padding-bottom:30px}
}
@media(max-width:360px){html .hero-actions .button{padding:13px 10px;font-size:9px}html .hero h1{font-size:47px}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){html{--glass-panel:linear-gradient(135deg,#303640,#1b2027)}html :is(.island,.studio-header){background:#232933}}
html .brand-strip,html .steps{background:none;border:0;box-shadow:none}
html .hero-visual .visual-bottom,html .hero-visual .visual-bottom span{color:#d1dae7}
html .visual-caption{color:#d1dae7}
html .key-fixed{background:#ffffff08;border-color:#f5f6f833;color:#c8d1dd}
html .key-upload span,html .key-comparison figcaption{color:#bec8d5}
html .hero-visual{background:linear-gradient(125deg,#303942ba,#14181ed9 55%,#1b2026b8)}
html:root{background:#101216;color:#f5f6f8;color-scheme:dark}
html .available .product-illustration>svg{color:#f5f6f8}
html .upcoming .product-illustration>svg{color:#bdc8d7}
html .product-illustration{background:linear-gradient(140deg,#cbdaf00b,#151a2159)}
html .tile-action{color:#f5f6f8}
/* Shared readable secondary typography; heading scale remains unchanged. */
html{--text-body:16px;--text-secondary:15px;--text-helper:14px}
html p{font-size:var(--text-body);line-height:1.6}
html :is(.hero-copy>p,.history-text p,.page-intro>p,.service-body>p,.faq-answer p,.category-heading p,.catalog-intro p,.key-title>p){font-size:var(--text-body);line-height:1.65}
html :is(.key-control-content p,.key-validation p,.key-quote p,.zone-hint,.send-note p,.microcopy,.service-examples,.service-note>p,.office-info p,.hero-footnote,.steps p,.how p,.tile-details p){font-size:var(--text-secondary)!important;line-height:1.6}
html :is(label,.key-controls label,.notes,.faq-list summary,.key-controls summary){font-size:var(--text-secondary)}
html :is(input,textarea,select){font-size:16px}
html :is(.desktop-nav,.studio-header nav,.header-contact,.footer-links,footer,.footer-brand>span,.footer-links a,.category-shortcuts,.key-upload span,.key-comparison figcaption,.key-measure,.lightbox-size,.eyebrow,.chapter-label,.service-number,.visual-caption,.brand-strip,.upcoming-note,.availability){font-size:var(--text-helper)}
html :is(.primary,.outline-button,.whatsapp-button,.button,.text-link,.text-button,.section-link,.tile-action,.reset-link){font-size:14px;line-height:1.4}
html :is(.lightbox-view-actions button,.key-view-controls button){font-size:13px}
html .lightbox-view-note,html .key-view-note{font-size:13px!important;line-height:1.5}
html .lightbox-view-note{bottom:8px}html .lightbox-host{bottom:190px}html .lightbox-fallback{height:calc(100% - 190px)}html .lightbox-size{bottom:200px}
html .hero-actions .button{font-size:14px;white-space:normal}
html .key-upload strong{font-size:16px}
html .key-logo-color>span{font-size:14px}
html footer>span:last-child{font-size:14px}
@media(max-width:780px){html .desktop-nav{font-size:13px;gap:12px}html .hero-actions{gap:12px}html .hero-actions .button{padding:14px 16px}html .category-shortcuts{flex-wrap:wrap}html .key-title>p{font-size:16px}html .hero-footnote{font-size:14px}html .lightbox-viewer{height:530px}html .key-quote{padding:24px}html footer{gap:18px}}