/**
 * TECHNO — base.css
 * Loads: every view. Tokens (fallbacks — real values printed by dynamic-css.php),
 * reset, typography, buttons, eyebrows, animation engine, cursor, preloader, utilities.
 */

/* ==========================================================================
   1. Tokens (fallbacks)
   ========================================================================== */
:root{
	--tch-primary:#E01A37;--tch-primary-rgb:224,26,55;--tch-primary-dark:#B8152D;--tch-primary-soft:rgba(224,26,55,.1);
	--tch-ink:#0E1720;--tch-ink-rgb:14,23,32;--tch-dark:#0E1720;--tch-dark-rgb:14,23,32;--tch-slate:#16242F;--tch-brand2:#3F5A6B;
	--tch-body:#56636D;--tch-bg:#F4F2EE;--tch-bg-soft:#ECE9E3;--tch-line:#DDD9D2;--tch-white:#fff;
	--tch-container:1320px;--tch-radius:14px;--tch-panel-radius:20px;--tch-fs-base:15px;--tch-h-weight:500;
	--tch-h1:clamp(30px,3.2vw,48px);--tch-h2:clamp(24px,2.3vw,34px);--tch-h3:clamp(18px,1.5vw,22px);
	--tch-logo-h:32px;--tch-logo-h-m:28px;--tch-banner-h:58vh;--tch-banner-h-m:520px;--tch-banner-overlay:.82;
	--tch-anim-dur:1000ms;--tch-anim-dist:22px;--tch-anim-stagger:70ms;--tch-anim-blur:5px;
	--tch-font-h:'Instrument Sans','IBM Plex Sans Arabic',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
	--tch-font-b:'Instrument Sans','IBM Plex Sans Arabic',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
	--tch-font-s:'Instrument Serif',Georgia,'IBM Plex Sans Arabic',serif;
	--tch-font-m:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
	--tch-ease:cubic-bezier(.16,1,.3,1);--tch-ease2:cubic-bezier(.76,0,.24,1);
	/* derived */
	--tch-gutter:clamp(18px,3.4vw,48px);--tch-space-section:clamp(64px,7vw,104px);--tch-inset:8px;
	--tch-shadow-s:0 10px 30px -22px rgba(var(--tch-ink-rgb),.35);
	--tch-shadow-m:0 24px 50px -34px rgba(var(--tch-ink-rgb),.45);
	--tch-shadow-l:0 40px 80px -48px rgba(var(--tch-ink-rgb),.55);
	--tch-header-h:60px;
}

/* ==========================================================================
   2. Reset & typography
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-block-start:96px;overflow-x:hidden}
@supports (overflow:clip){html{overflow-x:clip}}
.tch-main,.elementor,.e-con{max-inline-size:100%}
.tch-main{overflow-x:clip}
body{margin:0;background:var(--tch-bg);color:var(--tch-body);font-family:var(--tch-font-b);font-size:var(--tch-fs-base);line-height:1.7;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;text-rendering:optimizeLegibility}
::selection{background:var(--tch-primary);color:#fff}
img,video,svg{max-inline-size:100%;block-size:auto}
img{display:block}
a{color:inherit;text-decoration:none;transition:color .3s}
button{font:inherit}
h1,h2,h3,h4,h5,h6{font-family:var(--tch-font-h);font-weight:var(--tch-h-weight);color:var(--tch-ink);letter-spacing:-.022em;line-height:1.14;margin:0 0 .5em}
h1{font-size:var(--tch-h1)}h2{font-size:var(--tch-h2)}h3{font-size:var(--tch-h3)}h4{font-size:17px;letter-spacing:-.01em}h5{font-size:15px}h6{font-size:14px}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--tch-primary);outline-offset:3px;border-radius:4px}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;word-wrap:normal!important}
.screen-reader-text:focus{clip:auto!important;clip-path:none;block-size:auto;inline-size:auto;inset-block-start:8px;inset-inline-start:8px;z-index:100000;background:#fff;color:var(--tch-ink);padding:12px 18px;border-radius:8px}
.tch-skip:focus{position:fixed!important}

/* ==========================================================================
   3. Layout utilities
   ========================================================================== */
.tch-wrap{inline-size:100%;max-inline-size:var(--tch-container);margin-inline:auto;padding-inline:var(--tch-gutter)}
.tch-sec{padding-block:var(--tch-space-section);position:relative}
.tch-sec--sm{padding-block:clamp(48px,5.5vw,80px)}
.tch-panel{margin:var(--tch-inset);border-radius:var(--tch-panel-radius);overflow:hidden;position:relative}
.tch-dark{background:var(--tch-dark);color:#fff;--tch-body:#9AA7B1}
.tch-dark h1,.tch-dark h2,.tch-dark h3,.tch-dark h4{color:#fff}
.tch-slate{background:var(--tch-slate);color:#fff;--tch-body:#9FB0BC}
.tch-slate h1,.tch-slate h2,.tch-slate h3{color:#fff}
.tch-red{background:var(--tch-primary);color:#fff}
.tch-mono{font-family:var(--tch-font-m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:400}
.tch-serif{font-family:var(--tch-font-s);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--tch-primary)}
.tch-dark .tch-serif--light,.tch-banner .tch-serif{color:#fff}
body:not(.tch-serif-on) .tch-serif{font-family:inherit;font-style:normal;font-weight:inherit}
.tch-lead{font-size:15px;line-height:1.75;color:var(--tch-body);margin:0}
.tch-h1{font-size:var(--tch-h1)}.tch-h2{font-size:var(--tch-h2)}.tch-h3{font-size:var(--tch-h3)}
.tch-sec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,80px);align-items:end;margin-block-end:clamp(32px,3.6vw,48px)}
.tch-sec-head .tch-h2{margin:16px 0 0}
@media (max-width:980px){.tch-sec-head{grid-template-columns:minmax(0,1fr);gap:22px}}

/* eyebrow / kicker */
.tch-kick{display:inline-flex;align-items:center;gap:12px;color:var(--tch-body)}
.tch-kick::before{content:"";display:inline-block;block-size:1.5px;inline-size:22px;background:var(--tch-primary);transform-origin:left;transition:transform 1.1s var(--tch-ease2) .2s}
.tch-anim-ready [data-tch-anim]:not(.tch-in) .tch-kick::before,.tch-anim-ready .tch-kick[data-tch-anim]:not(.tch-in)::before{transform:scaleX(0)}

/* ==========================================================================
   4. Buttons & links
   ========================================================================== */
.tch-btn{display:inline-flex;align-items:center;gap:12px;block-size:44px;padding-block:0;padding-inline:20px 6px;border-radius:999px;font-size:13.5px;font-weight:500;line-height:1;position:relative;overflow:hidden;isolation:isolate;border:0;cursor:pointer;white-space:nowrap;transition:color .5s var(--tch-ease),transform .5s var(--tch-ease),box-shadow .4s}
.tch-btn__i{inline-size:32px;block-size:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;transition:transform .6s var(--tch-ease),background .5s,color .5s}
.tch-btn::before{content:"";position:absolute;inset-inline-start:50%;inset-block-start:100%;inline-size:140%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,0) scale(0);transition:transform .7s var(--tch-ease);z-index:-1}
.tch-btn:hover::before{transform:translate(-50%,-62%) scale(1)}
.tch-btn:hover .tch-btn__i{transform:rotate(-45deg)}
.tch-btn--red{background:var(--tch-primary);color:#fff}.tch-btn--red .tch-btn__i{background:#fff;color:var(--tch-primary)}.tch-btn--red::before{background:var(--tch-ink)}
.tch-btn--dark{background:var(--tch-ink);color:#fff}.tch-btn--dark .tch-btn__i{background:var(--tch-primary);color:#fff}.tch-btn--dark::before{background:var(--tch-primary)}
.tch-btn--glass{background:rgba(255,255,255,.1);color:#fff;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}.tch-btn--glass .tch-btn__i{background:#fff;color:var(--tch-ink)}.tch-btn--glass::before{background:#fff}.tch-btn--glass:hover{color:var(--tch-ink)}
.tch-btn--line{background:transparent;color:var(--tch-ink);box-shadow:inset 0 0 0 1px rgba(var(--tch-ink-rgb),.22)}.tch-btn--line .tch-btn__i{background:var(--tch-ink);color:#fff}.tch-btn--line::before{background:var(--tch-ink)}.tch-btn--line:hover{color:#fff}.tch-btn--line:hover .tch-btn__i{background:var(--tch-primary)}
.tch-btn--white{background:#fff;color:var(--tch-ink)}.tch-btn--white .tch-btn__i{background:var(--tch-primary);color:#fff}.tch-btn--white::before{background:var(--tch-primary)}.tch-btn--white:hover{color:#fff}.tch-btn--white:hover .tch-btn__i{background:#fff;color:var(--tch-primary)}
.tch-btn--sm{block-size:38px;font-size:12.5px;padding-inline:16px 5px}.tch-btn--sm .tch-btn__i{inline-size:28px;block-size:28px}
.tch-btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.tch-ulink{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;padding-block-end:5px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .55s var(--tch-ease)}
.tch-ulink:hover{background-size:0 1px;background-position:100% 100%}
.tch-ulink .tch-ic{transition:transform .5s var(--tch-ease)}.tch-ulink:hover .tch-ic{transform:translateX(5px)}
.tch-ic{flex:none}

/* ==========================================================================
   5. Animation engine — [data-tch-anim] (driven by animations.js)
   Content is visible by default; hidden states apply only once JS adds
   .tch-anim-ready to <html> (no-JS / reduced-motion show everything).
   ========================================================================== */
.tch-anim-ready [data-tch-anim]{transition:opacity var(--tch-anim-dur) var(--tch-ease),transform var(--tch-anim-dur) var(--tch-ease),filter var(--tch-anim-dur) var(--tch-ease),clip-path calc(var(--tch-anim-dur) + 300ms) var(--tch-ease2);transition-delay:var(--tch-delay,0ms)}
.tch-anim-ready [data-tch-anim="up"]:not(.tch-in){opacity:0;transform:translateY(var(--tch-anim-dist));filter:blur(var(--tch-anim-blur))}
.tch-anim-ready [data-tch-anim="down"]:not(.tch-in){opacity:0;transform:translateY(calc(var(--tch-anim-dist) * -1))}
.tch-anim-ready [data-tch-anim="start"]:not(.tch-in){opacity:0;transform:translateX(calc(var(--tch-anim-dist) * -1.4))}
.tch-anim-ready [data-tch-anim="end"]:not(.tch-in){opacity:0;transform:translateX(calc(var(--tch-anim-dist) * 1.4))}
.tch-anim-ready [data-tch-anim="fade"]:not(.tch-in){opacity:0}
.tch-anim-ready [data-tch-anim="zoom"]:not(.tch-in){opacity:0;transform:scale(.94)}
.tch-anim-ready [data-tch-anim="blur"]:not(.tch-in){opacity:0;filter:blur(8px)}
.tch-anim-ready [data-tch-anim="reveal"]:not(.tch-in){clip-path:inset(100% 0 0 0 round var(--tch-radius))}
.tch-anim-ready [data-tch-anim="reveal"]{clip-path:inset(0 0 0 0 round var(--tch-radius))}
.tch-anim-ready [data-tch-anim="reveal"] img{transition:transform 2s var(--tch-ease);transition-delay:var(--tch-delay,0ms)}
.tch-anim-ready [data-tch-anim="reveal"]:not(.tch-in) img{transform:scale(1.28)}
.tch-anim-ready [data-tch-anim="reveal-x"]:not(.tch-in){clip-path:inset(0 100% 0 0 round var(--tch-radius))}
/* split-line headings — extra inline padding so first/last glyphs (esp. italic) aren't clipped by overflow */
.tch-ln{display:block;overflow:hidden;padding-block-end:.08em;margin-block-end:-.08em;padding-inline:.12em .18em;margin-inline:-.04em -.06em}
.tch-ln>span{display:block}
.tch-anim-ready .tch-split .tch-ln>span{transition:transform 1.2s var(--tch-ease);transition-delay:calc(var(--tch-delay,0ms) + var(--tch-li,0) * 80ms)}
.tch-anim-ready .tch-split:not(.tch-in) .tch-ln>span{transform:translateY(105%) rotate(2.5deg);transform-origin:left top}
/* counters */
.tch-count{font-variant-numeric:tabular-nums}

/* ==========================================================================
   6. Interaction primitives — magnetic, tilt & glare
   ========================================================================== */
.tch-mag{transition:transform .7s var(--tch-ease),color .5s var(--tch-ease),background .4s,box-shadow .4s}
.tch-tilt{transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .9s var(--tch-ease)}
.tch-glare{position:relative}
.tch-glare::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.2),rgba(255,255,255,0) 42%);opacity:0;transition:opacity .4s}
.tch-glare:hover::after{opacity:1}

/* ==========================================================================
   7. Cursor & preloader
   ========================================================================== */
.tch-cur,.tch-cur-r{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .3s}
.tch-cursor-on .tch-cur,.tch-cursor-on .tch-cur-r{opacity:1}
.tch-cur{inline-size:8px;block-size:8px;background:var(--tch-primary);transform:translate(calc(var(--cx,-100px) - 50%),calc(var(--cy,-100px) - 50%));display:flex;align-items:center;justify-content:center;transition:inline-size .4s var(--tch-ease),block-size .4s var(--tch-ease),opacity .3s}
.tch-cur-r{inline-size:30px;block-size:30px;box-shadow:inset 0 0 0 1px rgba(var(--tch-primary-rgb),.45);transform:translate(calc(var(--cx,-100px) - 50%),calc(var(--cy,-100px) - 50%));transition:transform .45s var(--tch-ease),inline-size .4s var(--tch-ease),block-size .4s var(--tch-ease),opacity .3s}
.tch-cur__t{font-size:11.5px;font-weight:500;color:#fff;opacity:0;transform:scale(.5);transition:all .35s var(--tch-ease);white-space:nowrap}
.tch-cur.is-link{inline-size:0;block-size:0}
.tch-cur-r.is-link{inline-size:44px;block-size:44px;box-shadow:inset 0 0 0 1px rgba(var(--tch-primary-rgb),.7)}
.tch-cur.is-view{inline-size:72px;block-size:72px}.tch-cur.is-view .tch-cur__t{opacity:1;transform:none}
.tch-cur-r.is-view{opacity:0}
@media (hover:none),(pointer:coarse){.tch-cur,.tch-cur-r{display:none}}
.tch-pl{position:fixed;inset:0;z-index:10000;background:var(--tch-dark);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px;transition:transform 1s var(--tch-ease2),visibility 0s 1s}
.tch-pl.is-done{transform:translateY(-100%);visibility:hidden}
.tch-pl svg{color:var(--tch-primary);overflow:visible;block-size:64px;inline-size:auto}
.tch-pl rect{transform-box:fill-box;transform-origin:50% 100%;animation:tch-grow .6s var(--tch-ease) both}
.tch-pl__w{color:#fff;letter-spacing:.5em;font-size:12.5px;font-weight:600;padding-inline-start:.5em;animation:tch-fu .8s var(--tch-ease) .6s both}
@keyframes tch-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes tch-fu{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes tch-spin{to{transform:rotate(360deg)}}
@keyframes tch-ping{70%{box-shadow:0 0 0 14px rgba(var(--tch-primary-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--tch-primary-rgb),0)}}

/* ==========================================================================
   8. Forms (global look — CF7 & WP forms)
   ========================================================================== */
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=search],input[type=number],input[type=password],select,textarea{font:inherit;font-size:14px;color:var(--tch-ink);background:#fff;border:0;border-radius:10px;padding:12px 14px;box-shadow:inset 0 0 0 1px var(--tch-line);outline:none;transition:box-shadow .3s;inline-size:100%;max-inline-size:100%}
input:focus,select:focus,textarea:focus{box-shadow:inset 0 0 0 1.5px var(--tch-primary)}
textarea{min-block-size:130px;resize:vertical}
label{font-size:13.5px;color:var(--tch-body)}

/* ==========================================================================
   9. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
	.tch-pl{display:none}
}