:root{--ink:#121212;--text:#5f554e;--muted:#7e746d;--bg:#fffcf7;--soft:#fff4de;--yellow:#f1c84f;--yellow-2:#e8b93b;--brown:#916340;--dark:#1e1713;--line:rgba(18,18,18,.09);--shadow:0 24px 72px rgba(53,37,18,.08);--radius:28px;--font:Inter,system-ui,sans-serif;--head:Sora,Inter,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:var(--font);background:radial-gradient(circle at 8% 4%,rgba(241,200,79,.16),transparent 20%),linear-gradient(180deg,#fffefb,#fff9ef 42%,#fffdf9);color:var(--ink);overflow-x:hidden}a{text-decoration:none;color:inherit}img,svg{display:block;max-width:100%}h1,h2,h3,h4{font-family:var(--head);margin:0;letter-spacing:-.045em}p{margin:0;line-height:1.75;color:var(--text)}
.noise{position:fixed;inset:0;pointer-events:none;opacity:.028;z-index:999;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E")}
.bg-blob{position:fixed;z-index:-1;pointer-events:none;border-radius:999px;filter:blur(54px);opacity:.28}.bg-blob.a{left:-150px;top:90px;width:420px;height:420px;background:linear-gradient(135deg,rgba(241,200,79,.7),rgba(241,200,79,.12))}.bg-blob.b{right:-120px;top:280px;width:360px;height:360px;background:linear-gradient(135deg,rgba(145,99,64,.22),rgba(241,200,79,.08))}
.section{width:min(1240px,calc(100% - 36px));margin:0 auto;padding:112px 0}.eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:16px;text-transform:uppercase;letter-spacing:.18em;font-size:12px;font-weight:900;color:var(--brown)}.eyebrow:before{content:'';width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--yellow),var(--brown));box-shadow:0 0 0 7px rgba(241,200,79,.12)}.accent{background:linear-gradient(135deg,var(--brown),var(--yellow-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 22px;border-radius:18px;font-weight:900;transition:transform .22s ease,box-shadow .22s ease}.btn:hover{transform:translateY(-4px)}.btn-primary{background:linear-gradient(135deg,var(--yellow),var(--yellow-2));color:var(--ink);box-shadow:0 18px 38px rgba(232,185,59,.25)}.btn-secondary{background:rgba(255,255,255,.82);border:1px solid var(--line);color:var(--ink);box-shadow:0 14px 34px rgba(50,35,18,.05)}.btn-dark{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.14)}
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}[data-reveal].is-visible{opacity:1;transform:none}

/* Header */
.site-header{position:sticky;top:0;z-index:90;width:min(1240px,calc(100% - 36px));height:92px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;transition:.25s ease}.site-header.scrolled{height:76px;margin-top:10px;padding:0 16px;border-radius:24px;background:rgba(255,252,246,.88);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.85);box-shadow:0 18px 60px rgba(53,37,18,.08)}
.brand{display:flex;align-items:center;gap:16px}.brand-mark{width:74px;height:74px;flex:none;display:grid;place-items:center}.brand-mark img{width:100%;height:100%;object-fit:contain}.brand-copy{display:flex;flex-direction:column;line-height:1}.brand-copy strong{font-family:Sora,Inter,sans-serif;font-size:31px;font-weight:800;letter-spacing:.14em}.brand-copy small{margin-top:8px;font-size:10px;font-weight:900;letter-spacing:.26em;color:#685d56}.site-header.scrolled .brand-mark{width:58px;height:58px}.site-header.scrolled .brand-copy strong{font-size:25px}
.nav-links{display:flex;gap:30px;align-items:center;font-size:14px;font-weight:800}.nav-links a:not(.nav-cta){opacity:.88}.nav-cta{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 20px;border-radius:18px;background:linear-gradient(135deg,var(--yellow),var(--yellow-2));box-shadow:0 14px 34px rgba(232,185,59,.2)}
.mobile-toggle{display:none}

/* Hero */
.hero{width:min(1240px,calc(100% - 36px));margin:0 auto;min-height:calc(100vh - 96px);padding:78px 0 76px;display:grid;grid-template-columns:1fr .96fr;gap:74px;align-items:center}.hero-kicker{display:inline-flex;align-items:center;gap:10px;padding:11px 15px;border-radius:999px;background:rgba(255,255,255,.78);border:1px solid rgba(241,200,79,.26);box-shadow:0 12px 34px rgba(53,37,18,.06);font-size:13px;font-weight:900;color:#5d5149}.hero-kicker span{width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,var(--yellow),var(--brown))}
.hero h1{font-size:clamp(48px,7vw,92px);line-height:.94;margin-top:28px;max-width:760px}.hero p{font-size:19px;max-width:660px;margin-top:22px}.hero-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:34px}
.play-link{display:grid;grid-template-columns:58px auto;column-gap:14px;align-items:center}.play-link span{grid-row:1 / span 2;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.86);border:1px solid rgba(145,99,64,.15);box-shadow:0 14px 34px rgba(50,35,18,.06)}.play-link span:before{content:'▶';font-size:16px;color:var(--brown);margin-left:2px}.play-link b{font-size:14px}.play-link small{font-size:12px;color:var(--muted)}
.hero-stage{position:relative;min-height:650px;perspective:1800px}.ring{position:absolute;border-radius:50%;border:2px solid rgba(145,99,64,.12);animation:spin 22s linear infinite}.ring.a{inset:80px 16px 112px -12px;transform:rotate(-16deg)}.ring.b{inset:132px 62px 150px 18px;border-color:rgba(241,200,79,.18);animation-direction:reverse}.ring.c{inset:180px 86px 188px 36px;border-color:rgba(145,99,64,.08)}@keyframes spin{to{transform:rotate(344deg)}}
.device-scene{position:absolute;inset:34px 0 0;transform-style:preserve-3d;transition:transform .14s ease}.desktop{position:absolute;right:30px;top:40px;width:570px;z-index:2;transform:rotateY(-9deg) rotateX(7deg) rotateZ(-1.3deg);filter:drop-shadow(0 34px 56px rgba(38,28,17,.22));transition:transform .14s ease}.desktop-screen{height:356px;border:14px solid #171210;border-radius:28px;overflow:hidden;padding:24px;position:relative;background:linear-gradient(rgba(24,18,14,.3),rgba(24,18,14,.86)),radial-gradient(circle at 64% 42%,rgba(232,185,59,.34),transparent 24%),linear-gradient(135deg,#72523d,#211914)}.desktop-ui{display:flex;align-items:center;gap:12px}.desktop-ui i{display:block;width:58px;height:7px;border-radius:999px;background:rgba(255,255,255,.28)}.mini-logo{width:26px;height:26px;border-radius:50%;border:3px solid #fff;position:relative}.mini-logo:after{content:'';position:absolute;inset:5px;border:3px solid #fff;border-left-color:transparent;border-radius:50%}.desktop-copy{position:absolute;left:34px;bottom:74px;max-width:320px}.desktop-copy p{font-size:12px;letter-spacing:.18em;font-weight:900;color:#FFF4CC;margin-bottom:10px}.desktop-copy h3{font-size:34px;line-height:1;color:white}.desktop-copy button{margin-top:18px;border:0;border-radius:999px;padding:10px 16px;background:linear-gradient(135deg,var(--yellow),var(--yellow-2));font-weight:900;color:var(--ink)}.desktop-boxes{position:absolute;right:28px;bottom:32px;display:flex;gap:10px}.desktop-boxes span{width:58px;height:76px;border-radius:16px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12)}.desktop-base{width:628px;height:24px;margin:-2px 0 0 -28px;border-radius:0 0 28px 28px;background:linear-gradient(180deg,#efe7d9,#b8b0a6)}
.phone{position:absolute;right:52px;top:200px;width:178px;height:340px;z-index:9;border:8px solid #171210;border-radius:42px;overflow:hidden;transform:rotateY(-9deg) rotateX(7deg) rotateZ(-1.3deg) translateZ(90px);box-shadow:0 30px 60px rgba(38,28,17,.28);background:#0f0b09;transition:transform .14s ease}.phone-notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:58px;height:6px;border-radius:999px;background:#52443b;z-index:3}.phone-inner{height:100%;padding:44px 18px 18px;background:radial-gradient(circle at 78% 18%,rgba(241,200,79,.22),transparent 26%),linear-gradient(180deg,#261e18,#120d0a);color:white}.phone-inner h4{margin:58px 0 10px;font-size:24px;color:white;line-height:1.12}.phone-inner p{font-size:12px;color:#e1d5cb}.phone-card{margin-top:28px;height:92px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1)}.screen-shadow{position:absolute;right:-4px;top:246px;width:250px;height:330px;border-radius:36px;background:rgba(32,22,15,.13);transform:rotate(9deg);z-index:1}
.scene-dot{position:absolute;border-radius:50%;animation:float 8s ease-in-out infinite alternate}.scene-dot.a{left:12px;top:110px;width:100px;height:100px;background:radial-gradient(circle at 32% 28%,white,rgba(241,200,79,.58))}.scene-dot.b{right:44px;bottom:124px;width:52px;height:52px;background:radial-gradient(circle at 35% 30%,white,rgba(145,99,64,.35));animation-delay:-3s}@keyframes float{to{transform:translate3d(34px,-26px,0)}}
.trust-bar{grid-column:1/3;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;padding:14px;border-radius:30px;background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.84);backdrop-filter:blur(14px);box-shadow:0 18px 66px rgba(53,37,18,.07)}.trust-item{display:grid;grid-template-columns:48px 1fr;column-gap:14px;align-items:center;padding:17px 18px}.trust-item span{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;font-weight:900;color:var(--brown);background:linear-gradient(135deg,rgba(241,200,79,.25),rgba(145,99,64,.12))}.trust-item b{font-size:14px}.trust-item small{grid-column:2;color:var(--muted)}

.dark-band{padding:112px max(32px, calc((100% - 1240px)/2));background:linear-gradient(180deg,#2e231c,#1c1511);color:white}.dark-band h2,.dark-band h3{color:white}.split-head{display:grid;grid-template-columns:1fr .9fr;gap:70px;align-items:end;margin-bottom:52px}.split-head .copy{color:#e2d5ca;font-size:17px}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.service-card{min-height:300px;padding:30px;border-radius:30px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.08);transition:transform .14s ease,box-shadow .2s ease}.service-card p{color:#ddd0c4;margin-top:14px}.service-link{display:inline-flex;gap:8px;align-items:center;margin-top:24px;color:#FFE49D;font-weight:900}.icon{width:58px;height:58px;border-radius:18px;margin-bottom:26px;display:grid;place-items:center;font-size:24px;font-weight:900;background:linear-gradient(135deg,var(--yellow),var(--brown));color:#16110f;box-shadow:0 16px 34px rgba(232,185,59,.18)}

.process{background:linear-gradient(180deg,#fff8ea,#fffdf8)}.process-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:82px;align-items:center}.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;position:relative;padding-top:8px}.step{position:relative;text-align:center;padding-top:110px}.step::before{content:'';position:absolute;top:41px;left:50%;width:calc(100% + 26px);height:2px;background:linear-gradient(90deg,rgba(241,200,79,.1),rgba(145,99,64,.58),rgba(241,200,79,.1))}.step:last-child::before{display:none}.circle{position:absolute;top:0;left:50%;transform:translateX(-50%);width:82px;height:82px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid rgba(145,99,64,.12);box-shadow:0 16px 44px rgba(53,37,18,.08);font-family:Sora,Inter,sans-serif;font-size:28px;color:var(--brown)}.step strong{display:block;font-size:16px}.step p{margin-top:10px;font-size:14px;color:var(--muted)}

.portfolio{padding:112px max(32px, calc((100% - 1240px)/2));background:linear-gradient(180deg,#18120f,#241a15);color:white}.portfolio h2,.portfolio h3{color:white}.portfolio-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:52px}.ghost{display:inline-flex;align-items:center;justify-content:center;padding:15px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:white;font-weight:900}
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.project-card{overflow:hidden;border-radius:30px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 70px rgba(0,0,0,.2);transition:transform .22s ease}.project-card:hover{transform:translateY(-8px)}.project-visual{position:relative;height:300px;padding:30px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}.project-visual:before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.82))}.project-visual span,.project-visual h3{position:relative;z-index:1}.project-visual span{width:max-content;padding:8px 12px;border-radius:999px;background:white;color:#121212;font-size:11px;font-weight:900;letter-spacing:.08em;margin-bottom:16px}.project-visual h3{font-size:31px;max-width:320px;line-height:1.02}.pv-electric{background:radial-gradient(circle at 70% 30%,rgba(87,199,255,.18),transparent 20%),linear-gradient(135deg,#162135,#0a1220 55%,#1c335d)}.pv-japan{background:radial-gradient(circle at 68% 32%,rgba(232,185,59,.35),transparent 20%),linear-gradient(135deg,#140A0A,#5A1F18 60%,#0A0707)}.pv-service{background:linear-gradient(135deg,#EEF4FF,#E5EEFA 40%,#0E3D98)}.project-meta{display:flex;align-items:center;justify-content:space-between;padding:20px 22px}.project-meta span{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:white;color:#121212;font-weight:900}

.offer{background:linear-gradient(180deg,#fff8ea,#fffdf8)}.offer-card{display:grid;grid-template-columns:1fr .9fr auto;gap:40px;align-items:center;padding:48px;border-radius:34px;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,249,237,.9));border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow)}.offer-card ul{list-style:none;margin:0;padding:0;display:grid;gap:13px;font-weight:850;color:#453a33}
.final-cta{position:relative;overflow:hidden;width:min(1240px,calc(100% - 36px));margin:0 auto 80px;min-height:340px;padding:58px;border-radius:36px;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;background:linear-gradient(135deg,#745136,#a1744f,#e7b940);color:white;box-shadow:0 30px 88px rgba(117,81,54,.24)}.final-cta h2{color:white;max-width:710px;font-size:clamp(34px,4.8vw,54px)}.final-cta p{max-width:620px;color:rgba(255,255,255,.92)}.spiral-bg{position:absolute;right:-80px;top:-90px;width:380px;opacity:.15;animation:spin2 18s linear infinite}.spiral-bg img{width:100%;height:100%;filter:invert(1)}@keyframes spin2{to{transform:rotate(360deg)}}.final-cta small{position:absolute;right:66px;bottom:48px;color:rgba(255,255,255,.82)}
.site-footer{width:min(1240px,calc(100% - 36px));margin:0 auto;padding:34px 0 54px;display:flex;align-items:center;justify-content:space-between;gap:30px}.site-footer nav,.footer-contact{display:flex;gap:26px;align-items:center;flex-wrap:wrap;color:#584e47;font-weight:800;font-size:14px}

/* Inner pages */
.page-hero{width:min(1240px,calc(100% - 36px));margin:0 auto;padding:88px 0 74px;text-align:center}.page-hero h1{font-size:clamp(44px,6vw,86px);line-height:.95;max-width:930px;margin:0 auto;color:#f7f1ea;text-shadow:0 10px 30px rgba(0,0,0,.22)}.page-hero p{max-width:760px;margin:24px auto 0;font-size:18px;color:#ebe0d3}
.content-wrap{width:min(1120px,calc(100% - 36px));margin:0 auto 110px;display:grid;grid-template-columns:.82fr 1.18fr;gap:34px}.contact-card,.form-card,.process-card{padding:34px;border-radius:34px;background:rgba(255,255,255,.84);border:1px solid rgba(255,255,255,.88);box-shadow:var(--shadow)}.contact-card{background:linear-gradient(135deg,#5e4737,#a1744f,#e7b940);color:white}.contact-card h2{color:white}.contact-card p,.contact-card a{color:rgba(255,255,255,.92)}.contact-card a{display:block;margin-top:18px;font-weight:900}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field{display:grid;gap:8px;margin-bottom:18px}.field.full{grid-column:1 / 3}label{font-size:14px;font-weight:850;color:#3a312b}input,textarea,select{width:100%;padding:15px 16px;border-radius:16px;border:1px solid var(--line);background:white;color:var(--ink);outline:none;transition:.2s ease}input:focus,textarea:focus,select:focus{border-color:rgba(145,99,64,.45);box-shadow:0 0 0 4px rgba(241,200,79,.12)}textarea{min-height:180px;resize:vertical}.hidden{position:absolute!important;clip:rect(0 0 0 0)!important;height:1px!important;width:1px!important;overflow:hidden!important}.thanks-box{width:min(860px,calc(100% - 36px));margin:78px auto 120px;padding:72px 32px;border-radius:36px;background:white;text-align:center;box-shadow:var(--shadow)}
.service-detail{background:linear-gradient(180deg,#1f1814,#14100d)}.service-detail .page-hero{padding-bottom:54px}.service-grid-2{width:min(1120px,calc(100% - 36px));margin:0 auto 136px;display:grid;grid-template-columns:1fr 1fr;gap:26px}.process-card.dark{background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.11)}.process-card.dark h2{color:white;font-size:clamp(34px,4.2vw,64px);line-height:.95}.process-card.dark p,.process-card.dark li{color:#e2d5c8}.process-card ul{margin:18px 0 0;padding-left:18px;display:grid;gap:10px}.service-detail .hero-actions{margin-top:30px}

/* Demo shared */
.demo-page{background:var(--db)}.demo-shell{min-height:100vh;background:var(--db);color:var(--di);font-family:var(--df,Inter,sans-serif)}.demo-shell h1,.demo-shell h2,.demo-shell h3,.demo-shell h4{font-family:var(--dh,Inter,sans-serif);letter-spacing:var(--dl,-.04em)}.demo-shell p{color:var(--dt)}.demo-top{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.78);backdrop-filter:blur(14px);border-bottom:1px solid var(--dl1)}.demo-bar{width:min(1240px,calc(100% - 36px));height:92px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px}.demo-left{display:flex;align-items:center;gap:18px;min-width:0}.back-chip{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:16px;background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.76);font-weight:900;box-shadow:0 12px 30px rgba(25,18,14,.08)}.back-chip:before{content:'←';font-size:16px}.demo-brand-title strong{font-family:Sora,Inter,sans-serif;font-size:18px}.demo-brand-title small{display:block;margin-top:4px;font-size:12px;opacity:.7}.demo-container{width:min(1240px,calc(100% - 36px));margin:0 auto}.demo-chip{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;border:1px solid var(--dl1);background:var(--ds);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.demo-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 18px;border-radius:16px;font-weight:900;background:var(--da);color:var(--dac,#fff);box-shadow:0 16px 38px rgba(0,0,0,.12)}.demo-outline{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 18px;border-radius:16px;font-weight:900;border:1px solid var(--dl1);background:var(--ds);color:var(--di)}
.demo-hero{padding:96px 0 88px;display:grid;grid-template-columns:1.02fr .98fr;gap:54px;align-items:center}.demo-hero h1{font-size:clamp(48px,6vw,82px);line-height:.93}.demo-hero p{font-size:18px;margin-top:22px;max-width:560px}.demo-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}.demo-stats{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}.demo-stat{min-width:154px;padding:18px;border-radius:18px;border:1px solid var(--dl1);background:var(--ds);box-shadow:0 14px 32px rgba(0,0,0,.05)}.demo-stat strong{display:block;font-size:28px;font-family:var(--dh);color:var(--di)}.demo-stat span{display:block;margin-top:4px;font-size:13px;color:var(--dt)}.demo-block{padding:94px 0}.demo-title{max-width:740px;margin-bottom:42px}.demo-title p{margin-top:14px}.demo-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.demo-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.demo-card{padding:28px;border-radius:26px;background:var(--ds);border:1px solid var(--dl1);box-shadow:0 14px 34px rgba(0,0,0,.05);transition:transform .18s ease,box-shadow .22s ease}.demo-card h3{color:var(--di)}.demo-card p{color:var(--dt)}.demo-card:hover{transform:translateY(-6px)}.demo-image{border-radius:30px;overflow:hidden;border:1px solid var(--dl1);box-shadow:0 20px 60px rgba(0,0,0,.1);background:var(--ds)}.demo-image img{width:100%;height:100%;object-fit:cover}.demo-band{padding:34px;border-radius:28px;background:var(--ds);border:1px solid var(--dl1);box-shadow:0 14px 34px rgba(0,0,0,.04)}.demo-footer{padding:34px 0 62px;border-top:1px solid var(--dl1)}.demo-footer-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}.demo-footer small{display:block;margin-top:6px;color:var(--dt)}

/* Specific demo themes */
.theme-electric{--db:#0C1220;--ds:#121B2E;--di:#F6FAFF;--dt:#A8B5CC;--dl1:rgba(255,255,255,.08);--da:linear-gradient(135deg,#FFD34A,#FFAB1B);--dac:#121212;--df:'Manrope',Inter,sans-serif;--dh:'Rajdhani',Inter,sans-serif;--dl:-.03em}.theme-electric .demo-top{background:rgba(12,18,32,.84)}.theme-electric .brand-copy strong,.theme-electric .brand-copy small,.theme-electric .back-chip,.theme-electric .demo-brand-title strong,.theme-electric .demo-brand-title small{color:white}.theme-electric .back-chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)}
.theme-japan{--db:#0C0909;--ds:#151010;--di:#F7EFE3;--dt:#C8B9A8;--dl1:rgba(247,239,227,.09);--da:linear-gradient(135deg,#C53C30,#F08A24);--dac:#fff;--df:'Inter',sans-serif;--dh:'Cormorant Garamond', 'Noto Serif JP', serif;--dl:-.03em}.theme-japan .demo-top{background:rgba(12,9,9,.84)}.theme-japan .brand-copy strong,.theme-japan .brand-copy small,.theme-japan .back-chip,.theme-japan .demo-brand-title strong,.theme-japan .demo-brand-title small{color:#fff}.theme-japan .back-chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
.theme-service{--db:#F5F9FF;--ds:#FFFFFF;--di:#14233E;--dt:#667792;--dl1:rgba(20,35,62,.08);--da:linear-gradient(135deg,#3B7BFF,#0E3D98);--dac:#fff;--df:'Plus Jakarta Sans',Inter,sans-serif;--dh:'Plus Jakarta Sans',Inter,sans-serif;--dl:-.04em}
.tag-list{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.tag{padding:10px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--dl1);font-weight:800;font-size:12px}
.case-row{display:grid;grid-template-columns:1.08fr .92fr;gap:24px;align-items:center}

@media (max-width:1100px){.nav-links{display:none}.hero,.process-grid,.content-wrap,.demo-hero,.offer-card,.service-grid-2,.split-head,.case-row{grid-template-columns:1fr}.service-grid,.project-grid,.demo-grid-3,.demo-grid-2{grid-template-columns:repeat(2,1fr)}.trust-bar{grid-column:1;grid-template-columns:repeat(2,1fr)}.timeline{grid-template-columns:repeat(2,1fr)}.step:nth-child(2)::before,.step:nth-child(4)::before{display:none}}
@media (max-width:720px){.section,.site-header,.hero,.page-hero,.final-cta,.site-footer,.content-wrap,.demo-container,.demo-bar{width:calc(100% - 24px)}.brand-mark{width:56px;height:56px}.brand-copy strong{font-size:21px}.brand-copy small{font-size:8px}.hero{padding-top:38px;gap:38px}.hero h1{font-size:42px}.hero p{font-size:16px}.hero-stage{min-height:500px}.desktop{width:368px;right:6px;top:76px}.desktop-screen{height:238px;padding:16px}.desktop-copy h3{font-size:22px}.desktop-base{width:408px}.phone{width:128px;height:244px;right:6px;top:176px}.screen-shadow{width:180px;height:240px;right:-10px;top:250px}.trust-bar,.service-grid,.project-grid,.timeline,.form-grid,.demo-grid-3,.demo-grid-2{grid-template-columns:1fr}.field.full{grid-column:1}.dark-band,.portfolio{padding:84px 20px}.portfolio-head{display:block}.ghost{margin-top:18px}.final-cta{padding:40px 24px}.final-cta small{position:static}.site-footer{flex-direction:column;align-items:flex-start}.step{padding-top:102px}.step::before{display:none}.demo-bar{height:auto;padding:14px 0;align-items:flex-start;flex-direction:column}.demo-left{flex-direction:column;align-items:flex-start}.back-chip{margin-top:-4px}}


/* === V7 FIXES === */
html,body{-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}.logo-svg{width:100%;height:100%;overflow:visible}.brand-mark{filter:none!important}.brand-mark svg{width:100%;height:100%}.brand-mark path{shape-rendering:geometricPrecision}
/* Contact/normal page hero: dark and readable */
.page-hero h1{color:#121212!important;text-shadow:none!important;opacity:1!important}.page-hero p{color:#5f554e!important}.page-hero .eyebrow{color:#916340!important}
/* Service process pages: readable, move cards up, give footer breathing room */
.service-detail{padding-bottom:150px!important;background:linear-gradient(180deg,#211813 0%,#17110e 100%)!important}.service-detail .page-hero{padding-top:74px!important;padding-bottom:34px!important}.service-detail .page-hero h1{color:#fff7ea!important;text-shadow:0 18px 38px rgba(0,0,0,.32)!important;opacity:1!important}.service-detail .page-hero p{color:#eee0cf!important}.service-grid-2{margin-top:0!important;margin-bottom:0!important}.process-card.dark{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.07))!important;border-color:rgba(255,255,255,.18)!important;box-shadow:0 22px 64px rgba(0,0,0,.22)!important}.process-card.dark h2{color:#fff!important;opacity:1!important}.process-card.dark li,.process-card.dark p{color:#f3e7da!important}
/* Immediate hover feedback */
.service-card,.project-card,.process-card,.demo-card,.offer-card{transition:transform .08s linear,box-shadow .12s ease,border-color .12s ease!important}.service-card:hover{box-shadow:0 28px 80px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.16)!important;border-color:rgba(255,255,255,.22)!important}.service-card:hover .icon{transform:translateY(-4px) rotate(-5deg);transition:transform .08s linear}.step,.circle{transition:transform .08s linear,box-shadow .08s linear}.step:hover .circle{transform:translateX(-50%) translateY(-6px) scale(1.05);box-shadow:0 26px 54px rgba(53,37,18,.14)}
/* Process line: one continuous line behind circles */
.timeline{position:relative;z-index:0}.timeline::before{content:''!important;position:absolute!important;top:49px!important;left:12.5%!important;right:12.5%!important;height:2px!important;background:linear-gradient(90deg,rgba(241,200,79,.2),rgba(145,99,64,.65),rgba(241,200,79,.2))!important;z-index:0!important}.step{z-index:1}.step::before{display:none!important}.circle{z-index:2;background:#fff!important}
/* Footer impressum spacing */
.site-footer nav a{white-space:nowrap}

/* === V7 DEMO REDESIGN === */
.demo-v7{min-height:100vh;background:var(--demo-bg);color:var(--demo-ink);font-family:var(--demo-font,Inter,sans-serif);overflow:hidden}.demo-v7 h1,.demo-v7 h2,.demo-v7 h3{font-family:var(--demo-head,Inter,sans-serif);letter-spacing:var(--demo-letter,-.04em);color:var(--demo-ink)}.demo-v7 p{color:var(--demo-text)}.demo-v7 .demo-top{background:var(--demo-nav)!important;border-bottom:1px solid var(--demo-line)!important}.demo-v7 .back-chip{background:var(--demo-chip-bg);border-color:var(--demo-line);color:var(--demo-ink)}.demo-v7 .brand-copy strong,.demo-v7 .brand-copy small,.demo-v7 .demo-brand-title strong,.demo-v7 .demo-brand-title small{color:var(--demo-ink)}.demo-v7 .brand-mark path{stroke:var(--demo-ink)}.demo-v7 .demo-hero-v7{width:min(1240px,calc(100% - 36px));margin:0 auto;padding:104px 0 110px;display:grid;grid-template-columns:1.02fr .98fr;gap:58px;align-items:center}.demo-v7 .demo-kicker{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;background:var(--demo-surface);border:1px solid var(--demo-line);font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:.12em}.demo-v7 .demo-kicker:before{content:'';width:9px;height:9px;border-radius:50%;background:var(--demo-accent)}.demo-v7 h1{font-size:clamp(48px,6.5vw,88px);line-height:.9;margin-top:24px}.demo-v7 .lead{font-size:18px;margin-top:24px;max-width:600px}.demo-v7 .demo-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}.demo-v7 .demo-primary,.demo-v7 .demo-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 20px;border-radius:16px;font-weight:900}.demo-v7 .demo-primary{background:var(--demo-accent);color:var(--demo-accent-text);box-shadow:0 18px 48px var(--demo-glow)}.demo-v7 .demo-secondary{background:var(--demo-surface);border:1px solid var(--demo-line);color:var(--demo-ink)}.demo-v7 .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}.demo-v7 .stat{padding:18px;border-radius:18px;background:var(--demo-surface);border:1px solid var(--demo-line);box-shadow:0 14px 34px rgba(0,0,0,.05)}.demo-v7 .stat strong{display:block;font-family:var(--demo-head);font-size:27px;color:var(--demo-ink)}.demo-v7 .stat span{display:block;margin-top:5px;color:var(--demo-text);font-size:13px}.demo-v7 .visual-frame{position:relative;border-radius:36px;overflow:hidden;border:1px solid var(--demo-line);box-shadow:0 32px 90px var(--demo-shadow);min-height:520px;transform-style:preserve-3d}.demo-v7 .visual-frame img{width:100%;height:100%;min-height:520px;object-fit:cover}.demo-v7 .floating-card{position:absolute;padding:16px 18px;border-radius:18px;background:var(--demo-float);border:1px solid var(--demo-line);box-shadow:0 20px 54px var(--demo-shadow);backdrop-filter:blur(10px);font-weight:900}.demo-v7 .float-a{left:24px;top:24px}.demo-v7 .float-b{right:24px;bottom:24px}.demo-v7 .demo-section-v7{width:min(1240px,calc(100% - 36px));margin:0 auto;padding:100px 0}.demo-v7 .section-head{max-width:780px;margin-bottom:44px}.demo-v7 .section-head h2{font-size:clamp(34px,4.5vw,62px);line-height:.98}.demo-v7 .section-head p{margin-top:18px;font-size:17px}.demo-v7 .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.demo-v7 .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.demo-v7 .demo-card{padding:30px;border-radius:26px;background:var(--demo-surface);border:1px solid var(--demo-line);box-shadow:0 16px 44px rgba(0,0,0,.06)}.demo-v7 .demo-card h3{font-size:26px}.demo-v7 .demo-card p{margin-top:12px}.demo-v7 .case-panel{display:grid;grid-template-columns:.98fr 1.02fr;gap:28px;align-items:center}.demo-v7 .demo-footer{border-top:1px solid var(--demo-line)}
.electric-v7{--demo-bg:#080F1D;--demo-nav:rgba(8,15,29,.84);--demo-ink:#F7FBFF;--demo-text:#AAB8D0;--demo-line:rgba(255,255,255,.1);--demo-surface:#111B2F;--demo-chip-bg:rgba(255,255,255,.08);--demo-accent:linear-gradient(135deg,#FFE66D,#FF9900);--demo-accent-text:#101010;--demo-glow:rgba(255,180,0,.22);--demo-shadow:rgba(0,0,0,.33);--demo-float:rgba(16,27,47,.82);--demo-head:Rajdhani,Inter,sans-serif;--demo-font:Manrope,Inter,sans-serif;--demo-letter:-.02em}.electric-v7 .demo-card{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035))}.electric-v7 .brand-mark path{stroke:#F7FBFF}.electric-v7 .tagline{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.electric-v7 .tagline span{padding:10px 12px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-size:12px;font-weight:900;color:#F7FBFF}
.japan-v7{--demo-bg:#0B0606;--demo-nav:rgba(11,6,6,.86);--demo-ink:#FFF4E7;--demo-text:#CBB8A4;--demo-line:rgba(255,244,231,.11);--demo-surface:#15100F;--demo-chip-bg:rgba(255,255,255,.06);--demo-accent:linear-gradient(135deg,#C43A2F,#F08A24);--demo-accent-text:#fff;--demo-glow:rgba(240,93,36,.25);--demo-shadow:rgba(0,0,0,.4);--demo-float:rgba(18,10,9,.82);--demo-head:'Cormorant Garamond','Noto Serif JP',serif;--demo-font:Inter,sans-serif;--demo-letter:-.025em}.japan-v7 .brand-mark path{stroke:#FFF4E7}.japan-v7 .demo-card{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025))}.japan-v7 .demo-card h3{font-family:'Cormorant Garamond',serif;font-size:32px}.japan-v7 .visual-frame:after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 70% 45%,rgba(240,138,36,.14),transparent 35%);pointer-events:none}.japan-v7 .menu-price{display:flex;justify-content:space-between;gap:16px;align-items:baseline}.japan-v7 .menu-price strong{font-family:'Cormorant Garamond',serif;font-size:30px}.japan-v7 .menu-price span{color:#F0B15D;font-weight:900}
.service-v7{--demo-bg:#F5F9FF;--demo-nav:rgba(245,249,255,.86);--demo-ink:#10203A;--demo-text:#64748B;--demo-line:rgba(16,32,58,.09);--demo-surface:#FFFFFF;--demo-chip-bg:#fff;--demo-accent:linear-gradient(135deg,#3C7DFF,#0D3B93);--demo-accent-text:#fff;--demo-glow:rgba(61,125,255,.22);--demo-shadow:rgba(17,35,62,.12);--demo-float:rgba(255,255,255,.86);--demo-head:'Plus Jakarta Sans',Inter,sans-serif;--demo-font:'Plus Jakarta Sans',Inter,sans-serif;--demo-letter:-.045em}.service-v7 .brand-mark path{stroke:#10203A}.service-v7 .demo-card{border-color:rgba(16,32,58,.08)}.service-v7 .metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}.service-v7 .metric-row div{padding:20px;border-radius:20px;background:#fff;border:1px solid rgba(16,32,58,.08)}.service-v7 .metric-row strong{display:block;font-size:26px;color:#10203A}
@media(max-width:1100px){.demo-v7 .demo-hero-v7,.demo-v7 .case-panel{grid-template-columns:1fr}.demo-v7 .grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.demo-v7 .demo-hero-v7,.demo-v7 .demo-section-v7{width:calc(100% - 24px);padding:72px 0}.demo-v7 h1{font-size:46px}.demo-v7 .stats,.demo-v7 .grid-3,.demo-v7 .grid-2,.service-v7 .metric-row{grid-template-columns:1fr}.demo-v7 .visual-frame,.demo-v7 .visual-frame img{min-height:360px}.timeline::before{display:none!important}}


/* V8 logo and realism updates */
.brand{display:flex;align-items:center;min-width:0}
.brand-logo{display:block;width:min(320px,42vw);height:auto}
.brand-on-dark .brand-logo{filter:brightness(0) invert(1)}
.site-header .brand, .site-footer .brand{flex:0 0 auto}
.site-footer .brand-logo{width:min(260px,42vw)}
@media (max-width:720px){.brand-logo{width:min(240px,68vw)}.site-footer .brand-logo{width:min(220px,66vw)}}

.hero p{max-width:720px;color:#5f554e}
.final-cta{grid-template-columns:1fr auto;padding:64px 58px;align-items:center}
.final-cta h2{max-width:760px;line-height:.98}
.final-cta p{max-width:720px;margin-top:18px;color:rgba(255,255,255,.95)}
.final-cta .spiral-bg img{filter:invert(1);opacity:1}
.final-cta .final-cta-btn,.final-cta .btn-secondary{min-height:72px;padding:0 34px;font-size:19px;font-weight:900;border-radius:20px;box-shadow:0 18px 42px rgba(255,255,255,.14)}
@media (max-width:900px){.final-cta{grid-template-columns:1fr}.final-cta .final-cta-btn{justify-self:flex-start}}

.project-visual{background-size:cover;background-position:center center}
.pv-electric{background-image:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.15)),url('demo-electric-real.png')}
.pv-japan{background-image:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.24)),url('demo-japan-real.png');background-position:center 45%}
.pv-service{background-image:linear-gradient(180deg,rgba(14,61,152,.08),rgba(14,61,152,.02)),url('demo-service-real.png');background-position:center 35%}
.pv-service:before{background:linear-gradient(180deg,rgba(9,19,44,.02),rgba(9,19,44,.48))}

.demo-v7 .visual-frame img{object-fit:cover}
.demo-v7 .float-a,.demo-v7 .float-b{font-size:14px}
.demo-v7 .visual-frame{background:#0d0d0d}
.electric-v7 .visual-frame img{object-position:center center}
.japan-v7 .visual-frame img{object-position:center center}
.service-v7 .visual-frame img{object-position:center center}

/* stronger readability */
.service-detail .page-hero p{color:#f5e9dc!important}
.process-card.dark li,.process-card.dark p{color:#fff4e8!important}
.step p{color:#66584f!important}
.step strong{color:#1b1713}

/* immediate hover feel */
.service-card,.project-card,.process-card,.demo-card,.offer-card,.step,.circle{transition:transform .06s linear,box-shadow .1s ease,border-color .1s ease!important}

/* keep process cards away from footer visually */
.process-card{margin-bottom:18px}
.service-grid-2{padding-bottom:40px}

/* demo top brand alignment */
.demo-left{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.demo-brand-title strong{font-size:18px}
.demo-brand-title small{display:block;margin-top:4px}



/* =========================
   V10 fixes: logo alignment, sharp demo header, mobile polish
   ========================= */

/* Logo: consistent size, no cropping, visually centered */
.brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  min-width: 0 !important;
}
.brand-logo {
  display: block !important;
  width: clamp(210px, 24vw, 310px) !important;
  height: auto !important;
  object-fit: contain !important;
  image-rendering: auto !important;
  transform: translateY(1px);
}
.site-header {
  align-items: center !important;
}
.site-header .brand {
  height: 82px !important;
}
.site-header.scrolled .brand {
  height: 64px !important;
}
.site-header.scrolled .brand-logo {
  width: clamp(190px, 20vw, 260px) !important;
}

/* Footer logo should not dominate on desktop */
.site-footer .brand-logo {
  width: clamp(210px, 22vw, 280px) !important;
}

/* Demo top bar: sharper, cleaner, better aligned */
.demo-v7 .demo-top {
  min-height: 96px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.demo-v7.service-v7 .demo-top {
  border-bottom-color: rgba(20,35,62,.08);
}
.demo-v7 .demo-bar {
  height: 96px !important;
  align-items: center !important;
}
.demo-v7 .demo-left {
  align-items: center !important;
  gap: 22px !important;
}
.demo-v7 .brand {
  height: 76px !important;
  padding: 0 !important;
}
.demo-v7 .brand-logo {
  width: clamp(210px, 22vw, 288px) !important;
  max-height: 74px !important;
  object-fit: contain !important;
  transform: translateY(0);
}
.demo-v7 .brand-on-dark .brand-logo {
  filter: none !important;
}
.demo-v7 .back-chip {
  min-height: 48px;
  border-radius: 999px;
  padding: 0 18px;
  white-space: nowrap;
}
.demo-v7 .demo-brand-title {
  text-align: right;
  max-width: 260px;
}
.demo-v7 .demo-brand-title strong {
  display: block;
  font-size: 16px !important;
  letter-spacing: .01em;
}
.demo-v7 .demo-brand-title small {
  font-size: 12px !important;
  opacity: .75;
}

/* Dark demo headers use the clean white logo */
.electric-v7 .brand-logo,
.japan-v7 .brand-logo {
  content: url("logo-white.png");
}

/* Better hero image behavior on demo pages */
.demo-v7 .visual-frame {
  aspect-ratio: 1.15 / 1;
  min-height: 460px;
  overflow: hidden;
}
.demo-v7 .visual-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.electric-v7 .visual-frame img { object-position: center center; }
.japan-v7 .visual-frame img { object-position: center center; }
.service-v7 .visual-frame img { object-position: center center; }

/* Mobile navigation: make header usable instead of squeezed */
@media (max-width: 900px) {
  .site-header {
    height: auto !important;
    min-height: 82px !important;
    padding: 12px 0 !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .site-header.scrolled {
    margin-top: 8px !important;
    padding: 10px 14px !important;
  }
  .site-header .brand,
  .site-header.scrolled .brand {
    height: auto !important;
  }
  .brand-logo,
  .site-header.scrolled .brand-logo {
    width: min(245px, 72vw) !important;
  }
  .nav-links {
    display: flex !important;
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a {
    flex: 0 0 auto;
    font-size: 13px;
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.7);
    border: 1px solid rgba(18,18,18,.06);
  }
  .nav-links .nav-cta {
    min-height: 40px !important;
    padding: 10px 14px !important;
  }
}

/* Mobile home layout */
@media (max-width: 720px) {
  body { overflow-x: hidden; }
  .hero {
    grid-template-columns: 1fr !important;
    padding-top: 34px !important;
    gap: 28px !important;
  }
  .hero h1 {
    font-size: clamp(42px, 12vw, 56px) !important;
    line-height: .94 !important;
  }
  .hero p {
    font-size: 16px !important;
    line-height: 1.65 !important;
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .btn,
  .hero-actions .play-link {
    width: 100%;
  }
  .play-link {
    grid-template-columns: 54px 1fr;
    padding: 10px 12px;
    border-radius: 20px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(18,18,18,.06);
  }
  .hero-stage {
    min-height: 455px !important;
    overflow: hidden;
  }
  .desktop {
    width: min(390px, 92vw) !important;
    right: 0 !important;
    top: 62px !important;
  }
  .desktop-screen {
    height: 246px !important;
    border-width: 10px !important;
    border-radius: 24px !important;
  }
  .desktop-copy {
    left: 24px !important;
    bottom: 54px !important;
  }
  .desktop-copy h3 { font-size: 24px !important; }
  .desktop-boxes { display: none !important; }
  .desktop-base { width: 108% !important; margin-left: -4% !important; }
  .phone {
    width: 128px !important;
    height: 246px !important;
    right: 16px !important;
    top: 168px !important;
    z-index: 20 !important;
  }
  .screen-shadow { display: none !important; }
  .trust-bar,
  .service-grid,
  .project-grid,
  .timeline,
  .demo-grid-3,
  .grid-3,
  .grid-2,
  .case-panel,
  .offer-card,
  .content-wrap,
  .service-grid-2 {
    grid-template-columns: 1fr !important;
  }
  .trust-bar {
    gap: 10px;
    padding: 10px;
  }
  .trust-item {
    border-radius: 18px;
    background: rgba(255,255,255,.55);
  }
  .dark-band,
  .portfolio {
    padding: 74px 16px !important;
  }
  .split-head {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .service-card,
  .project-card,
  .offer-card,
  .process-card,
  .form-card,
  .contact-card {
    border-radius: 24px !important;
  }
  .process-grid {
    grid-template-columns: 1fr !important;
    gap: 38px !important;
  }
  .timeline::before {
    display: none !important;
  }
  .step {
    padding-top: 0 !important;
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 14px;
    text-align: left !important;
    align-items: center;
  }
  .step::before { display: none !important; }
  .circle {
    position: static !important;
    transform: none !important;
    width: 64px !important;
    height: 64px !important;
    font-size: 22px !important;
    grid-row: 1 / span 2;
  }
  .step p { margin-top: 4px !important; }
  .final-cta {
    grid-template-columns: 1fr !important;
    padding: 34px 22px !important;
    border-radius: 28px !important;
    margin-bottom: 50px !important;
  }
  .final-cta h2 {
    font-size: clamp(34px, 10vw, 48px) !important;
  }
  .final-cta .final-cta-btn {
    width: 100%;
    min-height: 62px !important;
    font-size: 17px !important;
  }
  .site-footer {
    align-items: flex-start !important;
    gap: 22px !important;
  }
}

/* Mobile demo pages */
@media (max-width: 720px) {
  .demo-v7 .demo-top {
    min-height: auto;
    padding: 12px 0;
  }
  .demo-v7 .demo-bar {
    height: auto !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  .demo-v7 .demo-left {
    width: 100%;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .demo-v7 .brand,
  .demo-v7 .brand-logo {
    height: auto !important;
  }
  .demo-v7 .brand-logo {
    width: min(245px, 76vw) !important;
    max-height: none !important;
  }
  .demo-v7 .back-chip {
    min-height: 42px;
    padding: 0 14px;
    font-size: 13px;
  }
  .demo-v7 .demo-brand-title {
    text-align: left;
    max-width: none;
  }
  .demo-hero-v7 {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    padding: 52px 18px 70px !important;
  }
  .demo-hero-v7 h1 {
    font-size: clamp(42px, 12vw, 58px) !important;
    line-height: .94 !important;
  }
  .demo-hero-v7 .lead {
    font-size: 16px !important;
    line-height: 1.65 !important;
  }
  .demo-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .demo-actions a {
    width: 100%;
    text-align: center;
  }
  .stats,
  .metric-row {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 10px !important;
  }
  .demo-v7 .visual-frame {
    min-height: 320px !important;
    aspect-ratio: 1 / .82 !important;
    border-radius: 24px !important;
  }
  .floating-card {
    max-width: calc(100% - 32px);
    font-size: 13px !important;
    padding: 12px 14px !important;
  }
  .float-a { left: 16px !important; top: 16px !important; }
  .float-b { right: 16px !important; bottom: 16px !important; }
  .demo-section-v7 {
    padding: 70px 18px !important;
  }
  .section-head h2 {
    font-size: clamp(34px, 10vw, 48px) !important;
  }
  .demo-footer {
    padding: 30px 18px 46px !important;
  }
}


/* =========================
   V11: sharp vector logo + sticky demo nav fix
   ========================= */
.demo-v7{
  overflow-x:hidden!important;
  overflow-y:visible!important;
}
.demo-v7 .demo-top,
.demo-top{
  position:sticky!important;
  top:0!important;
  z-index:99999!important;
  width:100%!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
}
.demo-v7 .demo-bar{
  height:88px!important;
  display:flex!important;
  align-items:center!important;
}
.brand,
.demo-v7 .brand,
.site-header .brand,
.site-footer .brand{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:0!important;
  min-width:0!important;
  overflow:visible!important;
}
.brand-logo,
.site-header .brand-logo,
.site-header.scrolled .brand-logo,
.demo-v7 .brand-logo,
.site-footer .brand-logo{
  display:block!important;
  height:auto!important;
  object-fit:contain!important;
  image-rendering:auto!important;
  filter:none!important;
  transform:none!important;
  max-height:none!important;
}
.site-header .brand-logo,
.brand-logo{
  width:clamp(250px,26vw,350px)!important;
}
.site-header.scrolled .brand-logo{
  width:clamp(220px,22vw,300px)!important;
}
.site-footer .brand-logo{
  width:clamp(230px,22vw,300px)!important;
}
.demo-v7 .brand-logo{
  width:clamp(230px,21vw,315px)!important;
}
.electric-v7 .brand-logo,
.japan-v7 .brand-logo{
  content:none!important;
  filter:none!important;
}
.demo-v7 .brand-on-dark .brand-logo{
  filter:none!important;
}
.demo-v7 .demo-left{
  display:flex!important;
  align-items:center!important;
  gap:22px!important;
  flex-wrap:nowrap!important;
}
.demo-v7 .back-chip{
  flex:0 0 auto!important;
  min-height:46px!important;
  display:inline-flex!important;
  align-items:center!important;
}
.demo-v7 .demo-brand-title{
  flex:0 0 auto!important;
  text-align:right!important;
}

/* Mobile: header and demo nav should stay sharp and usable */
@media(max-width:900px){
  .site-header{
    height:auto!important;
    min-height:82px!important;
    padding:12px 0!important;
    flex-wrap:wrap!important;
    gap:12px!important;
  }
  .site-header.scrolled{
    padding:10px 14px!important;
  }
  .site-header .brand-logo,
  .site-header.scrolled .brand-logo,
  .brand-logo{
    width:min(275px,76vw)!important;
  }
  .nav-links{
    display:flex!important;
    width:100%!important;
    overflow-x:auto!important;
    gap:10px!important;
    scrollbar-width:none!important;
    padding-bottom:4px!important;
  }
  .nav-links::-webkit-scrollbar{display:none!important;}
  .nav-links a{
    flex:0 0 auto!important;
    font-size:13px!important;
    padding:10px 12px!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.72)!important;
    border:1px solid rgba(18,18,18,.06)!important;
  }
}
@media(max-width:720px){
  .demo-v7 .demo-top{
    padding:10px 0!important;
  }
  .demo-v7 .demo-bar{
    height:auto!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:12px!important;
  }
  .demo-v7 .demo-left{
    width:100%!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:10px!important;
  }
  .demo-v7 .brand-logo{
    width:min(265px,78vw)!important;
  }
  .demo-v7 .back-chip{
    min-height:40px!important;
    font-size:13px!important;
    padding:0 14px!important;
  }
  .demo-v7 .demo-brand-title{
    text-align:left!important;
    max-width:100%!important;
  }
}


/* Brand refresh with new symbol */
.brand{display:inline-flex;align-items:center;gap:14px;line-height:1;flex:0 0 auto}
.brand-mark{width:58px;height:58px;flex:none;display:grid;place-items:center}
.brand-mark img{width:100%;height:100%;object-fit:contain}
.brand-copy{display:flex;flex-direction:column;justify-content:center}
.brand-copy strong{font-family:Sora,Inter,sans-serif;font-size:31px;font-weight:800;letter-spacing:.16em;color:#111111;line-height:.95}
.brand-copy small{margin-top:7px;font-family:Inter,Arial,sans-serif;font-size:10px;font-weight:800;letter-spacing:.34em;color:#5d5550;line-height:1;text-transform:uppercase}
.site-header .brand{transform:translateY(-1px)}
.site-header.scrolled .brand-mark{width:48px;height:48px}
.site-header.scrolled .brand-copy strong{font-size:25px}
.site-header.scrolled .brand-copy small{font-size:8.5px;letter-spacing:.30em;margin-top:6px}
.site-footer .brand-mark{width:52px;height:52px}
.site-footer .brand-copy strong{font-size:27px}
.site-footer .brand-copy small{font-size:9px;letter-spacing:.30em}
.brand-logo{display:none !important}
.brand-on-dark{background:rgba(255,250,244,.98);padding:10px 14px;border-radius:18px;border:1px solid rgba(17,17,17,.06);box-shadow:0 18px 44px rgba(0,0,0,.16)}
.brand-on-dark .brand-copy strong{color:#111111}
.brand-on-dark .brand-copy small{color:#5d5550}
.spiral-bg img{width:min(260px,26vw);height:auto;opacity:.12;object-fit:contain}
@media (max-width: 980px){
  .brand-mark{width:52px;height:52px}
  .brand-copy strong{font-size:27px;letter-spacing:.14em}
  .brand-copy small{font-size:9px;letter-spacing:.28em}
}
@media (max-width: 720px){
  .brand{gap:12px}
  .brand-mark{width:46px;height:46px}
  .brand-copy strong{font-size:21px;letter-spacing:.13em}
  .brand-copy small{font-size:7.8px;letter-spacing:.24em;margin-top:5px}
  .site-header.scrolled .brand-copy strong{font-size:20px}
  .site-header.scrolled .brand-copy small{font-size:7.2px;letter-spacing:.22em}
  .site-footer .brand-copy strong{font-size:20px}
  .site-footer .brand-copy small{font-size:7.4px;letter-spacing:.22em}
  .brand-on-dark{padding:8px 12px;border-radius:16px}
}

.demo-top{position:sticky;top:12px;z-index:80}.demo-bar{position:relative}


/* === V15 logo repair === */
.brand{display:inline-flex !important;align-items:center !important;justify-content:flex-start;line-height:1;gap:0 !important;flex:0 0 auto}
.brand img.brand-logo-combo{display:block;width:auto;max-width:none;height:88px;object-fit:contain;background:transparent !important;box-shadow:none !important;border:0 !important}
.site-header .brand{transform:none !important}
.site-header.scrolled .brand img.brand-logo-combo{height:74px}
.site-footer .brand img.brand-logo-combo{height:72px}
.brand-mark,.brand-copy,.brand-logo{display:none !important}
.brand-on-dark{background:rgba(255,250,244,.96) !important;padding:10px 16px !important;border-radius:18px !important;border:1px solid rgba(16,16,16,.08) !important;box-shadow:0 16px 36px rgba(0,0,0,.18) !important}
.brand-on-dark img.brand-logo-combo{height:60px}
.demo-top,.demo-v7 .demo-top{position:sticky !important;top:0 !important;z-index:99999 !important;backdrop-filter:blur(14px) !important}
.demo-bar{min-height:96px !important}
.spiral-bg img{background:transparent !important}
@media (max-width: 980px){
  .brand img.brand-logo-combo{height:78px}
  .site-header.scrolled .brand img.brand-logo-combo{height:66px}
  .brand-on-dark img.brand-logo-combo{height:56px}
}
@media (max-width: 720px){
  .brand img.brand-logo-combo{height:60px}
  .site-header.scrolled .brand img.brand-logo-combo{height:56px}
  .site-footer .brand img.brand-logo-combo{height:56px}
  .brand-on-dark{padding:8px 12px !important;border-radius:16px !important}
  .brand-on-dark img.brand-logo-combo{height:46px}
  .demo-bar{min-height:84px !important}
}


/* =========================================================
   V17 FINAL LOGO FIX
   Clean transparent symbol + correctly sized wordmark/slogan
   ========================================================= */

.brand,
.site-header .brand,
.site-footer .brand,
.demo-top .brand,
.demo-v7 .brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  transform: none !important;
  text-decoration: none !important;
  flex: 0 0 auto !important;
}

.brand-symbol {
  display: grid !important;
  place-items: center !important;
  width: 72px !important;
  height: 72px !important;
  flex: 0 0 72px !important;
  color: #111111 !important;
  background: transparent !important;
  overflow: visible !important;
}

.brand-symbol img,
.brand-symbol svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  image-rendering: auto !important;
}

.brand-type {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  transform: translateY(1px);
  min-width: 0 !important;
}

.brand-type strong {
  display: block !important;
  font-family: Sora, Inter, Arial, sans-serif !important;
  font-size: 30px !important;
  line-height: 0.9 !important;
  font-weight: 800 !important;
  letter-spacing: 0.185em !important;
  color: #111111 !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

.brand-type small {
  display: block !important;
  margin-top: 10px !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: 9.8px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 0.34em !important;
  color: #58514c !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.brand-mark,
.brand-copy,
.brand-logo,
.brand-logo-combo {
  display: none !important;
}

.site-header {
  align-items: center !important;
}

.site-header.scrolled .brand-symbol {
  width: 58px !important;
  height: 58px !important;
  flex-basis: 58px !important;
}

.site-header.scrolled .brand-type strong {
  font-size: 25px !important;
}

.site-header.scrolled .brand-type small {
  font-size: 8.3px !important;
  margin-top: 8px !important;
  letter-spacing: 0.31em !important;
}

.site-footer .brand-symbol {
  width: 58px !important;
  height: 58px !important;
  flex-basis: 58px !important;
}

.site-footer .brand-type strong {
  font-size: 25px !important;
}

.site-footer .brand-type small {
  font-size: 8.3px !important;
  margin-top: 8px !important;
}

/* Demo header: keep visible, clean, and sticky */
.demo-top,
.demo-v7 .demo-top {
  position: sticky !important;
  top: 0 !important;
  z-index: 99999 !important;
  overflow: visible !important;
}

.demo-v7 {
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

.electric-v7 .demo-top,
.japan-v7 .demo-top,
.theme-electric .demo-top,
.theme-japan .demo-top {
  background: rgba(255, 251, 244, 0.94) !important;
  border-bottom: 1px solid rgba(17,17,17,.08) !important;
}

.demo-top .brand-symbol,
.demo-v7 .brand-symbol {
  width: 60px !important;
  height: 60px !important;
  flex-basis: 60px !important;
}

.demo-top .brand-type strong,
.demo-v7 .brand-type strong {
  font-size: 25px !important;
}

.demo-top .brand-type small,
.demo-v7 .brand-type small {
  font-size: 8.3px !important;
  margin-top: 8px !important;
}

/* Mobile: prevent oversized logo/header */
@media (max-width: 900px) {
  .brand,
  .site-header .brand,
  .demo-top .brand,
  .demo-v7 .brand {
    gap: 12px !important;
  }

  .brand-symbol {
    width: 56px !important;
    height: 56px !important;
    flex-basis: 56px !important;
  }

  .brand-type strong {
    font-size: 23px !important;
    letter-spacing: 0.15em !important;
  }

  .brand-type small {
    font-size: 7.6px !important;
    letter-spacing: 0.27em !important;
    margin-top: 7px !important;
  }

  .site-header.scrolled .brand-symbol,
  .demo-top .brand-symbol,
  .demo-v7 .brand-symbol {
    width: 50px !important;
    height: 50px !important;
    flex-basis: 50px !important;
  }

  .site-header.scrolled .brand-type strong,
  .demo-top .brand-type strong,
  .demo-v7 .brand-type strong {
    font-size: 20px !important;
  }

  .site-header.scrolled .brand-type small,
  .demo-top .brand-type small,
  .demo-v7 .brand-type small {
    font-size: 6.9px !important;
    letter-spacing: 0.24em !important;
    margin-top: 6px !important;
  }
}

@media (max-width: 520px) {
  .brand-symbol {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
  }

  .brand-type strong {
    font-size: 18px !important;
    letter-spacing: 0.13em !important;
  }

  .brand-type small {
    font-size: 6.2px !important;
    letter-spacing: 0.20em !important;
    margin-top: 5px !important;
  }

  .demo-left,
  .demo-v7 .demo-left {
    gap: 10px !important;
  }
}


/* =========================================================
   V18 FINAL HEADER / LOGO / DEMO-STICKY FIX
   ========================================================= */

/* Main logo layout */
.brand,
.site-header .brand,
.site-footer .brand,
.demo-top .brand,
.demo-v7 .brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  line-height: 1 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
  transform: none !important;
  flex: 0 0 auto !important;
}

.brand-symbol {
  display: grid !important;
  place-items: center !important;
  width: 66px !important;
  height: 66px !important;
  flex: 0 0 66px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.brand-symbol img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  image-rendering: auto !important;
}

.brand-type {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  transform: translateY(1px) !important;
  min-width: 0 !important;
}

.brand-type strong {
  display: block !important;
  font-family: Sora, Inter, Arial, sans-serif !important;
  font-size: 30px !important;
  line-height: .9 !important;
  font-weight: 800 !important;
  letter-spacing: .175em !important;
  color: #111111 !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

.brand-type small {
  display: block !important;
  margin-top: 9px !important;
  font-family: Inter, Arial, sans-serif !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .32em !important;
  color: #5a524d !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.brand-mark,
.brand-copy,
.brand-logo,
.brand-logo-combo,
.brand-symbol-svg {
  display: none !important;
}

.site-header.scrolled .brand-symbol {
  width: 54px !important;
  height: 54px !important;
  flex-basis: 54px !important;
}

.site-header.scrolled .brand-type strong {
  font-size: 24px !important;
}

.site-header.scrolled .brand-type small {
  font-size: 7.8px !important;
  margin-top: 7px !important;
  letter-spacing: .28em !important;
}

.site-footer .brand-symbol {
  width: 56px !important;
  height: 56px !important;
  flex-basis: 56px !important;
}

.site-footer .brand-type strong {
  font-size: 25px !important;
}

.site-footer .brand-type small {
  font-size: 7.9px !important;
  margin-top: 7px !important;
}

/* Demo pages: sticky topbar must not be killed by parent overflow */
.demo-v7,
.demo-shell,
.theme-electric,
.theme-japan,
.theme-service {
  overflow-y: visible !important;
}

.demo-v7 {
  overflow-x: hidden !important;
}

.demo-top,
.demo-v7 .demo-top {
  position: sticky !important;
  top: 0 !important;
  z-index: 99999 !important;
  overflow: visible !important;
  backdrop-filter: blur(14px) !important;
}

.demo-bar,
.demo-v7 .demo-bar {
  min-height: 92px !important;
  height: 92px !important;
  align-items: center !important;
}

/* Electric demo header: dark, matches page */
.electric-v7 .demo-top,
.theme-electric .demo-top {
  background: rgba(8,15,29,.92) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

.electric-v7 .brand-symbol img,
.theme-electric .brand-symbol img {
  content: url("brand-symbol-white.png") !important;
}

.electric-v7 .brand-type strong,
.electric-v7 .brand-type small,
.electric-v7 .demo-brand-title strong,
.electric-v7 .demo-brand-title small,
.theme-electric .brand-type strong,
.theme-electric .brand-type small,
.theme-electric .demo-brand-title strong,
.theme-electric .demo-brand-title small {
  color: #F7FBFF !important;
}

.electric-v7 .back-chip,
.theme-electric .back-chip {
  background: rgba(255,255,255,.08) !important;
  color: #F7FBFF !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

/* Japan demo header: dark, matches page */
.japan-v7 .demo-top,
.theme-japan .demo-top {
  background: rgba(11,6,6,.92) !important;
  border-bottom: 1px solid rgba(255,244,231,.11) !important;
}

.japan-v7 .brand-symbol img,
.theme-japan .brand-symbol img {
  content: url("brand-symbol-white.png") !important;
}

.japan-v7 .brand-type strong,
.japan-v7 .brand-type small,
.japan-v7 .demo-brand-title strong,
.japan-v7 .demo-brand-title small,
.theme-japan .brand-type strong,
.theme-japan .brand-type small,
.theme-japan .demo-brand-title strong,
.theme-japan .demo-brand-title small {
  color: #FFF4E7 !important;
}

.japan-v7 .back-chip,
.theme-japan .back-chip {
  background: rgba(255,255,255,.07) !important;
  color: #FFF4E7 !important;
  border: 1px solid rgba(255,244,231,.12) !important;
}

/* Service demo header: light, matches page */
.service-v7 .demo-top,
.theme-service .demo-top {
  background: rgba(245,249,255,.92) !important;
  border-bottom: 1px solid rgba(16,32,58,.09) !important;
}

.service-v7 .brand-symbol img,
.theme-service .brand-symbol img {
  content: url("brand-symbol-black.png") !important;
}

.service-v7 .brand-type strong,
.service-v7 .demo-brand-title strong,
.theme-service .brand-type strong,
.theme-service .demo-brand-title strong {
  color: #10203A !important;
}

.service-v7 .brand-type small,
.service-v7 .demo-brand-title small,
.theme-service .brand-type small,
.theme-service .demo-brand-title small {
  color: #64748B !important;
}

/* Logo in demo topbar slightly smaller so it feels intentional */
.demo-top .brand-symbol,
.demo-v7 .brand-symbol {
  width: 52px !important;
  height: 52px !important;
  flex-basis: 52px !important;
}

.demo-top .brand-type strong,
.demo-v7 .brand-type strong {
  font-size: 23px !important;
  letter-spacing: .16em !important;
}

.demo-top .brand-type small,
.demo-v7 .brand-type small {
  font-size: 7.2px !important;
  margin-top: 6px !important;
  letter-spacing: .27em !important;
}

.demo-left,
.demo-v7 .demo-left {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}

/* Mobile */
@media (max-width: 900px) {
  .brand {
    gap: 12px !important;
  }

  .brand-symbol {
    width: 54px !important;
    height: 54px !important;
    flex-basis: 54px !important;
  }

  .brand-type strong {
    font-size: 22px !important;
    letter-spacing: .14em !important;
  }

  .brand-type small {
    font-size: 7.1px !important;
    letter-spacing: .23em !important;
    margin-top: 6px !important;
  }

  .demo-bar,
  .demo-v7 .demo-bar {
    height: auto !important;
    min-height: 84px !important;
  }

  .demo-top .brand-symbol,
  .demo-v7 .brand-symbol {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
  }

  .demo-top .brand-type strong,
  .demo-v7 .brand-type strong {
    font-size: 19px !important;
    letter-spacing: .13em !important;
  }

  .demo-top .brand-type small,
  .demo-v7 .brand-type small {
    font-size: 6.2px !important;
    letter-spacing: .21em !important;
  }
}

@media (max-width: 520px) {
  .brand-symbol {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
  }

  .brand-type strong {
    font-size: 17px !important;
    letter-spacing: .11em !important;
  }

  .brand-type small {
    font-size: 5.6px !important;
    letter-spacing: .18em !important;
  }

  .demo-left,
  .demo-v7 .demo-left {
    gap: 10px !important;
  }
}