:root{
      --bg:#070A13;
      --bg2:#0B1020;
      --card:rgba(255,255,255,.07);
      --card2:rgba(255,255,255,.10);
      --line:rgba(255,255,255,.13);
      --text:#F4F7FB;
      --muted:#A9B4C7;
      --soft:#D7DFF0;
      --cyan:#4DE3FF;
      --blue:#6D7DFF;
      --violet:#B46CFF;
      --green:#70F0B5;
      --shadow: 0 24px 80px rgba(0,0,0,.45);
      --radius: 28px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      background:
        radial-gradient(circle at 20% 0%, rgba(77,227,255,.20), transparent 34%),
        radial-gradient(circle at 80% 12%, rgba(180,108,255,.18), transparent 32%),
        radial-gradient(circle at 50% 100%, rgba(109,125,255,.17), transparent 36%),
        var(--bg);
      color:var(--text);
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size:72px 72px;
      mask-image:radial-gradient(circle at center, black, transparent 75%);
      opacity:.45;
      z-index:-2;
    }
    a{color:inherit;text-decoration:none}
    .wrap{width:min(1160px, calc(100% - 40px)); margin:0 auto}
    .nav{
      position:sticky;
      top:0;
      z-index:20;
      backdrop-filter: blur(18px);
      background:rgba(7,10,19,.72);
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .nav-inner{
      min-height:76px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
    }
    .brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:-.03em}
    .logo{
      width:38px;height:38px;border-radius:13px;
      background:linear-gradient(135deg,var(--cyan),var(--blue),var(--violet));
      display:grid;place-items:center;
      box-shadow:0 12px 36px rgba(77,227,255,.18);
      font-size:14px;color:#06101d;
    }

    .brand-logo-img{
      width:300px;
      max-width:42vw;
      height:auto;
      display:block;
      object-fit:contain;
    }
    .hero-logo-showcase{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:14px 0 10px;
      margin-bottom:24px;
    }
    .hero-logo-showcase img{
      width:min(560px, 100%);
      height:auto;
      display:block;
    }
    @media (max-width:560px){
      .brand-logo-img{width:230px;max-width:72vw}
      .hero-logo-showcase img{width:100%}
    }

    .nav-links{display:flex;align-items:center;gap:24px;color:var(--muted);font-size:14px;font-weight:600}
    .nav-links a:hover{color:var(--text)}
    .button{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:48px;
      padding:0 20px;
      border-radius:999px;
      font-weight:700;
      font-size:14px;
      border:1px solid rgba(255,255,255,.14);
      transition:.22s ease;
    }
    .button.primary{
      color:#06101d;
      background:linear-gradient(135deg,var(--cyan),#B9F4FF);
      border:0;
      box-shadow:0 18px 44px rgba(77,227,255,.22);
    }
    .button.secondary{background:rgba(255,255,255,.06);color:var(--text)}
    .button:hover{transform:translateY(-2px)}
    .hero{padding:104px 0 84px;position:relative}
    .hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:54px;align-items:center}
    .eyebrow{
      display:inline-flex;align-items:center;gap:10px;
      color:var(--soft);
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.06);
      padding:9px 13px;border-radius:999px;
      font-size:13px;font-weight:700;
      margin-bottom:26px;
    }
    .pulse{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 22px var(--green)}
    h1{font-size:clamp(48px, 7vw, 92px);line-height:.95;margin:0;letter-spacing:-.08em}
    .gradient-text{background:linear-gradient(135deg,#fff 10%,#BBF5FF 42%,#C7B2FF 80%);-webkit-background-clip:text;background-clip:text;color:transparent}
    .claim{font-size:clamp(25px,3vw,44px);line-height:1.05;letter-spacing:-.055em;margin:24px 0 22px;font-weight:800;color:#F3F8FF}
    .lead{font-size:20px;line-height:1.7;color:var(--muted);max-width:760px;margin:0 0 34px}
    .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:30px}
    .tags{display:flex;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:13px;font-weight:700}
    .tag{padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10)}
    .visual{
      position:relative;
      min-height:560px;
      border:1px solid rgba(255,255,255,.14);
      border-radius:36px;
      background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .visual::before{
      content:"";position:absolute;inset:-35%;
      background:conic-gradient(from 180deg, transparent, rgba(77,227,255,.32), transparent, rgba(180,108,255,.30), transparent);
      animation:spin 16s linear infinite;
      opacity:.55;
    }
    
    .dashboard{
      position:absolute;inset:18px;
      border-radius:26px;
      background:rgba(7,10,19,.80);
      backdrop-filter:blur(18px);
      border:1px solid rgba(255,255,255,.14);
      padding:22px;
      display:flex;
      flex-direction:column;
      gap:16px;
    }
    .dash-top{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:13px;font-weight:700}
    .dots{display:flex;gap:7px}.dots span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.20)}
    .metric{
      padding:20px;border-radius:22px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11)
    }
    .metric small{color:var(--muted);font-weight:700}.metric strong{display:block;font-size:34px;letter-spacing:-.04em;margin-top:7px}
    .bars{display:grid;gap:11px;margin-top:14px}.bar{height:10px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden}.bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--violet))}
    .phone{
      width:180px;height:350px;border-radius:34px;
      background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
      border:1px solid rgba(255,255,255,.18);
      position:absolute;right:30px;bottom:30px;
      box-shadow:0 30px 70px rgba(0,0,0,.45);
      padding:14px;
    }
    .phone-screen{height:100%;border-radius:24px;background:#08101f;border:1px solid rgba(255,255,255,.12);padding:14px;display:grid;gap:10px}
    .app-pill{height:42px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
    .floating-card{
      position:absolute;left:28px;bottom:52px;width:235px;
      padding:18px;border-radius:22px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(18px);
    }
    .floating-card b{display:block;margin-bottom:8px}.floating-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
    section{padding:82px 0}
    .section-head{max-width:760px;margin-bottom:34px}
    .kicker{color:var(--cyan);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:12px}
    h2{font-size:clamp(34px,4.2vw,58px);line-height:1.02;letter-spacing:-.06em;margin:0 0 16px}
    .section-head p{color:var(--muted);font-size:18px;line-height:1.7;margin:0}
    .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .card{
      padding:28px;
      min-height:260px;
      border-radius:var(--radius);
      background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.045));
      border:1px solid rgba(255,255,255,.12);
      box-shadow:0 20px 60px rgba(0,0,0,.20);
    }
    .icon{width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,rgba(77,227,255,.95),rgba(180,108,255,.95));display:grid;place-items:center;color:#06101d;font-weight:900;margin-bottom:22px}
    .card h3{font-size:23px;letter-spacing:-.04em;margin:0 0 12px}.card p{color:var(--muted);line-height:1.65;margin:0}
    .split{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:start}
    .panel{border-radius:34px;padding:32px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
    .list{display:grid;gap:14px;margin-top:24px}.list-item{display:flex;gap:14px;align-items:flex-start;color:var(--soft);line-height:1.55}.check{width:24px;height:24px;border-radius:50%;background:rgba(77,227,255,.16);color:var(--cyan);display:grid;place-items:center;flex:0 0 auto;font-weight:900}
    .project-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
    .project{min-height:300px;border-radius:32px;background:linear-gradient(135deg,rgba(77,227,255,.12),rgba(180,108,255,.10));border:1px solid rgba(255,255,255,.12);padding:26px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative}
    .project::after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.09);right:-70px;top:-70px}
    .badge{align-self:flex-start;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.20);padding:8px 12px;border-radius:999px;color:var(--soft);font-size:12px;font-weight:800}.project h3{font-size:25px;margin:56px 0 10px;letter-spacing:-.04em}.project p{color:var(--muted);line-height:1.6;margin:0}.project a{font-weight:800;color:var(--cyan);margin-top:22px;display:inline-block}
    .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:step}.step{padding:24px;border-radius:26px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11);min-height:210px}.step::before{counter-increment:step;content:"0" counter(step);display:inline-flex;margin-bottom:34px;color:var(--cyan);font-weight:900}.step h3{margin:0 0 10px;letter-spacing:-.035em}.step p{margin:0;color:var(--muted);line-height:1.55;font-size:14px}
    .cta{border-radius:42px;padding:54px;background:linear-gradient(135deg,rgba(77,227,255,.17),rgba(180,108,255,.17));border:1px solid rgba(255,255,255,.15);display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}.cta h2{margin-bottom:14px}.cta p{margin:0;color:var(--muted);font-size:18px;line-height:1.65;max-width:700px}
    
    @media (max-width:920px){.hero-grid,.split,.cta{grid-template-columns:1fr}.visual{min-height:520px}.cards{grid-template-columns:1fr}.project-grid{grid-template-columns:1fr 1fr}.steps{grid-template-columns:repeat(2,1fr)}.nav-links{display:none}.hero{padding-top:72px}}
    @media (max-width:560px){.project-grid{grid-template-columns:1fr}.wrap{width:min(100% - 28px,1160px)}.hero{padding-bottom:54px}.visual{min-height:470px}.phone{width:145px;height:284px;right:18px}.floating-card{left:18px;bottom:30px;width:200px}.steps{grid-template-columns:1fr}.cta{padding:30px;border-radius:28px}h1{font-size:48px}.claim{font-size:26px}.lead{font-size:17px}}
  
    /* Logo integration fixes */
    .brand{
      display:flex;
      align-items:center;
      gap:0;
      min-width:310px;
      line-height:0;
    }
    .brand .logo,
    .brand > span:not(.logo){
      display:none !important;
    }
    .brand-logo-img{
      width:300px;
      max-width:38vw;
      height:auto;
      display:block;
      border:0 !important;
      outline:0 !important;
      background:transparent !important;
      object-fit:contain;
    }
    .hero-logo-showcase{
      display:flex;
      align-items:center;
      justify-content:flex-start;
      width:100%;
      margin:0 0 28px 0;
      padding:0;
      line-height:0;
      border:0 !important;
      background:transparent !important;
    }
    .hero-logo-showcase img{
      width:min(560px, 100%);
      height:auto;
      display:block;
      border:0 !important;
      outline:0 !important;
      background:transparent !important;
    }
    .eyebrow{
      display:inline-flex !important;
      align-items:center !important;
      gap:10px !important;
      white-space:nowrap;
      width:auto !important;
    }
    .pulse{
      display:inline-block !important;
      flex:0 0 8px !important;
      width:8px !important;
      height:8px !important;
      margin:0 !important;
      vertical-align:middle !important;
    }
    @media (max-width:920px){
      .brand{min-width:0}
      .brand-logo-img{width:260px;max-width:68vw}
      .hero-logo-showcase img{width:min(500px,100%)}
    }
    @media (max-width:560px){
      .brand-logo-img{width:220px;max-width:72vw}
      .hero-logo-showcase{margin-bottom:22px}
      
    }

  
    /* Animated dashboard */
    
    
    
    .dashboard::after{
      content:"";
      position:absolute;
      inset:-40%;
      background:linear-gradient(110deg, transparent 0%, transparent 42%, rgba(255,255,255,.10) 50%, transparent 58%, transparent 100%);
      transform:translateX(-45%) rotate(8deg);
      animation: scanLight 5.8s ease-in-out infinite;
      pointer-events:none;
    }
    .metric{
      position:relative;
      overflow:hidden;
      animation: cardBreathe 4.8s ease-in-out infinite;
    }
    .metric:nth-of-type(2){
      animation-delay:.7s;
    }
    .bar i{
      transform-origin:left center;
      animation: barFlow 3.8s ease-in-out infinite;
      background-size:220% 100%;
      background-image:linear-gradient(90deg,var(--cyan),var(--blue),var(--violet),var(--cyan));
    }
    
    
    .floating-card{
      animation: floatingCard 5.2s ease-in-out infinite;
    }
    .phone{
      animation: phoneFloat 6s ease-in-out infinite;
    }
    .app-pill{
      position:relative;
      overflow:hidden;
      animation: pillGlow 3.6s ease-in-out infinite;
    }
    
    
    
    
    
    .dots span{
      animation: dotBlink 1.8s ease-in-out infinite;
    }
    
    

    
    
    
    
    
    
    
    
    
    

    @media (prefers-reduced-motion: reduce){
      .visual,
      .visual::before,
      .dashboard::after,
      .metric,
      .bar i,
      .floating-card,
      .phone,
      .app-pill,
      .app-pill::after,
      .dots span{
        animation:none !important;
        transform:none !important;
      }
    }

  
    /* Guaranteed embedded logo rendering */
    .brand{
      display:flex !important;
      align-items:center !important;
      gap:0 !important;
      min-width:300px !important;
      line-height:0 !important;
      border:0 !important;
    }
    
    .hero-logo-showcase{
      display:flex !important;
      align-items:center !important;
      justify-content:flex-start !important;
      width:100% !important;
      margin:0 0 28px 0 !important;
      padding:0 !important;
      border:0 !important;
      outline:0 !important;
      line-height:0 !important;
      background:transparent !important;
    }
    .hero-logo-showcase img{
      width:min(560px, 100%) !important;
      height:auto !important;
      display:block !important;
      border:0 !important;
      outline:0 !important;
      background:transparent !important;
    }
    .eyebrow{
      display:inline-flex !important;
      align-items:center !important;
      gap:10px !important;
      width:auto !important;
      white-space:nowrap;
    }
    
    @media (max-width:920px){
      
      
      
    }
    @media (max-width:560px){
      
      .eyebrow{white-space:normal}
    }

  
    /* Final logo placement */
    .hero-logo-showcase{
      display:flex !important;
      align-items:center !important;
      justify-content:flex-start !important;
      width:100% !important;
      margin:26px 0 26px 0 !important;
      padding:0 !important;
      border:0 !important;
      outline:0 !important;
      line-height:0 !important;
      background:transparent !important;
    }
    .hero-logo-showcase img{
      width:min(560px, 100%) !important;
      height:auto !important;
      display:block !important;
      border:0 !important;
      outline:0 !important;
      background:transparent !important;
      filter: drop-shadow(0 18px 46px rgba(0,0,0,.28));
    }
    .brand-logo-img{
      width:300px !important;
      max-width:38vw !important;
      height:auto !important;
      display:block !important;
      border:0 !important;
      outline:0 !important;
      background:transparent !important;
    }
    .brand{
      display:flex !important;
      align-items:center !important;
      min-width:300px !important;
      line-height:0 !important;
      border:0 !important;
      background:transparent !important;
    }
    .eyebrow{
      display:inline-flex !important;
      align-items:center !important;
      gap:10px !important;
      width:auto !important;
    }
    .pulse{
      display:inline-block !important;
      flex:0 0 8px !important;
      width:8px !important;
      height:8px !important;
      margin:0 !important;
    }
    @media (max-width:920px){
      .brand{min-width:0 !important}
      .brand-logo-img{width:250px !important;max-width:68vw !important}
      .hero-logo-showcase img{width:min(500px,100%) !important}
    }
    @media (max-width:560px){
      .brand-logo-img{width:220px !important;max-width:72vw !important}
      .hero-logo-showcase{margin:22px 0 22px 0 !important}
    }

  
    /* Hero logo alignment correction */
    .hero-logo-showcase{
      margin-left:0 !important;
      padding-left:0 !important;
      justify-content:flex-start !important;
    }
    .hero-logo-showcase img{
      width:min(560px, 100%) !important;
      margin-left:0 !important;
      transform:none !important;
    }

  
    /* AI Motion Edition */
    body::after{
      content:"";
      position:fixed;
      inset:0;
      z-index:-1;
      pointer-events:none;
      opacity:.34;
      background:
        linear-gradient(90deg, transparent 0 18%, rgba(77,227,255,.11) 18.1% 18.25%, transparent 18.35% 100%),
        linear-gradient(0deg, transparent 0 28%, rgba(77,227,255,.09) 28.1% 28.22%, transparent 28.35% 100%),
        radial-gradient(circle at 18% 28%, rgba(77,227,255,.42) 0 2px, transparent 3px),
        radial-gradient(circle at 42% 22%, rgba(180,108,255,.32) 0 2px, transparent 3px),
        radial-gradient(circle at 70% 36%, rgba(77,227,255,.28) 0 2px, transparent 3px),
        radial-gradient(circle at 82% 72%, rgba(109,125,255,.28) 0 2px, transparent 3px);
      background-size:420px 420px, 520px 520px, 420px 420px, 520px 520px, 620px 620px, 720px 720px;
      animation:circuitDrift 28s linear infinite;
      mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.45) 48%, transparent 92%);
    }
    

    .hero-logo-showcase img{
      filter:drop-shadow(0 18px 48px rgba(77,227,255,.12)) drop-shadow(0 16px 36px rgba(0,0,0,.35)) !important;
    }

    .visual{
      animation: visualFloat 7s ease-in-out infinite;
      transform-origin:center;
    }
    .visual::before{
      animation: spin 16s linear infinite, visualPulse 5s ease-in-out infinite;
    }
    .dashboard{
      overflow:hidden;
    }
    .dashboard::after{
      content:"";
      position:absolute;
      inset:-45%;
      background:linear-gradient(110deg, transparent 0%, transparent 42%, rgba(255,255,255,.105) 50%, transparent 58%, transparent 100%);
      transform:translateX(-65%) rotate(8deg);
      animation:scanLight 6.2s ease-in-out infinite;
      pointer-events:none;
    }
    .metric{
      position:relative;
      overflow:hidden;
      animation:cardBreathe 5s ease-in-out infinite;
    }
    .metric:nth-of-type(2){animation-delay:.75s}
    .bar i{
      transform-origin:left center;
      animation:barFlow 3.8s ease-in-out infinite;
      background-size:230% 100% !important;
      background-image:linear-gradient(90deg,var(--cyan),var(--blue),var(--violet),var(--cyan)) !important;
    }
    .bar:nth-child(2) i{animation-delay:.35s}
    .bar:nth-child(3) i{animation-delay:.7s}
    .floating-card{animation:floatingCard 5.2s ease-in-out infinite}
    .phone{animation:phoneFloat 6s ease-in-out infinite}
    .app-pill{
      position:relative;
      overflow:hidden;
      animation:pillGlow 3.6s ease-in-out infinite;
    }
    .app-pill:nth-child(2){animation-delay:.25s}
    .app-pill:nth-child(3){animation-delay:.5s}
    .app-pill:nth-child(4){animation-delay:.75s}
    .app-pill:nth-child(5){animation-delay:1s}
    .app-pill::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(90deg, transparent, rgba(77,227,255,.20), transparent);
      transform:translateX(-100%);
      animation:pillScan 3.2s ease-in-out infinite;
    }
    .dots span{animation:dotBlink 1.8s ease-in-out infinite}
    .dots span:nth-child(2){animation-delay:.22s}
    .dots span:nth-child(3){animation-delay:.44s}

    .card, .project, .step, .panel{
      position:relative;
      overflow:hidden;
      transition:transform .26s ease, border-color .26s ease, background .26s ease, box-shadow .26s ease;
    }
    .card::before, .project::before, .step::before{
      position:relative;
      z-index:2;
    }
    .card::after, .project::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(115deg, transparent 0%, transparent 38%, rgba(77,227,255,.12) 48%, transparent 58%, transparent 100%);
      transform:translateX(-120%);
      transition:transform .72s ease;
      pointer-events:none;
    }
    .card:hover, .project:hover, .step:hover{
      transform:translateY(-6px);
      border-color:rgba(77,227,255,.34);
      box-shadow:0 26px 80px rgba(0,0,0,.30), 0 0 0 1px rgba(77,227,255,.08);
      background:linear-gradient(180deg,rgba(255,255,255,.115),rgba(255,255,255,.052));
    }
    .card:hover::after, .project:hover::before{
      transform:translateX(120%);
    }
    .icon{
      animation:iconPulse 4s ease-in-out infinite;
    }

    .project-grid{grid-template-columns:repeat(4,1fr) !important}
    .project{
      min-height:330px;
      isolation:isolate;
    }
    .project h3,.project p,.project a,.project .badge{position:relative;z-index:3}
    .project::after{
      content:"";
      position:absolute;
      width:210px;
      height:210px;
      border-radius:999px;
      right:-84px;
      top:-80px;
      background:radial-gradient(circle, rgba(77,227,255,.18), transparent 66%);
      z-index:1;
      animation:projectOrb 7s ease-in-out infinite;
    }
    .project .badge{
      background:rgba(7,10,19,.46);
      backdrop-filter:blur(10px);
    }
    .project:nth-child(1){
      background:
        radial-gradient(circle at 78% 8%, rgba(77,227,255,.20), transparent 28%),
        linear-gradient(135deg,rgba(77,227,255,.10),rgba(255,255,255,.045));
    }
    .project:nth-child(2){
      background:
        radial-gradient(circle at 76% 10%, rgba(112,240,181,.19), transparent 28%),
        linear-gradient(135deg,rgba(112,240,181,.10),rgba(255,255,255,.045));
    }
    .project:nth-child(3){
      background:
        radial-gradient(circle at 76% 10%, rgba(180,108,255,.18), transparent 28%),
        linear-gradient(135deg,rgba(180,108,255,.10),rgba(255,255,255,.045));
    }
    .project:nth-child(4){
      background:
        radial-gradient(circle at 76% 10%, rgba(109,125,255,.22), transparent 28%),
        linear-gradient(135deg,rgba(109,125,255,.12),rgba(255,255,255,.045));
    }
    .project h3::before{
      content:"";
      display:block;
      width:48px;
      height:48px;
      border-radius:16px;
      margin-bottom:22px;
      background:
        linear-gradient(135deg, rgba(77,227,255,.95), rgba(109,125,255,.85));
      box-shadow:0 18px 44px rgba(77,227,255,.16);
    }
    .project:nth-child(1) h3::before{content:"AK";display:grid;place-items:center;color:#06101d;font-size:15px;font-weight:900}
    .project:nth-child(2) h3::before{content:"EC";display:grid;place-items:center;color:#06101d;font-size:15px;font-weight:900;background:linear-gradient(135deg, rgba(112,240,181,.95), rgba(77,227,255,.85))}
    .project:nth-child(3) h3::before{content:"CM";display:grid;place-items:center;color:#06101d;font-size:15px;font-weight:900;background:linear-gradient(135deg, rgba(180,108,255,.95), rgba(77,227,255,.85))}
    .project:nth-child(4) h3::before{content:"LD";display:grid;place-items:center;color:#06101d;font-size:15px;font-weight:900;background:linear-gradient(135deg, rgba(109,125,255,.95), rgba(77,227,255,.85))}
    .project h3{margin-top:34px !important}

    
    
    
    
    
    
    
    
    
    
    
    

    @media (max-width:920px){
      .project-grid{grid-template-columns:1fr 1fr !important}
    }
    @media (max-width:560px){
      .project-grid{grid-template-columns:1fr !important}
    }
    @media (prefers-reduced-motion: reduce){
      body::after,
      .visual,
      .visual::before,
      .dashboard::after,
      .metric,
      .bar i,
      .floating-card,
      .phone,
      .app-pill,
      .app-pill::after,
      .dots span,
      .icon,
      .project::after{
        animation:none !important;
        transform:none !important;
      }
    }

  
    /* Real app icons in project cards */
    .app-project{
      padding:22px !important;
      min-height:390px !important;
      justify-content:space-between;
    }
    .app-project .app-icon-img{
      width:96px;
      height:96px;
      border-radius:24px;
      display:block;
      object-fit:cover;
      margin:0 0 18px 0;
      box-shadow:0 20px 52px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.16);
      position:relative;
      z-index:4;
      transition:transform .26s ease, box-shadow .26s ease;
    }
    .app-project:hover .app-icon-img{
      transform:translateY(-4px) scale(1.035);
      box-shadow:0 26px 70px rgba(0,0,0,.42), 0 0 0 1px rgba(77,227,255,.28);
    }
    .app-project h3{
      margin-top:18px !important;
    }
    
    .app-project .badge{
      margin-top:0;
    }
    @media (max-width:920px){
      .app-project{min-height:350px !important}
    }

  
    /* Fixed visible app icons */
    .app-project .app-icon-img{
      width:112px !important;
      height:112px !important;
      border-radius:28px !important;
      display:block !important;
      object-fit:cover !important;
      margin:0 0 18px 0 !important;
      position:relative !important;
      z-index:20 !important;
      opacity:1 !important;
      visibility:visible !important;
      background:transparent !important;
      box-shadow:0 20px 52px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.16) !important;
    }
    .app-project h3::before{
      display:none !important;
      content:none !important;
    }
    .app-project > div{
      position:relative !important;
      z-index:10 !important;
    }

  
    /* App cards with detail links */
    .project a.app-card-link{
      position:absolute;
      inset:0;
      z-index:2;
      font-size:0;
    }
    .project > div,
    .project > a:not(.app-card-link){
      position:relative;
      z-index:3;
    }
    .project .learn-more{
      position:relative;
      z-index:4;
      font-weight:800;
      color:var(--cyan);
      margin-top:22px;
      display:inline-block;
    }



    .about-hero{
      padding:96px 0 72px;
      position:relative;
    }
    .about-grid{
      display:grid;
      grid-template-columns:.9fr 1.1fr;
      gap:54px;
      align-items:center;
    }
    .about-photo-wrap{
      position:relative;
      border-radius:38px;
      padding:1px;
      background:linear-gradient(135deg, rgba(77,227,255,.42), rgba(180,108,255,.22), rgba(255,255,255,.10));
      box-shadow:0 32px 90px rgba(0,0,0,.42);
      overflow:hidden;
    }
    .about-photo{
      width:100%;
      display:block;
      border-radius:37px;
      object-fit:cover;
      aspect-ratio:4/5;
      filter:saturate(1.02) contrast(1.03);
    }
    .about-card{
      border-radius:34px;
      padding:38px;
      background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.045));
      border:1px solid rgba(255,255,255,.12);
      box-shadow:0 20px 60px rgba(0,0,0,.20);
    }
    .about-card h1{
      font-size:clamp(44px,6vw,78px);
      line-height:.95;
      letter-spacing:-.075em;
      margin:18px 0 24px;
    }
    .about-text{
      display:grid;
      gap:18px;
      color:var(--muted);
      font-size:18px;
      line-height:1.75;
    }
    .about-text p{margin:0}
    .about-highlight{
      color:var(--text);
      font-weight:700;
    }
    .about-facts{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:14px;
      margin-top:28px;
    }
    .about-fact{
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.055);
      border-radius:22px;
      padding:18px;
    }
    .about-fact strong{
      display:block;
      color:var(--cyan);
      font-size:13px;
      letter-spacing:.1em;
      text-transform:uppercase;
      margin-bottom:8px;
    }
    .about-fact span{
      color:var(--soft);
      line-height:1.45;
      font-weight:700;
    }
    @media (max-width:920px){
      .about-grid{grid-template-columns:1fr}
      .about-photo-wrap{max-width:520px}
      .about-facts{grid-template-columns:1fr}
    }
    @media (max-width:560px){
      .about-hero{padding:72px 0 52px}
      .about-card{padding:26px}
      .about-text{font-size:16px}
    }

  
    /* Über-mich Feinschliff */
    
    .about-photo-wrap{
      margin-top:0 !important;
      min-height:0 !important;
      align-self:start !important;
      background:linear-gradient(135deg, rgba(77,227,255,.42), rgba(180,108,255,.22), rgba(255,255,255,.10)) !important;
    }
    .about-photo{
      width:100% !important;
      height:auto !important;
      min-height:0 !important;
      display:block !important;
      border:0 !important;
      outline:0 !important;
      background:transparent !important;
      object-fit:cover !important;
      object-position:center top !important;
      aspect-ratio:4/5 !important;
    }
    
    .about-facts{
      grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
      align-items:stretch !important;
    }
    .about-fact{
      padding:18px 16px !important;
      min-width:0 !important;
    }
    .about-fact strong{
      font-size:12px !important;
      line-height:1.2 !important;
      margin-bottom:10px !important;
      letter-spacing:.09em !important;
      white-space:nowrap !important;
    }
    .about-fact span{
      display:block !important;
      font-size:15px !important;
      line-height:1.45 !important;
      word-break:normal !important;
      overflow-wrap:normal !important;
      hyphens:none !important;
    }
    @media (max-width:1100px){
      .about-facts{
        grid-template-columns:1fr !important;
      }
      .about-fact span{
        font-size:16px !important;
      }
    }
    @media (max-width:920px){
      .about-grid{
        gap:32px !important;
      }
      .about-photo-wrap{
        max-width:420px !important;
      }
    }

  
    /* Fact-Box Textfix */
    .about-facts{
      grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
      gap:14px !important;
    }
    .about-fact{
      min-width:0 !important;
      overflow:hidden !important;
      padding:18px 16px !important;
    }
    .about-fact strong{
      white-space:normal !important;
      overflow-wrap:anywhere !important;
    }
    .about-fact span{
      display:block !important;
      font-size:14px !important;
      line-height:1.42 !important;
      word-break:normal !important;
      overflow-wrap:break-word !important;
      hyphens:auto !important;
      max-width:100% !important;
    }
    @media (max-width:1200px){
      .about-facts{
        grid-template-columns:1fr !important;
      }
      .about-fact span{
        font-size:16px !important;
        line-height:1.45 !important;
      }
    }

  
    /* Animierte Info-Kästchen wie auf der Startseite */
    .about-fact{
      position:relative !important;
      overflow:hidden !important;
      transition:transform .26s ease, border-color .26s ease, background .26s ease, box-shadow .26s ease !important;
      isolation:isolate;
    }
    .about-fact::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(115deg, transparent 0%, transparent 38%, rgba(77,227,255,.12) 48%, transparent 58%, transparent 100%);
      transform:translateX(-120%);
      transition:transform .72s ease;
      pointer-events:none;
      z-index:1;
    }
    .about-fact::after{
      content:"";
      position:absolute;
      width:130px;
      height:130px;
      border-radius:999px;
      right:-54px;
      top:-54px;
      background:radial-gradient(circle, rgba(77,227,255,.16), transparent 68%);
      opacity:.85;
      animation:aboutFactOrb 7s ease-in-out infinite;
      z-index:0;
      pointer-events:none;
    }
    .about-fact:nth-child(2)::after{
      background:radial-gradient(circle, rgba(180,108,255,.15), transparent 68%);
      animation-delay:.55s;
    }
    .about-fact:nth-child(3)::after{
      background:radial-gradient(circle, rgba(109,125,255,.16), transparent 68%);
      animation-delay:1.1s;
    }
    .about-fact strong,
    .about-fact span{
      position:relative;
      z-index:2;
    }
    .about-fact:hover{
      transform:translateY(-6px);
      border-color:rgba(77,227,255,.34) !important;
      background:linear-gradient(180deg,rgba(255,255,255,.115),rgba(255,255,255,.052)) !important;
      box-shadow:0 26px 80px rgba(0,0,0,.30), 0 0 0 1px rgba(77,227,255,.08);
    }
    .about-fact:hover::before{
      transform:translateX(120%);
    }
    @keyframes aboutFactOrb{
      0%,100%{transform:translate(0,0) scale(1)}
      50%{transform:translate(-10px,10px) scale(1.08)}
    }
    @media (prefers-reduced-motion: reduce){
      .about-fact,
      .about-fact::before,
      .about-fact::after{
        animation:none !important;
        transform:none !important;
        transition:none !important;
      }
    }

  
/* Clean language switch */
.lang-switch{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.055);
}
.lang-switch a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:28px;
  padding:0 9px;
  border-radius:999px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  text-decoration:none;
}
.lang-switch a.active{
  color:#06101d;
  background:linear-gradient(135deg,var(--cyan),#B9F4FF);
}
.lang-switch a:hover{color:var(--text)}
.lang-switch a.active:hover{color:#06101d}

/* Fair apps section */
.fair-section{padding:82px 0;position:relative}
.fair-card{
  border-radius:42px;
  padding:44px;
  background:
    radial-gradient(circle at 18% 0%,rgba(77,227,255,.16),transparent 30%),
    radial-gradient(circle at 95% 90%,rgba(180,108,255,.13),transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 80px rgba(0,0,0,.28);
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:32px;
  align-items:center;
  overflow:hidden;
  position:relative;
}
.fair-card h2{margin-bottom:0;max-width:520px}
.fair-card p{color:var(--muted);font-size:18px;line-height:1.7;margin:0;position:relative;z-index:2}
.fair-points{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.fair-point{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.055);
  border-radius:22px;
  padding:18px;
  position:relative;
  overflow:hidden;
  transition:transform .26s ease,border-color .26s ease,background .26s ease,box-shadow .26s ease;
}
.fair-point:hover{
  transform:translateY(-5px);
  border-color:rgba(77,227,255,.34);
  background:linear-gradient(180deg,rgba(255,255,255,.115),rgba(255,255,255,.052));
  box-shadow:0 22px 70px rgba(0,0,0,.25),0 0 0 1px rgba(77,227,255,.08);
}
.fair-point strong{
  display:block;
  color:var(--cyan);
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.fair-point span{color:var(--soft);line-height:1.45;font-weight:700}
@media(max-width:920px){
  .fair-card{grid-template-columns:1fr;padding:30px;border-radius:30px}
  .fair-points{grid-template-columns:1fr}
}


/* About page fact boxes under portrait */
.about-grid{
  align-items:start !important;
}
.about-grid > div:first-child{
  align-self:start !important;
}
.about-grid > div:first-child .about-facts{
  margin-top:22px !important;
  grid-template-columns:1fr !important;
  gap:14px !important;
}
.about-grid > div:first-child .about-fact{
  min-height:auto !important;
}

@media (min-width:921px){
  .about-grid > div:first-child .about-facts{
    max-width:100% !important;
  }
}


/* About page final layout: image and fact boxes left, text card right */
.about-grid{
  display:grid !important;
  grid-template-columns:.9fr 1.1fr !important;
  gap:54px !important;
  align-items:start !important;
}
.about-left{
  display:flex !important;
  flex-direction:column !important;
  gap:22px !important;
  align-self:start !important;
}
.about-left .about-photo-wrap{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}
.about-left .about-facts{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:14px !important;
  margin-top:0 !important;
}
.about-left .about-fact{
  min-height:auto !important;
}
.about-card{
  align-self:start !important;
}
.about-card .about-facts{
  display:none !important;
}
@media (max-width:920px){
  .about-grid{
    grid-template-columns:1fr !important;
    gap:32px !important;
  }
  .about-left .about-photo-wrap{
    max-width:520px !important;
  }
}


/* =========================================================
   Responsive Mobile / Tablet Upgrade v8
   - keeps desktop design
   - adds mobile link menu
   - hides decorative hero dashboard on phones
   - makes cards/buttons/sections compact and tappable
========================================================= */




@media(max-width:720px){
  body{
    overflow-x:hidden!important;
    background:
      radial-gradient(circle at 20% 0%, rgba(77,227,255,.13), transparent 28%),
      radial-gradient(circle at 95% 20%, rgba(180,108,255,.10), transparent 34%),
      var(--bg)!important;
  }
  body::before{opacity:.28!important;background-size:58px 58px!important}

  .wrap{width:min(100% - 32px,1160px)!important;margin:0 auto!important}

  .nav{position:sticky!important;top:0;z-index:200;background:rgba(7,10,19,.92)!important}
  .nav-inner{min-height:72px!important;gap:12px!important}
  .brand{min-width:0!important;flex:1 1 auto!important}
  .brand-logo-img{width:218px!important;max-width:66vw!important}
  .nav-links{display:none!important}
  .mobile-menu-toggle{display:inline-flex!important;flex:0 0 auto}

  .mobile-nav-panel{
    display:none;
    position:fixed;
    top:76px;
    left:16px;
    right:16px;
    z-index:199;
    padding:14px;
    border-radius:24px;
    background:rgba(7,10,19,.96);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 24px 80px rgba(0,0,0,.42);
    backdrop-filter:blur(18px);
  }
  body.mobile-nav-open .mobile-nav-panel{display:grid;gap:10px}
  .mobile-nav-panel a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:48px;
    padding:0 14px;
    border-radius:16px;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.08);
    font-size:15px;
  }
  .mobile-nav-panel a::after{content:"→";color:var(--cyan)}
  .mobile-nav-panel .mobile-lang{display:flex;gap:8px;padding-top:8px}
  .mobile-nav-panel .mobile-lang a{flex:1;justify-content:center}
  .mobile-nav-panel .mobile-lang a::after{display:none}

  .hero{padding:54px 0 42px!important}
  .hero-grid{display:grid!important;grid-template-columns:1fr!important;gap:0!important}
  .hero-grid > .visual{display:none!important}
  .eyebrow{
    white-space:normal!important;
    max-width:100%!important;
    font-size:12px!important;
    line-height:1.35!important;
    padding:8px 12px!important;
    margin-bottom:20px!important;
  }
  .hero-logo-showcase{margin:20px 0 18px!important}
  .hero-logo-showcase img{width:100%!important;max-width:390px!important}
  .claim,h1{
    font-size:clamp(32px,10.5vw,44px)!important;
    line-height:1.04!important;
    letter-spacing:-.055em!important;
  }
  .lead{
    font-size:17px!important;
    line-height:1.62!important;
    margin-bottom:26px!important;
    max-width:100%!important;
  }
  .hero-actions{display:flex!important;gap:10px!important;margin-bottom:22px!important}
  .button{min-height:46px!important;padding:0 16px!important;font-size:14px!important}
  .hero-actions .button{flex:1 1 auto}
  .tags{gap:8px!important}.tag{padding:8px 10px!important;font-size:12px!important}

  section{padding:50px 0!important}
  .section-head{margin-bottom:24px!important;max-width:100%!important}
  .kicker{font-size:12px!important;letter-spacing:.16em!important}
  h2{
    font-size:clamp(32px,9.5vw,42px)!important;
    line-height:1.05!important;
    letter-spacing:-.055em!important;
  }
  .section-head p{font-size:17px!important;line-height:1.62!important}

  .cards,.steps,.project-grid{grid-template-columns:1fr!important;gap:16px!important}
  .card,.step,.project,.panel,.fair-card,.cta{
    border-radius:26px!important;
    padding:22px!important;
    min-height:auto!important;
  }
  .card h3,.step h3,.project h3{font-size:24px!important;line-height:1.12!important}
  .card p,.step p,.project p,.panel,.list-item{font-size:16.5px!important;line-height:1.58!important}
  .icon{width:50px!important;height:50px!important;border-radius:16px!important;margin-bottom:24px!important}

  .split,.cta{grid-template-columns:1fr!important}
  .list{gap:18px!important}
  .check{width:30px!important;height:30px!important;font-size:18px!important}

  .fair-card{grid-template-columns:1fr!important;gap:22px!important}
  .fair-card p{font-size:16.5px!important;line-height:1.62!important}
  .fair-points{grid-template-columns:1fr!important}
  .fair-point{padding:18px!important}

  .app-project .app-icon-img,.detail-icon{
    width:96px!important;
    height:96px!important;
    border-radius:22px!important;
  }

  .about-grid,.app-detail-grid{grid-template-columns:1fr!important;gap:28px!important}
  .about-left{gap:18px!important}
  .about-photo-wrap{max-width:none!important;border-radius:28px!important}
  .about-photo{border-radius:27px!important;aspect-ratio:4/4.8!important}
  .about-card,.legal-card,.subpage-panel{
    border-radius:28px!important;
    padding:24px!important;
  }
  .about-card h1,.legal-card h1,.app-detail-hero h1{
    font-size:clamp(40px,12vw,56px)!important;
    letter-spacing:-.065em!important;
  }
  .about-text,.legal-card p,.legal-card li,.subpage-panel p,.subpage-panel li{
    font-size:16px!important;
    line-height:1.65!important;
  }
  .about-left .about-facts{grid-template-columns:1fr!important}
  .about-fact span{font-size:15px!important}

  .store-actions{gap:10px!important}
  .store-button{width:100%!important}

  .cta{
    gap:22px!important;
    text-align:left!important;
  }
  .cta .button{width:100%!important}

  footer{padding:28px 0 calc(44px + env(safe-area-inset-bottom))!important}
  .foot{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    font-size:14px!important;
    line-height:1.5!important;
    word-break:break-word!important;
  }
  .foot span{display:block!important}
}

@media(min-width:721px) and (max-width:1100px){
  .wrap{width:min(100% - 48px,1160px)!important}
  .hero-grid{grid-template-columns:1fr!important;gap:40px!important}
  .visual{max-width:620px}
  .project-grid,.cards,.steps{grid-template-columns:1fr 1fr!important}
  .split,.cta{grid-template-columns:1fr!important}
  .nav-links{gap:16px!important}
  .brand-logo-img{width:260px!important}
}


/* Mobile menu visibility fix v9 */
@media(max-width:720px){
  .nav-inner{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    width:min(100% - 32px,1160px)!important;
  }
  .brand{
    flex:0 1 auto!important;
    min-width:0!important;
    max-width:calc(100% - 58px)!important;
  }
  .brand-logo-img{
    width:205px!important;
    max-width:calc(100vw - 104px)!important;
  }
  .mobile-menu-toggle{
    display:inline-flex!important;
    position:relative!important;
    z-index:260!important;
    flex:0 0 44px!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    margin-left:auto!important;
    color:#F4F7FB!important;
    background:rgba(255,255,255,.08)!important;
    border:1px solid rgba(255,255,255,.18)!important;
  }
  .mobile-menu-toggle::before{
    content:"☰";
    font-size:22px;
    line-height:1;
  }
  .mobile-menu-toggle{
    font-size:0!important;
  }
  body.mobile-nav-open .mobile-menu-toggle::before{
    content:"×";
    font-size:28px;
  }
  .mobile-nav-panel{
    top:76px!important;
    display:none;
  }
  body.mobile-nav-open .mobile-nav-panel{
    display:grid!important;
  }
}


/* iPad portrait / tablet menu fix v10 */
@media (min-width:721px) and (max-width:920px){
  .nav{
    position:sticky!important;
    top:0;
    z-index:200;
    background:rgba(7,10,19,.92)!important;
  }
  .nav-inner{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    min-height:76px!important;
    gap:16px!important;
  }
  .brand{
    min-width:0!important;
    flex:1 1 auto!important;
    max-width:calc(100% - 64px)!important;
  }
  .brand-logo-img{
    width:260px!important;
    max-width:calc(100vw - 140px)!important;
  }
  .nav-links{
    display:none!important;
  }
  .mobile-menu-toggle{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    position:relative!important;
    z-index:260!important;
    flex:0 0 46px!important;
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    margin-left:auto!important;
    border-radius:15px!important;
    color:#F4F7FB!important;
    background:rgba(255,255,255,.08)!important;
    border:1px solid rgba(255,255,255,.18)!important;
    cursor:pointer!important;
    font-size:0!important;
  }
  .mobile-menu-toggle::before{
    content:"☰";
    font-size:23px;
    line-height:1;
  }
  body.mobile-nav-open .mobile-menu-toggle::before{
    content:"×";
    font-size:30px;
  }
  .mobile-nav-panel{
    display:none;
    position:fixed;
    top:82px;
    left:24px;
    right:24px;
    z-index:199;
    padding:16px;
    border-radius:24px;
    background:rgba(7,10,19,.96);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 24px 80px rgba(0,0,0,.42);
    backdrop-filter:blur(18px);
  }
  body.mobile-nav-open .mobile-nav-panel{
    display:grid!important;
    gap:10px;
  }
  .mobile-nav-panel a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:50px;
    padding:0 16px;
    border-radius:16px;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.08);
    color:var(--soft);
    font-weight:800;
    text-decoration:none;
  }
  .mobile-nav-panel a::after{
    content:"→";
    color:var(--cyan);
  }
  .mobile-nav-panel .mobile-lang{
    display:flex;
    gap:8px;
    padding-top:8px;
  }
  .mobile-nav-panel .mobile-lang a{
    flex:1;
    justify-content:center;
  }
  .mobile-nav-panel .mobile-lang a::after{
    display:none;
  }
}


/* Mobile menu click fix v11 */
@media (max-width: 920px){
  .nav{
    z-index:10000!important;
  }
  .nav-inner{
    position:relative!important;
    z-index:10002!important;
  }
  .mobile-menu-toggle{
    display:inline-flex!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
    -webkit-tap-highlight-color:transparent;
    position:relative!important;
    z-index:10003!important;
  }
  .mobile-nav-panel{
    z-index:10001!important;
    pointer-events:auto!important;
  }
  body.mobile-nav-open::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:9999;
    background:rgba(0,0,0,.22);
    backdrop-filter:blur(2px);
  }
  body.mobile-nav-open .mobile-nav-panel{
    display:grid!important;
  }
}


/* KlarerTag + SME positioning refinements */
@media (min-width:1101px){
  .project-grid{
    grid-template-columns:repeat(5, minmax(0,1fr)) !important;
  }
  .project{
    min-height:360px;
  }
}
@media (min-width:721px) and (max-width:1100px){
  .project-grid{
    grid-template-columns:1fr 1fr !important;
  }
}