/* ============================================================
   SUPERVIBE.MEDIA — SITE STYLESHEET
   Black-dominant: black is the page; red, burgundy, maroon,
   white and grey are the accents, and one full-bleed red band
   carries the call to action. Shared across every page of the site.

   The rule that drives the whole system: on the brand orange
   #9E0F22, white clears 5.7:1 and black only reaches 3.5:1.
   So white carries all the small text, and black carries
   structure — cards, bands, buttons, the tall bar in the mark.
   Yellow sits at 3.6:1 on orange, so it is a spark, never a
   sentence. #FFE3E6 does the one job neither can: mono eyebrow
   labels on orange, at 4.8:1.
   ============================================================ */

:root{
  --org:        #9E0F22;
  --org-hover:  #B0122A;
  --org-press:  #6E0019;
  --org-vivid:  #E8414F;
  --yel:        #E0283C;
  --ink:        #0C0A0A;
  --ink-raised: #1A1415;
  --ink-deep:   #060505;
  --ember:      #2A0710;   /* the hero field the wave glows against */
  --cream:      #F7F3F3;
  --cream-sunk: #EFE9E9;
  --white:      #FFFFFF;
  --maroon:     #5C0A14;   /* deepest accent: gradients, scene shadows */
  --grey:       #A8A2A2;   /* muted text, 7.9:1 on black */
  --grey-hi:    #E9E4E4;   /* near-white accent */

  --display:"Space Grotesk",system-ui,sans-serif;
  --body:"Public Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --ease:cubic-bezier(.2,.7,.3,1);
  --gutter:clamp(20px,5vw,72px);
  --radius:4px;
  --skew:-13deg;
}

/* ---------- surfaces ----------
   Any element can be handed a surface. It brings its own text
   ramp, hairline, accent, button pair and mark colours, so a
   black card on an orange page is correct without exceptions. */
.s-org{
  background:var(--org);
  --tx:#FFFFFF;        /* 5.7:1 */
  --tx-muted:#FCE4E6;  /* 5.0:1 */
  --tx-faint:#FBD5D9;  /* 4.5:1 */
  --accent:#FFE3E6;    /* 4.8:1 — the eyebrow cream */
  --num:#FFE3E6;       /* small mono labels: yellow is only 3.6:1 here */
  --hair:#6E0019;
  --hair-hi:#D9394A;
  --btn-bg:#0C0A0A; --btn-fg:#FFFFFF; --btn-bg-h:#240A0F;
  --mark-a:#FFFFFF; --mark-b:#0C0A0A; --mark-c:#E9E4E4;
  color:var(--tx);
}
.s-ink,.s-ink-raised,.s-ink-deep,.s-ember{
  --tx:#FFFFFF;
  --tx-muted:#A8A2A2;
  --tx-faint:#8C8687;
  --accent:#E8414F;
  --num:#D9D3D3;
  --hair:#2A2324;
  --hair-hi:#3D3536;
  --btn-bg:#9E0F22; --btn-fg:#FFFFFF; --btn-bg-h:#B0122A;
  --mark-a:#FFFFFF; --mark-b:#9E0F22; --mark-c:#A8A2A2;
  color:var(--tx);
}
.s-ink{background:var(--ink)}
.s-ink-raised{background:var(--ink-raised)}
.s-ink-deep{background:var(--ink-deep)}
.s-ember{background:var(--ember);--hair:#5C0A14;--hair-hi:#6E0019;--tx-muted:#EAD9DB;--tx-faint:#B8A3A6}
.s-cream{
  background:var(--cream);
  --tx:#0C0A0A;
  --tx-muted:#5C5656;
  --tx-faint:#6F6969;
  --accent:#9E0F22;
  --num:#6E0019;
  --hair:#E3DCDC;
  --hair-hi:#D2C9CA;
  --btn-bg:#9E0F22; --btn-fg:#FFFFFF; --btn-bg-h:#B0122A;
  --mark-a:#0C0A0A; --mark-b:#9E0F22; --mark-c:#6E0019;
  color:var(--tx);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;background:var(--ink)}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-0.025em;line-height:1.04;margin:0}
p{margin:0}
a{color:inherit}
img,svg,canvas{display:block;max-width:100%}
.shell{max-width:1180px;margin:0 auto;padding-inline:var(--gutter)}

/* ---------- eyebrow ---------- */
.eyebrow{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:10px}
.eyebrow-mark{flex:none;fill:currentColor}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--body);font-weight:500;font-size:16px;padding:14px 26px;border-radius:var(--radius);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease,transform .18s var(--ease)}
.btn-primary{background:var(--btn-bg);color:var(--btn-fg)}
.btn-primary:hover{background:var(--btn-bg-h);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(1px)}
.btn-quiet{border-color:currentColor;color:var(--tx);opacity:.9}
.btn-quiet:hover{opacity:1;transform:translateY(-1px);background:rgba(0,0,0,.14)}
.btn-quiet:active{transform:translateY(1px)}
.s-cream .btn-quiet:hover{background:rgba(0,0,0,.05)}
:focus-visible{outline:2.5px solid var(--tx);outline-offset:3px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:40;background:rgba(12,10,10,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair);transition:box-shadow .35s ease,border-color .35s ease}
.nav.scrolled{border-bottom-color:var(--org);box-shadow:0 14px 34px -22px #000}
.nav-in{display:flex;align-items:center;gap:32px;height:74px;transition:height .3s var(--ease)}
.js .nav.scrolled .nav-in{height:62px}
.nav-links{display:flex;gap:28px;margin-left:auto;font-size:15px}
.nav-links a{text-decoration:none;color:var(--tx-muted);position:relative;transition:color .18s ease}
.nav-links a:hover{color:var(--tx)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-7px;height:2px;width:100%;background:var(--yel);transform:scaleX(0) skewX(var(--skew));transform-origin:left center;transition:transform .3s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1) skewX(var(--skew))}
.wordmark{display:flex;align-items:center;gap:9px;text-decoration:none}
.wordmark span{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:0.01em}
.dot{color:var(--yel)}

.nav-toggle{display:none;margin-left:auto;width:42px;height:38px;background:none;border:1.5px solid var(--hair-hi);border-radius:var(--radius);cursor:pointer;padding:9px 10px;flex-direction:column;justify-content:space-between}
.nav-toggle span{display:block;height:2px;background:var(--tx);border-radius:1px;transition:transform .28s var(--ease),opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- the mark ---------- */
.mark .b1{fill:var(--mark-a)}
.mark .b2{fill:var(--mark-b)}
.mark .b3{fill:var(--mark-c)}
.mark rect{transform-box:fill-box;transform-origin:50% 100%}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(64px,10vw,116px) 0 clamp(56px,8vw,96px);min-height:clamp(600px,88vh,940px);display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
/* scrim: the amber wave is bright enough to fight body copy, so the
   left column gets a soft ember wash that fades out before the cards */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(24,6,9,.62) 0%,rgba(24,6,9,.38) 38%,rgba(24,6,9,0) 62%)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:center;width:100%}
.hero h1{font-size:clamp(38px,5.8vw,70px);margin:22px 0 0}
.hero h1 em{font-style:normal;color:var(--yel)}
.hero-sub{font-size:clamp(17px,1.9vw,20px);color:var(--tx-muted);max-width:33em;margin-top:22px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* the skewed corner brackets */
.framed{position:relative;padding:26px}
.framed::before,.framed::after{content:"";position:absolute;width:44%;height:38%;border:2.5px solid var(--yel);transform:skewX(var(--skew));pointer-events:none}
.framed::before{top:0;left:0;border-right:none;border-bottom:none}
.framed::after{bottom:0;right:0;border-left:none;border-top:none}

.pcard{border-radius:6px;padding:22px;border:1px solid var(--hair-hi);background:rgba(26,20,21,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pcard + .pcard{margin-top:14px}
.pcard-tag{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--tx-faint);margin-bottom:14px}
.pcard.after{border-color:var(--yel)}
.pcard.after .pcard-tag{color:var(--org-vivid)}
.prow{display:flex;gap:13px;align-items:flex-start}
.prow + .prow{margin-top:16px;padding-top:16px;border-top:1px solid var(--hair)}
.pdot{width:42px;height:42px;flex:none;border-radius:5px;background:var(--org);display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.04em;color:#FFFFFF;transform:skewX(var(--skew))}
.pdot span{transform:skewX(calc(var(--skew) * -1))}
.pcard.after .pdot{background:var(--yel);color:var(--ink)}
.pname{font-weight:500;font-size:15px;line-height:1.3}
.phead{font-size:14px;color:var(--tx-muted);line-height:1.45;margin-top:3px}

/* ---------- sections ---------- */
.section{padding:clamp(64px,9vw,116px) 0}
.section-head{max-width:34em}
.section-head h2{font-size:clamp(30px,4.2vw,50px);margin-top:18px}
.section-head h2 em{font-style:normal;color:var(--yel)}
.s-cream .section-head h2 em{color:var(--org)}
.section-head p{color:var(--tx-muted);margin-top:18px;font-size:18px}

.deliver{display:grid;grid-template-columns:repeat(2,1fr);gap:0 44px;margin-top:48px}
.deliver div{padding:20px 0;border-bottom:1px solid var(--hair);display:flex;gap:16px;align-items:baseline;font-size:16px}
.deliver .wk{font-family:var(--mono);font-size:12px;color:var(--num);letter-spacing:0.1em;flex:none;width:62px;transition:color .2s ease,transform .25s var(--ease)}
.deliver div:hover .wk{color:var(--white);transform:translateX(3px)}
.s-cream .deliver div:hover .wk{color:var(--org)}

/* ---------- closing band ---------- */
.close{text-align:center;background:linear-gradient(105deg,var(--org-press) 0%,var(--org) 38%,var(--org) 62%,var(--org-press) 100%);background-size:240% 100%;background-position:100% 0}
.js .close{animation:pan 18s linear infinite alternate}
@keyframes pan{to{background-position:0 0}}
.close h2{font-size:clamp(28px,4.2vw,50px);max-width:18em;margin-inline:auto}
.close h2 em{font-style:normal;color:#FFB3BA}  /* pale rose on the red band: 4.9:1 */
.close p{margin:20px auto 0;max-width:30em;color:var(--tx-muted);font-size:18px}
.close .btn{margin-top:34px;background:var(--btn-bg);color:var(--btn-fg)}
.close .btn:hover{background:var(--btn-bg-h);transform:translateY(-1px)}

/* ---------- footer ---------- */
.foot{padding:56px 0 40px;border-top:1px solid var(--hair);color:var(--tx-muted)}
.foot-in{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start}
.foot-links{display:flex;flex-wrap:wrap;gap:26px;margin-left:auto;font-size:15px}
.foot-links a{color:var(--tx-muted);text-decoration:none;transition:color .18s ease}
.foot-links a:hover{color:var(--org-vivid)}
.foot small{display:block;margin-top:34px;font-family:var(--mono);font-size:12px;color:var(--tx-faint)}

/* ============================================================
   MOTION — one easing curve, everything additive behind .js
   ============================================================ */
.rise{opacity:0;transform:translateY(14px);animation:rise .6s var(--ease) forwards}
.rise:nth-child(2){animation-delay:.07s}
.rise:nth-child(3){animation-delay:.14s}
.rise:nth-child(4){animation-delay:.21s}
@keyframes rise{to{opacity:1;transform:none}}

.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}
.js [data-group] > *{opacity:0;transform:translateY(18px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.js [data-group].in > *{opacity:1;transform:none}
.js [data-group] > *:nth-child(2){transition-delay:.07s}
.js [data-group] > *:nth-child(3){transition-delay:.14s}
.js [data-group] > *:nth-child(4){transition-delay:.21s}
.js [data-group] > *:nth-child(5){transition-delay:.28s}
.js [data-group] > *:nth-child(6){transition-delay:.35s}
.js [data-group] > *:nth-child(7){transition-delay:.42s}
.js [data-group] > *:nth-child(8){transition-delay:.49s}

.progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--maroon) 0%,var(--org) 45%,var(--grey-hi) 100%);z-index:50;pointer-events:none}
.js .progress{transform:scaleX(var(--p,0))}

.js .mark-load rect{animation:barrise .7s var(--ease) both}
.js .mark-load rect:nth-of-type(1){animation-delay:.10s}
.js .mark-load rect:nth-of-type(2){animation-delay:.20s}
.js .mark-load rect:nth-of-type(3){animation-delay:.30s}
@keyframes barrise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.js .wordmark:hover .mark-load rect{animation:barbounce .5s var(--ease)}
.js .wordmark:hover .mark-load rect:nth-of-type(2){animation-delay:.06s}
.js .wordmark:hover .mark-load rect:nth-of-type(3){animation-delay:.12s}
@keyframes barbounce{40%{transform:scaleY(1.14)}to{transform:scaleY(1)}}

.js .framed::before,.js .framed::after{opacity:0;animation:frameIn .8s var(--ease) .5s forwards}
.js .framed::before{transform:skewX(var(--skew)) translate(-10px,-10px)}
.js .framed::after{transform:skewX(var(--skew)) translate(10px,10px);animation-delay:.62s}
@keyframes frameIn{to{opacity:1;transform:skewX(var(--skew)) translate(0,0)}}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none}
  .js [data-reveal]{opacity:1 !important;transform:none !important}
  .js [data-group] > *{opacity:1 !important;transform:none !important}
  .js .framed::before,.js .framed::after{opacity:1;transform:skewX(var(--skew))}
  .js .mark-load rect{transform:none}
  .progress{display:none}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero-grid,.deliver{grid-template-columns:1fr}
  .hero{min-height:0}
  .nav-toggle{display:flex}
  .nav-in > .btn{display:none}
  .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--ink);border-bottom:1.5px solid var(--org);padding:8px var(--gutter) 20px;display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 0;border-top:1px solid var(--hair);font-size:16px}
  .nav-links a::after{display:none}
  .foot-links{margin-left:0}
}

/* ============================================================
   INNER PAGES — About Us, Platforms, Results
   Each page opens on a "scene zone": a sticky, viewport-tall
   canvas that sits behind the page head and the first section,
   so the 3D background travels with you until the CTA band.
   ============================================================ */
.orbit-zone,.storm-zone,.fluid-zone{position:relative;isolation:isolate;background:var(--ink)}
.orbit-bg,.storm-bg,.fluid-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.orbit-stick,.fluid-stick{position:sticky;top:0;width:100%;height:100vh}
.orbit-stick canvas,.fluid-stick canvas{display:block;width:100%;height:100%}
.storm-bg canvas{position:sticky;top:0;display:block;width:100%;height:100vh}
/* scrims keep copy readable over the brightest parts of each scene */
.orbit-scrim,.fluid-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,10,10,.72) 0%,rgba(12,10,10,.38) 48%,rgba(12,10,10,.12) 100%),linear-gradient(180deg,rgba(12,10,10,0) 55%,rgba(12,10,10,.6) 100%)}
/* the fluid is denser than the particle scenes, so its scrim works harder */
.fluid-scrim{background:linear-gradient(90deg,rgba(12,10,10,.86) 0%,rgba(12,10,10,.6) 45%,rgba(12,10,10,.22) 100%),linear-gradient(180deg,rgba(12,10,10,0) 55%,rgba(12,10,10,.6) 100%)}
.orbit-zone .section,.storm-zone .section,.fluid-zone .section{background:transparent;padding-top:clamp(24px,4vw,48px)}

.page-head{padding:clamp(88px,12vw,160px) 0 clamp(32px,5vw,56px)}
.page-head h1{font-size:clamp(38px,5.6vw,68px);margin-top:22px;max-width:15em}
.page-head h1 em{font-style:normal;color:var(--yel)}
.page-head p{margin-top:22px;max-width:34em;font-size:clamp(17px,1.9vw,20px);color:var(--tx-muted)}
.page-head p.wide{max-width:44em}
.page-head p strong{color:var(--tx);font-weight:600}

/* glass panels: content that sits on a scene gets a dark frosted card */
.glass{border:1px solid var(--hair-hi);background:rgba(26,20,21,.76);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{border-radius:6px;padding:30px 26px 32px;transition:border-color .16s ease,transform .16s ease}
.card:hover{border-color:var(--org-vivid);transform:translateY(-3px)}
.card h3{font-size:22px;margin:16px 0 12px}
.card p{color:var(--tx-muted);font-size:16px}
.card-num{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--num);transition:color .16s ease,letter-spacing .2s var(--ease)}
.card:hover .card-num{color:var(--org-vivid);letter-spacing:.18em}

/* results: stats */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.stat{border-radius:6px;padding:30px 26px;border-top:3px solid var(--org)}
.stat-num{font-family:var(--display);font-weight:700;font-size:clamp(32px,4.2vw,50px);line-height:1.05;letter-spacing:-.02em;color:var(--yel);font-variant-numeric:tabular-nums}
.stat-label{margin-top:16px;color:var(--tx-muted);font-size:16px}

/* results: testimonials */
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.quote-card{border-radius:6px;padding:34px 28px 28px;border:1px solid var(--hair-hi);background:var(--ink);display:flex;flex-direction:column;transition:border-color .16s ease,transform .16s ease}
.quote-card:hover{border-color:var(--org);transform:translateY(-3px)}
.quote-mark{font-family:var(--display);font-weight:700;font-size:64px;line-height:.6;color:var(--org-vivid);height:28px}
.quote-text{margin-top:14px;font-size:17px;color:var(--tx);flex:1}
.quote-attr{margin-top:22px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--num)}

/* platforms: tabs */
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{font-family:var(--body);font-size:15px;font-weight:500;padding:11px 22px;border-radius:999px;border:1.5px solid var(--hair-hi);background:rgba(12,10,10,.65);color:var(--tx-muted);cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease}
.pill:hover{border-color:var(--org-vivid);color:var(--tx)}
.pill.active{background:var(--org);border-color:var(--org);color:#FFFFFF}
.platform-panel{margin-top:24px;border-radius:6px;padding:clamp(24px,4vw,40px)}
.platform-view{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,48px)}
.platform-view + .platform-view{margin-top:40px;padding-top:40px;border-top:1px solid var(--hair-hi)}
/* with JS, only the chosen platform shows; without it, all three stack */
.js .platform-view{display:none}
.js .platform-view.active{display:grid;margin-top:0;padding-top:0;border-top:none;animation:viewIn .45s var(--ease)}
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pv-tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--org-vivid);display:inline-flex;align-items:center;gap:8px}
.pv-tag::before{content:"";width:8px;height:11px;border:2px solid currentColor;border-right:none;transform:skewX(var(--skew))}
.pv-block h4{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.2vw,24px);line-height:1.15;letter-spacing:-.015em;margin:14px 0 10px}
.pv-block p{color:var(--tx-muted);font-size:16px}
.pv-block + .pv-block{border-left:1px solid var(--hair-hi);padding-left:clamp(20px,4vw,48px)}

/* the page you're on, marked in the nav */
.nav-links a[aria-current="page"]{color:var(--tx)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1) skewX(var(--skew))}

@media (max-width:900px){
  .cards,.stat-grid,.quote-grid{grid-template-columns:1fr}
  .platform-view{grid-template-columns:1fr}
  .pv-block + .pv-block{border-left:none;padding-left:0;border-top:1px solid var(--hair-hi);padding-top:24px}
  .orbit-scrim,.fluid-scrim{background:linear-gradient(180deg,rgba(12,10,10,.55) 0%,rgba(12,10,10,.35) 50%,rgba(12,10,10,.65) 100%)}
}

/* About Us fallback: a slow drifting red glow, used only when a device
   can't run the fluid simulation, so the page never sits still and blank */
.fluid-fallback{position:absolute;inset:-12%;pointer-events:none;
  background:
    radial-gradient(38% 46% at 28% 38%,rgba(158,15,34,.78),transparent 70%),
    radial-gradient(34% 42% at 72% 62%,rgba(92,10,20,.9),transparent 70%),
    radial-gradient(26% 34% at 58% 26%,rgba(176,18,42,.5),transparent 70%),
    radial-gradient(30% 36% at 40% 80%,rgba(168,162,162,.12),transparent 70%);
  filter:blur(30px);animation:fluidDrift 16s ease-in-out infinite alternate}
@keyframes fluidDrift{
  0%{transform:translate3d(-3%,-2%,0) scale(1) rotate(0deg)}
  50%{transform:translate3d(3%,2%,0) scale(1.08) rotate(6deg)}
  100%{transform:translate3d(-2%,3%,0) scale(1.04) rotate(-4deg)}}