/* Shadowless Studios — homepage product showcase and studio preview */

/* --------------------------------------------------------------------------
   Featured software
   -------------------------------------------------------------------------- */
.featured-software-section{position:relative;overflow:hidden}
.featured-software-section .section-head{max-width:900px}
.featured-software-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:34px}
.featured-software-card{position:relative;display:grid;grid-template-rows:290px 1fr;min-width:0;overflow:hidden;border:1px solid rgba(133,164,203,.2);border-radius:28px;background:linear-gradient(145deg,#0b121d,#101b2a);color:#f7fbff;box-shadow:0 28px 70px rgba(19,38,64,.16);isolation:isolate}
.featured-software-card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 85% 12%,rgba(61,210,255,.14),transparent 35%),radial-gradient(circle at 10% 88%,rgba(100,116,255,.12),transparent 32%);pointer-events:none}
.featured-software-card.bridge-card::before{background:radial-gradient(circle at 85% 12%,rgba(130,108,255,.17),transparent 36%),radial-gradient(circle at 8% 90%,rgba(55,210,255,.1),transparent 30%)}
.featured-software-media{position:relative;display:grid;place-items:center;min-width:0;min-height:0;padding:18px 24px;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(0,0,0,.08));border-bottom:1px solid rgba(132,163,199,.16);overflow:hidden}
.featured-software-media::before{content:"";position:absolute;width:72%;height:76%;left:14%;top:12%;border-radius:50%;background:radial-gradient(ellipse,rgba(64,190,255,.12),transparent 68%);filter:blur(14px);pointer-events:none}
.featured-software-media::after{content:"";position:absolute;left:7%;right:7%;bottom:14px;height:1px;background:linear-gradient(90deg,transparent,rgba(122,181,233,.24),transparent);pointer-events:none}
.featured-software-media img{position:relative;z-index:1;display:block;width:auto;height:auto;max-width:100%;max-height:100%;margin:auto;object-fit:contain;object-position:center center;filter:drop-shadow(0 18px 28px rgba(0,0,0,.26));transform-origin:center}
.sha-disk-card .featured-software-media img{width:min(90%,530px);max-height:86%;object-position:center center;transform:none}
.bridge-card .featured-software-media img{width:min(79%,470px);max-height:80%;object-position:center center;transform:translateY(-5px)}
.featured-software-copy{display:flex;flex-direction:column;align-items:flex-start;padding:30px 30px 32px}
.featured-software-badges,.featured-software-chips{display:flex;flex-wrap:wrap;gap:8px}
.featured-software-badges span{padding:6px 10px;border:1px solid rgba(143,176,213,.26);border-radius:999px;background:rgba(255,255,255,.045);color:#bdd0e8;font-size:11px;font-weight:800;letter-spacing:.03em}
.featured-software-badges .accent{border-color:rgba(71,213,255,.35);background:rgba(52,196,255,.1);color:#78e1ff}
.bridge-card .featured-software-badges .accent{border-color:rgba(146,125,255,.4);background:rgba(131,104,255,.12);color:#c8bbff}
.featured-software-kicker{margin:24px 0 8px;color:#7f91a8;font-size:11px;font-weight:850;letter-spacing:.14em;text-transform:uppercase}
.featured-software-card h3{margin:0;font-size:clamp(28px,3vw,42px);letter-spacing:-.035em;line-height:1.02}
.featured-software-card p{margin:16px 0 0;color:#afbdd0;font-size:14px;line-height:1.7}
.featured-software-chips{margin:22px 0 26px}
.featured-software-chips span{padding:7px 10px;border:1px solid rgba(139,168,204,.2);border-radius:10px;background:rgba(255,255,255,.035);color:#c9d5e4;font-size:11px;font-weight:700}
.featured-software-card .btn{margin-top:auto}
.featured-software-note{margin:18px 0 0;color:var(--muted);font-size:12px}
.software-feature-section{padding-bottom:58px!important}
.software-feature-section + .section-pad{padding-top:60px!important}
html[data-theme="dark"] .featured-software-section .section-head h2,html[data-theme="dark"] .featured-software-section .section-head p{color:inherit}

html[data-theme="light"] .featured-software-card{background:linear-gradient(145deg,#fff,#f6f9fe);color:#071224;border-color:rgba(49,102,160,.15);box-shadow:0 25px 65px rgba(44,82,124,.12)}
html[data-theme="light"] .featured-software-media{background:linear-gradient(155deg,#eef5fc,#f8fbff)}
html[data-theme="light"] .sha-disk-card .featured-software-media{background:linear-gradient(155deg,#eaf2fa,#f8fbff)}
html[data-theme="light"] .bridge-card .featured-software-media{background:linear-gradient(155deg,#eff2fb,#faf9ff)}
html[data-theme="light"] .featured-software-card p{color:#5b6c80}
html[data-theme="light"] .featured-software-kicker{color:#7b8da5}
html[data-theme="light"] .featured-software-badges span,html[data-theme="light"] .featured-software-chips span{background:rgba(14,63,111,.035);color:#53677d;border-color:rgba(58,103,151,.17)}

/* --------------------------------------------------------------------------
   Compact portfolio cards — optical normalization, not forced same pixels
   -------------------------------------------------------------------------- */
.portfolio-grid.compact .project-card{display:flex;flex-direction:column;min-width:0}
.portfolio-grid.compact .project-media{position:relative;display:grid!important;place-items:center!important;height:170px;min-height:170px;margin-bottom:14px;padding:22px;overflow:hidden;border:1px solid rgba(132,171,211,.12);border-radius:22px;background:linear-gradient(145deg,#0c1420,#142238)}
.portfolio-grid.compact .project-media::before{content:"";position:absolute;width:62%;height:62%;border-radius:50%;background:radial-gradient(circle,rgba(64,190,255,.10),transparent 70%);filter:blur(12px);pointer-events:none}
.portfolio-grid.compact .project-media img{position:relative;z-index:1;display:block!important;width:auto!important;height:auto!important;max-width:78%!important;max-height:78%!important;margin:auto!important;visibility:visible!important;opacity:1!important;object-fit:contain!important;object-position:center center!important;transform:none!important;filter:drop-shadow(0 11px 18px rgba(0,0,0,.22))}

/* SHA-Disk uses the official public icon URL. The embedded image below it remains a fallback. */
.portfolio-product-card[data-portfolio-product="sha-disk"] .project-media{background:radial-gradient(circle at 50% 47%,rgba(60,166,255,.11),transparent 42%),linear-gradient(145deg,#0b1421,#122038)!important}
.portfolio-product-card[data-portfolio-product="sha-disk"] .project-media img{width:88px!important;height:88px!important;max-width:88px!important;max-height:88px!important}
.portfolio-product-card[data-portfolio-product="sha-disk"] .project-media::after{content:"";position:absolute;z-index:3;width:88px;height:88px;left:50%;top:50%;transform:translate(-50%,-50%);background:url("https://shadowless-studios.eu/sha-disk/assets/brand/icon-primary.png") center/contain no-repeat;filter:drop-shadow(0 11px 18px rgba(0,0,0,.22));pointer-events:none}

/* Logo cards: same perceived footprint and breathing room. */
.portfolio-product-card.bridge-portfolio-card .project-media{background:radial-gradient(circle at 50% 47%,rgba(76,157,255,.12),transparent 43%),linear-gradient(145deg,#0d1320,#171731)!important}
.portfolio-product-card.bridge-portfolio-card .project-media img{width:92px!important;height:92px!important;max-width:92px!important;max-height:92px!important}
.bonuma-card .project-media{background:radial-gradient(circle at 50% 49%,rgba(108,95,255,.10),transparent 44%),linear-gradient(145deg,#11182b,#17182d)!important}
.bonuma-card .project-media img{width:96px!important;height:96px!important;max-width:96px!important;max-height:96px!important}

/* Wide screenshots/previews need more horizontal room but still consistent margins. */
.portfolio-product-card[data-portfolio-product="fareoynat"] .project-media img{max-width:76%!important;max-height:72%!important}
.portfolio-grid.compact .project-card:not([data-portfolio-product="sha-disk"]):not(.bridge-portfolio-card):not(.bonuma-card) .project-media img{max-width:78%!important;max-height:74%!important}

html[data-theme="light"] .portfolio-grid.compact .project-media{border-color:rgba(48,99,151,.12);background:linear-gradient(145deg,#f5f9fe,#edf4fb);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
html[data-theme="light"] .portfolio-product-card[data-portfolio-product="sha-disk"] .project-media{background:radial-gradient(circle at 50% 47%,rgba(54,167,255,.10),transparent 42%),linear-gradient(145deg,#f5f9ff,#eaf3fc)!important}
html[data-theme="light"] .portfolio-product-card.bridge-portfolio-card .project-media{background:radial-gradient(circle at 50% 47%,rgba(74,137,255,.09),transparent 43%),linear-gradient(145deg,#f6f8ff,#eef1fb)!important}
html[data-theme="light"] .bonuma-card .project-media{background:radial-gradient(circle at 50% 49%,rgba(110,90,255,.09),transparent 44%),linear-gradient(145deg,#fafaff,#f2f2ff)!important}

/* --------------------------------------------------------------------------
   Homepage hero: premium Shadowless studio console
   Existing localized text remains authoritative.
   -------------------------------------------------------------------------- */
.hero-device .device-shell{--studio-accent:#3fd0ff;--studio-blue:#2a8df4;position:relative;isolation:isolate;padding:0;overflow:hidden;border-radius:32px;border:1px solid rgba(92,182,255,.28);background:radial-gradient(circle at 50% 26%,rgba(57,172,255,.16),transparent 31%),radial-gradient(circle at 88% 84%,rgba(116,92,255,.10),transparent 32%),linear-gradient(155deg,rgba(18,37,62,.96),rgba(7,19,35,.985));box-shadow:0 36px 90px rgba(0,0,0,.30),0 0 0 1px rgba(91,183,255,.035) inset,0 1px 0 rgba(255,255,255,.07) inset}
.hero-device .device-shell::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(103,181,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(103,181,255,.055) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.78),transparent 88%)}
.hero-device .device-shell::after{content:"";position:absolute;width:360px;height:360px;left:50%;top:74px;transform:translateX(-50%);border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(63,208,255,.17) 0,rgba(42,141,244,.07) 38%,transparent 70%);filter:blur(2px);opacity:.9}
.hero-device .browser-top{position:relative;z-index:3;height:54px;padding:0 20px;gap:8px;border-bottom:1px solid rgba(137,185,231,.14);background:rgba(4,15,28,.34);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.hero-device .browser-top span{width:9px;height:9px;background:rgba(180,205,229,.42);box-shadow:0 0 0 1px rgba(255,255,255,.025)}
.hero-device .browser-top span:first-child{background:rgba(83,174,255,.62)}
.hero-device .browser-top::after{content:"shadowless://studio";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:5px 12px;border:1px solid rgba(137,185,231,.13);border-radius:999px;background:rgba(255,255,255,.035);color:rgba(190,214,237,.72);font:750 9px/1 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap}
.hero-device .device-content{position:relative;z-index:2;padding:36px 30px 30px;transform:translateZ(12px)}
.hero-device .device-content::before{content:"";position:absolute;left:50%;top:18px;width:190px;height:190px;transform:translateX(-50%);border-radius:50%;border:1px solid rgba(72,181,255,.10);box-shadow:0 0 0 18px rgba(72,181,255,.025),0 0 0 38px rgba(72,181,255,.012);pointer-events:none}
.hero-device .device-logo{position:relative;z-index:3;width:min(178px,42%);max-height:178px;margin:5px auto 18px;object-fit:contain;filter:drop-shadow(0 20px 28px rgba(0,0,0,.34)) drop-shadow(0 0 30px rgba(53,159,255,.15))}
.hero-device .device-label{position:relative;z-index:3;margin:0 0 28px;font-size:0;line-height:1;text-align:center}
.hero-device .device-label::before{content:"Shadowless Studios";display:block;color:#f7fbff;font:850 clamp(20px,2vw,27px)/1.05 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.035em}
.hero-device .device-label::after{content:"DESIGN · SOFTWARE · AI";display:inline-flex;margin-top:9px;padding:6px 10px;border:1px solid rgba(70,187,255,.18);border-radius:999px;background:rgba(50,157,255,.065);color:#7fd9ff;font:850 9px/1 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:.14em}
.hero-device .mock-grid{position:relative;z-index:4;gap:12px;margin-top:0}
.hero-device .mock-grid>div{position:relative;min-height:128px;overflow:hidden;padding:19px 18px 18px 58px;border:1px solid rgba(135,179,220,.16);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.067),rgba(255,255,255,.028));box-shadow:0 12px 26px rgba(0,0,0,.07),inset 0 1px 0 rgba(255,255,255,.035);transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .22s ease,background .22s ease,box-shadow .22s ease}
.hero-device .mock-grid>div::before{content:"";position:absolute;left:18px;top:19px;width:27px;height:27px;border:1px solid rgba(86,197,255,.3);border-radius:9px;background-position:center,center;background-repeat:no-repeat,no-repeat;background-size:16px 16px,100% 100%;box-shadow:0 7px 18px rgba(42,141,244,.11)}
.hero-device .mock-grid>div:nth-child(1)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fe4ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 8h18M7 6h.01M10 6h.01'/%3E%3C/svg%3E"),linear-gradient(135deg,rgba(84,221,255,.19),rgba(71,136,255,.14))}
.hero-device .mock-grid>div:nth-child(2)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fe4ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='m9 10-2 2 2 2m6-4 2 2-2 2m-3-5-1 6'/%3E%3C/svg%3E"),linear-gradient(135deg,rgba(84,221,255,.19),rgba(71,136,255,.14))}
.hero-device .mock-grid>div:nth-child(3)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fe4ff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.4 3.6L17 8l-3.6 1.4L12 13l-1.4-3.6L7 8l3.6-1.4L12 3Z'/%3E%3Cpath d='M18 14l.8 2.2L21 17l-2.2.8L18 20l-.8-2.2L15 17l2.2-.8L18 14Z'/%3E%3C/svg%3E"),linear-gradient(135deg,rgba(84,221,255,.19),rgba(71,136,255,.14))}
.hero-device .mock-grid>div:nth-child(4)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fe4ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 19 3.5-.8L19 7.7a2 2 0 0 0-2.8-2.8L5.7 15.4 5 19Z'/%3E%3Cpath d='m14.8 6.3 2.9 2.9'/%3E%3C/svg%3E"),linear-gradient(135deg,rgba(84,221,255,.19),rgba(71,136,255,.14))}
.hero-device .mock-grid>div::after{position:absolute;right:14px;top:13px;color:rgba(126,204,255,.5);font:850 9px/1 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:.12em}
.hero-device .mock-grid>div:nth-child(1)::after{content:"01"}.hero-device .mock-grid>div:nth-child(2)::after{content:"02"}.hero-device .mock-grid>div:nth-child(3)::after{content:"03"}.hero-device .mock-grid>div:nth-child(4)::after{content:"04"}
.hero-device .mock-grid strong{position:relative;display:block;margin-bottom:6px;color:#f4f8ff;font-size:15px;line-height:1.25;letter-spacing:-.02em}
.hero-device .mock-grid small{position:relative;color:#aabbd0;font-size:12px;line-height:1.55}
.hero-device .mock-grid::after{content:"IN-HOUSE   ·   WEB   ·   WINDOWS   ·   AI   ·   DESIGN";grid-column:1/-1;margin-top:4px;padding:11px 14px;border:1px solid rgba(100,178,233,.12);border-radius:14px;background:rgba(5,18,32,.32);color:rgba(156,198,230,.68);text-align:center;font:800 9px/1.2 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:.12em}

html[data-theme="light"] .hero-device .device-shell{border-color:rgba(66,142,207,.20);background:radial-gradient(circle at 50% 25%,rgba(84,176,255,.13),transparent 31%),radial-gradient(circle at 88% 84%,rgba(114,98,255,.07),transparent 32%),linear-gradient(155deg,#f7fbff,#eaf3fc);box-shadow:0 34px 80px rgba(38,75,112,.15),0 1px 0 rgba(255,255,255,.9) inset}
html[data-theme="light"] .hero-device .browser-top{background:rgba(239,246,253,.68);border-bottom-color:rgba(70,120,169,.12)}
html[data-theme="light"] .hero-device .browser-top::after{background:rgba(255,255,255,.55);color:#7890aa;border-color:rgba(70,120,169,.12)}
html[data-theme="light"] .hero-device .device-label::before{color:#071224}
html[data-theme="light"] .hero-device .device-label::after{color:#247db9;background:rgba(48,157,220,.07);border-color:rgba(48,157,220,.16)}
html[data-theme="light"] .hero-device .mock-grid>div{border-color:rgba(70,119,164,.14);background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(239,246,253,.82));box-shadow:0 11px 25px rgba(46,81,118,.07),inset 0 1px 0 #fff}
html[data-theme="light"] .hero-device .mock-grid strong{color:#102136}
html[data-theme="light"] .hero-device .mock-grid small{color:#62778e}
html[data-theme="light"] .hero-device .mock-grid::after{background:rgba(255,255,255,.52);color:#6784a0;border-color:rgba(70,119,164,.12)}

/* --------------------------------------------------------------------------
   Responsive and interaction polish
   -------------------------------------------------------------------------- */
@media(max-width:1020px){.featured-software-card{grid-template-rows:260px 1fr}}
@media(max-width:900px){
  .featured-software-grid{grid-template-columns:1fr}
  .featured-software-card{grid-template-rows:minmax(230px,42vw) 1fr}
  .sha-disk-card .featured-software-media img{width:min(88%,560px)}
  .bridge-card .featured-software-media img{width:min(76%,500px);max-height:78%;transform:translateY(-4px)}
  .portfolio-grid.compact .project-media{min-height:0!important;padding:10px!important}
  .portfolio-grid.compact .project-media::before{width:70%;height:70%;filter:blur(9px)}
  .portfolio-product-card[data-portfolio-product="sha-disk"] .project-media img,.portfolio-product-card[data-portfolio-product="sha-disk"] .project-media::after{width:56px!important;height:56px!important;max-width:56px!important;max-height:56px!important}
  .portfolio-product-card.bridge-portfolio-card .project-media img{width:60px!important;height:60px!important;max-width:60px!important;max-height:60px!important}
  .bonuma-card .project-media img{width:62px!important;height:62px!important;max-width:62px!important;max-height:62px!important}
  .portfolio-grid.compact .project-card:not([data-portfolio-product="sha-disk"]):not(.bridge-portfolio-card):not(.bonuma-card) .project-media img{max-width:76%!important;max-height:62px!important}
}
@media(max-width:760px){
  .hero-device .device-content{padding:28px 20px 22px}
  .hero-device .device-logo{width:min(145px,42%);max-height:145px}
  .hero-device .mock-grid>div{min-height:116px;padding:17px 14px 16px 50px}
  .hero-device .mock-grid>div::before{left:14px;top:17px;width:25px;height:25px;background-size:15px 15px,100% 100%}
  .hero-device .mock-grid::after{letter-spacing:.08em}
  .software-feature-section{padding-bottom:42px!important}
  .software-feature-section + .section-pad{padding-top:42px!important}
}
@media(max-width:620px){
  .featured-software-card{border-radius:22px;grid-template-rows:210px 1fr}
  .featured-software-media{padding:14px 16px}
  .featured-software-copy{padding:22px 20px 24px}
  .featured-software-card h3{font-size:29px}
  .featured-software-card p{font-size:13px;line-height:1.62}
  .featured-software-grid{gap:14px;margin-top:24px}
  .featured-software-badges,.featured-software-chips{gap:6px}
  .featured-software-chips{margin:18px 0 22px}
  .featured-software-card .btn{width:100%}
  .sha-disk-card .featured-software-media img{width:92%;max-height:86%}
  .bridge-card .featured-software-media img{width:80%;max-height:78%;transform:translateY(-2px)}
  .portfolio-grid.compact .project-media{min-height:0!important;padding:9px!important}
  .hero-device .browser-top::after{display:none}
  .hero-device .mock-grid{grid-template-columns:1fr}
  .hero-device .mock-grid::after{grid-column:1}
}
@media(max-width:440px){
  .portfolio-product-card[data-portfolio-product="sha-disk"] .project-media img,.portfolio-product-card[data-portfolio-product="sha-disk"] .project-media::after{width:48px!important;height:48px!important;max-width:48px!important;max-height:48px!important}
  .portfolio-product-card.bridge-portfolio-card .project-media img{width:50px!important;height:50px!important;max-width:50px!important;max-height:50px!important}
  .bonuma-card .project-media img{width:52px!important;height:52px!important;max-width:52px!important;max-height:52px!important}
  .portfolio-grid.compact .project-card:not([data-portfolio-product="sha-disk"]):not(.bridge-portfolio-card):not(.bonuma-card) .project-media img{max-height:54px!important}
}
@media(prefers-reduced-motion:no-preference){
  .featured-software-card{transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
  .featured-software-card:hover{transform:translateY(-5px);border-color:rgba(100,205,255,.34);box-shadow:0 34px 85px rgba(13,30,52,.22)}
  .portfolio-grid.compact .project-media img{transition:transform .24s cubic-bezier(.2,.8,.2,1),filter .24s ease}
  .portfolio-grid.compact .project-card:hover .project-media img{transform:translateY(-2px) scale(1.025)!important;filter:drop-shadow(0 14px 22px rgba(0,0,0,.28))}
  .hero-device .mock-grid>div:hover{transform:translateY(-3px);border-color:rgba(72,191,255,.31);background:linear-gradient(145deg,rgba(71,161,232,.10),rgba(255,255,255,.035));box-shadow:0 16px 32px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.045)}
  .hero-device .device-logo{animation:studioLogoFloat 6s ease-in-out infinite}
  @keyframes studioLogoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
}
@media(prefers-reduced-motion:reduce){.featured-software-card,.portfolio-grid.compact .project-media img,.hero-device .mock-grid>div,.hero-device .device-logo{animation:none!important;transition:none!important}}

/* --------------------------------------------------------------------------
   Mobile refinement — compact, swipe-aware, premium
   -------------------------------------------------------------------------- */
@media(max-width:900px){
  /* Tighten the general rhythm without making the page feel cramped. */
  body:has(#software) main>section.section-pad{padding-top:34px!important;padding-bottom:34px!important}
  body:has(#software) .section-head{margin-bottom:15px!important}
  body:has(#software) .section-head .eyebrow{margin-bottom:7px!important;font-size:10px!important}
  body:has(#software) .section-head h2{font-size:clamp(25px,7.4vw,34px)!important;line-height:1.02!important}
  body:has(#software) .section-head p.muted{font-size:13px!important;line-height:1.48!important}

  /* Hero: keep the studio showcase, but compress it into a 2x2 console. */
  body:has(#software) .hero.section-pad{padding-top:26px!important;padding-bottom:30px!important}
  body:has(#software) .hero-lead{-webkit-line-clamp:3!important;font-size:14px!important;line-height:1.5!important}
  body:has(#software) .hero-device{margin-top:20px!important}
  body:has(#software) .hero-device .device-shell{border-radius:24px!important}
  body:has(#software) .hero-device .browser-top{height:38px!important;padding-inline:14px!important}
  body:has(#software) .hero-device .browser-top span{width:7px!important;height:7px!important}
  body:has(#software) .hero-device .device-content{padding:18px 13px 14px!important}
  body:has(#software) .hero-device .device-content::before{width:125px!important;height:125px!important;top:8px!important}
  body:has(#software) .hero-device .device-logo{width:min(92px,29%)!important;max-height:92px!important;margin:0 auto 8px!important}
  body:has(#software) .hero-device .device-label{margin-bottom:14px!important}
  body:has(#software) .hero-device .device-label::before{font-size:18px!important}
  body:has(#software) .hero-device .device-label::after{margin-top:6px!important;padding:4px 8px!important;font-size:7.5px!important}
  body:has(#software) .hero-device .mock-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  body:has(#software) .hero-device .mock-grid>div{min-height:92px!important;padding:13px 9px 10px 42px!important;border-radius:15px!important}
  body:has(#software) .hero-device .mock-grid>div::before{left:10px!important;top:13px!important;width:23px!important;height:23px!important;background-size:14px 14px,100% 100%!important}
  body:has(#software) .hero-device .mock-grid>div::after{right:8px!important;top:8px!important;font-size:7px!important}
  body:has(#software) .hero-device .mock-grid strong{font-size:12.5px!important;line-height:1.16!important;margin-bottom:4px!important}
  body:has(#software) .hero-device .mock-grid small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:10px!important;line-height:1.35!important}
  body:has(#software) .hero-device .mock-grid::after{grid-column:1/-1!important;margin-top:0!important;padding:7px 8px!important;border-radius:11px!important;font-size:7px!important;letter-spacing:.07em!important}

  /* Services are shorter, denser cards. */
  #leistungen .service-grid{padding-bottom:7px!important}
  #leistungen .service-card{min-height:164px!important;padding:15px!important;border-radius:19px!important}
  #leistungen .service-card>span:first-child{width:30px!important;height:30px!important;margin-bottom:9px!important}
  #leistungen .service-card h3{font-size:16.5px!important;margin-bottom:6px!important}
  #leistungen .service-card p{-webkit-line-clamp:2!important;font-size:12px!important;line-height:1.45!important}

  /* Software: retain the premium product card but remove excess vertical bulk. */
  #software .featured-software-grid{padding-bottom:8px!important;margin-top:18px!important}
  #software .featured-software-card{grid-template-rows:154px 1fr!important;min-height:438px!important;border-radius:21px!important}
  #software .featured-software-media{padding:10px 14px!important}
  #software .featured-software-copy{padding:17px 17px 18px!important}
  #software .featured-software-kicker{margin:12px 0 5px!important;font-size:8.5px!important}
  #software .featured-software-card h3{font-size:24px!important}
  #software .featured-software-card p{-webkit-line-clamp:3!important;margin-top:9px!important;font-size:11.5px!important;line-height:1.48!important}
  #software .featured-software-chips{margin:12px 0 14px!important}
  #software .featured-software-chips span{padding:5px 7px!important;font-size:8.5px!important}
  #software .featured-software-chips span:nth-child(n+3){display:none!important}
  #software .featured-software-card .btn{min-height:40px!important;font-size:11.5px!important}
  #software .featured-software-note{font-size:9.5px!important}

  /* Portfolio cards: less frame, more information density. */
  #software~section .portfolio-grid.compact{padding-bottom:8px!important}
  #software~section .portfolio-grid.compact .project-card{grid-template-columns:72px minmax(0,1fr)!important;column-gap:10px!important;min-height:138px!important;padding:10px!important;border-radius:18px!important}
  #software~section .portfolio-grid.compact .project-media{width:72px!important;height:72px!important;min-height:72px!important;padding:7px!important;border-radius:14px!important}
  #software~section .portfolio-grid.compact .project-media img,#software~section .portfolio-grid.compact .project-media::after{max-width:56px!important;max-height:56px!important}
  #software~section .portfolio-grid.compact .tag{font-size:8.5px!important;padding:4px 7px!important}
  #software~section .portfolio-grid.compact h3{font-size:16px!important;margin:3px 0!important}
  #software~section .portfolio-grid.compact p{-webkit-line-clamp:2!important;font-size:11px!important;line-height:1.4!important}
  #software~section .portfolio-grid.compact .bonuma-launch-badge{font-size:8px!important;padding:3px 6px!important}

  /* Compact supporting sections and form controls. */
  #software+section.section-pad{padding-top:30px!important;padding-bottom:30px!important}
  #software+section .feature-list{margin-top:11px!important}
  #software+section .feature-list>div{padding-block:4px!important;font-size:12px!important}
  #ueber.section-pad,.local-seo-section.section-pad{padding-top:28px!important;padding-bottom:28px!important}
  #ueber .split,.local-seo-section .split{gap:13px!important}
  #ueber .profile-card{padding:12px!important;border-radius:17px!important}
  #ueber .profile-card .avatar{width:54px!important;height:54px!important}
  .local-seo-section .local-card{padding:14px!important;border-radius:17px!important}
  #kontakt.section-pad{padding-top:32px!important;padding-bottom:38px!important}
  #kontakt .contact-panel{padding:16px!important;gap:15px!important;border-radius:20px!important}
  #kontakt .appointment-note{padding:10px!important;font-size:11px!important}
  #kontakt .appointment-form{gap:9px!important}
  #kontakt .appointment-grid{gap:9px!important}
  #kontakt .appointment-form input,#kontakt .appointment-form select,#kontakt .appointment-form textarea{padding:10px 11px!important;border-radius:11px!important;font-size:13px!important}
  #kontakt .appointment-form textarea{min-height:96px!important}
}

/* Native CSS carousel markers: almost no vertical footprint, auto-synced to swipe position. */
@supports (scroll-marker-group: after){
  @media(max-width:900px){
    #leistungen .service-grid,
    #software .featured-software-grid,
    #software~section .portfolio-grid.compact{
      scroll-marker-group:after;
    }
    #leistungen .service-grid::scroll-marker-group,
    #software .featured-software-grid::scroll-marker-group,
    #software~section .portfolio-grid.compact::scroll-marker-group{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:4px;
      block-size:8px;
      margin-block-start:3px;
    }
    #leistungen .service-card::scroll-marker,
    #software .featured-software-card::scroll-marker,
    #software~section .portfolio-grid.compact .project-card::scroll-marker{
      content:"";
      inline-size:4px;
      block-size:4px;
      border:0;
      border-radius:999px;
      background:rgba(146,181,218,.34);
      box-shadow:none;
      transition:inline-size .18s ease,background .18s ease,box-shadow .18s ease;
    }
    #leistungen .service-card::scroll-marker:target-current,
    #software .featured-software-card::scroll-marker:target-current,
    #software~section .portfolio-grid.compact .project-card::scroll-marker:target-current{
      inline-size:12px;
      background:#43cfff;
      box-shadow:0 0 8px rgba(67,207,255,.36);
    }
    html[data-theme="light"] #leistungen .service-card::scroll-marker,
    html[data-theme="light"] #software .featured-software-card::scroll-marker,
    html[data-theme="light"] #software~section .portfolio-grid.compact .project-card::scroll-marker{background:rgba(69,112,156,.24)}
    html[data-theme="light"] #leistungen .service-card::scroll-marker:target-current,
    html[data-theme="light"] #software .featured-software-card::scroll-marker:target-current,
    html[data-theme="light"] #software~section .portfolio-grid.compact .project-card::scroll-marker:target-current{background:#258ee8;box-shadow:0 0 7px rgba(37,142,232,.22)}
  }
}

@media(max-width:390px){
  body:has(#software) .hero-device .mock-grid>div{min-height:86px!important;padding-left:38px!important}
  body:has(#software) .hero-device .mock-grid>div::before{left:8px!important;width:21px!important;height:21px!important}
  body:has(#software) .hero-device .mock-grid strong{font-size:11.5px!important}
  body:has(#software) .hero-device .mock-grid small{font-size:9.5px!important}
  #software .featured-software-card{min-height:424px!important}
}

/* --------------------------------------------------------------------------
   Desktop featured-card depth interaction
   Restores the mouse-follow highlight on its own layer and adds restrained 3D
   depth, media parallax and a one-shot glass reflection. Mobile is untouched.
   -------------------------------------------------------------------------- */
@media (min-width:1021px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .featured-software-card{
    transform-style:preserve-3d;
    perspective:1200px;
    will-change:transform;
    transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .22s ease,box-shadow .22s ease,filter .22s ease;
  }
  .featured-software-card::before{
    opacity:.86;
    background:
      radial-gradient(360px circle at var(--spot-x,78%) var(--spot-y,18%),rgba(64,212,255,.20),rgba(64,212,255,.065) 34%,transparent 71%),
      radial-gradient(circle at 85% 12%,rgba(61,210,255,.14),transparent 35%),
      radial-gradient(circle at 10% 88%,rgba(100,116,255,.12),transparent 32%);
    transition:opacity .2s ease,filter .2s ease;
  }
  .featured-software-card.bridge-card::before{
    background:
      radial-gradient(370px circle at var(--spot-x,76%) var(--spot-y,18%),rgba(154,126,255,.22),rgba(70,205,255,.055) 36%,transparent 72%),
      radial-gradient(circle at 85% 12%,rgba(130,108,255,.17),transparent 36%),
      radial-gradient(circle at 8% 90%,rgba(55,210,255,.10),transparent 30%);
  }
  .featured-software-card::after{
    content:"";
    position:absolute;
    z-index:6;
    inset:-55% -72%;
    pointer-events:none;
    opacity:0;
    background:linear-gradient(112deg,transparent 43%,rgba(255,255,255,.025) 46%,rgba(184,234,255,.16) 50%,rgba(94,198,255,.075) 53%,transparent 58%);
    mix-blend-mode:screen;
    transform:translate3d(-38%,0,0) rotate(5deg);
  }
  .featured-software-media,.featured-software-copy{
    position:relative;
    z-index:2;
    transform-style:preserve-3d;
    transition:transform .22s cubic-bezier(.2,.8,.2,1);
  }
  .featured-software-media img{
    transition:transform .26s cubic-bezier(.2,.8,.2,1),filter .26s ease;
    will-change:transform,filter;
  }
  .featured-software-card:hover{
    transform:perspective(1200px) translateY(-7px) rotateX(1.35deg) rotateY(-1.65deg) scale(1.006);
    border-color:rgba(91,208,255,.46);
    box-shadow:-8px 38px 96px rgba(8,24,47,.34),0 0 0 1px rgba(84,203,255,.055) inset,0 0 42px rgba(49,176,255,.07);
    filter:saturate(1.035);
  }
  .featured-software-card.bridge-card:hover{
    transform:perspective(1200px) translateY(-7px) rotateX(1.25deg) rotateY(1.65deg) scale(1.006);
    border-color:rgba(139,121,255,.48);
    box-shadow:8px 38px 96px rgba(8,24,47,.34),0 0 0 1px rgba(149,126,255,.065) inset,0 0 44px rgba(111,91,255,.08);
  }
  .featured-software-card:hover::before{opacity:1;filter:saturate(1.12) brightness(1.04)}
  .featured-software-card:hover::after{animation:featuredGlassSweep .92s cubic-bezier(.18,.72,.22,1) 1}
  .featured-software-card:hover .featured-software-media{transform:translate3d(0,-2px,18px)}
  .featured-software-card:hover .featured-software-copy{transform:translate3d(0,0,10px)}
  .sha-disk-card:hover .featured-software-media img{
    transform:translate3d(-4px,-7px,28px) scale(1.026) rotate(-.18deg);
    filter:drop-shadow(0 24px 34px rgba(0,0,0,.30)) drop-shadow(0 0 24px rgba(62,196,255,.10));
  }
  .bridge-card:hover .featured-software-media img{
    transform:translate3d(5px,-10px,30px) scale(1.036) rotate(.18deg);
    filter:drop-shadow(0 24px 34px rgba(0,0,0,.30)) drop-shadow(0 0 28px rgba(131,109,255,.12));
  }
  .featured-software-card:hover .featured-software-badges .accent{
    box-shadow:0 0 20px rgba(68,211,255,.12),inset 0 0 16px rgba(68,211,255,.045);
  }
  .featured-software-card.bridge-card:hover .featured-software-badges .accent{
    box-shadow:0 0 20px rgba(145,121,255,.14),inset 0 0 16px rgba(145,121,255,.05);
  }
  html[data-theme="light"] .featured-software-card:hover{
    box-shadow:-8px 34px 78px rgba(40,83,127,.18),0 0 0 1px rgba(42,141,244,.045) inset,0 0 34px rgba(66,177,244,.055);
  }
  html[data-theme="light"] .featured-software-card.bridge-card:hover{
    box-shadow:8px 34px 78px rgba(40,83,127,.18),0 0 0 1px rgba(119,99,238,.045) inset,0 0 34px rgba(119,99,238,.055);
  }
}

@keyframes featuredGlassSweep{
  0%{opacity:0;transform:translate3d(-38%,0,0) rotate(5deg)}
  18%{opacity:.7}
  64%{opacity:.24}
  100%{opacity:0;transform:translate3d(38%,0,0) rotate(5deg)}
}