/* Tassili.ai — site styles */
:root{
  --ivory:#F5F0E8; --paper:#FBF8F3; --sand:#E8DCCB; --sand-2:#DCCDB8;
  --ink:#2B1D14; --ink-2:#5E4A3C; --muted:#7A6252; --line:#E2D6C6;
  --clay:#C8643B; --clay-d:#A94F2A; --clay-l:#E08A5C; --mid:#8C5634;
  --night:#1F1611; --night-2:#2A1E17; --cream:#F3E8D8;
  --serif:'Instrument Serif', Georgia, serif;
  --sans:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --radius:18px; --max:1180px;
}
html[lang="ar"]{ --serif:'IBM Plex Sans Arabic', var(--sans); --sans:'IBM Plex Sans Arabic', system-ui, sans-serif; }
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono)}
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.skip:focus{width:auto;height:auto;clip:auto;inset-inline-start:16px;top:16px;background:#fff;padding:8px 12px;z-index:99}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(245,240,232,.86);backdrop-filter:saturate(1.2) blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.site-head.scrolled{border-bottom-color:var(--line)}
.head-in{display:flex;align-items:center;gap:28px;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.brand svg{width:34px;height:32px}
.brand b{font-weight:600;font-size:21px;letter-spacing:-.035em;direction:ltr}
.brand b span{color:var(--clay)}
.nav{display:flex;gap:4px;margin-inline-start:8px}
.nav a{text-decoration:none;font-size:15px;color:var(--ink-2);padding:8px 12px;border-radius:999px;transition:background .15s,color .15s}
.nav a:hover{background:var(--sand);color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600}
.head-right{margin-inline-start:auto;display:flex;align-items:center;gap:14px}
.lang{display:flex;gap:2px;font-family:var(--mono);font-size:12px}
.lang a{text-decoration:none;color:var(--muted);padding:6px 7px;border-radius:6px}
.lang a[aria-current="true"]{color:var(--ink);background:var(--sand)}
.btn{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--sans);text-decoration:none;padding:13px 20px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:transform .15s,background .15s,border-color .15s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink);color:var(--ivory)}
.btn-primary:hover{background:#000}
.btn-clay{background:var(--clay-d);color:#fff}
.btn-clay:hover{background:#8f4121}
.btn-ghost{border-color:var(--sand-2);color:var(--ink)}
.btn-ghost:hover{background:var(--sand)}
.btn-light{background:var(--cream);color:var(--night)}
.btn-light:hover{background:#fff}
.btn .arr{transition:transform .15s}
.btn:hover .arr{transform:translateX(3px)}
html[dir="rtl"] .btn .arr{transform:scaleX(-1)}
html[dir="rtl"] .btn:hover .arr{transform:scaleX(-1) translateX(3px)}
.btn-sm{padding:10px 16px;font-size:14px}
.menu-btn{display:none;background:none;border:0;width:44px;height:44px;border-radius:10px;cursor:pointer;color:var(--ink)}
.menu-btn:hover{background:var(--sand)}

/* ---------- type ---------- */
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--clay-d);display:inline-flex;align-items:center;gap:10px}
html[lang="ar"] .eyebrow{letter-spacing:0;text-transform:none;font-family:var(--sans);font-weight:600}
.eyebrow .dot{width:8px;height:8px;border-radius:2px;background:var(--clay)}
h1,h2,h3{margin:0;font-weight:400}
.display{font-family:var(--serif);font-size:clamp(46px,7vw,92px);line-height:1.02;letter-spacing:-.02em}
.h2{font-family:var(--serif);font-size:clamp(34px,4.4vw,56px);line-height:1.08;letter-spacing:-.015em}
.h3{font-family:var(--sans);font-weight:600;font-size:21px;letter-spacing:-.01em;line-height:1.3}
html[lang="ar"] .display,html[lang="ar"] .h2{font-weight:600;letter-spacing:0;line-height:1.3}
html[lang="ar"] .display{font-size:clamp(38px,5.6vw,72px)}
.lead{font-size:clamp(18px,1.6vw,21px);color:var(--ink-2);max-width:640px}
.muted{color:var(--muted)}
em.clay,.clay{color:var(--clay);font-style:normal}

/* ---------- sections ---------- */
section{padding:96px 0}
.sec-head{display:flex;flex-direction:column;gap:16px;max-width:760px;margin-bottom:48px}
.dark{background:var(--night);color:var(--cream)}
.dark .lead,.dark .muted{color:#BFA48F}
.dark .eyebrow{color:var(--clay-l)}
.sand{background:var(--sand)}
.paper{background:var(--paper)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* hero */
.hero{padding:88px 0 72px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.25fr .9fr;gap:56px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:26px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 22px;font-family:var(--mono);font-size:13px;color:var(--muted)}
html[lang="ar"] .hero-meta{font-family:var(--sans)}
.hero-meta span::before{content:"› ";color:var(--clay)}
html[dir="rtl"] .hero-meta span::before{content:"‹ "}
.page-hero{padding:80px 0 56px}
.page-hero .display{font-size:clamp(40px,5.6vw,72px);max-width:960px}
html[lang="ar"] .page-hero .display{font-size:clamp(34px,4.6vw,58px)}

/* hero console card */
.console{background:var(--night);color:var(--cream);border-radius:22px;padding:0;box-shadow:0 30px 60px -30px rgba(43,29,20,.55);overflow:hidden;direction:ltr;text-align:left}
.console-top{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid #3A2A20}
.console-top i{width:10px;height:10px;border-radius:50%;background:#4A382C;display:block}
.console-top b{font:400 12px var(--mono);color:#8C7A6B;margin-left:8px}
.console-body{padding:22px 22px 26px;font:14px/1.9 var(--mono)}
.console .ok{color:#9BC48A}.console .c{color:var(--clay-l)}.console .g{color:#8C7A6B}
.model-line{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid #3A2A20;border-radius:10px;margin-top:8px}
.model-line .tag{font-size:11px;color:#9BC48A;border:1px solid #3F5537;border-radius:999px;padding:1px 8px;white-space:nowrap}
.cursor{display:inline-block;width:9px;height:17px;background:var(--clay-l);vertical-align:-3px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.blink{animation:blink 1.1s steps(1) infinite}
@media (prefers-reduced-motion:reduce){.cursor,.blink{animation:none}}

/* strip */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0}
.strip-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 28px;font-family:var(--mono);font-size:13px;color:var(--muted);letter-spacing:.02em}
html[lang="ar"] .strip-in{font-family:var(--sans);font-size:15px}
.strip-in b{color:var(--ink);font-weight:500}

/* cards */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:12px}
.card p{margin:0;color:var(--ink-2)}
.card .num{font-family:var(--mono);font-size:13px;color:var(--clay-d)}
.dark .card{background:var(--night-2);border-color:#3A2A20}
.dark .card p{color:#CDBBA8}
.card ul{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.card li{padding-inline-start:18px;position:relative;color:var(--ink-2)}
.card li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--clay)}
.dark .card li{color:#CDBBA8}

/* model cards */
.model{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:30px;display:flex;flex-direction:column;gap:18px;transition:transform .2s,box-shadow .2s,border-color .2s}
.model:hover{transform:translateY(-3px);box-shadow:0 22px 40px -28px rgba(43,29,20,.5);border-color:var(--sand-2)}
.model-name{font:600 30px/1 var(--mono);letter-spacing:-.03em;direction:ltr;text-align:start}
.model-name span{color:var(--clay)}
.badge{display:inline-flex;align-items:center;gap:7px;font:500 12px var(--mono);color:#3F6B33;background:#E4EDD9;border-radius:999px;padding:5px 11px;width:max-content}
html[lang="ar"] .badge{font-family:var(--sans)}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#5C9A4B}
.model p{margin:0;color:var(--ink-2)}
.spec{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line);margin-top:auto}
.spec div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.spec dt,.spec span:first-child{color:var(--muted);white-space:nowrap}
.spec span:last-child{font-weight:600;text-align:end}
.bars{display:flex;align-items:flex-end;gap:5px;height:34px}
.bars i{width:9px;border-radius:3px;background:var(--sand-2)}
.bars i.on{background:var(--clay)}
.model.feat{background:var(--night);color:var(--cream);border-color:var(--night)}
.model.feat p{color:#CDBBA8}
.model.feat .spec,.model.feat .spec div{border-color:#3A2A20}
.model.feat .bars i{background:#3A2A20}.model.feat .bars i.on{background:var(--clay-l)}
.model.feat .badge{background:#2F3A26;color:#B9DBA8}

/* layers (logo meaning) */
.layers{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.layer-art{background:var(--paper);border:1px solid var(--line);border-radius:26px;padding:48px;display:flex;justify-content:center}
.layer-list{display:flex;flex-direction:column}
.layer{display:grid;grid-template-columns:64px 1fr;gap:18px;padding:24px 0;border-top:1px solid var(--line)}
.layer:last-child{border-bottom:1px solid var(--line)}
.layer .k{font:500 13px var(--mono);color:var(--clay-d);padding-top:4px}
.layer p{margin:6px 0 0;color:var(--ink-2)}
.dark .layer,.dark .layer:last-child{border-color:#3A2A20}
.dark .layer p{color:#CDBBA8}

/* quote */
.quote{font-family:var(--serif);font-size:clamp(28px,3.4vw,44px);line-height:1.2;max-width:980px;margin:0}
html[lang="ar"] .quote{font-weight:500;line-height:1.5}
.quote .clay{color:var(--clay)}

/* stats / pills */
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{border:1px solid var(--sand-2);border-radius:999px;padding:8px 14px;font-size:14px;color:var(--ink-2);background:var(--paper)}
.dark .pill{border-color:#3A2A20;background:var(--night-2);color:#CDBBA8}

/* timeline */
.timeline{display:flex;flex-direction:column}
.phase{display:grid;grid-template-columns:220px 1fr auto;gap:28px;padding:30px 0;border-top:1px solid var(--line);align-items:start}
.phase:last-child{border-bottom:1px solid var(--line)}
.phase .when{font:500 14px var(--mono);color:var(--muted)}
html[lang="ar"] .phase .when{font-family:var(--sans)}
.phase ul{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.phase li{font-size:14px;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:5px 12px;color:var(--ink-2)}
.status{font:500 12px var(--mono);border-radius:999px;padding:5px 11px;white-space:nowrap}
html[lang="ar"] .status{font-family:var(--sans)}
.status.done{background:var(--sand);color:var(--ink-2)}
.status.now{background:var(--clay-d);color:#fff}
.status.next{border:1px dashed var(--sand-2);color:var(--muted)}
.phase.current{background:linear-gradient(90deg,rgba(200,100,59,.07),transparent 70%);padding-inline:18px;margin-inline:-18px;border-radius:14px;border-top-color:transparent}

/* steps */
.steps{counter-reset:s}
.step{position:relative}
.step .num{font:500 13px var(--mono);color:var(--clay-d)}

/* table-like list */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:1fr 1.4fr auto;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.row a{font-family:var(--mono);font-size:15px;text-decoration:none;color:var(--clay-d);direction:ltr}
.row a:hover{text-decoration:underline}

/* form */
.form{background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:32px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:14px;font-weight:600}
.field input,.field select,.field textarea{font:16px var(--sans);color:var(--ink);background:#fff;border:1px solid var(--sand-2);border-radius:12px;padding:13px 14px;min-height:48px}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--clay);outline-offset:1px;border-color:transparent}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--sand-2);border-radius:999px;font:500 14px var(--mono);cursor:pointer;background:#fff;direction:ltr}
.chip input:checked+span{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.chip input:focus-visible+span{outline:2px solid var(--clay);outline-offset:2px}
.form-note{font-size:13px;color:var(--muted);grid-column:1/-1;margin:0}

/* cta band */
.cta-band{background:var(--night);color:var(--cream);border-radius:28px;padding:64px;display:grid;grid-template-columns:1.4fr auto;gap:40px;align-items:center;position:relative;overflow:hidden}
.cta-band .h2{color:var(--cream)}
.cta-band p{color:#BFA48F;margin:14px 0 0;max-width:560px}
.cta-models{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;direction:ltr}
html[dir="rtl"] .cta-models{justify-content:flex-end}
.cta-models span{font:500 13px var(--mono);border:1px solid #3A2A20;border-radius:999px;padding:6px 12px;color:var(--cream)}
.cta-models span::before{content:"● ";color:#7FBF6A}

/* footer */
.site-foot{background:var(--night);color:#BFA48F;padding:72px 0 36px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.foot-brand{display:flex;flex-direction:column;gap:16px}
.foot-brand .brand b{color:var(--cream)}
.foot-brand .brand b span{color:var(--clay-l)}
.foot-slogan{font-family:var(--serif);font-size:30px;color:var(--cream);line-height:1.1}
html[lang="ar"] .foot-slogan{font-weight:600;font-size:24px}
.site-foot h4{margin:0 0 14px;font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#8C7A6B}
html[lang="ar"] .site-foot h4{font-family:var(--sans);letter-spacing:0}
.site-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.site-foot a{text-decoration:none;color:#CDBBA8;font-size:15px}
.site-foot a:hover{color:#fff}
.site-foot .mail{font-family:var(--mono);font-size:14px;direction:ltr;unicode-bidi:embed}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-top:1px solid #3A2A20;margin-top:56px;padding-top:24px;font:13px var(--mono);color:#8C7A6B}
html[lang="ar"] .foot-bottom{font-family:var(--sans)}

/* reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .nav,.head-right .lang,.head-right .btn{display:none}
  .menu-btn{display:inline-grid;place-items:center}
  .site-head.open .nav{display:flex;position:absolute;top:68px;left:0;right:0;flex-direction:column;background:var(--ivory);padding:12px 20px 20px;border-bottom:1px solid var(--line);gap:2px}
  .site-head.open .nav a{padding:14px 12px;font-size:17px}
  .site-head.open .nav .m-extra{display:flex}
  .hero-grid,.layers{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .cta-band{grid-template-columns:1fr;padding:44px 32px}
  .phase{grid-template-columns:1fr;gap:10px}
}
.nav .m-extra{display:none;gap:10px;align-items:center;padding:14px 12px 0;flex-wrap:wrap}
@media (max-width:640px){
  body{font-size:16px}
  section{padding:68px 0}
  .wrap{padding:0 16px}
  .g2,.g4{grid-template-columns:1fr}
  .form{grid-template-columns:1fr;padding:22px}
  .row{grid-template-columns:1fr;gap:4px}
  .foot-grid{grid-template-columns:1fr}
  .layer-art{padding:32px}
  .hero{padding:56px 0 48px}
  .console-body{font-size:12.5px}
}
.contact-grid{grid-template-columns:1.2fr .8fr}
@media (max-width:1020px){.contact-grid{grid-template-columns:1fr}}