:root{
  --page:#0b0b0c;--ink:#f3f2ee;--ink2:#a3a19b;--ink3:#7c7a75;--line:rgba(255,255,255,.09);
  --dot:#f3f2ee;
}
[data-app=maczones]{--a-bg:#1b2539;--a-ink:#EEF1FA;--a-ink2:#9AA5C9;--a-acc:#6D95FF;--a-on:#0b1020}
[data-app=turny]{--a-bg:linear-gradient(#e39c8e 32%,#b9688a 78%,#7d5585);--a-ink:#2A1610;--a-ink2:#5E2F27;--a-acc:#FF6A3D;--a-on:#2A1610}
[data-app=quicktick]{--a-bg:linear-gradient(#3b2636 30%,#4f2e3b);--a-ink:#F4EAF0;--a-ink2:#C2A9B8;--a-acc:#3DDC84;--a-on:#06200f}
[data-app=blipjar]{--a-bg:#111317;--a-ink:#E2E2E9;--a-ink2:#9A9EA8;--a-acc:#A8C8FF;--a-on:#0d1a33}
[data-app=clipfield]{--a-bg:#20242e;--a-ink:#ECEDF3;--a-ink2:#A3A7B5;--a-acc:#8B7CFF;--a-on:#0f0c3a}
[data-app=tudo]{--a-bg:#14161e;--a-ink:#C0CAF5;--a-ink2:#7E86AA;--a-acc:#FFB23E;--a-on:#1a1205}
[data-app=windock]{--a-bg:#0d2248;--a-ink:#EEF3FA;--a-ink2:#9FB2CF;--a-acc:#0067C0;--a-on:#fff}
[data-app=miniwrite]{--a-bg:#FBFBF9;--a-ink:#1F2620;--a-ink2:#5F5F52;--a-acc:#2F5D46;--a-on:#F5F1E6}
[data-app=slidebox]{--a-bg:#efebe3;--a-ink:#141414;--a-ink2:#5C5850;--a-acc:#141414;--a-on:#D6F25C}

*{box-sizing:border-box}
html{background:var(--page);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font-family:"Schibsted Grotesk",system-ui,sans-serif;font-size:16px;-webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:8px}
.wrap{max-width:1380px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:20px;top:12px;z-index:10;background:var(--ink);color:var(--page);padding:8px 12px}

/* Header */
.top{display:flex;align-items:center;justify-content:space-between;padding:22px 0}
.mark{display:flex;align-items:baseline;font-weight:800;font-size:23px;letter-spacing:-.045em;text-decoration:none}
.mark i{width:8px;height:8px;border-radius:50%;margin-left:2px;background:var(--dot);transition:background .35s}
.top nav{display:flex;gap:24px;font-size:15px}
.top nav a{color:var(--ink2);text-decoration:none;transition:color .2s}
.top nav a:hover{color:var(--ink)}

/* Hero */
.hero{padding:88px 0 40px}
.hero h1{margin:0;font-size:clamp(40px,6vw,84px);line-height:.98;letter-spacing:-.05em;font-weight:700;max-width:17ch;text-wrap:balance}
.hero p{margin:24px 0 0;font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--ink2);max-width:46ch}

/* Groups */
.group{padding-top:56px}
.group-head{display:flex;align-items:baseline;gap:12px;padding:0 4px 16px}
.group-head h2{margin:0;font-size:15px;font-weight:600;letter-spacing:0}
.group-head span{font-size:15px;color:var(--ink3)}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:24px}
.s2{grid-column:span 2}.s3{grid-column:span 3}.s4{grid-column:span 4}.s6{grid-column:span 6}

/* Cards */
.card{position:relative;display:flex;flex-direction:column;height:620px;border-radius:28px;background:var(--a-bg);color:var(--a-ink);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.card.short{height:540px}
.head{display:flex;align-items:flex-start;gap:16px;padding:26px 26px 22px}
.ic{flex:none;width:48px;height:48px;border-radius:13px;display:grid;place-items:center;background:var(--a-acc);color:var(--a-on)}
.ic svg{width:26px;height:26px}
.ic.real{background:none;overflow:visible}
.ic.real img{display:block;width:100%;height:100%;border-radius:12px}
.ic.real:has(img:not([class])){border-radius:12px;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.ic.real img.pad{width:122%;height:122%;margin:-11%;border-radius:0}
.ic.real img.pad5{width:111%;height:111%;margin:-5.5%;border-radius:0}
.title{min-width:0}
.title h3{margin:0;font-size:28px;line-height:1.05;letter-spacing:-.035em;font-weight:700}
.title p{margin:6px 0 0;font-size:16px;line-height:1.35;color:var(--a-ink2)}
.facts{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0;list-style:none;font-size:13px;color:var(--a-ink2)}
.facts li{padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--a-ink) 8%,transparent)}
.facts b{font-weight:600;color:var(--a-ink)}
.facts abbr{text-decoration:none}
.cta{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;padding:10px 15px;border-radius:999px;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;background:color-mix(in srgb,var(--a-ink) 9%,transparent);transition:background .2s,color .2s}
.cta svg{width:14px;height:14px;transition:transform .2s}
.cta:hover{background:var(--a-acc);color:var(--a-on)}
.cta:hover svg{transform:translate(2px,-2px)}
/* Screenshots: one real moment per app, shown larger than life and running off the card edge.
   Images sit at 1 image px per CSS px; the fades only show where an image ends inside the card. */
.shot{position:relative;flex:1;min-height:0;overflow:hidden}
.shot img{position:absolute;top:0;left:0;max-width:none;height:auto;user-select:none;-webkit-user-drag:none;
  -webkit-mask-image:linear-gradient(transparent,#000 48px),linear-gradient(90deg,#000 calc(100% - 64px),transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(transparent,#000 48px),linear-gradient(90deg,#000 calc(100% - 64px),transparent);mask-composite:intersect}
[data-app=maczones] .shot img{-webkit-mask-image:linear-gradient(transparent,#000 70px);mask-image:linear-gradient(transparent,#000 70px)}
[data-app=turny] .shot img{left:50%;transform:translateX(-50%);-webkit-mask-image:linear-gradient(transparent,#000 36px),linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(transparent,#000 36px),linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
[data-app=quicktick] .shot img{left:0;top:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px),linear-gradient(transparent,#000 36px);mask-image:linear-gradient(90deg,transparent,#000 36px),linear-gradient(transparent,#000 36px)}
[data-app=clipfield] .shot img{left:12px}
[data-app=tudo] .shot img{left:14px}
[data-app=blipjar] .shot img{left:0;width:100%;-webkit-mask-image:linear-gradient(transparent,#000 48px);mask-image:linear-gradient(transparent,#000 48px)}
[data-app=windock] .shot img{top:auto;bottom:0;-webkit-mask-image:linear-gradient(transparent,#000 60px),linear-gradient(90deg,transparent,#000 60px);mask-image:linear-gradient(transparent,#000 60px),linear-gradient(90deg,transparent,#000 60px)}

/* Wide card: text left, demo right */
.card.wide{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.6fr);height:580px}
.card.wide .head{flex-direction:column;justify-content:space-between;padding:34px}
.card.wide .title h3{font-size:clamp(34px,3.4vw,52px)}
.card.wide .title p{font-size:19px;color:var(--a-ink);margin-top:10px;max-width:20ch;line-height:1.3}
.facts code{font:500 12.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--a-ink);background:color-mix(in srgb,var(--a-ink) 10%,transparent);padding:3px 7px;border-radius:6px}
.install{margin:10px 0 0!important;display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.copy{border:0;background:none;color:var(--a-ink2);font:inherit;font-size:12.5px;cursor:pointer;padding:0 0 0 6px;text-decoration:underline;text-underline-offset:2px}
.copy:hover{color:var(--a-ink)}
.card.wide .title .desc{margin:18px 0 0;font-size:16px;line-height:1.55;color:var(--a-ink2);max-width:34ch}
.card.wide .cta{margin-left:0}
.card.wide .shot{margin:0}

/* Signup + contact */
.notify{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end;margin-top:72px;padding:40px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.notify h2{margin:0;font-size:clamp(28px,3vw,40px);line-height:1.05;letter-spacing:-.04em;font-weight:700;max-width:18ch}
.notify p{margin:12px 0 0;color:var(--ink2);font-size:16px;line-height:1.5}
.notify form{display:grid;gap:10px}
.notify label{font-size:14px;color:var(--ink2)}
.field{display:flex;gap:6px;padding:6px;border-radius:999px;background:#151516;border:1px solid #2a2a2b;transition:border-color .2s}
.field:focus-within{border-color:#6a6863}
.field input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:16px;padding:0 14px;outline:none}
.field input::placeholder{color:#8f8d87}
.field button{border:0;border-radius:999px;background:var(--ink);color:var(--page);font:inherit;font-weight:600;font-size:15px;padding:12px 20px;cursor:pointer}
.field button:hover{background:#fff}
.notify .ok{display:none;margin:0;font-size:16px;color:var(--ink)}
.notify form.done .field,.notify form.done label{display:none}
.notify form.done .ok{display:block}
.notify .err{margin:0;font-size:14px;color:#ff9b85;min-height:1.2em}

footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:28px 0 44px;color:var(--ink3);font-size:14px}
footer a{text-decoration:none;transition:color .2s}
footer a:hover{color:var(--ink)}
footer nav{display:flex;gap:20px}

@media (max-width:1080px){
  .grid{grid-template-columns:1fr 1fr}
  .s2,.s3,.s4,.s6{grid-column:span 2}
  .card,.card.short{height:600px}
  .card.wide{display:flex;height:auto}
  .card.wide .head{padding:26px}
  .card.wide .shot{height:440px;flex:none}
  .notify{grid-template-columns:1fr;gap:24px}
}
@media (max-width:620px){
  .grid{gap:16px}
  .hero{padding:48px 0 16px}
  .group{padding-top:40px}
  .card,.card.short{height:auto}
  .card .shot{flex:none;height:380px}
  .card.wide .shot{height:320px}
  [data-app=quicktick] .shot img{top:0}
  [data-app=windock] .shot img{left:calc(50% - 520px)}
  [data-app=blipjar] .shot img{width:auto;height:100%}
  .head{flex-direction:column;gap:14px;padding:22px 20px 18px}
  .cta{margin-left:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}