/* ─── Blauer Neue (merk-thread, van het thema) ─── */
  @font-face{font-family:"Blauer Neue";src:url(../fonts/BlauerNue-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
  @font-face{font-family:"Blauer Neue";src:url(../fonts/BlauerNue-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
  @font-face{font-family:"Blauer Neue";src:url(../fonts/BlauerNue-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
  @font-face{font-family:"Blauer Neue";src:url(../fonts/BlauerNue-ExtraBold.woff2) format("woff2");font-weight:800;font-display:swap}
  @font-face{font-family:"Blauer Neue";src:url(../fonts/BlauerNue-Heavy.woff2) format("woff2");font-weight:900;font-display:swap}

  :root{
    --bg:#0e0e10; --panel:#161619; --panel-2:#1c1c1f; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
    --ink:#f4f4f5; --soft:#c7c7cc; --mut:#8b8b93; --dim:#63636b;
    --green:#10b981; --green-d:#0d9488; --green-ink:#ffffff;
    --head:"Blauer Neue","Inter",-apple-system,system-ui,sans-serif;
    --mono:"Blauer Neue","Inter",sans-serif;
    --r:18px; --r-lg:26px; --ease:cubic-bezier(.22,.61,.36,1);
    --maxw:1240px; --pad:40px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:"Inter",sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
  h1,h2,h3{font-family:var(--head);font-weight:800;line-height:1.03;letter-spacing:-.01em;margin:0}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
  .grn{color:var(--green)}

  /* ─── Label / eyebrow-laag ─── */
  .tag{font-family:var(--head);font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--mut);text-transform:none}
  .eyebrow{font-family:var(--head);font-weight:600;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);display:inline-block}
  

  /* ─── Knoppen ─── */
  .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--head);font-weight:600;font-size:16px;
       padding:13px 20px;border-radius:var(--r);border:1px solid var(--line-2);color:var(--ink);
       background:transparent;cursor:pointer;transition:background .2s var(--ease),border-color .2s,transform .2s}
  .btn:hover{background:rgba(255,255,255,.06);transform:translateY(-1px)}
  .btn svg{width:16px;height:16px}
  .btn.solid{background:var(--green);color:var(--green-ink);border-color:var(--green)}
  .btn.solid:hover{background:var(--green-d);border-color:var(--green-d)}

  /* ─── Sticky header ─── */
  header.top{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;transition:background .3s var(--ease),border-color .3s;border-bottom:1px solid transparent}
  header.top.scrolled{background:rgba(14,14,16,.9);backdrop-filter:saturate(160%) blur(14px);border-bottom-color:var(--line)}
  .topin{display:flex;align-items:center;gap:24px;height:88px}
  .brand{display:flex;align-items:center;gap:11px;font-family:var(--head);font-weight:800;font-size:18px;letter-spacing:-.02em}
  .brand .mk{display:grid;place-items:center;color:var(--green)}
  .brandimg{height:36px;width:auto;display:block}
  .brand .mk svg{width:26px;height:26px;stroke-width:2.6}
  .brand .sub{font-family:var(--head);font-size:10.5px;color:var(--mut);font-weight:400;letter-spacing:.02em;margin-left:2px}
  .topnav{display:flex;gap:26px;margin-left:14px}
  .topnav>a,.hasmega>.mtrig{font-size:14.5px;color:var(--soft);font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:6px;background:none;border:0;font-family:inherit;padding:0}
  .topnav>a:hover,.hasmega:hover>.mtrig,.hasmega:focus-within>.mtrig{color:var(--ink)}
  .hasmega>.mtrig svg{width:13px;height:13px;transition:transform .2s}
  .hasmega:hover>.mtrig svg,.hasmega:focus-within>.mtrig svg{transform:rotate(180deg)}
  /* mega menu */
  .hasmega{position:relative}
  .mega{position:absolute;top:calc(100% + 14px);left:-16px;width:560px;background:var(--panel);border:1px solid var(--line-2);
        border-radius:var(--r-lg);padding:14px;box-shadow:0 40px 80px -30px rgba(0,0,0,.7);
        opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s var(--ease),transform .18s,visibility .18s;z-index:60}
  .hasmega:hover .mega,.hasmega:focus-within .mega{opacity:1;visibility:visible;transform:none}
  .mega::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}      /* hover-brug */
  .mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .mega-item{display:flex;gap:13px;align-items:flex-start;padding:12px;border-radius:12px;transition:background .15s}
  .mega-item:hover{background:var(--panel-2)}
  .mega-item .mi{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:18px;background:var(--panel-2);border:1px solid var(--line-2)}
  .mega-item.live .mi{background:linear-gradient(180deg,rgba(16,185,129,.18),transparent);border-color:rgba(16,185,129,.35)}
  .mega-item b{font-family:var(--head);font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:7px}
  .mega-item .st{font-family:var(--head);font-size:10px;padding:1px 6px;border-radius:999px;border:1px solid var(--line-2);color:var(--mut)}
  .mega-item.live .st{color:var(--green);border-color:rgba(16,185,129,.4)}
  .mega-item i{display:block;color:var(--mut);font-size:12.5px;font-style:normal;line-height:1.4;margin-top:3px}
  .mega-foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding:12px;border-top:1px solid var(--line);
             font-family:var(--head);font-size:12.5px;color:var(--mut)}
  .mega-foot a{color:var(--green);display:inline-flex;gap:6px;align-items:center}
  .topright{margin-left:auto;display:flex;align-items:center;gap:18px}
  .topright .btn{padding:10px 18px;font-size:14px}
  .lang{font-family:var(--head);font-size:15px;color:var(--mut)}
  .lang a{color:var(--mut)}.lang a:hover,.lang .on{color:var(--green)}
  .login{display:inline-flex;align-items:center;gap:7px;font-family:var(--head);font-size:16px;font-weight:500;color:var(--soft)}
  .login svg{width:15px;height:15px}
  .login:hover{color:var(--ink)}
  /* suite-launcher (waffle, Google-Workspace-stijl) */
  .applauncher{position:relative;order:9;margin-left:2px}
  .applaunch-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:none;border:1px solid var(--line-2);color:var(--soft);cursor:pointer;transition:background .15s,color .15s}
  .applaunch-btn:hover{background:var(--panel-2);color:var(--ink)}
  .applaunch-btn svg{width:19px;height:19px}
  .applaunch-panel{position:absolute;top:calc(100% + 12px);right:-6px;width:344px;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:12px;box-shadow:0 40px 80px -30px rgba(0,0,0,.75);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s var(--ease),transform .18s,visibility .18s;z-index:70}
  .applauncher.open .applaunch-panel{opacity:1;visibility:visible;transform:none}
  @media(max-width:860px){.applauncher{display:none}}
  .applaunch-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border-radius:12px;background:var(--panel-2);color:var(--green);font-family:var(--head);font-weight:700;font-size:14px}
  .applaunch-head svg{width:16px;height:16px;flex:none}
  .applaunch-sec{font-family:var(--head);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:15px 6px 8px}
  .applaunch-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
  .applaunch-grid a{display:flex;flex-direction:column;align-items:center;gap:7px;padding:15px 8px;border-radius:12px;text-align:center;transition:background .15s}
  .applaunch-grid a:hover{background:var(--panel-2)}
  .applaunch-grid .ico{font-size:24px;line-height:1}
  .applaunch-grid b{font-family:var(--head);font-weight:600;font-size:12.5px;color:var(--ink)}
  .applaunch-grid i{font-style:normal;font-size:10px;color:var(--mut)}
  .applaunch-grid i.live{color:var(--green);font-weight:600}
  .applaunch-fam{display:flex;gap:7px;padding:2px 4px 4px;flex-wrap:wrap}
  .applaunch-fam a{font-family:var(--head);font-size:12.5px;color:var(--soft);padding:7px 12px;border-radius:9px;background:var(--panel-2);transition:color .15s}
  .applaunch-fam a:hover{color:var(--ink)}
  @media(max-width:860px){.topnav{display:none}}
  /* mobiel hamburger-menu */
  .mobtoggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
  .hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;margin-left:2px}
  .hamburger span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .2s}
  .mobmenu{display:none;flex-direction:column;padding:6px 40px 26px;background:rgba(14,14,16,.98);backdrop-filter:saturate(160%) blur(14px);border-top:1px solid var(--line)}
  .mobmenu a{padding:15px 2px;font-family:var(--head);font-size:17px;font-weight:600;color:var(--soft);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px}
  .mobmenu a:last-child{border-bottom:none}
  .mobmenu a:hover{color:var(--ink)}
  .mobmenu .login{color:var(--green)}
  .mobmenu .login svg{width:17px;height:17px}
  @media(max-width:860px){
    .topin{height:64px}
    .hamburger{display:flex}
    .topright .btn.solid{display:none}
    .topright .login{display:none}
    .mobtoggle:checked ~ .mobmenu{display:flex}
    .mobtoggle:checked ~ .topin .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .mobtoggle:checked ~ .topin .hamburger span:nth-child(2){opacity:0}
    .mobtoggle:checked ~ .topin .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  }

  /* ─── Hero ─── */
  .hero{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(14,14,16,.85) 0%,rgba(14,14,16,.25) 13%,transparent 26%),linear-gradient(90deg,rgba(14,14,16,.97) 0%,rgba(14,14,16,.9) 42%,rgba(14,14,16,.5) 100%),url(img/tech-hero-v2.jpg) right center/cover no-repeat,#0e0e10}
  .hero::before{content:"";position:absolute;inset:0;
    background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:22px 22px;
    -webkit-mask-image:radial-gradient(120% 90% at 25% 0%,#000 30%,transparent 78%);mask-image:radial-gradient(120% 90% at 25% 0%,#000 30%,transparent 78%);opacity:.9}
  .hero::after{content:"";position:absolute;top:-30%;right:-10%;width:60vw;height:60vw;pointer-events:none;
    background:radial-gradient(closest-side,rgba(16,185,129,.14),transparent 70%);filter:blur(10px)}
  .heroin{position:relative;padding-top:96px;padding-bottom:78px}
  .hero h1{font-size:clamp(38px,6.4vw,80px);font-weight:900;letter-spacing:-.03em;margin:22px 0 0;max-width:16ch}
  .hero .lead{font-size:clamp(16px,1.5vw,19px);color:var(--soft);max-width:58ch;margin:26px 0 32px;line-height:1.55}
  .hero .lead b{color:var(--ink);font-weight:600}
  .hero .cta{display:flex;gap:12px;flex-wrap:wrap}

  /* ticker / manifest-strip */
  .ticker{margin-top:48px;background:rgba(255,255,255,.02);border-radius:12px;overflow:hidden;position:relative}
  .ticker .row{display:flex;gap:40px;white-space:nowrap;padding:15px 0;font-family:var(--head);font-size:13px;color:var(--mut);
    width:max-content;animation:scroll 34s linear infinite}
  .ticker .row span{display:inline-flex;gap:40px}
  .ticker b{color:var(--green);font-weight:500}
  @keyframes scroll{to{transform:translateX(-50%)}}
  @media(prefers-reduced-motion:reduce){.ticker .row{animation:none}}

  /* ─── Sectie-basis ─── */
  section{padding:92px 0}
  .shead{max-width:760px}
  .shead h2{font-size:clamp(28px,3.6vw,46px);font-weight:800;margin:16px 0 0;letter-spacing:-.02em}
  .shead p{color:var(--soft);font-size:18px;margin:16px 0 0;line-height:1.55}

  /* ─── Positionering + familie-triade ─── */
  .fam{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
  .fam .cell{display:block;border:1px solid var(--line);border-radius:var(--r);padding:22px;background:var(--panel);
             transition:border-color .2s var(--ease),transform .2s,background .2s}
  .fam a.cell:hover{border-color:var(--line-2);transform:translateY(-2px);background:var(--panel-2)}
  .fam .cell.me{border-color:rgba(16,185,129,.4);background:linear-gradient(180deg,rgba(16,185,129,.06),var(--panel))}
  .fam a.cell.me:hover{border-color:rgba(16,185,129,.7)}
  .fam .cell .k .arw{float:right;color:var(--dim);transition:color .2s,transform .2s}
  .fam a.cell:hover .k .arw{color:var(--green);transform:translateX(2px)}
  .fam .k{font-family:var(--head);font-size:12px;color:var(--dim)}
  .fam .n{font-family:var(--head);font-weight:700;font-size:17px;margin:8px 0 6px}
  .fam .cell.me .n{color:var(--green)}
  .fam .d{color:var(--mut);font-size:14.5px;line-height:1.5}
  @media(max-width:820px){.fam{grid-template-columns:1fr}}

  /* ─── Producten: de tools-suite (app-tiles) ─── */
  .tools{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:44px}
  .tool{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);
        padding:28px;display:flex;gap:20px;align-items:flex-start;transition:border-color .25s var(--ease),transform .25s,background .25s}
  .tool:hover{border-color:var(--line-2);transform:translateY(-3px);background:var(--panel-2)}
  .tool .ico{flex:none;width:54px;height:54px;border-radius:15px;display:grid;place-items:center;font-size:26px;
             background:var(--panel-2);border:1px solid var(--line-2)}
  .tool.live .ico{background:linear-gradient(180deg,rgba(16,185,129,.18),rgba(16,185,129,.04));border-color:rgba(16,185,129,.35)}
  .tool .body{flex:1;min-width:0}
  .tool .name{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .tool .name h3{font-size:20px;font-weight:700}
  .tool .st{font-family:var(--head);font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--line-2);color:var(--mut)}
  .tool.live .st{color:var(--green);border-color:rgba(16,185,129,.4);background:rgba(16,185,129,.08)}
  .tool p{color:var(--mut);font-size:14.5px;line-height:1.55;margin:10px 0 14px}
  .tool .go{font-family:var(--head);font-size:13px;color:var(--soft);display:inline-flex;align-items:center;gap:6px}
  .tool:hover .go{color:var(--green)}
  .tool.soon{border-style:dashed;opacity:.86}
  @media(max-width:820px){.tools{grid-template-columns:1fr}}

  /* ─── Pull-quote (het onthoudbare moment) ─── */
  .quote{padding:110px 0;background:radial-gradient(72% 88% at 50% 50%,rgba(16,185,129,.10),transparent 68%)}
  .quote .tag{margin-bottom:24px;display:block}
  .quote blockquote{margin:0;max-width:20ch;font-family:var(--head);font-weight:800;letter-spacing:-.02em;
    font-size:clamp(30px,4.8vw,58px);line-height:1.06}
  .quote blockquote .grn{display:block}
  .quote .attr{margin-top:30px;color:var(--mut);font-size:16px;max-width:52ch}

  /* ─── Capabilities: wat we bouwen (2 kolommen) ─── */
  .caps{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:44px}
  .cap{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);padding:32px}
  .cap h3{font-size:22px;font-weight:800;margin-bottom:6px}
  .cap .lede{color:var(--mut);font-size:15px;line-height:1.55;margin-bottom:20px}
  .cap ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
  .cap li{font-family:var(--head);font-size:13.5px;color:var(--soft);display:flex;gap:10px;align-items:flex-start;line-height:1.4}
  .cap li::before{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:var(--green);margin-top:7px}
  .stack{margin-top:28px;text-align:center;font-family:var(--head);font-size:12.5px;letter-spacing:.03em;color:var(--mut)}
  .stack b{color:var(--soft);font-weight:700}
  @media(max-width:820px){.caps{grid-template-columns:1fr}}

  /* ─── Cases ─── */
  .cases{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
  .case{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--panel);
        transition:transform .25s var(--ease),border-color .25s}
  .case:hover{transform:translateY(-4px);border-color:var(--line-2)}
  .case .thumb{aspect-ratio:16/10;background:#000 center/cover no-repeat;position:relative}
  .case .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(20,21,23,.55))}
  .case .cbody{padding:20px 22px 24px}
  .case .ctag{font-family:var(--head);font-size:11.5px;color:var(--mut);letter-spacing:.08em;text-transform:uppercase;font-weight:600}
  .case h3{font-size:18px;font-weight:700;margin:9px 0 7px;line-height:1.2}
  .case p{color:var(--mut);font-size:13.5px;line-height:1.5;margin:0 0 14px}
  .case .go{font-family:var(--head);font-size:12.5px;color:var(--soft);display:inline-flex;gap:6px;align-items:center}
  .case:hover .go{color:var(--green)}
  @media(max-width:820px){.cases{grid-template-columns:1fr}}

  /* ─── Makers ─── */
  .makers{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:start}
  .makers .r{padding-left:0}
  .makers .r p{font-family:var(--head);font-size:14px;color:var(--mut);margin:0 0 12px}
  .makers .r b{color:var(--ink)}
  @media(max-width:820px){.makers{grid-template-columns:1fr}.makers .r{padding:0}}

  /* ─── CTA ─── */
  .cta-band{text-align:center;padding:104px 0;background:radial-gradient(85% 115% at 50% 118%,rgba(16,185,129,.16),transparent 62%)}
  .cta-band h2{font-size:clamp(30px,4.4vw,52px);font-weight:900;letter-spacing:-.02em;max-width:18ch;margin:0 auto}
  .cta-band p{color:var(--soft);max-width:54ch;margin:22px auto 30px;font-size:18px}
  .cta-band .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

  /* ─── Footer (afgestemd op de Subtitle Studio-footer) ─── */
  footer{background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.20) 100%),#111;color:#a1a1aa;padding:96px 0 46px;border-radius:26px 26px 0 0;position:relative;overflow:hidden}
  .foot-top{display:grid;grid-template-columns:.8fr 1.7fr;gap:50px;align-items:start;padding-bottom:64px;border-bottom:1px solid rgba(255,255,255,.1)}
  .foot-top h2{color:#fff;font-family:var(--head);font-size:clamp(18px,1.7vw,23px);font-weight:500;line-height:1.28;max-width:26ch;margin:0 0 26px}
  .fcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}
  .fcol h4{font-family:var(--head);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#71717a;margin:0 0 16px;font-weight:600}
  .fcol a{display:block;font-family:var(--head);font-size:15px;color:#d4d4d8;margin-bottom:11px;transition:color .2s;padding:0}
  .fcol a:hover{color:#fff}
  .foot-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding-top:30px;margin-top:30px;font-family:var(--head);font-size:13.5px;color:#71717a}
  @media(max-width:820px){.foot-top{grid-template-columns:1fr;gap:34px}.fcols{grid-template-columns:repeat(2,1fr);gap:30px 22px}}

  /* mobiele side-padding + kop-schaal */
  @media(max-width:600px){
    :root{--pad:22px}
    .tool p,.case p,.cap .lede,.fam .d,.makers .r p{font-size:16px}
    .tool .go,.case .go,.fcol a,.mobmenu a{font-size:16px}
    .lang{font-size:16px}
    .hero h1{font-size:clamp(30px,7.6vw,42px)}
    .hero .lead{font-size:16px}
    .heroin{padding-top:88px;padding-bottom:56px}
    .mobmenu{padding-left:var(--pad);padding-right:var(--pad)}
    .quote{padding:72px 0}
    .quote blockquote{font-size:clamp(23px,6.6vw,30px);max-width:none}
    .shead h2{font-size:clamp(25px,6.4vw,34px)}
    .makers .l h2{font-size:clamp(25px,6.4vw,34px)}
  }
  /* mobiele onderbalk — 1:1 met de Subtitle Studio-mobielbalk */
  .hbar{display:none}
  @media(max-width:860px){
    .hbar{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:800;
      background:rgba(14,14,16,.94);backdrop-filter:saturate(160%) blur(16px);border:1px solid rgba(255,255,255,.12);
      border-radius:22px;padding:7px;justify-content:space-between;align-items:stretch;gap:4px;
      box-shadow:0 18px 44px rgba(0,0,0,.45);transform:translateY(150%);transition:transform .4s var(--ease)}
    .hbar.show{transform:none}
    .hbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#d4d4d8;
      font-family:var(--head);font-size:10.5px;font-weight:600;padding:8px 6px;border-radius:16px;flex:1}
    .hbar a svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.85;fill:none;stroke-linecap:round;stroke-linejoin:round}
    .hbar a:active{background:rgba(255,255,255,.06)}
    .hbar a.hbar-cta{background:linear-gradient(135deg,#10b981,#0d9488);color:#fff}
    .hbar a.hbar-cta svg{stroke-width:2.4}
    footer{padding-bottom:96px}
  }
  .mega-item .mi{background:none;border:none}
  .mega-item .mi img{width:38px;height:38px;object-fit:contain;display:block}
  .applaunch-grid .ico img{width:38px;height:38px;object-fit:contain;display:block}
  .tool .ico{background:none;border:none}
  .tool .ico img{width:54px;height:54px;object-fit:contain;display:block}
  :focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}