/*
 * Twervo site runtime
 * The shared foundation of every website built with Twervo. Colours, fonts,
 * radius and spacing come from the CSS variables of the website's design
 * system; each section adds its own rules on top.
 */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;font-size:var(--tw-base,16px)}
body{margin:0;background:var(--tw-bg);color:var(--tw-text);font-family:var(--tw-font-body);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--tw-font-heading);font-weight:var(--tw-heading-weight,700);text-transform:var(--tw-heading-case,none);line-height:1.12;letter-spacing:-.02em;color:var(--s-heading,var(--tw-text))}
p{margin:0}
ul,ol{margin:0;padding:0}
::selection{background:var(--tw-primary);color:var(--tw-primary-contrast)}
:focus-visible{outline:2px solid var(--tw-primary);outline-offset:3px}

/* ---------- Section frame and tones ---------- */
.tws{--s-bg:var(--tw-bg);--s-text:var(--tw-text);--s-heading:var(--tw-text);--s-muted:var(--tw-muted);--s-border:var(--tw-border);--s-card:var(--tw-surface);--s-card-text:var(--tw-text);--s-accent:var(--tw-primary);
  position:relative;background:var(--s-bg);color:var(--s-text);padding-block:var(--tw-section-y);overflow:clip}
.tws.tone-surface{--s-bg:var(--tw-surface);--s-card:var(--tw-bg)}
.tws.tone-primary{--s-bg:var(--tw-primary);--s-text:var(--tw-primary-contrast);--s-heading:var(--tw-primary-contrast);--s-muted:color-mix(in srgb,var(--tw-primary-contrast) 72%,transparent);--s-border:color-mix(in srgb,var(--tw-primary-contrast) 22%,transparent);--s-card:color-mix(in srgb,var(--tw-primary-contrast) 10%,transparent);--s-card-text:var(--tw-primary-contrast);--s-accent:var(--tw-accent)}
.tws.tone-secondary{--s-bg:var(--tw-secondary);--s-text:var(--tw-secondary-contrast);--s-heading:var(--tw-secondary-contrast);--s-muted:color-mix(in srgb,var(--tw-secondary-contrast) 70%,transparent);--s-border:color-mix(in srgb,var(--tw-secondary-contrast) 18%,transparent);--s-card:color-mix(in srgb,var(--tw-secondary-contrast) 8%,transparent);--s-card-text:var(--tw-secondary-contrast)}
.tws.tone-dark{--s-bg:var(--tw-dark-bg);--s-text:#F4F4F8;--s-heading:#FFFFFF;--s-muted:#A9ABBE;--s-border:rgba(255,255,255,.12);--s-card:rgba(255,255,255,.05);--s-card-text:#F4F4F8}
.tws.tone-accent{--s-bg:var(--tw-accent);--s-text:var(--tw-accent-contrast);--s-heading:var(--tw-accent-contrast);--s-muted:color-mix(in srgb,var(--tw-accent-contrast) 70%,transparent);--s-border:color-mix(in srgb,var(--tw-accent-contrast) 20%,transparent);--s-card:color-mix(in srgb,var(--tw-accent-contrast) 8%,transparent);--s-card-text:var(--tw-accent-contrast);--s-accent:var(--tw-secondary)}
.tws.tone-gradient{--s-bg:linear-gradient(135deg,var(--tw-primary),color-mix(in srgb,var(--tw-primary) 45%,var(--tw-secondary)));--s-text:var(--tw-primary-contrast);--s-heading:var(--tw-primary-contrast);--s-muted:color-mix(in srgb,var(--tw-primary-contrast) 75%,transparent);--s-border:color-mix(in srgb,var(--tw-primary-contrast) 22%,transparent);--s-card:color-mix(in srgb,var(--tw-primary-contrast) 12%,transparent);--s-card-text:var(--tw-primary-contrast);--s-accent:var(--tw-accent)}
.tws.has-bg-image{--s-text:#fff;--s-heading:#fff;--s-muted:rgba(255,255,255,.82);--s-border:rgba(255,255,255,.22);--s-card:rgba(255,255,255,.1);--s-card-text:#fff;isolation:isolate}
.tws-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:-2}
.tws-overlay{position:absolute;inset:0;background:#05060c;z-index:-1}
.tws.pt-none{padding-top:0}.tws.pt-sm{padding-top:calc(var(--tw-section-y)*.45)}.tws.pt-md{padding-top:calc(var(--tw-section-y)*.75)}.tws.pt-lg{padding-top:calc(var(--tw-section-y)*1.2)}.tws.pt-xl{padding-top:calc(var(--tw-section-y)*1.6)}
.tws.pb-none{padding-bottom:0}.tws.pb-sm{padding-bottom:calc(var(--tw-section-y)*.45)}.tws.pb-md{padding-bottom:calc(var(--tw-section-y)*.75)}.tws.pb-lg{padding-bottom:calc(var(--tw-section-y)*1.2)}.tws.pb-xl{padding-bottom:calc(var(--tw-section-y)*1.6)}

.tw-container{width:min(100% - 40px,var(--tw-container));margin-inline:auto}
.tws.w-narrow .tw-container{width:min(100% - 40px,760px)}
.tws.w-wide .tw-container{width:min(100% - 40px,calc(var(--tw-container) + 200px))}
.tws.w-full .tw-container{width:calc(100% - 40px)}
.align-center .tw-head,.align-center .tw-center-able{text-align:center;margin-inline:auto;align-items:center}
.align-right .tw-head{text-align:right;margin-left:auto}

/* ---------- Typography ---------- */
.tw-head{max-width:720px;margin-bottom:clamp(32px,5vw,56px);display:flex;flex-direction:column;gap:14px}
.tw-head.is-center{text-align:center;margin-inline:auto;align-items:center}
.tw-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--s-accent)}
.tw-eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:currentColor;opacity:.7}
.is-center .tw-eyebrow::before{display:none}
.tw-display{font-size:clamp(2.6rem,6.2vw,5rem);line-height:1.02;letter-spacing:-.035em}
.tw-h1{font-size:clamp(2.2rem,5vw,3.9rem);line-height:1.05;letter-spacing:-.03em}
.tw-h2{font-size:clamp(1.85rem,3.6vw,2.9rem)}
.tw-h3{font-size:clamp(1.25rem,2vw,1.5rem);letter-spacing:-.015em}
.tw-h4{font-size:1.1rem;letter-spacing:-.01em}
.tw-lead{font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--s-muted);line-height:1.6}
.tw-muted{color:var(--s-muted)}
.tw-small{font-size:.88rem}
.tw-rich{line-height:1.75}
.tw-rich>*+*{margin-top:1em}
.tw-rich h2,.tw-rich h3{margin-top:1.6em}
.tw-rich ul,.tw-rich ol{padding-left:1.3em}
.tw-rich li+li{margin-top:.4em}
.tw-rich a{color:var(--tw-primary);text-underline-offset:3px}
.tw-rich blockquote{margin:0;padding-left:1.1em;border-left:3px solid var(--tw-primary);font-size:1.1em;font-style:italic}
.tw-highlight{background:linear-gradient(transparent 62%,color-mix(in srgb,var(--tw-accent) 70%,transparent) 62%)}

/* ---------- Buttons ---------- */
.tw-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.is-center .tw-actions,.tw-actions.is-center{justify-content:center}
.tw-btn{--b-bg:var(--tw-primary);--b-fg:var(--tw-primary-contrast);--b-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 24px;border-radius:var(--tw-radius-btn);border:1.5px solid var(--b-bd);background:var(--b-bg);color:var(--b-fg);
  font-weight:600;font-size:.98rem;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .18s ease,box-shadow .2s ease,background .2s ease,color .2s ease}
.tw-btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px -10px color-mix(in srgb,var(--b-bg) 70%,transparent)}
.tw-btn__icon{width:18px;height:18px}
.tw-btn--secondary{--b-bg:var(--tw-secondary);--b-fg:var(--tw-secondary-contrast)}
.tw-btn--outline{--b-bg:transparent;--b-fg:var(--s-heading);--b-bd:var(--s-border)}
.tw-btn--outline:hover{--b-bd:currentColor;box-shadow:none}
.tw-btn--ghost{--b-bg:color-mix(in srgb,var(--s-heading) 8%,transparent);--b-fg:var(--s-heading)}
.tw-btn--light{--b-bg:#fff;--b-fg:#0b0b12}
.tw-btn--link{--b-bg:transparent;--b-fg:var(--s-accent);padding-inline:0;min-height:auto}
.tw-btn--link:hover{box-shadow:none;text-decoration:underline;text-underline-offset:4px}
.tone-primary .tw-btn--primary,.tone-gradient .tw-btn--primary{--b-bg:var(--tw-primary-contrast);--b-fg:var(--tw-primary)}
.tone-accent .tw-btn--primary{--b-bg:var(--tw-secondary);--b-fg:var(--tw-secondary-contrast)}
.has-bg-image .tw-btn--outline,.tone-dark .tw-btn--outline{--b-fg:#fff;--b-bd:rgba(255,255,255,.4)}
.tw-btn--sm{min-height:38px;padding:8px 16px;font-size:.88rem}
.tw-btn--lg{min-height:56px;padding:16px 30px;font-size:1.05rem}

/* ---------- Layout primitives ---------- */
.tw-grid{display:grid;gap:clamp(18px,2.4vw,28px)}
.tw-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tw-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tw-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tw-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:center}
.tw-split.is-reverse>:first-child{order:2}
.tw-stack{display:flex;flex-direction:column;gap:18px}
.tw-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}

/* ---------- Cards and media ---------- */
.tw-card{background:var(--s-card);color:var(--s-card-text);border:1px solid var(--s-border);border-radius:var(--tw-radius);padding:clamp(22px,2.6vw,32px);box-shadow:var(--tw-shadow);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.tw-card.is-flat{box-shadow:none}
.tw-card.is-hover:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--tw-primary) 40%,var(--s-border))}
.tw-media{position:relative;overflow:hidden;border-radius:var(--tw-radius);background:color-mix(in srgb,var(--s-text) 6%,transparent)}
.tw-media img{width:100%;height:100%;object-fit:cover}
.tw-ratio-wide{aspect-ratio:16/10}.tw-ratio-video{aspect-ratio:16/9}.tw-ratio-square{aspect-ratio:1/1}.tw-ratio-portrait{aspect-ratio:4/5}.tw-ratio-tall{aspect-ratio:3/4}
.tw-icon-box{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:calc(var(--tw-radius) * .8 + 4px);background:var(--tw-primary-soft);color:var(--tw-primary);flex:none}
.tone-primary .tw-icon-box,.tone-gradient .tw-icon-box,.tone-dark .tw-icon-box,.tone-secondary .tw-icon-box,.has-bg-image .tw-icon-box{background:color-mix(in srgb,currentColor 14%,transparent);color:var(--s-heading)}
.tw-icon{width:24px;height:24px;flex:none}
.tw-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:.78rem;font-weight:600;background:var(--tw-primary-soft);color:var(--tw-primary);border:1px solid color-mix(in srgb,var(--tw-primary) 22%,transparent)}
.tw-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;font-size:.85rem;font-weight:500;background:var(--s-card);border:1px solid var(--s-border)}
.tw-pill b{padding:3px 10px;border-radius:999px;background:var(--tw-primary);color:var(--tw-primary-contrast);font-size:.75rem}
.tw-divider{height:1px;background:var(--s-border);border:0;margin:0}
.tw-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;background:var(--tw-primary-soft)}
.tw-check{display:flex;gap:10px;align-items:flex-start}
.tw-check svg{color:var(--s-accent);margin-top:3px;width:18px;height:18px}
.tw-stars{color:#F5B301;letter-spacing:2px;font-size:1rem}
.tw-img-empty{display:grid;place-items:center;min-height:180px;height:100%;border-radius:var(--tw-radius);border:2px dashed var(--s-border);color:var(--s-muted);font-size:.9rem;background:color-mix(in srgb,var(--s-text) 4%,transparent)}

/* ---------- Forms ---------- */
.tw-form{display:grid;gap:16px}
.tw-form .tw-field{display:grid;gap:7px}
.tw-form label{font-size:.88rem;font-weight:600;color:var(--s-heading)}
.tw-input,.tw-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.tw-form select,.tw-form textarea{width:100%;min-height:50px;padding:12px 16px;border-radius:calc(var(--tw-radius) * .7 + 2px);border:1.5px solid var(--s-border);background:var(--tw-bg);color:var(--tw-text);transition:border-color .2s,box-shadow .2s}
.tw-form textarea{min-height:130px;resize:vertical}
.tw-input:focus,.tw-form input:focus,.tw-form select:focus,.tw-form textarea:focus{outline:none;border-color:var(--tw-primary);box-shadow:0 0 0 4px var(--tw-primary-soft)}
.tw-form .tw-hp{position:absolute!important;left:-9999px!important;opacity:0}
.tw-form-status{font-size:.92rem;font-weight:500;padding:12px 14px;border-radius:calc(var(--tw-radius) * .6);display:none}
.tw-form-status.is-ok{display:block;background:color-mix(in srgb,#16a34a 14%,transparent);color:inherit}
.tw-form-status.is-error{display:block;background:color-mix(in srgb,#dc2626 14%,transparent);color:inherit}

/* ---------- Elements inside layout sections ---------- */
.tw-el+.tw-el{margin-top:18px}
.tw-el--spacer+.tw-el,.tw-el+.tw-el--spacer{margin-top:0}
.tw-el-video{position:relative;aspect-ratio:16/9;border-radius:var(--tw-radius);overflow:hidden;background:#000}
.tw-el-video iframe,.tw-el-video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.tw-el-quote{font-family:var(--tw-font-heading);font-size:1.35rem;line-height:1.4;color:var(--s-heading)}
.tw-el-list{list-style:none;display:grid;gap:10px}

/* ---------- Responsive visibility ---------- */
@media (max-width:767px){.hide-mobile{display:none!important}}
@media (min-width:768px) and (max-width:1023px){.hide-tablet{display:none!important}}
@media (min-width:1024px){.hide-desktop{display:none!important}}

@media (max-width:1023px){
  .tw-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tw-cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .tw-cols-2,.tw-cols-3,.tw-cols-4{grid-template-columns:minmax(0,1fr)}
  .tw-split{grid-template-columns:minmax(0,1fr)}
  .tw-split.is-reverse>:first-child{order:0}
  .tw-btn{white-space:normal}
}

/* ---------- Reveal animations ---------- */
@media (prefers-reduced-motion:no-preference){
  .tw-anim [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  .tw-anim [data-reveal].is-visible{opacity:1;transform:none}
  .tw-anim [data-reveal="2"]{transition-delay:.08s}.tw-anim [data-reveal="3"]{transition-delay:.16s}.tw-anim [data-reveal="4"]{transition-delay:.24s}
}
.tw-editing [data-reveal],.tw-thumb [data-reveal]{opacity:1!important;transform:none!important}

/* ---------- Platform badge ---------- */
.tw-made-with{position:fixed;right:16px;bottom:16px;z-index:60;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#0E0B1F;color:#fff;font:600 12px/1 system-ui,-apple-system,"Segoe UI",sans-serif;text-decoration:none;box-shadow:0 8px 24px -8px rgba(0,0,0,.45)}
.tw-made-with__dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#8B6CFF,#D4FF3A)}

/* ---------- Lightbox ---------- */
.tw-lightbox{position:fixed;inset:0;z-index:100;display:none;place-items:center;background:rgba(5,6,12,.88);padding:24px;cursor:zoom-out}
.tw-lightbox.is-open{display:grid}
.tw-lightbox img{max-height:88vh;max-width:min(1200px,94vw);border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.tw-lightbox figcaption{color:#fff;text-align:center;margin-top:12px;font-size:.92rem}
